Starter T-IN · guide des composants
Sections
Les grands blocs qui composent une page : têtes de section, image/texte, plein écran, chiffres clés, appel à l'action.
SectionHead
Surtitre + titre + chapô. Props : eyebrow, title, lead, align ('center' par défaut, 'left').
Sept générations, trois pierres
Depuis 1852, la famille cultive douze hectares de chardonnay et de pinot noir sur les coteaux.
Voir le code
<SectionHead
eyebrow="Le domaine"
title="Sept générations, trois pierres"
lead="Depuis 1852, la famille cultive douze hectares…"
/>Facts
Chiffres clés sobres. S'adapte au fond clair comme sombre (couleurs héritées). Props : items [{ value, label }].
Voir le code
<Facts
items={[
{ value: '1852', label: 'Fondation' },
{ value: '12', label: 'Hectares' },
{ value: '9', label: 'Cuvées' },
]}
/>Timeline
Frise chronologique : une date, un titre, deux lignes. Le fil se remplit au défilement — animation CSS pilotée par le scroll, donc sans JavaScript, et neutralisée par prefers-reduced-motion. Les couleurs sont héritées : fonctionne aussi bien sur fond clair que dans un bloc .on-dark. Props : items [{ date, title, text? }].
- 1852
La fondation
Deux hectares pour commencer, sur le coteau au-dessus du village.
- 1921
Le premier chai
Construit après le phylloxéra, il sert encore.
- 1998
La reprise
La troisième génération arrive et convertit le domaine.
- Aujourd'hui
Douze hectares
Neuf cuvées, deux personnes, une vendange à la main.
Voir le code
<Timeline
items={[
{ date: 1852, title: 'La fondation', text: 'Deux hectares pour commencer.' },
{ date: 1998, title: 'La reprise', text: 'La troisième génération arrive.' },
{ date: "Aujourd'hui", title: 'Douze hectares' },
]}
/>Split
Image/texte en deux colonnes. Props : image, eyebrow, title, reverse (image à droite), dark (fond sombre), parallax. Le slot reçoit paragraphes et liens.
Des vins de lieu
Chaque cuvée naît d'une parcelle unique, vendangée à la main et élevée douze à dix-huit mois en fût.
Parcourir les cuvéesVoir le code
<Split
image={{ src: '/images/split-1.svg', alt: '…' }}
eyebrow="La cave"
title="Des vins de lieu"
parallax
>
<p class="reveal" style="--reveal-delay:0.2s">Chaque cuvée naît d'une parcelle unique…</p>
<a class="link-line reveal" style="--reveal-delay:0.3s" href="/les-vins">Parcourir les cuvées</a>
</Split>Split — variante sombre inversée
Les props reverse et dark se combinent librement.
Peu d'intrants, beaucoup de patience
Sols labourés, vendanges manuelles, levures indigènes et soufre au strict minimum.
Voir le code
<Split image={{ … }} eyebrow="La méthode" title="Peu d'intrants" reverse dark>…</Split>FullBleed
Section immersive : photo plein écran assombrie, contenu centré. Props : image, eyebrow, title, minHeight ('92svh' par défaut).
Marcher les vignes
D'avril à octobre, le domaine se visite à pied : les parcelles, la cuverie, la cave.
Réserver une visiteVoir le code
<FullBleed
image={{ src: '/images/fullbleed-1.svg', alt: '…' }}
eyebrow="Visites"
title="Marcher les vignes"
minHeight="70svh"
>
<p class="reveal" style="--reveal-delay:0.2s">D'avril à octobre…</p>
<a class="btn btn-outline-light reveal" style="--reveal-delay:0.3s; margin-top:2.4rem" href="/contact">Réserver</a>
</FullBleed>Etapes — le déroulé
Récolté d'antonin_lacour. La séquence non cliquable : déroulé d'une visite, d'un cours, d'un repas, d'une vinification. Là où Card sert une entrée dans une grille, Etapes sert un ordre — d'où le <ol>, le rang écrit en toutes lettres (« D'abord », « Ensuite », « Enfin ») et le cadre 4/5 vertical qui donne l'air d'une planche de revue plutôt que d'une vignette de catalogue. Couleurs héritées : fonctionne aussi dans une section .on-dark. Props : steps, columns (2/3/4), ratio, heading.
-
D’abord
On monte dans les vignes
La visite commence entre les rangs plutôt qu’au caveau. Une demi-heure sur les coteaux suffit à comprendre pourquoi deux cuvées du même cépage ne se ressemblent pas.
-
Ensuite
On descend à la cave
Les fûts, les cuves, la jarre de terre cuite. C’est là qu’on parle d’élevage, et qu’on goûte parfois un vin qui n’est pas encore en bouteille.
-
Enfin
On ouvre les bouteilles
Cinq à sept vins, selon ce qui est ouvert et selon ce que vous cherchez. La dégustation est gratuite, sans obligation d’achat.
Voir le code
<Etapes
steps={[
{
image: { src: '/images/gallery-1.svg', alt: '…' },
eyebrow: 'D’abord',
title: 'On monte dans les vignes',
text: 'Une demi-heure sur les coteaux…',
},
// …
]}
/>Bandeau — le ruban de mots
Récolté de bellagio. Ce que fait la maison, en une ligne, juste sous le logo : « Pizzeria · Brasserie · Bar à cocktails ». Deux régimes : scroll='narrow' (défaut) garde une ligne composée immobile qui bascule en ruban défilant sous 44 rem, quand elle ne tient plus ; scroll='always' fait défiler à toutes les tailles. Le ruban est aria-hidden et la ligne composée reste dans l'arbre d'accessibilité : un lecteur d'écran lit toujours les mots une seule fois. Le survol met en pause, et sous prefers-reduced-motion on revient à la ligne composée immobile. Props : words, separator, speed (secondes), scroll, label.
Domaine familial · Meursault · Vendange manuelle · Sans collage ni filtration · Depuis 1954
Domaine familial · Meursault · Vendange manuelle · Sans collage ni filtration · Depuis 1954
Voir le code
<Bandeau
words={['Domaine familial', 'Meursault', 'Vendange manuelle', 'Depuis 1954']}
separator="·"
speed={26}
scroll="always"
label="Le domaine en quatre mots"
/>Cta
Bandeau d'appel à l'action de fin de page. Props : eyebrow, title, text, button { label, href }. Slot pour une action secondaire.
Le caveau vous attend
Du mardi au samedi, sans rendez-vous pour la dégustation découverte.
Voir le code
<Cta
eyebrow="Nous rencontrer"
title="Le caveau vous attend"
text="Du mardi au samedi, sans rendez-vous."
button={{ label: 'Prendre rendez-vous', href: '/contact' }}
>
<a class="link-line" href="tel:+33380000000">03 80 00 00 00</a>
</Cta>