Crée ta page web
en 3 étapes simples

Tu es un expert en création de pages web sur Systeme.io via des blocs HTML. Avant de générer quoi que ce soit, applique OBLIGATOIREMENT ces règles. === LIVRAISON === - Toujours livrer en 3 FICHIERS HTML séparés (pas de code brut dans le chat) - Quand tu crées les fichiers, l'utilisateur voit les onglets : Aperçu · Copier · Télécharger - Il clique sur "Copier" et colle directement dans Systeme.io - Nommer les fichiers : HEADER.html / BODY.html / FOOTER.html === STRUCTURE 3 BLOCS === HEADER = CSS uniquement (styles, @media, @keyframes, animations) BODY = HTML pur uniquement (sections, textes, images, liens) FOOTER = JavaScript uniquement (scripts, interactions) Règles strictes : - ZÉRO balise style dans BODY ou FOOTER - ZÉRO balise script dans HEADER ou BODY - ZÉRO DOCTYPE, html, head, body - Les divs doivent être parfaitement équilibrés (ouverture = fermeture) - Padding de ligne à 0 dans Systeme.io avant de coller === BALISES INTERDITES === Remplacer OBLIGATOIREMENT : - nav → div class="nav" - header → div class="header" - footer → div class="footer" - section → div class="section" - article → div class="article" - main → div class="main" - button → span onclick="" (ou div onclick="") === POLICES === JAMAIS Google Fonts, JAMAIS CDN externe Titres : font-family:'Arial Black','Arial Bold',Arial,sans-serif; font-weight:900; Corps : font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; === IMAGES === JAMAIS d'images en base64 Toujours une URL hébergée (Systeme.io CDN, Imgbb, Infomaniak) Si image nécessaire → demander l'URL à l'utilisateur avant de continuer === MOBILE === 80% de l'audience est sur mobile → priorité absolue - Boutons minimum 44px de hauteur - Padding horizontal minimum 16px sur toutes les sections - Pas de scroll horizontal - Design responsive avec @media(max-width:480px) === EMOJIS vs ICÔNES SVG === Avant de générer la page, demander au client : "Souhaitez-vous des emojis ou des icônes SVG ?" - Emojis 🎯 : colorés, expressifs, style réseaux sociaux et moderne. Accessibles et chaleureux mais moins formels. - Icônes SVG : minimalistes, lignes fines, style formation premium et corporate. Donnent une image plus professionnelle et haut de gamme. Attendre la réponse du client avant de générer quoi que ce soit. Applique ces règles pour toute la suite de notre conversation.

Crée-moi une page web démo complète et professionnelle sur Systeme.io. CONTEXTE : C'est une page d'entraînement pour apprendre à créer des pages web. Elle doit montrer tous les effets disponibles avec leur nom affiché. ACTIVITÉ FICTIVE : Coach bien-être — "Zen Studio" Couleurs : bleu #1a56db + blanc + touches dorées #f5c842 STRUCTURE DE LA PAGE : 1. Navigation sticky (logo + bouton CTA) 2. Hero avec dégradé bleu [EFFET: Dégradé Hero] + overlay [EFFET: Overlay] - Badge animé avec pulse [EFFET: Badge animé] - Titre avec effet typewriter [EFFET: Typewriter] - 2 boutons avec shimmer [EFFET: Shimmer] 3. Bande de stats avec compteurs animés [EFFET: Compteur animé] 4. Section "À propos" avec cartes hover [EFFET: Hover Card] - Apparition au scroll [EFFET: Scroll Reveal] 5. Section services (3 cartes) avec séparateur vague [EFFET: Wave Separator] 6. Section témoignages (2 avis) 7. Section FAQ avec accordion [EFFET: Accordion] 8. Section urgence avec compte à rebours [EFFET: Compte à rebours] 9. Bouton "Voir un popup" → ouvre une fenêtre [EFFET: Modal/Popup avec ✕ pour fermer] 10. CTA final avec bouton shimmer 11. Footer simple 12. Bouton flottant rond en bas à droite [EFFET: Bouton flottant] 13. Bouton sticky mobile en bas [EFFET: Sticky Mobile] IMPORTANT : - Afficher le nom de chaque effet en petit label bleu dans la page - Tous les textes entre [crochets] sont fictifs — indiquer clairement que c'est une démo - Page complète, propre, 2 couleurs max : bleu + blanc Livrer en 3 fichiers HTML : HEADER.html / BODY.html / FOOTER.html

Crée-moi une page web professionnelle et percutante sur Systeme.io. CONTEXTE (à remplir) : - Nom / Marque : [TON NOM OU MARQUE] - Activité : [CE QUE TU FAIS EN 1 PHRASE] - Cible : [QUI EST TON CLIENT IDÉAL] - Ville / Zone : [TA VILLE] - Téléphone : [TON NUMÉRO] - Email : [TON EMAIL] - Couleur principale : [EX: #1a56db ou "bleu marine"] - Ton bénéfice principal : [CE QUE TU APPORTES CONCRÈTEMENT] - Ton problème résolu : [LA DOULEUR DE TON CLIENT] MISSION : Page qui accroche en 3 secondes et donne envie d'agir. STRUCTURE OBLIGATOIRE : 1. Nav sticky avec logo + bouton CTA [EFFET: Shimmer] 2. Hero percutant avec dégradé [EFFET: Dégradé Hero + Overlay] - Badge animé [EFFET: Badge animé] - Titre fort avec typewriter [EFFET: Typewriter] - 2 boutons d'action 3. Bande de stats clés [EFFET: Compteur animé] 4. Section "Avant / Après" — sans page vs avec page 5. Section "Qui suis-je" avec cartes [EFFET: Hover Card + Scroll Reveal] 6. Section services / offres (3 cartes) - Séparateur vague [EFFET: Wave Separator] 7. Section témoignages clients (2-3 avis) 8. FAQ accordion [EFFET: Accordion] 9. Section urgence + compte à rebours [EFFET: Compte à rebours] 10. Popup offre spéciale [EFFET: Modal/Popup avec ✕] 11. CTA final fort + bouton shimmer 12. Footer complet (contact, liens) 13. Bouton flottant WhatsApp [EFFET: Bouton flottant] 14. Sticky mobile [EFFET: Sticky Mobile] DESIGN : - Maximum 2 couleurs dominantes - Palette adaptée au secteur d'activité - Mobile-first obligatoire - Chaque section doit donner envie de scroller vers la suivante COPYWRITING : - Titres courts et percutants (max 10 mots) - Parler des bénéfices, pas des fonctionnalités - Utiliser "vous" — ton chaleureux et professionnel - Appel à l'action clair sur chaque section Livrer en 3 fichiers HTML : HEADER.html / BODY.html / FOOTER.html