Spaces:
Running
Running
creer moi une landing page pour une infopreneuse: elle vend une formation en ligne pour devenir prothésiste ongulaire indépendante . Sa formation coute 497€ - Follow Up Deployment
badcaf1 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Formation Prothésiste Ongulaire | Devenez indépendante</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#fbcfe8', | |
| secondary: '#d4a4f3', | |
| accent: '#a855f7', | |
| dark: '#4a154b', | |
| light: '#fff7fb' | |
| }, | |
| fontFamily: { | |
| 'sans': ['Montserrat', 'sans-serif'], | |
| 'serif': ['Playfair Display', 'serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .section { | |
| @apply py-20; | |
| } | |
| .box-shadow-accent { | |
| box-shadow: 0 15px 25px -10px rgba(168, 85, 247, 0.25); | |
| } | |
| .faq-item { | |
| transition: all 0.3s ease; | |
| } | |
| .faq-item.active .faq-answer { | |
| max-height: 300px; | |
| opacity: 1; | |
| } | |
| .faq-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .faq-item.active .faq-icon { | |
| transform: rotate(45deg); | |
| } | |
| .nail-design { | |
| background: radial-gradient(circle, #f0abfc 0%, transparent 70%); | |
| } | |
| .animated-underline { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .animated-underline::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: currentColor; | |
| transition: width 0.3s ease; | |
| } | |
| .animated-underline:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-light text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white sticky top-0 z-50 shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-accent w-10 h-10 rounded-full flex items-center justify-center text-white"> | |
| <i class="fa-solid fa-nails text-xl"></i> | |
| </div> | |
| <span class="ml-3 font-bold text-xl text-dark">OnglesByElodie</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#formation" class="text-dark hover:text-accent font-medium animated-underline">Formation</a> | |
| <a href="#programme" class="text-dark hover:text-accent font-medium animated-underline">Programme</a> | |
| <a href="#benefices" class="text-dark hover:text-accent font-medium animated-underline">Bénéfices</a> | |
| <a href="#temoignages" class="text-dark hover:text-accent font-medium animated-underline">Témoignages</a> | |
| <a href="#faq" class="text-dark hover:text-accent font-medium animated-underline">FAQ</a> | |
| </div> | |
| <button class="md:hidden text-dark text-xl"> | |
| <i class="fa-solid fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-br from-primary to-secondary text-white overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-2/3 h-full nail-design"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 relative z-10 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-serif font-bold leading-tight"> | |
| Devenez <span class="text-dark">Prothésiste Ongulaire</span> Indépendante | |
| </h1> | |
| <p class="text-xl mt-6 mb-10 max-w-2xl opacity-90"> | |
| Libérez votre créativité et lancez votre activité passionnante et rentable grâce à notre formation complète à 497€ seulement | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#cta" class="bg-dark hover:bg-accent text-white font-bold py-4 px-8 rounded-full text-center transition-all duration-300 transform hover:scale-105 box-shadow-accent"> | |
| Je m'inscris maintenant <i class="fa-solid fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#formation" class="bg-white hover:bg-light text-dark font-bold py-4 px-8 rounded-full text-center transition-all"> | |
| Découvrir la formation <i class="fa-solid fa-circle-info ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-full h-full border-4 border-white rounded-3xl"></div> | |
| <img src="https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?q=80" alt="Prothésiste ongulaire travaillant" class="w-96 h-96 object-cover rounded-2xl"> | |
| <div class="absolute -bottom-6 -right-6 bg-white rounded-full p-4 shadow-xl"> | |
| <div class="bg-accent text-white rounded-full w-16 h-16 flex items-center justify-center"> | |
| <span class="font-bold text-2xl">497€</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Formation Section --> | |
| <section id="formation" class="section"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-serif font-bold text-dark mb-6">Transformez Votre Passion en Carrière</h2> | |
| <p class="text-xl text-gray-600 mb-12"> | |
| Notre formation complète vous donne toutes les clés pour devenir une experte en onglerie et lancer votre activité indépendante. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10 mt-16"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center hover:border-accent border-2 border-transparent transition-all"> | |
| <div class="bg-primary text-dark rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fa-solid fa-graduation-cap text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Formation Complète</h3> | |
| <p class="text-gray-600"> | |
| Apprenez toutes les techniques professionnelles : pose de capsules, nail art, french manucure, résine, gel, et bien plus. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center hover:border-accent border-2 border-transparent transition-all"> | |
| <div class="bg-primary text-dark rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fa-solid fa-rocket text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Kit de Démarrage</h3> | |
| <p class="text-gray-600"> | |
| Recevez une liste de matériel indispensable et les meilleurs conseils pour débuter votre activité sans investir des milliers d'euros. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center hover:border-accent border-2 border-transparent transition-all"> | |
| <div class="bg-primary text-dark rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fa-solid fa-user-group text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Accès Communauté</h3> | |
| <p class="text-gray-600"> | |
| Rejoignez notre communauté exclusive d'élèves et de professionnelles pour échanger, apprendre et vous inspirer. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Programme Section --> | |
| <section id="programme" class="section bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif font-bold text-dark">Programme Complet en 7 Modules</h2> | |
| <p class="text-xl text-gray-600 mt-4"> | |
| De l'anatomie de l'ongle aux techniques professionnelles les plus avancées | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-8"> | |
| <div class="bg-light p-8 rounded-2xl border-l-4 border-accent"> | |
| <div class="text-accent font-bold text-2xl mb-4">Module 1</div> | |
| <h3 class="text-2xl font-bold mb-4">Fondamentaux de l'onglerie</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Anatomie de l'ongle et biologie</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Préparation du matériel et désinfection</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Principes d'hygiène et sécurité</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Étude des produits et leur composition</li> | |
| </ul> | |
| </div> | |
| <div class="bg-light p-8 rounded-2xl border-l-4 border-secondary"> | |
| <div class="text-secondary font-bold text-2xl mb-4">Module 2</div> | |
| <h3 class="text-2xl font-bold mb-4">Techniques de base au gel</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Pose de gel sur ongles naturels</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Niveau et lissage parfait</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> French manucure classique et inversée</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Décollage et remplissage sans abîmer</li> | |
| </ul> | |
| </div> | |
| <div class="bg-light p-8 rounded-2xl border-l-4 border-accent"> | |
| <div class="text-accent font-bold text-2xl mb-4">Module 3</div> | |
| <h3 class="text-2xl font-bold mb-4">Extensions et capsules</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Techniques d'extension avec différentes capsules</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Sculpture à la résine ou au gel</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Corrections de déviations et imperfections</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-accent mt-1 mr-3"></i> Techniques de remplissage et renforts</li> | |
| </ul> | |
| </div> | |
| <div class="bg-light p-8 rounded-2xl border-l-4 border-secondary"> | |
| <div class="text-secondary font-bold text-2xl mb-4">Module 4</div> | |
| <h3 class="text-2xl font-bold mb-4">Nail art avancé</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Techniques de nail art : pointillisme, dégradés</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Utilisation de paillettes, strass et accessoires</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Design en 3D et techniques mixtes</li> | |
| <li class="flex items-start"><i class="fa-solid fa-check-circle text-secondary mt-1 mr-3"></i> Tendances actuelles et saisonnières</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="text-accent font-bold text-lg hover:underline"> | |
| Voir les 7 modules complets <i class="fa-solid fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section id="cta" class="py-20 bg-gradient-to-r from-dark to-accent text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-4xl font-serif font-bold mb-6">Rejoignez la formation complète dès aujourd'hui !</h2> | |
| <p class="text-xl mb-8 opacity-90"> | |
| Accès immédiat à tous les modules + bonus exclusifs pour seulement 497€ | |
| </p> | |
| <div class="bg-white text-dark rounded-2xl p-8 max-w-2xl mx-auto mb-10"> | |
| <div class="flex justify-center items-end mb-6"> | |
| <span class="text-5xl font-bold text-accent">497€</span> | |
| <span class="ml-2 text-gray-500 text-lg line-through">897€</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex justify-center items-center"><i class="fa-solid fa-check-circle text-accent mr-3"></i> Formation complète en ligne - 7 modules</li> | |
| <li class="flex justify-center items-center"><i class="fa-solid fa-check-circle text-accent mr-3"></i> Accès illimité et à vie</li> | |
| <li class="flex justify-center items-center"><i class="fa-solid fa-check-circle text-accent mr-3"></i> Kit de démarrage et liste de matériel</li> | |
| <li class="flex justify-center items-center"><i class="fa-solid fa-check-circle text-accent mr-3"></i> Communauté privée Facebook</li> | |
| <li class="flex justify-center items-center"><i class="fa-solid fa-check-circle text-accent mr-3"></i> Certification à la fin de la formation</li> | |
| </ul> | |
| <a href="#" class="bg-accent hover:bg-dark text-white font-bold py-4 px-12 rounded-full inline-block transition-all duration-300 transform hover:scale-105 box-shadow-accent"> | |
| Je m'inscris maintenant <i class="fa-solid fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="flex items-center justify-center space-x-2"> | |
| <div class="flex"> | |
| <i class="fa-solid fa-lock text-sm"></i> | |
| </div> | |
| <span class="text-sm opacity-80">Paiement sécurisé par carte bancaire</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefices Section --> | |
| <section id="benefices" class="section"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif font-bold text-dark">Pourquoi devenir prothésiste ongulaire ?</h2> | |
| <p class="text-xl text-gray-600 mt-4"> | |
| Une carrière passionnante et lucrative accessible depuis chez vous | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg mb-8 border-t-4 border-primary"> | |
| <div class="flex"> | |
| <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0"> | |
| <i class="fa-solid fa-euro-sign text-2xl"></i> | |
| </div> | |
| <div class="ml-6"> | |
| <h3 class="text-2xl font-bold mb-3">Revenus attractifs</h3> | |
| <p class="text-gray-600"> | |
| Gagnez entre 40€ et 100€ par client selon les prestations. Une activité à domicile peut générer 1500€ à 4000€ par mois. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg mb-8 border-t-4 border-secondary"> | |
| <div class="flex"> | |
| <div class="bg-secondary text-white rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0"> | |
| <i class="fa-solid fa-calendar-check text-2xl"></i> | |
| </div> | |
| <div class="ml-6"> | |
| <h3 class="text-2xl font-bold mb-3">Flexibilité totale</h3> | |
| <p class="text-gray-600"> | |
| Gérez votre emploi du temps comme vous le souhaitez, travaillez à domicile ou en institut, choisissez vos horaires. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg mb-8 border-t-4 border-accent"> | |
| <div class="flex"> | |
| <div class="bg-accent text-white rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0"> | |
| <i class="fa-solid fa-heart text-2xl"></i> | |
| </div> | |
| <div class="ml-6"> | |
| <h3 class="text-2xl font-bold mb-3">Une passion rentable</h3> | |
| <p class="text-gray-600"> | |
| Transformez votre passion pour les ongles en activité rémunératrice. Laissez votre créativité s'exprimer chaque jour. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl aspect-square" alt="Client satisfaite"></div> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl aspect-square" alt="Design d'ongles"></div> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl aspect-square mt-10" alt="Matériel pro"></div> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl aspect-square" alt="Travail de prothésiste"></div> | |
| </div> | |
| <div class="absolute top-10 -left-10 bg-primary text-white px-4 py-2 rounded-full rotate-12"> | |
| <i class="fa-solid fa-star mr-2"></i> Très demandé | |
| </div> | |
| <div class="absolute bottom-10 -right-10 bg-secondary text-white px-4 py-2 rounded-full -rotate-12"> | |
| <i class="fa-solid fa-face-smile mr-2"></i> Satisfaction client | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Témoignages Section --> | |
| <section id="temoignages" class="py-20 bg-primary"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif font-bold text-dark">Ils ont changé de vie grâce à notre formation</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-2xl p-8 shadow-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Sophie D.</h3> | |
| <div class="flex text-yellow-400 mt-1"> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Grâce à cette formation, j'ai lancé mon activité à domicile en 2 mois seulement. Maintenant je gagne 3 fois plus qu'avec mon ancien emploi et je suis enfin passionnée par mon travail !" | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-2xl p-8 shadow-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Mélanie T.</h3> | |
| <div class="flex text-yellow-400 mt-1"> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Les modules sont ultra complets et les démonstrations très claires. La communauté est d'un grand soutien. Après 6 mois d'activité, j'ai plus de 30 clients réguliers et mon agenda est plein 3 semaines à l'avance !" | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-2xl p-8 shadow-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Chloé L.</h3> | |
| <div class="flex text-yellow-400 mt-1"> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| <i class="fa-solid fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Le meilleur investissement de ma vie ! Je travaillais en bureau et je m'ennuyais. Maintenant je suis libre de mes horaires, je suis créative et je travaille moins pour gagner plus. Merci mille fois !" | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 flex justify-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 bg-accent rounded-full"></div> | |
| <div class="w-3 h-3 bg-gray-300 rounded-full"></div> | |
| <div class="w-3 h-3 bg-gray-300 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="section bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif font-bold text-dark">Questions fréquentes</h2> | |
| <p class="text-xl text-gray-600 mt-4"> | |
| Toutes les réponses à vos interrogations | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="faq-item bg-light rounded-xl p-6 mb-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">Ai-je besoin de prérequis pour suivre cette formation ?</h3> | |
| <span class="faq-icon text-accent text-xl"> | |
| <i class="fa-solid fa-plus"></i> | |
| </span> | |
| </div> | |
| <div class="faq-answer max-h-0 overflow-hidden opacity-0"> | |
| <p class="mt-4 text-gray-600"> | |
| Aucun prérequis n'est nécessaire. La formation est conçue pour les débutant(e)s comme pour celles qui ont déjà quelques bases. Nous commençons par les fondamentaux avant d'aborder les techniques avancées. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-light rounded-xl p-6 mb-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">Quand pourrai-je commencer à travailler après la formation ?</h3> | |
| <span class="faq-icon text-accent text-xl"> | |
| <i class="fa-solid fa-plus"></i> | |
| </span> | |
| </div> | |
| <div class="faq-answer max-h-0 overflow-hidden opacity-0"> | |
| <p class="mt-4 text-gray-600"> | |
| Nos élèves les plus motivées commencent à prendre leurs premiers clients avant même la fin de la formation ! La plupart lancent leur activité professionnelle dans les 2 mois qui suivent la fin de leur parcours. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-light rounded-xl p-6 mb-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">Combien d'heures par semaine dois-je prévoir pour la formation ?</h3> | |
| <span class="faq-icon text-accent text-xl"> | |
| <i class="fa-solid fa-plus"></i> | |
| </span> | |
| </div> | |
| <div class="faq-answer max-h-0 overflow-hidden opacity-0"> | |
| <p class="mt-4 text-gray-600"> | |
| Vous pouvez aller à votre rythme. La formation complète représente environ 50 heures. Nous recommandons au moins 5 heures par semaine pour terminer en 2-3 mois. Mais vous disposez d'un accès à vie. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-light rounded-xl p-6 mb-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">La formation donne-t-elle une certification reconnue ?</h3> | |
| <span class="faq-icon text-accent text-xl"> | |
| <i class="fa-solid fa-plus"></i> | |
| </span> | |
| </div> | |
| <div class="faq-answer max-h-0 overflow-hidden opacity-0"> | |
| <p class="mt-4 text-gray-600"> | |
| Oui, vous recevrez une certification de fin de formation qui atteste de vos compétences techniques. Cette certification est reconnue par les assurances professionnelles et permettra d'exercer légalement. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bottom CTA --> | |
| <section class="py-16 bg-gradient-to-r from-accent to-secondary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-serif font-bold mb-6">Prête à lancer votre nouvelle carrière passionnante ?</h2> | |
| <p class="text-xl mb-8 opacity-90"> | |
| Rejoignez plus de 850 élèves satisfaites et transformez votre vie professionnelle aujourd'hui | |
| </p> | |
| <a href="#" class="bg-dark hover:bg-white hover:text-accent text-white font-bold py-4 px-16 rounded-full inline-block transition-all duration-300 transform hover:scale-105 box-shadow-accent"> | |
| Commencer maintenant <i class="fa-solid fa-arrow-right ml-2"></i> | |
| </a> | |
| <div class="mt-8 flex items-center justify-center"> | |
| <i class="fa-solid fa-lock text-sm mr-2"></i> | |
| <span class="text-sm opacity-80">Paiement 100% sécurisé - Garantie satisfait ou remboursé 30 jours</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-accent rounded-full p-2"> | |
| <i class="fa-solid fa-nails text-white text-xl"></i> | |
| </div> | |
| <span class="ml-3 font-bold text-xl">OnglesByElodie</span> | |
| </div> | |
| <p class="text-gray-300"> | |
| Formation en ligne pour devenir prothésiste ongulaire indépendante et lancer votre activité lucrative depuis chez vous. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-4">Formation</h3> | |
| <ul class="space-y-3 text-gray-300"> | |
| <li><a href="#" class="hover:text-accent transition">Programme complet</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Témoignages</a></li> | |
| <li><a href="#" class="hover:text-accent transition">FAQ</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Tarifs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-4">Légal</h3> | |
| <ul class="space-y-3 text-gray-300"> | |
| <li><a href="#" class="hover:text-accent transition">Conditions générales</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Politique de confidentialité</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Mentions légales</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Retours et remboursements</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-4">Contact</h3> | |
| <ul class="space-y-3 text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fa-solid fa-envelope text-accent mt-1 mr-3"></i> | |
| <span>contact@onglesbyelodie.fr</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fa-solid fa-phone text-accent mt-1 mr-3"></i> | |
| <span>+33 6 12 34 56 78</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6 flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-accent flex items-center justify-center hover:bg-white transition"> | |
| <i class="fa-brands fa-facebook-f text-white hover:text-accent"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-accent flex items-center justify-center hover:bg-white transition"> | |
| <i class="fa-brands fa-instagram text-white hover:text-accent"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-accent flex items-center justify-center hover:bg-white transition"> | |
| <i class="fa-brands fa-tiktok text-white hover:text-accent"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-accent flex items-center justify-center hover:bg-white transition"> | |
| <i class="fa-brands fa-youtube text-white hover:text-accent"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 OnglesByElodie. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle FAQ items | |
| document.querySelectorAll('.faq-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| this.classList.toggle('active'); | |
| // Close other items | |
| document.querySelectorAll('.faq-item').forEach(otherItem => { | |
| if (otherItem !== this) { | |
| otherItem.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if(targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if(targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wadestudio/fittrack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |