Introduction
Ce design system documente l'ensemble des composants, styles et patterns développés pour une invitation de mariage interactive, élégante et personnalisable.
Couleurs
Palette dorée élégante et intemporelle évoquant le raffinement et la célébration
Typographie
Duo typographique élégant : Alex Brush pour les titres cursifs et Cinzel pour le texte serif raffiné
Composants
Bibliothèque des composants UI développés pour l'invitation
Hero Élégant avec Background Floral
Hero full-screen avec background image de fleurs, typographie cursive dorée, bouton calendrier dropdown et sélecteur de langues. Design centré et aéré pour mise en avant du message principal.
Compte à Rebours Animé
Compte à rebours temps réel en JavaScript avec 4 boxes (jours, heures, minutes, secondes). Bordures dorées, hover effect translateY et mise à jour automatique chaque seconde jusqu'à la date cible.
Section Histoire avec Photo Ornée
Photo circulaire avec ornement SVG superposé, texte narratif élégant. Mise en page verticale centrée avec espacement généreux. Design épuré mettant en valeur l'histoire du couple.
Carousel Premium avec Swipe
Carousel d'images avec transitions CSS cubic-bezier fluides, contrôles fléchés, indicateurs dots et swipe tactile mobile. Images avec border dorée, scale effect sur slide active et responsive adaptatif.
Cards Événements avec Illustrations
Cards cérémonie et réception avec icônes PNG d'église/fête, heure mise en avant, description et bouton itinéraire Google Maps. Background blanc transparent, bordures dorées et shadow élégante.
Formulaire RSVP Élégant
Formulaire avec champs name, email, select présence, nombre d'invités (+ / -) et message. Honeypot anti-spam, affichage conditionnel, validation frontend et traitement PHP avec message de confirmation.
Dropdown Calendrier Multi-Platform
Menu déroulant animé avec liens Google Calendar, Apple Calendar (.ics download), Outlook et Autres. Animation fadeInUp, fermeture au clic extérieur et design raffiné avec bordures dorées.
Fonctionnalités
Fonctionnalités clés développées pour une expérience utilisateur optimale
Export Calendrier Multi-Plateformes
Génération automatique de fichiers .ics pour ajout de l'événement aux calendriers Apple, Outlook et autres. Intégration directe avec Google Calendar via URL paramétrisée. Dropdown élégant avec animation et fermeture automatique au clic extérieur.
RSVP avec Traitement Backend PHP
Formulaire de confirmation avec validation frontend JavaScript et traitement backend PHP. Champs conditionnels (nombre d'invités affiché uniquement si "Oui"), honeypot anti-spam, envoi email automatique et message de confirmation élégant après soumission réussie.
Carousel Tactile Optimisé Mobile
Carousel d'images avec gestion complète du touch : détection swipe gauche/droite avec threshold, prevention du scroll vertical, transitions CSS fluides cubic-bezier, indicateurs dots synchronisés et contrôles fléchés. Responsive adaptatif avec repositionnement des contrôles sous l'image sur mobile.
Écrans
Aperçus des interfaces desktop et mobile
Performance
Métriques de performance et optimisations techniques
