feat(vision): 7 pillars as hover-reveal photo tiles (Wix parity)

Recreate the Wix '7 pillars of our collective' interaction: each pillar
is a full-width photo banner showing the title, and on hover (or tap/
focus for touch) the photo swaps to its description. Uses the same Wix
photos and restores the verbatim hover descriptions — which the Wix
page reveals on hover, so they were missed in the first crawl:
- Eco-Building, Slow Farming, Wellness, Animals, Rewilding, The Arts,
  Development bodies now match Wix verbatim (incl. the real Animals text,
  superseding the placeholder authored earlier)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Avi6sNfBVonnK33knbkFDD

src/i18n/locales/en.json

@@ -122,19 +122,19 @@
     "pillarsSubtitle": "",
     "pillars": {
       "buildingTitle": "Eco-Building",
-      "buildingBody": "To us, eco building means creating and maintaining spaces that are functional, safe, and long-lasting while minimizing impact on the land. We prioritize recycled and local materials, practical design, and structures that support the daily life and work of the project.",
+      "buildingBody": "To us, eco building means creating and maintaining spaces that are functional, safe, and long-lasting while minimizing impact on the land. We prioritize utilizing resources from our own land and forest, recycled and local materials, practical design, and structures that support the daily life and work of the project.",
       "farmingTitle": "Slow Farming",
-      "farmingBody": "Slow farming is how we grow food, herbs, and eggs in a way that sustains soil, ecosystems, and people over time. It's about planning, pacing, and working with natural cycles so productivity emerges as a by-product of healthy, regenerative systems.",
+      "farmingBody": "Slow farming is how we grow food in a way that sustains soil, ecosystems, and people over time. It's about planning, pacing, and working with natural cycles so productivity emerges as a by-product of healthy, regenerative systems. In principal it is a method of working with our land that is holistic, non-extractive & reciprocal where we return to regulated states through tending the soil and productivity emerges as a by-product, not a goal.",
       "wellnessTitle": "Wellness",
-      "wellnessBody": "This pillar ensures that everyone on site is supported with nutritious food, rest, and routines that help maintain energy, focus, and wellbeing. It's integrated into daily life, so caring for the body and nervous system happens alongside work and creativity.",
+      "wellnessBody": "This pillar ensures that everyone on site is supported with nutritious food, rest, and routines that help maintain energy, focus, and wellbeing. It's integrated into daily life, so caring for the body and nervous system happens alongside work and creativity. The land, and our connection to it and to each other, offers us medicine and nourishment in so many forms. Wellness in community is about coming together to celebrate life & abundance which we do through embodiment practices, hosting events and running gatherings like potlucks, jams, and saunas as well as offering our attention and care to our collective environment to create an inviting, warm atmosphere.",
       "rewildingTitle": "Rewilding",
-      "rewildingBody": "Rewilding for us is about reconnecting people with nature through practical skills and immersive experiences. It's about self-reliance, respect for the land, and how to navigate and move through natural environments safely and skillfully.",
+      "rewildingBody": "Rewilding for us is about reconnecting people with nature through practical skills and immersive experiences. It's about self-reliance, respect for the land, and how to navigate and move through natural environments safely and skillfully. We host rewilding excursions and residencies in the breathtaking Pyrenees by horse or by foot, to foster feeling deeply part of our physical surroundings, to awaken our innate primal beings, to revive a sense of vitality and aliveness... all in reverence to the animate forces that nourish us.",
       "animalsTitle": "Animals",
-      "animalsBody": "Animals are woven into daily life on the farm — alpacas, sheep, ducks, chickens and dogs whose care cycles nutrients, offers therapeutic connection, and keeps us in reciprocity with other beings.",
+      "animalsBody": "Our horses, alpacas, sheep, chickens, dogs and ducks are all a reciprocal part of our whole systems design. The animals provide us with fiber, food in some cases, land maintenance, manure, protection, manual strength and so much love. In turn, we care for them and find the connection to our animals to be highly nourishing to our souls.",
       "artsTitle": "The Arts",
-      "artsBody": "Art is woven into everything we do. This pillar covers residencies, exhibitions, workshops, and materials that reflect the land, community, and creativity of the project. Artistic work enhances the aesthetic quality of the space and inspires everyone involved.",
+      "artsBody": "Art is woven into everything we do. Here, art is intertwined with ecology; artistic work enhances the aesthetic quality of the land and seeks to inspire and harmonize. Traditional crafting with natural materials and available resources slows us down to the present moment and fosters deepening connections to ourselves, each other and all animate forces. This pillar covers residencies, exhibitions, workshops, and materials that reflect the vision of the project.",
       "developmentTitle": "Development",
-      "developmentBody": "Development refers to growth on an individual level as well as that of the physical and virtual spheres. It is a continual process of researching, remaining open-minded and designing the systems, workflows, and protocols to keep the project running smoothly. We develop & use slow tech and open-source tools including an area-wide events application, financial structures and other operational frameworks that allow the team to work efficiently, transparently, and sustainably."
+      "developmentBody": "Development refers to growth on an individual level as well as that of the physical, conceptual and virtual spheres. It is a continual process of researching, remaining open-minded and designing the systems, workflows, and protocols to keep the project running smoothly. We develop & use slow tech and open-source tools including an area-wide events application, financial structures and other operational frameworks that allow the team to work efficiently, transparently, and sustainably."
     },
     "teamTitle": "Meet our team",
     "team": {

src/views/VisionValuesView.vue

@@ -9,14 +9,15 @@ const { t } = useI18n()
 
 const philosophy = ['mindfulness', 'collaboration', 'reciprocity', 'balance', 'reverence'] as const
 
+// Same photos as the Wix "7 pillars" tiles; each reveals its description on hover.
 const pillars = [
-  'building',
-  'farming',
-  'wellness',
-  'animals',
-  'rewilding',
-  'arts',
-  'development',
+  { key: 'building', image: 'https://static.wixstatic.com/media/79763d29d42a46abbde150fa36ad5bd6.jpg' },
+  { key: 'farming', image: 'https://static.wixstatic.com/media/050fa8aff581445598f0daace0913b90.jpg' },
+  { key: 'wellness', image: 'https://static.wixstatic.com/media/11062b_4134799e75f34954a741db4b1039f0d9~mv2.jpg' },
+  { key: 'animals', image: 'https://static.wixstatic.com/media/11062b_e12c730f19a8448b8b33fe261e2bf774~mv2.jpeg' },
+  { key: 'rewilding', image: 'https://static.wixstatic.com/media/633a16e947434f0ba419f80bb5ed32d3.jpg' },
+  { key: 'arts', image: 'https://static.wixstatic.com/media/11062b_f268caa98e174dc9a7f89d07a0bb82a6~mv2.jpg' },
+  { key: 'development', image: 'https://static.wixstatic.com/media/11062b_dd7eac35853745cfbe041ab3acb2e3b7~mv2.jpg' },
 ] as const
 
 const team = ['patrick', 'coco', 'charlie'] as const
@@ -68,22 +69,40 @@ const team = ['patrick', 'coco', 'charlie'] as const
       </div>
     </PageSection>
 
-    <!-- Operational pillars -->
+    <!-- Operational pillars: photo tiles that reveal their description on hover -->
     <PageSection>
       <div class="max-w-3xl">
         <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
           {{ t('vision.pillarsTitle') }}
         </h2>
-        <p class="mt-3 text-foreground/80">{{ t('vision.pillarsSubtitle') }}</p>
       </div>
-      <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        <Card v-for="p in pillars" :key="p" class="p-6">
-          <h3 class="font-display text-lg uppercase tracking-wider">{{ t(`vision.pillars.${p}Title`) }}</h3>
-          <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-            {{ t(`vision.pillars.${p}Body`) }}
+      <ul class="mt-8 space-y-6">
+        <li
+          v-for="(p, i) in pillars"
+          :key="p.key"
+          tabindex="0"
+          class="group rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-accent"
+        >
+          <h3 class="font-display text-lg uppercase tracking-wider text-accent">
+            {{ i + 1 }}. {{ t(`vision.pillars.${p.key}Title`) }}
+          </h3>
+          <div class="relative mt-3 h-44 overflow-hidden rounded-lg">
+            <img
+              :src="p.image"
+              alt=""
+              class="h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0 group-focus:opacity-0"
+              loading="lazy"
+            />
+            <div
+              class="absolute inset-0 flex items-center overflow-y-auto bg-card/95 px-6 py-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-focus:opacity-100"
+            >
+              <p class="text-sm leading-relaxed text-foreground/90">
+                {{ t(`vision.pillars.${p.key}Body`) }}
               </p>
-        </Card>
             </div>
+          </div>
+        </li>
+      </ul>
     </PageSection>
 
     <!-- Team -->