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').

Le domaine

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 }].

1852 Fondation

12 Hectares

9 Cuvées

7 Générations

Voir le code

<Facts
  items={[
    { value: '1852', label: 'Fondation' },
    { value: '12', label: 'Hectares' },
    { value: '9', label: 'Cuvées' },
  ]}
/>

Split

Image/texte en deux colonnes. Props : image, eyebrow, title, reverse (image à droite), dark (fond sombre), parallax. Le slot reçoit paragraphes et liens.

La cave

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ées

Voir 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.

La méthode

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).

Visites

Marcher les vignes

D'avril à octobre, le domaine se visite à pied : les parcelles, la cuverie, la cave.

Réserver une visite

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

Cta

Bandeau d'appel à l'action de fin de page. Props : eyebrow, title, text, button { label, href }. Slot pour une action secondaire.

Nous rencontrer

Le caveau vous attend

Du mardi au samedi, sans rendez-vous pour la dégustation découverte.

Prendre rendez-vous 03 80 00 00 00

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>