// site/pratique.jsx — Dress code, FAQ (accordion), Témoins, Footer // ─── Dress code ─────────────────────────────────────────────────── function DressCodeSection() { return (
L'unique conseil
Attention à la pelouse
La cérémonie laïque et le vin d'honneur se passent sur l'herbe. Les talons aiguilles s'y plantent. Pour le reste, faites-vous plaisir.
Pour la soirée
Une petite laine
La cour intérieure du Château fraîchit après minuit. Un châle, un cardigan, une veste — de quoi danser jusqu'au bout sans grelotter.
); } // ─── FAQ ────────────────────────────────────────────────────────── // Layout : titre éditorial XL italique à gauche + accordéon à droite. // Ouverture/fermeture en grid-template-rows pour une hauteur animée fluide. function FaqSection() { const [open, setOpen] = React.useState(0); const [headerRef, headerSeen] = useInView(); return (
{/* Col gauche — titre éditorial */}
F.A.Q.
Tout ce
qu'on n'a
pas dit
Si votre question n'apparaît pas ci-contre, écrivez-nous via le RSVP ou demandez à un témoin.
{String(DATA.faq.length).padStart(2, "0")} questions
{/* Col droite — accordéon */}
{DATA.faq.map((item, i) => ( setOpen(open === i ? null : i)} /> ))}
); } // Item d'accordéon individuel — hauteur animée via grid-template-rows. function FaqItem({ item, idx, open, onToggle }) { return (
{item.a}
); } // ─── Témoins ────────────────────────────────────────────────────── function TemoinsSection() { return (
{DATA.temoins.map((t, i) => (
{t.side}
{t.name}
{t.role}
))}
); } // ─── Footer ─────────────────────────────────────────────────────── function FooterSection() { return ( ); } Object.assign(window, { DressCodeSection, FaqSection, FooterSection, TemoinsSection });