// site/hero.jsx — Hero avec animation carte à jouer qui se retourne, puis // révèle l'As de cœur (réutilisé de la DA 08 Phase 1). // L'animation joue une fois par invité (flag localStorage), puis l'invité // arrive directement sur la révélation lors des visites suivantes. const HERO_FLAG = "ea-mariage:hero-played"; function Hero() { // stage : 0 deck idle · 1 shuffle · 2 flip · 3 reveal // Toujours démarrer en état initial (deck posé, bouton "Battre les cartes") // — l'invité doit cliquer pour lancer le tirage à chaque visite. const [stage, setStage] = React.useState(0); React.useEffect(() => { if (stage === 1) { const t = setTimeout(() => setStage(2), 1200); return () => clearTimeout(t); } if (stage === 2) { const t = setTimeout(() => setStage(3), 1100); return () => clearTimeout(t); } }, [stage]); const replay = () => { setStage(0); }; return (
{/* Bandeau top : marque mono + replay discret */}
E & A · {DATA.dateShort} {stage === 3 && ( )}
{/* Contenu central */}
{stage === 0 && setStage(1)} />} {stage === 1 && } {stage === 2 && } {stage === 3 && }
); } // ─── État 0 : deck posé, invitation à jouer ───────────────────────── function HeroDeck({ onPlay }) { return (
{[-14, -10, -5, 0].map((rot, i) => (
))}
★ Save the date ★
Tirez la carte
de notre destin.
Le {DATA.dateLong}, au Château Sentout en Gironde.
♥ Battre les cartes
); } // ─── État 1 : cartes brassées ────────────────────────────────────── function HeroShuffle() { return (
Les cartes se mêlent…
); } // ─── État 2 : carte qui se retourne ──────────────────────────────── function HeroFlip() { return (
Et la carte se retourne…
); } // ─── État 3 : révélation — As de cœur + typographie save-the-date ──── function HeroReveal() { return (
{/* As de cœur — issu de la DA 08 */}
{/* Typographie alignée save-the-date */}
★ Save the date ★
Enora
Antoine
vous invitent à réserver leur week-end du
21 / 08 / 2027
Château Sentout · Tabanac · Gironde
{/* Compte-à-rebours + CTA */}
Plus que
document.getElementById("section-rsvp")?.scrollIntoView({ behavior: "smooth", block: "start" })}> ♥ Confirmer ma présence document.getElementById("section-programme")?.scrollIntoView({ behavior: "smooth", block: "start" })}> Voir le programme
); } // ─── As de cœur aquarellé (Voie C, Option A) ────────────────────────── function AceOfHearts({ w = 240 }) { const h = w * 1.45; return (
{/* Cadre intérieur — trait au pinceau, irrégulier */} {/* Index haut-gauche — "A♥" tracé à la main */}
A
{/* Index bas-droit */}
A
{/* Cœur central aquarellé */}
{/* Texte central — type save-the-date */}
Enora & Antoine
21 · 08 · 2027
); } // Cœur stylisé pour les coins function AceHeartIcon({ size = 30, y = 0 }) { return ( ); } // Cœur central aquarellé — multiples lavis superposés function WatercolorHeart({ size = 160 }) { const heart = "M 50 88 C 14 60, 8 28, 26 18 C 38 12, 48 18, 50 24 C 52 18, 62 12, 74 18 C 92 28, 86 60, 50 88 Z"; return ( ); } // ─── Carte face cachée (dos v3 — feuilles aquarelle + monogramme E&A) ─ function CardBack({ w = 180 }) { const h = w * 1.45; return (
{/* Lavis très léger en fond */}
{/* 2 feuilles en diagonale */} {/* Cadre or fin */}
{/* Monogramme */}
E&A
21 · 08 · 2027
); } Object.assign(window, { Hero });