Starter T-IN · guide des composants
Immersifs
Les composants pleine page. Hero est montré ici en variante bandeau ; la version plein écran et la Balade se testent sur leurs pages réelles.
Hero
Hero photo. height='full' (100svh, page d'accueil — voir /) ou 'tall' (bandeau, ci-dessous). Slot nommé title pour contrôler les <br>, slot par défaut pour les CTA. À combiner avec heroHeader sur Base (header transparent).
Version plein écran avec header transparent : voir l'accueil
Voir le code
<Base title="…" description="…" heroHeader>
<Hero
image={{ src: '/images/hero-home.svg', alt: '…' }}
kicker="Bourgogne — France"
sub="Vigneron en Bourgogne depuis 1852"
>
<Fragment slot="title">Domaine des<br />Trois Pierres</Fragment>
<a class="btn btn-outline-light" href="/contact">Réserver</a>
<a class="link-line" href="/les-vins">Découvrir les vins</a>
</Hero>
</Base>PageHeader
En-tête de page interne : surtitre + H1 + chapô sur fond clair, bande photo optionnelle en dessous. Props : eyebrow, title, lead, image.
Les vins du domaine
Neuf cuvées parcellaires, vendangées à la main et élevées en fût.
Voir le code
<PageHeader
eyebrow="La gamme"
title="Les vins du domaine"
lead="Neuf cuvées parcellaires, vendangées à la main."
image={{ src: '/images/split-2.svg', alt: '…' }}
/>Balade
L'accueil signature « un geste = un écran » (récolté d'antonin_lacour) : écrans photo plein écran en fondu, texte qui monte ligne à ligne, stepper vertical (fil, points, compteur) à droite. Pilote le scroll de la page entière : elle ne peut pas être incrustée ici. S'utilise avec heroHeader + noFooter sur Base.
Voir le code
<Base title="…" description="…" heroHeader noFooter>
<Balade
screens={[
{
id: 'ouverture', label: 'Ouverture',
image: { src: '/images/hero-home.svg', alt: '…' },
kicker: 'Meursault · Bourgogne',
title: 'Vignerons aux Trois Pierres', accent: 'depuis 1852.',
link: { href: '#terre', label: 'Commencer la balade' },
},
{ id: 'terre', label: 'La terre', … },
]}
/>
</Base>Header & Footer
Présents sur toutes les pages via Base — vous les voyez sur ce guide. Entièrement pilotés par site.ts : marque (logo ou nom + brandSub), nav, CTA (null = masqué), coordonnées, réseaux, photo de footer, crédits. Header : prop transparent via heroHeader sur Base ; menu mobile plein écran ; barre CTA fixe sur mobile.
Redimensionner la fenêtre sous 1080px pour le menu mobile, sous 640px pour la barre CTA fixe.