Vendanges 2026 : un millésime prometteur
Trois semaines de récolte sous un ciel clément.
Starter T-IN · guide des composants
Contenus
Les composants qui affichent les données du client : grilles de cartes, galeries photo, listes tarifaires, formulaire de contact. Les données viennent des content collections ou de site.ts — jamais du composant.
Card + CardGrid
Cartes cliquables pour actualités, cuvées, chambres, événements. Card : href, image, meta, datetime, title, excerpt, revealDelay. CardGrid : columns (2, 3 ou 4).
Voir le code
<CardGrid columns={3}>
{news.map((post, i) => (
<Card
href={'/actualites/' + post.id + '/'}
image={{ src: post.data.image, alt: post.data.imageAlt }}
meta={formatDate(post.data.date)}
datetime={isoDate(post.data.date)}
title={post.data.title}
excerpt={post.data.excerpt}
revealDelay={i * 0.12}
/>
))}
</CardGrid>Gallery
Grille photos + visionneuse native <dialog> : clic pour agrandir, flèches pour naviguer, Échap pour fermer. Sans JS, chaque vignette reste un lien vers le fichier. Props : photos [{ src, alt, width, height }], columns, caption.
Voir le code
<Gallery
columns={3}
caption="Le domaine au fil des saisons"
photos={[
{ src: '/images/gallery-1.svg', alt: '…' },
{ src: '/images/gallery-2.svg', alt: '…' },
]}
/>PriceList
Liste tarifaire <dl> : tarifs, cartes, menus, horaires. Fonctionne sur fond clair comme sombre. Props : items [{ label, value, note }]. Slot pour une note de bas de liste.
- Dégustation découverte 4 vins · 45 minutes
- 15 €
- Dégustation terroirs 6 vins · 1h15
- 25 €
- Verticale de millésimes Sur rendez-vous · 2h
- 60 €
Dégustation offerte pour tout achat de six bouteilles.
Voir le code
<PriceList
items={[
{ label: 'Dégustation découverte', note: '4 vins · 45 minutes', value: '15 €' },
{ label: 'Verticale de millésimes', note: 'Sur rendez-vous', value: '60 €' },
]}
>
Dégustation offerte pour tout achat de six bouteilles.
</PriceList>ContactForm
Deux modes selon site.formEndpoint : endpoint renseigné → POST natif + fetch avec confirmation inline ; vide (mode actuel de la démo) → repli mailto: composé côté client. Pot-de-miel anti-spam intégré. Prop : subject (pré-remplit l'objet).
Voir le code
<ContactForm subject="Demande de visite" />
// src/data/site.ts
formEndpoint: 'https://formspree.io/f/xxxxxxx',