feat(home): wix-style hero, welcome, bouge callout

Restructure the home view to mirror the source site's order and
treatment:

- Hero is now a full-bleed Pyrenees landscape photo with a fade-to-
  background gradient overlay. Site name renders in Italianno script
  at 7xl-9xl, centred. Aboreto small-caps tagline sits above; cosmic
  stag overlays beneath.
- Welcome is a centred green band with an outlined gold pill linking
  into the concept page.
- Add the missing bouge.ariege.io callout: dark panel, gold Italianno
  title, uppercase Aboreto subtitle and body, primary pill CTA.
- Plan-your-visit becomes a bullet list (Aboreto strong + Roboto body)
  paired with a property photo, replacing the previous 4-card grid.
- Featured events keep the 3-card shape but switch headings to Aboreto
  caps and gain a gold pill "see all" CTA at the bottom.
- Drop the standalone contact band — SiteFooter already carries the
  address and contact.

Hero photo mirrored from the Wix CDN into src/assets/hero-landscape.webp
(379 KB, 1920px wide WebP, q78).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/i18n/locales/en.json

@@ -137,16 +137,19 @@
     }
   },
   "home": {
-    "hero": {
-      "kicker": "Ariège · Pyrenean foothills",
-      "lede": "An artist residency, a working farm and an events venue — practising slow living with humble reverence for the natural world.",
-      "ctaVisit": "Plan your visit",
-      "ctaConcept": "Discover the concept"
-    },
     "welcome": {
-      "title": "Farmstand ✦ Land art ✦ Residency ✦ Events",
+      "title": "Welcome to the Château du Faune",
-      "body": "Eleven hectares at Château de Bénac, where regenerative practices, ecological design and artistic work share the same ground. We are growing the place slowly — opening to the public in fall 2026."
+      "body": "A place to create, to grow and to rejuvenate, at the foot of the Pyrenees. An artist residency and slow-living sanctuary for crafters, agroecologists and nature-enthusiasts looking for a home on the road.",
+      "cta": "Learn more about the Center for Art & Ecology"
     },
+    "bouge": {
+      "kicker": "Currently in development at the château",
+      "title": "bouge.ariege.io",
+      "subtitle": "Launching summer 2026 · Try the demo",
+      "body": "A native, community-wide, decentralised calendar-of-events app",
+      "cta": "See more"
+    },
+    "pathwaysIntro": "Here are some possible paths…",
     "pathways": {
       "title": "Find your way in",
       "subtitle": "Four ways to meet the land.",

src/i18n/locales/fr.json

@@ -137,16 +137,19 @@
     }
   },
   "home": {
-    "hero": {
-      "kicker": "Ariège · piémont pyrénéen",
-      "lede": "Une résidence d'artistes, une fermette en activité et un lieu d'événements — pratiquer le slow living avec révérence pour le monde naturel.",
-      "ctaVisit": "Préparer votre visite",
-      "ctaConcept": "Découvrir le concept"
-    },
     "welcome": {
-      "title": "Fermette ✦ Art de la terre ✦ Résidence ✦ Événements",
+      "title": "Bienvenue au Château du Faune",
-      "body": "Onze hectares au Château de Bénac, où pratiques régénératives, design écologique et création artistique partagent le même sol. Nous faisons croître ce lieu doucement — ouverture au public à l'automne 2026."
+      "body": "Un lieu pour créer, croître et se ressourcer, au pied des Pyrénées. Une résidence d'artistes et un sanctuaire de slow living pour artisan·es, agroécologues et amoureux·euses de la nature en quête d'un foyer sur le chemin.",
+      "cta": "En savoir plus sur le Centre pour l'art et l'écologie"
     },
+    "bouge": {
+      "kicker": "En cours de développement au château",
+      "title": "bouge.ariege.io",
+      "subtitle": "Lancement été 2026 · Essayer la démo",
+      "body": "Une application de calendrier d'événements native, communautaire et décentralisée",
+      "cta": "En savoir plus"
+    },
+    "pathwaysIntro": "Voici quelques chemins possibles…",
     "pathways": {
       "title": "Trouvez votre chemin",
       "subtitle": "Quatre façons de rencontrer le lieu.",

src/views/HomeView.vue

@@ -2,30 +2,15 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import cosmicStag from '@/assets/cosmic-stag.webp'
+import heroLandscape from '@/assets/hero-landscape.webp'
 
 const { t } = useI18n()
 
 const pathways = [
-  {
+  { key: 'dayVisit' as const, to: '/reservations' },
-    key: 'dayVisit' as const,
+  { key: 'activity' as const, to: '/events' },
-    to: '/reservations',
+  { key: 'retreat' as const, to: '/accommodation' },
-    icon: '☕',
+  { key: 'residency' as const, to: '/long-stays' },
-  },
-  {
-    key: 'activity' as const,
-    to: '/events',
-    icon: '✦',
-  },
-  {
-    key: 'retreat' as const,
-    to: '/accommodation',
-    icon: '⛺',
-  },
-  {
-    key: 'residency' as const,
-    to: '/long-stays',
-    icon: '✎',
-  },
 ]
 
 const featuredEvents = [
@@ -49,131 +34,134 @@ const featuredEvents = [
 
 <template>
   <div>
-    <!-- Hero -->
+    <!-- Hero: landscape backdrop + stag overlay + script title -->
-    <section class="relative overflow-hidden bg-gradient-to-b from-secondary/60 to-background">
+    <section class="relative isolate overflow-hidden">
+      <img
+        :src="heroLandscape"
+        alt=""
+        class="absolute inset-0 -z-20 h-full w-full object-cover"
+      />
       <div
-        class="mx-auto grid max-w-7xl items-center gap-10 px-4 py-16 lg:grid-cols-2 lg:gap-16 lg:px-6 lg:py-24"
+        class="absolute inset-0 -z-10 bg-gradient-to-b from-background/20 via-background/40 to-background"
+      ></div>
+
+      <div
+        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-16 pb-8 text-center lg:px-6 lg:pt-24 lg:pb-12"
       >
-        <div>
+        <p class="font-display text-xs uppercase tracking-[0.4em] text-accent">
-          <p class="text-xs uppercase tracking-[0.2em] text-accent">
+          {{ t('common.tagline') }}
-            {{ t('home.hero.kicker') }}
         </p>
         <h1
-            class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl"
+          class="mt-4 font-script text-7xl leading-none text-foreground drop-shadow-md md:text-8xl lg:text-9xl"
         >
           Château du Faune
         </h1>
-          <p class="mt-2 font-serif text-xl italic text-muted-foreground">
-            {{ t('common.tagline') }}
-          </p>
-          <p class="mt-6 max-w-prose text-lg leading-relaxed">
-            {{ t('home.hero.lede') }}
-          </p>
-          <div class="mt-8 flex flex-wrap items-center gap-3">
-            <RouterLink
-              to="/reservations"
-              class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
-            >
-              {{ t('home.hero.ctaVisit') }}
-            </RouterLink>
-            <RouterLink
-              to="/concept"
-              class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
-            >
-              {{ t('home.hero.ctaConcept') }}
-            </RouterLink>
-          </div>
-          <p class="mt-6 text-xs uppercase tracking-wider text-muted-foreground">
-            {{ t('common.openingFall2026') }}
-          </p>
-        </div>
-        <div class="relative flex items-center justify-center">
         <img
           :src="cosmicStag"
           alt=""
-            class="h-72 w-72 object-contain md:h-96 md:w-96"
+          class="-mt-4 h-72 w-72 object-contain md:h-96 md:w-96 lg:h-[28rem] lg:w-[28rem]"
         />
       </div>
-      </div>
     </section>
 
-    <!-- Welcome -->
+    <!-- Welcome: centered green band -->
-    <section class="border-y border-border bg-card">
+    <section class="border-y border-border bg-secondary">
-      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 lg:grid-cols-5 lg:gap-14 lg:px-6">
+      <div class="mx-auto max-w-3xl px-4 py-20 text-center lg:px-6 lg:py-24">
+        <h2 class="font-display text-3xl uppercase tracking-wider md:text-4xl">
+          {{ t('home.welcome.title') }}
+        </h2>
+        <p class="mt-6 text-base leading-relaxed text-foreground/90 md:text-lg">
+          {{ t('home.welcome.body') }}
+        </p>
+        <RouterLink
+          to="/concept"
+          class="mt-8 inline-block rounded-full border border-accent/50 px-6 py-3 text-xs uppercase tracking-[0.2em] text-accent hover:bg-accent/10"
+        >
+          {{ t('home.welcome.cta') }}
+        </RouterLink>
+      </div>
+    </section>
+
+    <!-- Bouge.ariege.io callout -->
+    <section class="relative overflow-hidden bg-zinc-950">
+      <div
+        class="mx-auto max-w-4xl px-4 py-20 text-center lg:px-6 lg:py-28"
+      >
+        <p class="font-display text-xs uppercase tracking-[0.3em] text-accent">
+          {{ t('home.bouge.kicker') }}
+        </p>
+        <h2
+          class="mt-4 font-script text-6xl leading-none text-accent md:text-7xl lg:text-8xl"
+        >
+          {{ t('home.bouge.title') }}
+        </h2>
+        <p class="mt-6 text-xs uppercase tracking-[0.2em] text-foreground/80">
+          {{ t('home.bouge.subtitle') }}
+        </p>
+        <h3
+          class="mt-6 font-display text-2xl uppercase tracking-wider text-foreground md:text-3xl"
+        >
+          {{ t('home.bouge.body') }}
+        </h3>
+        <a
+          href="https://bouge.ariege.io"
+          target="_blank"
+          rel="noopener"
+          class="mt-10 inline-block rounded-full bg-primary px-6 py-3 text-xs uppercase tracking-[0.2em] text-primary-foreground hover:opacity-90"
+        >
+          {{ t('home.bouge.cta') }}
+        </a>
+      </div>
+    </section>
+
+    <!-- Plan Your Visit: bullets + photo -->
+    <section class="border-t border-border bg-background">
+      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-20 lg:grid-cols-5 lg:gap-14 lg:px-6 lg:py-24">
+        <div class="lg:col-span-3">
+          <p class="font-display text-xs uppercase tracking-[0.3em] text-accent">
+            {{ t('home.pathways.title') }}
+          </p>
+          <h2 class="mt-3 font-display text-2xl uppercase tracking-wider md:text-3xl">
+            {{ t('home.pathwaysIntro') }}
+          </h2>
+          <ul class="mt-8 space-y-6">
+            <li v-for="p in pathways" :key="p.key" class="flex gap-4">
+              <span class="mt-2 h-2 w-2 shrink-0 rounded-full bg-accent"></span>
+              <p class="text-base leading-relaxed text-foreground/90">
+                <strong class="font-display uppercase tracking-wider text-foreground">
+                  {{ t(`home.pathways.${p.key}.title`) }}
+                </strong>
+                — {{ t(`home.pathways.${p.key}.body`) }}
+                <RouterLink :to="p.to" class="ml-1 text-accent underline">
+                  {{ t('common.learnMore') }}
+                </RouterLink>
+              </p>
+            </li>
+          </ul>
+        </div>
         <div class="lg:col-span-2">
           <img
             src="https://static.wixstatic.com/media/11062b_a56b905cae7c424c84cbaa1677d59ec5~mv2.jpg"
             alt=""
-            class="aspect-[4/3] w-full rounded-lg object-cover"
+            class="aspect-[4/5] w-full rounded-lg object-cover"
             loading="lazy"
           />
         </div>
-        <div class="lg:col-span-3">
-          <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
-            {{ t('home.welcome.title') }}
-          </h2>
-          <p class="mt-5 max-w-prose text-base leading-relaxed text-foreground/90">
-            {{ t('home.welcome.body') }}
-          </p>
-          <RouterLink
-            to="/vision-values"
-            class="mt-6 inline-block text-sm font-medium text-accent hover:underline"
-          >
-            {{ t('common.learnMore') }} →
-          </RouterLink>
-        </div>
       </div>
     </section>
 
-    <!-- Pathways -->
+    <!-- Upcoming residencies & community days -->
-    <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+    <section class="border-t border-border bg-secondary">
-      <div class="mx-auto max-w-2xl text-center">
+      <div class="mx-auto max-w-7xl px-4 py-20 lg:px-6 lg:py-24">
-        <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
+        <div class="text-center">
-          {{ t('home.pathways.title') }}
+          <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
-        </h2>
-        <p class="mt-3 text-muted-foreground">{{ t('home.pathways.subtitle') }}</p>
-      </div>
-      <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <RouterLink
-          v-for="p in pathways"
-          :key="p.key"
-          :to="p.to"
-          class="group rounded-lg border border-border bg-card p-6 transition hover:border-accent hover:shadow-sm"
-        >
-          <div class="text-3xl text-accent">{{ p.icon }}</div>
-          <h3 class="mt-3 font-serif text-xl font-semibold">
-            {{ t(`home.pathways.${p.key}.title`) }}
-          </h3>
-          <p class="mt-2 text-sm text-muted-foreground">
-            {{ t(`home.pathways.${p.key}.body`) }}
-          </p>
-          <span class="mt-4 inline-block text-xs text-accent group-hover:underline">
-            {{ t('common.learnMore') }} →
-          </span>
-        </RouterLink>
-      </div>
-    </section>
-
-    <!-- Featured events -->
-    <section class="bg-secondary/30">
-      <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
-        <div class="flex flex-wrap items-end justify-between gap-4">
-          <div>
-            <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
             {{ t('home.events.title') }}
           </h2>
-            <p class="mt-2 max-w-prose text-muted-foreground">
+          <p class="mx-auto mt-3 max-w-2xl text-sm text-foreground/80">
             {{ t('home.events.subtitle') }}
           </p>
         </div>
-          <RouterLink
+        <div class="mt-10 grid gap-6 md:grid-cols-3">
-            to="/events"
-            class="text-sm font-medium text-accent hover:underline"
-          >
-            {{ t('home.events.seeAll') }} →
-          </RouterLink>
-        </div>
-        <div class="mt-8 grid gap-6 md:grid-cols-3">
           <RouterLink
             v-for="e in featuredEvents"
             :key="e.key"
@@ -190,32 +178,24 @@ const featuredEvents = [
               <p class="text-xs uppercase tracking-wider text-accent">
                 {{ t(`events.${e.key}.date`) }}
               </p>
-              <h3 class="mt-1 font-serif text-xl font-semibold">
+              <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
                 {{ t(`events.${e.key}.title`) }}
               </h3>
-              <p class="mt-1 text-sm text-muted-foreground">
+              <p class="mt-1 text-xs text-foreground/70">
                 {{ t(`events.${e.key}.location`) }}
               </p>
             </div>
           </RouterLink>
         </div>
-      </div>
+        <div class="mt-10 text-center">
-    </section>
+          <RouterLink
-
+            to="/events"
-    <!-- Contact band -->
+            class="inline-block rounded-full bg-primary px-6 py-3 text-xs uppercase tracking-[0.2em] text-primary-foreground hover:opacity-90"
-    <section class="mx-auto max-w-4xl px-4 py-16 text-center lg:px-6">
-      <h2 class="font-serif text-3xl font-semibold tracking-tight md:text-4xl">
-        {{ t('home.contact.title') }}
-      </h2>
-      <p class="mx-auto mt-4 max-w-prose text-muted-foreground">
-        {{ t('home.contact.body') }}
-      </p>
-      <a
-        href="mailto:chateaudufaune@ariege.io"
-        class="mt-8 inline-block rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
           >
-        {{ t('home.contact.cta') }}
+            {{ t('home.events.seeAll') }}
-      </a>
+          </RouterLink>
+        </div>
+      </div>
     </section>
   </div>
 </template>