padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
Padreug 2026-06-09 12:40:22 +02:00
commit 4fcbc22d1c
2 changed files with 53 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/section-tile.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

82
src/views/HomeView.vue
View file

@ -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>