| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GlowIA Diagnostic App</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"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| color: #1b4965; |
| } |
| |
| .hero-bg { |
| background: linear-gradient(rgba(27, 73, 101, 0.8), rgba(27, 73, 101, 0.8)), |
| url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80'); |
| background-size: cover; |
| background-position: center; |
| background-attachment: fixed; |
| } |
| |
| .btn-primary { |
| background-color: #5fa8d3; |
| color: white; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| background-color: #62b6cb; |
| transform: translateY(-2px); |
| } |
| |
| .btn-outline { |
| border: 2px solid #5fa8d3; |
| color: #5fa8d3; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-outline:hover { |
| background-color: #5fa8d3; |
| color: white; |
| } |
| |
| .step-indicator { |
| width: 35px; |
| height: 35px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 50%; |
| background-color: white; |
| border: 2px solid #62b6cb; |
| color: #62b6cb; |
| font-weight: bold; |
| } |
| |
| .step-indicator.active { |
| background-color: #62b6cb; |
| color: white; |
| } |
| |
| .form-card { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| border-radius: 12px; |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .loading-spinner { |
| border: 3px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| border-top: 3px solid #5fa8d3; |
| width: 30px; |
| height: 30px; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .highlight-card { |
| transform: scale(1.03); |
| box-shadow: 0 20px 25px -5px rgba(95, 168, 211, 0.2); |
| } |
| |
| .diagnostic-container { |
| display: none; |
| } |
| </style> |
| </head> |
| <body class="bg-bee9e8"> |
| |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-spa text-2xl text-5fa8d3 mr-2"></i> |
| <span class="text-xl font-bold text-1b4965">Glow<span class="text-62b6cb">IA</span></span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#home" class="nav-link text-1b4965 hover:text-5fa8d3 px-3 py-2 rounded-md text-sm font-medium">Accueil</a> |
| <a href="#diagnostic" class="nav-link text-gray-500 hover:text-5fa8d3 px-3 py-2 rounded-md text-sm font-medium">Diagnostic</a> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-5fa8d3"> |
| <span class="sr-only">Ouvrir menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hidden md:hidden" id="mobile-menu"> |
| <div class="pt-2 pb-3 space-y-1"> |
| <a href="#home" class="nav-link block pl-3 pr-4 py-2 border-l-4 border-5fa8d3 text-base font-medium text-5fa8d3 bg-blue-50">Accueil</a> |
| <a href="#diagnostic" class="nav-link block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Diagnostic</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-bg text-white py-24"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
| <div class="text-center lg:text-left"> |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
| <span class="block">Optimisez votre activité</span> |
| <span class="block text-62b6cb">avec l'IA</span> |
| </h1> |
| <p class="mt-3 text-xl sm:mt-5 sm:max-w-xl sm:mx-auto md:mt-5 lg:mx-0"> |
| Découvrez comment automatiser votre activité de bien-être avec notre diagnostic personnalisé en 5 étapes. |
| </p> |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> |
| <a href="#diagnostic" class="btn-primary px-6 py-3 rounded-md text-base font-medium shadow-sm"> |
| Commencer le diagnostic |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-5fa8d3 font-semibold tracking-wide uppercase">Comment ça marche</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold text-1b4965 sm:text-4xl"> |
| Un diagnostic en 5 étapes simples |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Notre processus vous guide pour identifier les meilleures opportunités d'automatisation. |
| </p> |
| </div> |
|
|
| <div class="mt-16"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-62b6cb text-white"> |
| <span class="text-xl font-bold">1</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-1b4965">Profil professionnel</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Nous commençons par comprendre votre activité, votre clientèle et vos spécificités. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-62b6cb text-white"> |
| <span class="text-xl font-bold">2</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-1b4965">Défis identifiés</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Vous nous indiquez les principales difficultés que vous rencontrez dans votre activité. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-62b6cb text-white"> |
| <span class="text-xl font-bold">3</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-1b4965">Outils digitaux</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Nous évaluons votre niveau d'utilisation des outils digitaux et vos besoins. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-62b6cb text-white"> |
| <span class="text-xl font-bold">4</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-1b4965">Analyse IA</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Notre intelligence artificielle analyse vos réponses pour identifier les meilleures solutions. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="relative md:col-span-2"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-62b6cb text-white"> |
| <span class="text-xl font-bold">5</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-1b4965">Plan personnalisé</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Vous recevez un plan d'action clair avec des recommandations adaptées à votre situation. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div id="diagnostic-container" class="diagnostic-container"> |
| |
| <section id="diagnostic" class="py-16 bg-bee9e8"> |
| <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-extrabold text-1b4965 sm:text-4xl"> |
| Diagnostic personnalisé |
| </h2> |
| <p class="mt-3 text-xl text-gray-600"> |
| Étape 1 sur 5 - Votre profil professionnel |
| </p> |
| |
| <div class="mt-6 flex justify-center"> |
| <div class="flex items-center"> |
| <div class="step-indicator active">1</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">2</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">3</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">4</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">5</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white form-card p-8"> |
| <form id="diagnosticForm"> |
| <div class="space-y-6"> |
| <div> |
| <label for="profession" class="block text-sm font-medium text-1b4965">Votre profession</label> |
| <select id="profession" name="profession" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez votre profession</option> |
| <option value="coiffeur">Coiffeur/Coiffeuse</option> |
| <option value="estheticienne">Esthéticienne</option> |
| <option value="masseur">Masseur/Masseuse</option> |
| <option value="naturopathe">Naturopathe</option> |
| <option value="autre">Autre profession du bien-être</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="experience" class="block text-sm font-medium text-1b4965">Années d'expérience</label> |
| <select id="experience" name="experience" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez</option> |
| <option value="0-2">0-2 ans</option> |
| <option value="3-5">3-5 ans</option> |
| <option value="6-10">6-10 ans</option> |
| <option value="10+">Plus de 10 ans</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="businessType" class="block text-sm font-medium text-1b4965">Type d'établissement</label> |
| <select id="businessType" name="businessType" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez</option> |
| <option value="salon">Salon</option> |
| <option value="institut">Institut</option> |
| <option value="cabinet">Cabinet</option> |
| <option value="domicile">À domicile</option> |
| <option value="autre">Autre</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="clientsPerWeek" class="block text-sm font-medium text-1b4965">Nombre moyen de clients par semaine</label> |
| <input type="number" id="clientsPerWeek" name="clientsPerWeek" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm"> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-end"> |
| <button type="button" id="nextStep1" class="btn-primary px-6 py-3 rounded-md text-base font-medium"> |
| Suivant <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="step2" class="py-16 bg-bee9e8 hidden"> |
| <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-extrabold text-1b4965 sm:text-4xl"> |
| Diagnostic personnalisé |
| </h2> |
| <p class="mt-3 text-xl text-gray-600"> |
| Étape 2 sur 5 - Vos défis actuels |
| </p> |
| |
| <div class="mt-6 flex justify-center"> |
| <div class="flex items-center"> |
| <div class="step-indicator">1</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator active">2</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">3</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">4</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">5</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white form-card p-8"> |
| <form> |
| <div class="space-y-6"> |
| <div> |
| <label class="block text-sm font-medium text-1b4965 mb-2">Quelles sont vos principales difficultés ? (plusieurs choix possibles)</label> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="challenge1" name="challenges" type="checkbox" value="gestion_rdv" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="challenge1" class="font-medium text-1b4965">Gestion des rendez-vous et annulations</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="challenge2" name="challenges" type="checkbox" value="fidelisation" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="challenge2" class="font-medium text-1b4965">Fidélisation des clients</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="challenge3" name="challenges" type="checkbox" value="organisation" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="challenge3" class="font-medium text-1b4965">Organisation du temps de travail</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="challenge4" name="challenges" type="checkbox" value="communication" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="challenge4" class="font-medium text-1b4965">Communication avec les clients</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="challenge5" name="challenges" type="checkbox" value="facturation" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="challenge5" class="font-medium text-1b4965">Gestion administrative et facturation</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="challenge6" name="challenges" type="checkbox" value="autre" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="challenge6" class="font-medium text-1b4965">Autre</label> |
| <input type="text" id="autreChallenge" name="autreChallenge" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm hidden"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <label for="mainGoal" class="block text-sm font-medium text-1b4965">Quel est votre objectif principal pour les 6 prochains mois ?</label> |
| <select id="mainGoal" name="mainGoal" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez</option> |
| <option value="augmenter_clients">Augmenter le nombre de clients</option> |
| <option value="optimiser_temps">Optimiser mon temps de travail</option> |
| <option value="ameliorer_experience">Améliorer l'expérience client</option> |
| <option value="developper_offres">Développer mes offres/services</option> |
| <option value="autre">Autre</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-between"> |
| <button type="button" id="prevStep2" class="btn-outline px-6 py-3 rounded-md text-base font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Précédent |
| </button> |
| <button type="button" id="nextStep2" class="btn-primary px-6 py-3 rounded-md text-base font-medium"> |
| Suivant <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="step3" class="py-16 bg-bee9e8 hidden"> |
| <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-extrabold text-1b4965 sm:text-4xl"> |
| Diagnostic personnalisé |
| </h2> |
| <p class="mt-3 text-xl text-gray-600"> |
| Étape 3 sur 5 - Vos outils digitaux |
| </p> |
| |
| <div class="mt-6 flex justify-center"> |
| <div class="flex items-center"> |
| <div class="step-indicator">1</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">2</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator active">3</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">4</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">5</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white form-card p-8"> |
| <form> |
| <div class="space-y-6"> |
| <div> |
| <label class="block text-sm font-medium text-1b4965 mb-2">Quels outils digitaux utilisez-vous actuellement ? (plusieurs choix possibles)</label> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="tool1" name="tools" type="checkbox" value="logiciel_rdv" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="tool1" class="font-medium text-1b4965">Logiciel de rendez-vous</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="tool2" name="tools" type="checkbox" value="crm" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="tool2" class="font-medium text-1b4965">CRM (gestion clientèle)</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="tool3" name="tools" type="checkbox" value="comptabilite" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="tool3" class="font-medium text-1b4965">Logiciel de comptabilité</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="tool4" name="tools" type="checkbox" value="reseau_sociaux" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="tool4" class="font-medium text-1b4965">Réseaux sociaux professionnels</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="tool5" name="tools" type="checkbox" value="site_web" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="tool5" class="font-medium text-1b4965">Site web</label> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="tool6" name="tools" type="checkbox" value="aucun" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="tool6" class="font-medium text-1b4965">Aucun outil digital</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <label for="techComfort" class="block text-sm font-medium text-1b4965">À quel point êtes-vous à l'aise avec les nouvelles technologies ?</label> |
| <select id="techComfort" name="techComfort" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez</option> |
| <option value="debutant">Débutant - Je préfère les solutions simples</option> |
| <option value="intermediaire">Intermédiaire - Je me débrouille</option> |
| <option value="avance">Avancé - Je suis à l'aise avec la technologie</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-between"> |
| <button type="button" id="prevStep3" class="btn-outline px-6 py-3 rounded-md text-base font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Précédent |
| </button> |
| <button type="button" id="nextStep3" class="btn-primary px-6 py-3 rounded-md text-base font-medium"> |
| Suivant <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="step4" class="py-16 bg-bee9e8 hidden"> |
| <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-extrabold text-1b4965 sm:text-4xl"> |
| Diagnostic personnalisé |
| </h2> |
| <p class="mt-3 text-xl text-gray-600"> |
| Étape 4 sur 5 - Vos ressources |
| </p> |
| |
| <div class="mt-6 flex justify-center"> |
| <div class="flex items-center"> |
| <div class="step-indicator">1</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">2</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">3</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator active">4</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step_indicator">5</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white form-card p-8"> |
| <form> |
| <div class="space-y-6"> |
| <div> |
| <label for="monthlyBudget" class="block text-sm font-medium text-1b4965">Budget mensuel que vous pourriez consacrer à l'automatisation</label> |
| <select id="monthlyBudget" name="monthlyBudget" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez</option> |
| <option value="0-50">0-50€</option> |
| <option value="50-100">50-100€</option> |
| <option value="100-200">100-200€</option> |
| <option value="200+">Plus de 200€</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="weeklyTime" class="block text-sm font-medium text-1b4965">Temps hebdomadaire que vous pourriez consacrer à la mise en place</label> |
| <select id="weeklyTime" name="weeklyTime" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm rounded-md"> |
| <option value="">Sélectionnez</option> |
| <option value="0-2">0-2 heures</option> |
| <option value="2-5">2-5 heures</option> |
| <option value="5-10">5-10 heures</option> |
| <option value="10+">Plus de 10 heures</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-between"> |
| <button type="button" id="prevStep4" class="btn-outline px-6 py-3 rounded-md text-base font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Précédent |
| </button> |
| <button type="button" id="nextStep4" class="btn-primary px-6 py-3 rounded-md text-base font-medium"> |
| Suivant <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="step5" class="py-16 bg-bee9e8 hidden"> |
| <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-extrabold text-1b4965 sm:text-4xl"> |
| Diagnostic personnalisé |
| </h2> |
| <p class="mt-3 text-xl text-gray-600"> |
| Étape 5 sur 5 - Vos coordonnées |
| </p> |
| |
| <div class="mt-6 flex justify-center"> |
| <div class="flex items-center"> |
| <div class="step-indicator">1</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">2</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator">3</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step_indicator">4</div> |
| <div class="w-8 h-1 bg-62b6cb opacity-30 mx-1"></div> |
| <div class="step-indicator active">5</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white form-card p-8"> |
| <form> |
| <div class="space-y-6"> |
| <div> |
| <label for="firstName" class="block text-sm font-medium text-1b4965">Prénom</label> |
| <input type="text" id="firstName" name="firstName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm"> |
| </div> |
| |
| <div> |
| <label for="lastName" class="block text-sm font-medium text-1b4965">Nom</label> |
| <input type="text" id="lastName" name="lastName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm"> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-sm font-medium text-1b4965">Email</label> |
| <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm"> |
| </div> |
| |
| <div> |
| <label for="phone" class="block text-sm font-medium text-1b4965">Téléphone (facultatif)</label> |
| <input type="tel" id="phone" name="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-5fa8d3 focus:border-5fa8d3 sm:text-sm"> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="newsletter" name="newsletter" type="checkbox" class="focus:ring-5fa8d3 h-4 w-4 text-5fa8d3 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="newsletter" class="font-medium text-1b4965">Je souhaite recevoir des conseils et offres par email</label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-between"> |
| <button type="button" id="prevStep5" class="btn-outline px-6 py-3 rounded-md text-base font-medium"> |
| <i class="fas fa-arrow-left mr-2"></i> Précédent |
| </button> |
| <button type="button" id="submitForm" class="btn-primary px-6 py-3 rounded-md text-base font-medium"> |
| <span id="submitText">Terminer et recevoir mon plan</span> |
| <span id="submitLoading" class="hidden"><div class="loading-spinner"></div></span> |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="results" class="py-16 bg-bee9e8 hidden"> |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-extrabold text-1b4965 sm:text-4xl"> |
| Votre plan d'automatisation personnalisé |
| </h2> |
| <p class="mt-3 text-xl text-gray-600"> |
| Voici les recommandations adaptées à votre activité |
| </p> |
| </div> |
| |
| <div class="bg-white form-card p-8"> |
| <div id="aiResults" class="space-y-6"> |
| |
| </div> |
| |
| <div class="mt-8 pt-6 border-t border-gray-200"> |
| <h3 class="text-lg font-medium text-1b4965 mb-4">Pack GlowIA recommandé</h3> |
| <div id="recommendedPack" class="bg-blue-50 rounded-lg p-4"> |
| |
| </div> |
| |
| <div class="mt-6 flex flex-col sm:flex-row gap-4"> |
| <button id="downloadPdf" class="btn-outline px-6 py-3 rounded-md text-base font-medium"> |
| <i class="fas fa-download mr-2"></i> Télécharger en PDF |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <footer class="bg-1b4965 text-white"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col items-center"> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-spa text-2xl text-62b6cb mr-2"></i> |
| <span class="text-xl font-bold">Glow<span class="text-62b6cb">IA</span></span> |
| </div> |
| <p class="text-blue-100 text-sm mb-6 text-center"> |
| L'IA au service des professionnels du bien-être et de la beauté. |
| </p> |
| <div class="flex space-x-6 mb-6"> |
| <a href="#" class="text-blue-200 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-blue-200 hover:text-white"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-blue-200 hover:text-white"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| <div class="text-sm text-blue-200"> |
| © 2023 GlowIA. Tous droits réservés. |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="successModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"> |
| <div> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100"> |
| <i class="fas fa-check text-green-600"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Succès !</h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500" id="modalMessage">Votre demande a bien été enregistrée. Nous vous contacterons rapidement.</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5 sm:mt-6"> |
| <button type="button" id="modalCloseBtn" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-5fa8d3 text-base font-medium text-white hover:bg-62b6cb focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-5fa8d3 sm:text-sm"> |
| Fermer |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| |
| if (targetId === '#diagnostic') { |
| showDiagnosticForm(); |
| return; |
| } |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| function showDiagnosticForm() { |
| |
| document.querySelectorAll('section').forEach(section => { |
| section.classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('diagnostic-container').style.display = 'block'; |
| document.getElementById('diagnostic').classList.remove('hidden'); |
| |
| |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| |
| |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| |
| |
| document.getElementById('nextStep1').addEventListener('click', function() { |
| if (validateStep(1)) { |
| document.getElementById('diagnostic').classList.add('hidden'); |
| document.getElementById('step2').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| }); |
| |
| document.getElementById('prevStep2').addEventListener('click', function() { |
| document.getElementById('step2').classList.add('hidden'); |
| document.getElementById('diagnostic').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| document.getElementById('nextStep2').addEventListener('click', function() { |
| if (validateStep(2)) { |
| document.getElementById('step2').classList.add('hidden'); |
| document.getElementById('step3').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| }); |
| |
| document.getElementById('prevStep3').addEventListener('click', function() { |
| document.getElementById('step3').classList.add('hidden'); |
| document.getElementById('step2').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| document.getElementById('nextStep3').addEventListener('click', function() { |
| if (validateStep(3)) { |
| document.getElementById('step3').classList.add('hidden'); |
| document.getElementById('step4').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| }); |
| |
| document.getElementById('prevStep4').addEventListener('click', function() { |
| document.getElementById('step4').classList.add('hidden'); |
| document.getElementById('step3').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| document.getElementById('nextStep4').addEventListener('click', function() { |
| if (validateStep(4)) { |
| document.getElementById('step4').classList.add('hidden'); |
| document.getElementById('step5').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| }); |
| |
| document.getElementById('prevStep5').addEventListener('click', function() { |
| document.getElementById('step5').classList.add('hidden'); |
| document.getElementById('step4').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| function validateStep(step) { |
| |
| |
| switch(step) { |
| case 1: |
| const profession = document.getElementById('profession').value; |
| const experience = document.getElementById('experience').value; |
| if (!profession || !experience) { |
| showValidationError('Veuillez remplir tous les champs obligatoires'); |
| return false; |
| } |
| break; |
| case 2: |
| const challenges = document.querySelectorAll('input[name="challenges"]:checked'); |
| const mainGoal = document.getElementById('mainGoal').value; |
| if (challenges.length === 0 || !mainGoal) { |
| showValidationError('Veuillez sélectionner au moins un défi et un objectif'); |
| return false; |
| } |
| break; |
| case 3: |
| const tools = document.querySelectorAll('input[name="tools"]:checked'); |
| const techComfort = document.getElementById('techComfort').value; |
| if (tools.length === 0 || !techComfort) { |
| showValidationError('Veuillez sélectionner au moins un outil et votre niveau de confort'); |
| return false; |
| } |
| break; |
| case 4: |
| const monthlyBudget = document.getElementById('monthlyBudget').value; |
| const weeklyTime = document.getElementById('weeklyTime').value; |
| if (!monthlyBudget || !weeklyTime) { |
| showValidationError('Veuillez indiquer votre budget et temps disponible'); |
| return false; |
| } |
| break; |
| case 5: |
| const firstName = document.getElementById('firstName').value; |
| const lastName = document.getElementById('lastName').value; |
| const email = document.getElementById('email').value; |
| if (!firstName || !lastName || !email) { |
| showValidationError('Veuillez remplir tous les champs obligatoires'); |
| return false; |
| } |
| break; |
| } |
| return true; |
| } |
| |
| function showValidationError(message) { |
| alert(message); |
| } |
| |
| |
| document.getElementById('submitForm').addEventListener('click', function() { |
| if (validateStep(5)) { |
| |
| document.getElementById('submitText').classList.add('hidden'); |
| document.getElementById('submitLoading').classList.remove('hidden'); |
| |
| |
| setTimeout(function() { |
| |
| document.getElementById('submitText').classList.remove('hidden'); |
| document.getElementById('submitLoading').classList.add('hidden'); |
| |
| |
| document.getElementById('step5').classList.add('hidden'); |
| document.getElementById('results').classList.remove('hidden'); |
| |
| |
| const aiResults = document.getElementById('aiResults'); |
| aiResults.innerHTML = ` |
| <div class="fade-in"> |
| <h3 class="text-lg font-medium text-1b4965 mb-2">Nos recommandations</h3> |
| <p class="text-gray-600">Basé sur vos réponses, voici nos suggestions pour automatiser votre activité :</p> |
| <ul class="mt-4 space-y-3 list-disc pl-5"> |
| <li>Mise en place d'un système de gestion de rendez-vous en ligne</li> |
| <li>Automatisation des rappels clients par SMS et email</li> |
| <li>Création d'un système de fidélisation automatisé</li> |
| <li>Optimisation de votre gestion administrative</li> |
| </ul> |
| </div> |
| `; |
| |
| const recommendedPack = document.getElementById('recommendedPack'); |
| recommendedPack.innerHTML = ` |
| <h4 class="font-bold text-1b4965">Pack Croissance</h4> |
| <p class="text-gray-600 mt-2">Le pack idéal pour développer votre activité avec des outils avancés d'automatisation.</p> |
| <p class="mt-2 text-1b4965 font-bold">99€/mois</p> |
| `; |
| |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }, 2000); |
| } |
| }); |
| |
| |
| document.getElementById('downloadPdf').addEventListener('click', function() { |
| alert('Fonctionnalité de téléchargement PDF simulée. En production, cela générerait un PDF des résultats.'); |
| }); |
| |
| |
| document.getElementById('modalCloseBtn').addEventListener('click', function() { |
| document.getElementById('successModal').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('challenge6').addEventListener('change', function() { |
| const autreInput = document.getElementById('autreChallenge'); |
| if (this.checked) { |
| autreInput.classList.remove('hidden'); |
| } else { |
| autreInput.classList.add('hidden'); |
| } |
| }); |
| </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=Mdigitla/glowia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
