Réserver une dégustation

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

Coteaux au lever du jour

Variante tall

Un bandeau immersif

height='tall' — min 78svh, titre en --h1

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.

La gamme

Les vins du domaine

Neuf cuvées parcellaires, vendangées à la main et élevées en fût.

Bouteilles alignées dans la cave
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>

Chapters — récit à image collante

La photographie tient l'écran pendant que le texte défile à côté, et change de chapitre en chapitre. C'est le composant des pages qui racontent (histoire d'un domaine, d'une maison, d'un parcours) plutôt que de celles qui informent. Sans JavaScript, les chapitres s'empilent, chacun avec sa photo : rien n'est perdu. `reverse` place la colonne d'images à droite.

Les coteaux au lever du jour
I · Le lieu

Là où tout commence

Chaque chapitre tient dans un écran, et son image reste posée à côté du texte pendant qu’on le lit.

Au chapitre suivant, l’image change en fondu — c’est ce qui donne à la page son rythme de récit.

Bouteilles alignées dans la cave
II · La maison

Deux générations

Le texte n’a pas de longueur imposée : un chapitre court laisse simplement l’image respirer plus longtemps.

Le travail dans les rangs
III · Le geste

Ce qui ne change pas

Sous 900 px, la colonne collante disparaît : chaque chapitre reprend sa photo dans le flux, ce qui est la bonne lecture sur un téléphone.

Voir le code
<Chapters
  items={[
    {
      eyebrow: 'I · Le lieu',
      title: 'Là où tout commence',
      text: 'Un paragraphe.
Un deuxième, séparé par un retour à la ligne.',
      image: { src: '/images/split-1.svg', alt: '…' },
      focus: '50% 35%',
    },
    // …
  ]}
/>

Chronique — index immersif

La liste qui méritait mieux qu'une liste (récoltée d'antonin_lacour) : un écran par entrée, la photographie en fond assombri qui se fond d'une entrée à l'autre, le repère de l'entrée en filigrane géant, le texte dans une carte translucide à droite, et un rail-sommaire collant. Pour des millésimes, des saisons, les trous d'un parcours, les éditions d'un festival. Fond et rail sont collants (pas fixes) : le composant s'incruste dans une page normale, pied de page compris. Sans JavaScript, la première photo reste affichée et le rail reste une liste d'ancres. Les photos non utiles ne sont pas chargées. Sous 900 px, le rail disparaît.

2022 — 2025 · Le livre de cave

Chaque année laisse une trace

Le gel d’avril, les canicules, les vendanges d’août. En descendant, on remonte le temps — l’année s’affiche derrière, le récit devant.

Descendre ↓

2025 1 / 4

L’année sans accroc

Une vendange sans histoire, et des acidités qui ont tenu. Pour une fois, ce sont les décisions prises à la vigne qui ont fait la différence.

Lire le récit complet

2024 2 / 4

La patience

Un printemps pluvieux, une pression sanitaire constante, et une récolte sauvée par le travail à la vigne.

Lire le récit complet

2023 3 / 4

La générosité

La plus grosse récolte depuis cinq ans, et le retour des blancs — pressés de nuit pour préserver la fraîcheur.

Lire le récit complet

2022 4 / 4

La chaleur maîtrisée

Trois canicules, quarante millimètres de pluie — et pourtant des vins équilibrés.

Lire le récit complet

Voir le code
<Chronique
  kicker="2017 — 2025 · Le livre de cave"
  title="Chaque année laisse"
  accent="une trace"
  lead="Le gel d’avril, les canicules, les vendanges d’août."
  scrollHint="Descendre ↓"
  heading="h2"
  entries={[
    {
      key: '2025',
      title: 'L’année sans accroc',
      text: 'Une vendange sans accroc, et des acidités qui ont tenu.',
      image: { src: '/images/gallery-1.svg', alt: '…' },
      link: { href: '/millesimes/2025/', label: 'Lire le récit complet' },
    },
    // …
  ]}
/>

RecitColonne — le reportage à rail

Récolté d'antonin_lacour. Un rail photographique collé à gauche, des écrans de texte à droite : le rail ne bouge pas, c'est l'image qu'il porte qui change en fondu au fil de la lecture, avec sa légende et son rang (« 3 / 6 ») comme sur un tirage. Un écran est soit un chapitre (surtitre, titre, paragraphes, et au choix portraits, chiffres, chute), soit une citation (quote), soit un appel à l'action (link) — le type se déduit des champs, rien à déclarer. Le premier écran porte le H1 dans un corps plus grand : la page n'a pas besoin de bandeau de titre. `*entre astérisques*` passe en italique léger (lib/accent.ts). Sans JavaScript, la première photo reste affichée et les écrans se lisent à la suite ; sous 64rem, le rail cède la place à une bande 4/3 en tête de chaque écran.

Les coteaux au lever du jour

© Studio Exemple — Les coteaux, en mars

1 / 5

Travail de la vigne au sécateur

© Studio Exemple — La taille, en février

2 / 5

La cave voûtée au soir

© Studio Exemple — La cave, en octobre

3 / 5

Verres posés sur une barrique

© Studio Exemple — Le caveau, un samedi

4 / 5

Le caveau à la tombée du jour

© Studio Exemple — Le caveau, à la tombée du jour

5 / 5

Les coteaux au lever du jour

Le domaine

Sept générations, trois pierres

Le domaine tient son nom des trois bornes de calcaire qui marquent le haut du coteau. Elles sont là depuis plus longtemps que la famille.

Ce qui suit se lit comme un reportage : à gauche la photographie, à droite ce qu’elle raconte.

Descendre ↓

Travail de la vigne au sécateur

I · La terre

Douze hectares, quatorze parcelles

Aucune parcelle ne dépasse deux hectares. C’est peu pratique à travailler, et c’est exactement ce qui fait la différence dans le verre.

12 ha
en propriété
1852
première vendange
14
parcelles

On ne choisit pas son terroir : on apprend à l’écouter.

La cave voûtée au soir

II · La maison

Deux mains, une cave

Camille a repris le domaine en 2011, après dix ans passés ailleurs. Marc, son père, n’est jamais vraiment parti de la cave.

Portrait de Camille Berthier
Camille
Portrait de Marc Berthier
Marc
Verres posés sur une barrique

On ne fait pas le vin : on l’accompagne, et on essaie de ne pas se mettre en travers.

Camille Berthier, vigneronne
Le caveau à la tombée du jour

Nous rendre visite

Venir au caveau

Du mardi au samedi, sur rendez-vous. La dégustation est gratuite et sans obligation d’achat.

Prendre rendez-vous

L’abus d’alcool est dangereux pour la santé. À consommer avec modération.

Voir le code
<RecitColonne
  heading="h1"
  credit="© Studio Exemple"
  scrollHint="Descendre ↓"
  screens={[
    {
      image: { src: '/images/hero-home.svg', alt: '…' },
      caption: 'Les coteaux, en mars',
      eyebrow: 'Le domaine',
      title: 'Sept générations, *trois pierres*',
      text: 'Un paragraphe.
Un deuxième, séparé par un retour à la ligne.',
    },
    {
      image: { src: '/images/split-1.svg', alt: '…' },
      eyebrow: 'I · La terre',
      title: 'Douze hectares, *quatorze parcelles*',
      text: '…',
      facts: [{ value: '12 ha', label: 'en propriété' }],
      closing: 'La chute : la phrase qui reste.',
    },
    { image: { src: '/images/split-2.svg', alt: '…' },
      quote: 'On ne fait pas le vin : on l’accompagne.',
      author: 'Camille Berthier', role: 'vigneronne' },
    { image: { src: '/images/fullbleed-1.svg', alt: '…' },
      eyebrow: 'Nous rendre visite', title: 'Venir *au caveau*', text: '…',
      link: { href: '/contact', label: 'Prendre rendez-vous' },
      note: 'L’abus d’alcool est dangereux pour la santé.' },
  ]}
/>

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.

Guide