From 4fcbc22d1c55c523c2d57a38182b487b0c251618 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 12:40:22 +0200
Subject: [PATCH] feat(home): tiled translucent cards for post-hero sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/assets/section-tile.webp | Bin 0 -> 1116 bytes
 src/views/HomeView.vue       |  82 ++++++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 29 deletions(-)
 create mode 100644 src/assets/section-tile.webp

diff --git a/src/assets/section-tile.webp b/src/assets/section-tile.webp
new file mode 100644
index 0000000000000000000000000000000000000000..04e249830c4b09c636bc6bc89a67b7894fd582d3
GIT binary patch
literal 1116
zcmWIYbaM+~VPFV%bqWXzu<-F<VPMcVbl_oVf3_f3#j~qgL-wZgZ{Pcg2^Y5YF4$2m
zb^g=O{f^rvT21@TUfngj-Zk&G+0DHh?^o;*cM|x1HGoM%{Gx#3nLtCPGlh=ES_{*<
zc{XwwH!)5vZZTMq(v;M2BS%@VP4UF9Lv!_cw73}@b1WPJo;kKe+Re)T%~2l`(Aes2
zx1n`~qN9YUphJk!>_7bVE2o~(b_n^!sLarqyPjo6prD(8*yEUU!WDJr6)s-ewz+8E
z%G}%Aa&MPeyS**Tk?onfaniDFxv`i3-2bm`8U8_S(SN=>+j><hzwNtoH{^GFx^(CB
zFMs#8RIhPTW<14I-njR>zjvrvozxe_h*uXrZmV0>ka*%nPg8JJj`|~(|1%tt|1UXl
z^w#{^*}GS<)@%2@PXA+ZyYYbM-|f>HeD9z6sFGfmqdTcr^i4r{1<Pk6&N&~Soi+$l
z&|LPCOLMc%k;m7iAO7l1IM~S1sqO2&H>mZubJN+_6!nv*S+;L8D7(v_mtQtD;(`0}
zmSeVND^wjbXN!F^Q7Kv0BirS*)0<=OI@==#+F24(ytyl{bQ^3G;bQw7nsaSco^IGi
ztFQ~7tEV1&uQlrkd)r>UTGa|YyY<Dz`7$?me%arB>Sogi@1UiTKUHoN%|Cmjz;{u;
z=!M+tAJ5;E+p#`k@+vza)?mqJaobX+^iKYjk;8Is9@Cx8IT9w1zC34Lq~wv_yhSTc
zNzLiOtA^Wg0)ncAnd19d{N`?*_0WpJ;Z59~uqy##9JcK-_oWXPr@G&s6Dbt=nRV{F
z&-!JK(~jJ5I`(;zI?ICJ@3e2#7IUYkSpI+eBdo~XYx$enrodBy2acQ$b$#>GlG}6Q
zQA>sk?}K6=?k;<yyX~OTWusU949&cv<uQlWFy&6SS$Q>O?t<0F!mOmV9?v^^WYM3M
zEMGntW}WogwQOqd9{X93@8!=Aw3-=uqd3k$eR6}_;rE=8>-HHr@4tE^lh5pFtkB;0
z0v*$f%o~sPKDqVkhUF^l@cN^icfQ|Sr!vvjb%Ny9WS{&<<<&*^SD0-2_g(SO!TpIW
zou>0W9^_^(T-7z%mn*clVn3t(wMj=3l^wS)KfJtU@AvZ_p=^78m^4~=e|atY!9szl
zc1zsK7|C{~twDJkxA@9%l}wR+`b=1ctK@RH^r_e@T?x?(`le)uF9<uu+vAX{aeb$Q
ztakZSl>lGG08!^0&F}w%&IT>0j9D=4)ZWVYuywVKb{j(8-EdlVNB^eWZ>HWUQ?0KZ
zsxsfE!6KEc8_-&$%f-89+1`z1tgC|7U0qZxW+kA}RiEbm{;i{>@xjUVu?A~iZc%RZ
zyIFrQ{P!*MbC2R*R57sJ%8O6D`;;-qL2a_qvgF2hmp;XswJ?gl__AkFXVQgS?vgyU
zn<tlC>d{LJPiJDibNF@C>h(GM>rZ<3v2c~U|6u3+sXis``#&z_+f1RI=><Ju+uZ_n
j-kgsr(g=uq?AKHnk+<pF<CX@FFPf!0*6A~zZ}|-XkboL2

literal 0
HcmV?d00001

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index baaba3e..0660f9e 100644
--- a/src/views/HomeView.vue
+++ b/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,31 +81,38 @@ const featuredEvents = [
       </div>
     </section>
 
-    <!-- Welcome: centered green band -->
-    <section class="border-y border-border bg-secondary">
-      <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>
-        <Button as-child variant="outline" class="mt-8">
-          <RouterLink to="/concept">{{ t('home.welcome.cta') }}</RouterLink>
-        </Button>
+    <!-- Welcome: tiled-bg card with rounded corners; tile is partly
+         translucent so the pinned photo glows through, plus a dark green
+         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>
+          <p class="mt-6 text-base leading-relaxed text-foreground/90 md:text-lg">
+            {{ t('home.welcome.body') }}
+          </p>
+          <Button as-child variant="outline" class="mt-8">
+            <RouterLink to="/concept">{{ t('home.welcome.cta') }}</RouterLink>
+          </Button>
+        </div>
       </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"
-      >
+    <!-- Bouge.ariege.io callout: tile under a heavier near-black tint -->
+    <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-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>
@@ -109,17 +124,21 @@ const featuredEvents = [
         >
           {{ t('home.bouge.body') }}
         </h3>
-        <Button as-child class="mt-10">
-          <a href="https://bouge.ariege.io" target="_blank" rel="noopener">
-            {{ t('home.bouge.cta') }}
-          </a>
-        </Button>
+          <Button as-child class="mt-10">
+            <a href="https://bouge.ariege.io" target="_blank" rel="noopener">
+              {{ t('home.bouge.cta') }}
+            </a>
+          </Button>
+        </div>
       </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">
+    <!-- Plan Your Visit: tiled-bg card -->
+    <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 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') }}
@@ -150,12 +169,16 @@ const featuredEvents = [
             loading="lazy"
           />
         </div>
+        </div>
       </div>
     </section>
 
-    <!-- Upcoming residencies & community days -->
-    <section class="border-t border-border bg-secondary">
-      <div class="mx-auto max-w-7xl px-4 py-20 lg:px-6 lg:py-24">
+    <!-- Upcoming residencies & community days: tiled-bg card -->
+    <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-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') }}
@@ -195,6 +218,7 @@ const featuredEvents = [
             <RouterLink to="/events">{{ t('home.events.seeAll') }}</RouterLink>
           </Button>
         </div>
+        </div>
       </div>
     </section>
   </div>