From 018e650fc90539732ac938fefb471ba8b559ba6c Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 12:40:01 +0200
Subject: [PATCH] =?UTF-8?q?feat(home):=20wix-style=20hero=20=E2=80=94=20pi?=
 =?UTF-8?q?nned=20landscape,=20larger=20kicker/title,=20scaled=20stag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the in-flow background image with a viewport-fixed element so
the Pyrenees landscape stays put while everything else scrolls. Stand
the hero up to min-h-screen and centre the kicker / title / stag stack
vertically. Bump the kicker size from text-xs to text-xl→text-4xl with
tighter tracking and a drop-shadow so it stays legible against the
bright sky portion of the photo. Pull the title down one size step at
each breakpoint to leave room for the bigger stag, which roughly
doubles in size to dominate the composition the way it does in the
Wix source. Drop the bottom gradient stop (was fading to opaque green
and blocking the photo) — fades cleanly to transparent now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/views/HomeView.vue | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3a23974..baaba3e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -35,32 +35,40 @@ const featuredEvents = [
 
 <template>
   <div>
-    <!-- Hero: landscape backdrop + stag overlay + script title -->
-    <section class="relative isolate overflow-hidden">
-      <img
-        :src="heroLandscape"
-        alt=""
-        class="absolute inset-0 -z-20 h-full w-full object-cover"
-      />
+    <!-- Pinned landscape backdrop: viewport-fixed so it stays put while
+         content scrolls over it. Visible behind the transparent hero;
+         covered by the opaque welcome/bouge/etc sections as the user
+         scrolls down. -->
+    <img
+      :src="heroLandscape"
+      alt=""
+      aria-hidden="true"
+      class="fixed inset-0 -z-50 h-screen w-screen object-cover"
+    />
+
+    <!-- Hero: full-viewport, transparent over the pinned backdrop -->
+    <section class="relative isolate flex min-h-screen flex-col items-center justify-center overflow-hidden">
       <div
-        class="absolute inset-0 -z-10 bg-gradient-to-b from-background/20 via-background/40 to-background"
+        class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-background/55 to-transparent"
       ></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"
+        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 text-center lg:px-6"
       >
-        <p class="font-display text-xs uppercase tracking-[0.4em] text-accent">
+        <p
+          class="font-display text-xl uppercase tracking-[0.25em] text-accent drop-shadow-[0_1px_4px_rgba(0,0,0,0.85)] md:text-3xl lg:text-4xl"
+        >
           {{ t('common.tagline') }}
         </p>
         <h1
-          class="mt-4 font-script text-7xl leading-none text-foreground drop-shadow-md md:text-8xl lg:text-9xl"
+          class="mt-4 font-script font-bold text-6xl leading-none text-foreground drop-shadow-md md:text-7xl lg:text-8xl"
         >
           Château du Faune
         </h1>
         <img
           :src="cosmicStag"
           alt=""
-          class="-mt-4 h-72 w-72 object-contain md:h-96 md:w-96 lg:h-[28rem] lg:w-[28rem]"
+          class="mt-4 h-80 w-80 object-contain md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
         />
       </div>
     </section>