feat(home): tiled translucent cards for post-hero sections

Mirror the Wix layout for everything beneath the hero: each section
becomes a rounded-corner card inset from the viewport edges, so the
pinned Pyrenees landscape glows through the gutters between cards.
Inside each card, a Celtic-knot tile (src/assets/section-tile.webp,
repeating at 50px) sits at 80% opacity behind a translucent dark-
green overlay (bg-background/75) — enough darkness for cream text to
read cleanly, enough transparency for the tile pattern to show.

The Bouge.ariege.io callout uses a heavier near-black overlay
(bg-zinc-950/80) so its gold script title pops.

Tile texture mirrored from the Wix source for parity; can be swapped
later if we commission original artwork.

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

src/views/HomeView.vue

@@ -4,6 +4,14 @@ import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import cosmicStag from '@/assets/cosmic-stag.avif'
 import heroLandscape from '@/assets/hero-landscape.webp'
+import sectionTile from '@/assets/section-tile.webp'
+
+const tileStyle = {
+  backgroundImage: `url(${sectionTile})`,
+  backgroundRepeat: 'repeat',
+  backgroundSize: 'auto',
+  backgroundPosition: 'center center',
+}
 
 const { t } = useI18n()
 
@@ -73,9 +81,14 @@ const featuredEvents = [
       </div>
     </section>
 
-    <!-- Welcome: centered green band -->
+    <!-- Welcome: tiled-bg card with rounded corners; tile is partly
-    <section class="border-y border-border bg-secondary">
+         translucent so the pinned photo glows through, plus a dark green
-      <div class="mx-auto max-w-3xl px-4 py-20 text-center lg:px-6 lg:py-24">
+         overlay for legibility. -->
+    <section class="px-3 py-3 sm:px-4 lg:px-6">
+      <div class="relative mx-auto overflow-hidden rounded-2xl">
+        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
+        <div class="absolute inset-0 bg-background/75"></div>
+        <div class="relative mx-auto max-w-3xl px-4 py-20 text-center lg:py-24">
           <h2 class="font-display text-3xl uppercase tracking-wider md:text-4xl">
             {{ t('home.welcome.title') }}
           </h2>
@@ -86,18 +99,20 @@ const featuredEvents = [
             <RouterLink to="/concept">{{ t('home.welcome.cta') }}</RouterLink>
           </Button>
         </div>
+      </div>
     </section>
 
-    <!-- Bouge.ariege.io callout -->
+    <!-- Bouge.ariege.io callout: tile under a heavier near-black tint -->
-    <section class="relative overflow-hidden bg-zinc-950">
+    <section class="px-3 py-3 sm:px-4 lg:px-6">
-      <div
+      <div class="relative mx-auto overflow-hidden rounded-2xl">
-        class="mx-auto max-w-4xl px-4 py-20 text-center lg:px-6 lg:py-28"
+        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
-      >
+        <div class="absolute inset-0 bg-zinc-950/80"></div>
+        <div class="relative mx-auto max-w-4xl px-4 py-20 text-center 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"
+          class="mt-4 font-script font-bold text-6xl leading-none text-accent md:text-7xl lg:text-8xl"
         >
           {{ t('home.bouge.title') }}
         </h2>
@@ -115,11 +130,15 @@ const featuredEvents = [
             </a>
           </Button>
         </div>
+      </div>
     </section>
 
-    <!-- Plan Your Visit: bullets + photo -->
+    <!-- Plan Your Visit: tiled-bg card -->
-    <section class="border-t border-border bg-background">
+    <section class="px-3 py-3 sm:px-4 lg:px-6">
-      <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="relative mx-auto overflow-hidden rounded-2xl">
+        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
+        <div class="absolute inset-0 bg-background/75"></div>
+        <div class="relative mx-auto grid max-w-7xl gap-10 px-4 py-20 lg:grid-cols-5 lg:gap-14 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') }}
@@ -151,11 +170,15 @@ const featuredEvents = [
           />
         </div>
         </div>
+      </div>
     </section>
 
-    <!-- Upcoming residencies & community days -->
+    <!-- Upcoming residencies & community days: tiled-bg card -->
-    <section class="border-t border-border bg-secondary">
+    <section class="px-3 py-3 sm:px-4 lg:px-6">
-      <div class="mx-auto max-w-7xl px-4 py-20 lg:px-6 lg:py-24">
+      <div class="relative mx-auto overflow-hidden rounded-2xl">
+        <div class="absolute inset-0 opacity-80" :style="tileStyle"></div>
+        <div class="absolute inset-0 bg-background/75"></div>
+        <div class="relative mx-auto max-w-7xl px-4 py-20 lg:py-24">
         <div class="text-center">
           <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
             {{ t('home.events.title') }}
@@ -196,6 +219,7 @@ const featuredEvents = [
           </Button>
         </div>
         </div>
+      </div>
     </section>
   </div>
 </template>