| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GRC Site Pro - Créateur de Sites Web Professionnels</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| .template-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .feature-icon { |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 12px; |
| } |
| .ai-preview { |
| background: linear-gradient(45deg, #f3f4f6, #e5e7eb); |
| border-radius: 16px; |
| position: relative; |
| overflow: hidden; |
| } |
| .ai-preview::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 8px; |
| background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6); |
| } |
| .testimonial-card { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| } |
| .pricing-card:hover { |
| transform: scale(1.03); |
| } |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <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-cube text-purple-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">GRC Site Pro</span> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a> |
| <a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Fonctionnalités</a> |
| <a href="#templates" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Modèles</a> |
| <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tarifs</a> |
| </div> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> |
| <button onclick="showLoginModal()" class="bg-white text-purple-600 hover:bg-gray-50 border border-purple-600 px-4 py-2 rounded-md text-sm font-medium mr-3">Connexion</button> |
| <button onclick="startFreeTrial()" class="gradient-bg text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:opacity-90 transition">Essai gratuit</button> |
| </div> |
| <div class="-mr-2 flex items-center sm:hidden"> |
| <button type="button" onclick="toggleMobileMenu()" 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-purple-500" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="hidden sm:hidden bg-white border-t"> |
| <div class="pt-2 pb-3 space-y-1"> |
| <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a> |
| <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Fonctionnalités</a> |
| <a href="#templates" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Modèles</a> |
| <a href="#pricing" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Tarifs</a> |
| </div> |
| <div class="pt-4 pb-3 border-t border-gray-200"> |
| <div class="space-y-1 px-2"> |
| <button onclick="showLoginModal()" class="block w-full text-left bg-white text-purple-600 hover:bg-gray-50 border border-purple-600 px-4 py-2 rounded-md text-base font-medium">Connexion</button> |
| <button onclick="startFreeTrial()" class="block w-full text-left gradient-bg text-white px-4 py-2 rounded-md text-base font-medium shadow-sm hover:opacity-90 mt-2">Essai gratuit</button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Créez votre site web professionnel en quelques minutes</h1> |
| <p class="text-xl opacity-90 mb-8">Plus de 1000 modèles, outils e-commerce, hébergement gratuit et création assistée par IA pour votre boutique en ligne.</p> |
| <div class="flex flex-col sm:flex-row gap-4"> |
| <button onclick="startFreeTrial()" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Commencer gratuitement</button> |
| <button onclick="showDemoVideo()" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center"> |
| <i class="fas fa-play-circle mr-2"></i> Voir la démo |
| </button> |
| </div> |
| <div class="mt-8 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/11.jpg" alt=""> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/18.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium">Rejoint par plus de <span class="font-bold">25,000+</span> entrepreneurs</p> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <span class="text-sm">4.9/5 (1,200+ avis)</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="ai-preview p-4 shadow-2xl animate-float"> |
| <div class="bg-white rounded-lg overflow-hidden"> |
| <div class="p-4 border-b"> |
| <div class="flex space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-robot text-purple-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Assistant GRC IA</h3> |
| <p class="text-gray-500 text-sm">Prêt à créer votre site</p> |
| </div> |
| </div> |
| <div class="bg-gray-50 rounded-lg p-4 mb-4"> |
| <p class="text-gray-700">Bonjour ! Je suis votre assistant GRC IA. Dites-moi en quelques mots ce que vous souhaitez pour votre site web et je le créerai pour vous automatiquement.</p> |
| </div> |
| <div class="flex"> |
| <input id="ai-input" type="text" placeholder="Ex: Un site e-commerce de vêtements bio..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <button onclick="generateSiteWithAI()" class="bg-purple-600 text-white px-4 rounded-r-lg hover:bg-purple-700"><i class="fas fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-yellow-400 rounded-full opacity-20 blur-xl"></div> |
| <div class="absolute -top-10 -right-10 w-40 h-40 bg-purple-400 rounded-full opacity-20 blur-xl"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <p class="text-center text-gray-500 mb-8">Utilisé par les meilleures entreprises</p> |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center"> |
| <div class="flex justify-center"> |
| <i class="fab fa-slack text-gray-700 text-4xl"></i> |
| </div> |
| <div class="flex justify-center"> |
| <i class="fab fa-shopify text-gray-700 text-4xl"></i> |
| </div> |
| <div class="flex justify-center"> |
| <i class="fab fa-airbnb text-gray-700 text-4xl"></i> |
| </div> |
| <div class="flex justify-center"> |
| <i class="fab fa-spotify text-gray-700 text-4xl"></i> |
| </div> |
| <div class="flex justify-center"> |
| <i class="fab fa-uber text-gray-700 text-4xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="features" class="bg-gray-50 py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Tout ce dont vous avez besoin pour réussir en ligne</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Des outils puissants et faciles à utiliser pour créer, gérer et développer votre présence en ligne</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-12"> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-purple-100 text-purple-600 mb-6"> |
| <i class="fas fa-paint-brush text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">1000+ Modèles Professionnels</h3> |
| <p class="text-gray-600">Choisissez parmi plus de 1000 modèles conçus par des experts et personnalisez-les à votre image.</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-blue-100 text-blue-600 mb-6"> |
| <i class="fas fa-shopping-cart text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">E-commerce & Dropshipping</h3> |
| <p class="text-gray-600">Lancez votre boutique en ligne avec des outils e-commerce complets et des intégrations dropshipping.</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-green-100 text-green-600 mb-6"> |
| <i class="fas fa-bolt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Création par IA</h3> |
| <p class="text-gray-600">Notre IA crée automatiquement un site web personnalisé en fonction de vos besoins en quelques minutes.</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-yellow-100 text-yellow-600 mb-6"> |
| <i class="fas fa-chart-line text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Entonnoirs de Conversion</h3> |
| <p class="text-gray-600">Optimisez vos ventes avec des entonnoirs de conversion pré-conçus et des outils d'analyse intégrés.</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-red-100 text-red-600 mb-6"> |
| <i class="fas fa-server text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Hébergement Gratuit</h3> |
| <p class="text-gray-600">Bénéficiez d'un hébergement haute performance inclus avec chaque site, sans frais supplémentaires.</p> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-indigo-100 text-indigo-600 mb-6"> |
| <i class="fas fa-mobile-alt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">100% Mobile Friendly</h3> |
| <p class="text-gray-600">Tous nos modèles sont optimisés pour mobile et s'adaptent parfaitement à tous les écrans.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="templates" class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Explorez nos modèles populaires</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Des designs professionnels pour tous les secteurs d'activité</p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> |
| <div class="relative pb-[60%] bg-gray-100"> |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="E-commerce Template" class="absolute h-full w-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-4 left-4"> |
| <span class="bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded">E-commerce</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Boutique Moderne</h3> |
| <p class="text-gray-600 mb-4">Template parfait pour les boutiques en ligne avec mise en avant des produits.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-eye text-gray-400 mr-1"></i> |
| <span class="text-sm text-gray-500">1,245</span> |
| </div> |
| <button onclick="previewTemplate('ecommerce')" class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> |
| <div class="relative pb-[60%] bg-gray-100"> |
| <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Portfolio Template" class="absolute h-full w-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-4 left-4"> |
| <span class="bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded">Portfolio</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Portfolio Créatif</h3> |
| <p class="text-gray-600 mb-4">Mettez en valeur vos travaux avec ce design élégant et minimaliste.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-eye text-gray-400 mr-1"></i> |
| <span class="text-sm text-gray-500">892</span> |
| </div> |
| <button onclick="previewTemplate('portfolio')" class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> |
| <div class="relative pb-[60%] bg-gray-100"> |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Business Template" class="absolute h-full w-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-4 left-4"> |
| <span class="bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded">Entreprise</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Corporate Pro</h3> |
| <p class="text-gray-600 mb-4">Template professionnel pour les entreprises avec sections services et équipe.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-eye text-gray-400 mr-1"></i> |
| <span class="text-sm text-gray-500">1,532</span> |
| </div> |
| <button onclick="previewTemplate('corporate')" class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button onclick="showAllTemplates()" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium shadow-lg hover:opacity-90 transition flex items-center mx-auto"> |
| <i class="fas fa-th-large mr-2"></i> Voir tous les modèles |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg text-white py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-3xl font-bold mb-6">Votre boutique en ligne clé en main</h2> |
| <p class="text-xl opacity-90 mb-8">Lancez votre activité e-commerce avec des outils puissants et des intégrations dropshipping pour vendre sans stock.</p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-lg p-2 mr-4"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-1">Gestion des produits</h4> |
| <p class="opacity-90">Ajoutez et gérez facilement vos produits avec des variations, stocks et galeries photos.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-lg p-2 mr-4"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-1">Paiements sécurisés</h4> |
| <p class="opacity-90">Stripe, PayPal, Apple Pay et plus de 50 méthodes de paiement intégrées.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-lg p-2 mr-4"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-1">Dropshipping</h4> |
| <p class="opacity-90">Importez des produits depuis AliExpress, Oberlo et autres plateformes en 1 clic.</p> |
| </div> |
| </div> |
| </div> |
| |
| <button onclick="createEcommerceStore()" class="mt-8 bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Créer ma boutique</button> |
| </div> |
| <div class="relative"> |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden"> |
| <div class="p-4 border-b flex items-center justify-between bg-gray-50"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-red-400 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-400 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> |
| </div> |
| <div class="text-sm text-gray-500">admin.grcsite.com</div> |
| <div class="w-6"></div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 bg-gray-200 rounded-lg mr-4 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-bold">Montre Connectée Pro</h4> |
| <p class="text-gray-600 text-sm">Suivi d'activité, GPS, résistance à l'eau</p> |
| <p class="text-purple-600 font-bold mt-1">€149.99</p> |
| </div> |
| </div> |
| |
| <div class="border-t pt-6"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Sous-total</span> |
| <span class="font-medium">€149.99</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Livraison</span> |
| <span class="font-medium">€4.99</span> |
| </div> |
| <div class="flex justify-between mb-4"> |
| <span class="text-gray-600">Taxes</span> |
| <span class="font-medium">€18.60</span> |
| </div> |
| <div class="flex justify-between border-t pt-4"> |
| <span class="font-bold">Total</span> |
| <span class="font-bold text-lg">€173.58</span> |
| </div> |
| </div> |
| |
| <button onclick="simulateCheckout()" class="w-full gradient-bg text-white py-3 rounded-lg font-bold mt-6 hover:opacity-90 transition">Passer la commande</button> |
| </div> |
| </div> |
| <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-yellow-300 rounded-full opacity-20 blur-xl"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div class="order-2 md:order-1"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Création de site par IA en 3 minutes</h2> |
| <p class="text-xl text-gray-600 mb-8">Notre intelligence artificielle conçoit un site web personnalisé pour vous en fonction de vos réponses à quelques questions simples.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-purple-100 text-purple-600 rounded-lg p-2 mr-4"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-1 text-gray-900">Génération automatique</h4> |
| <p class="text-gray-600">L'IA crée la structure, le design et le contenu de votre site en quelques secondes.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 text-blue-600 rounded-lg p-2 mr-4"> |
| <i class="fas fa-edit"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-1 text-gray-900">Personnalisation facile</h4> |
| <p class="text-gray-600">Modifiez tous les éléments générés avec notre éditeur intuitif.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-green-100 text-green-600 rounded-lg p-2 mr-4"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-1 text-gray-900">Optimisation SEO</h4> |
| <p class="text-gray-600">Votre site est automatiquement optimisé pour le référencement.</p> |
| </div> |
| </div> |
| </div> |
| |
| <button onclick="tryAIBuilder()" class="mt-8 gradient-bg text-white px-6 py-3 rounded-lg font-bold shadow-lg hover:opacity-90 transition">Essayer l'IA maintenant</button> |
| </div> |
| <div class="order-1 md:order-2 relative"> |
| <div class="bg-gray-50 rounded-2xl p-8 shadow-lg"> |
| <div class="mb-8"> |
| <div class="h-2 bg-gray-200 rounded-full"> |
| <div class="h-2 bg-purple-600 rounded-full" style="width: 65%"></div> |
| </div> |
| <p class="text-sm text-gray-500 mt-2">Étape 3 sur 5 - Création en cours...</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-bold mb-4">Votre site prend forme !</h3> |
| <p class="text-gray-600 mb-4">Notre IA est en train de générer :</p> |
| |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> |
| <span class="text-gray-700">Structure des pages</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> |
| <span class="text-gray-700">Sélection du design</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-spinner text-purple-500 animate-spin mr-3"></i> |
| <span class="text-gray-700">Rédaction du contenu</span> |
| </div> |
| <div class="flex items-center opacity-50"> |
| <i class="far fa-clock text-gray-500 mr-3"></i> |
| <span class="text-gray-700">Optimisation SEO</span> |
| </div> |
| <div class="flex items-center opacity-50"> |
| <i class="far fa-clock text-gray-500 mr-3"></i> |
| <span class="text-gray-700">Intégration des médias</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-purple-600"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">GRC IA Assistant</p> |
| <p class="text-xs text-gray-500">Génération en cours...</p> |
| </div> |
| </div> |
| <div class="mt-3 bg-gray-50 p-3 rounded"> |
| <p class="text-sm text-gray-700">Je suis en train de créer la page "À propos" avec une histoire captivante pour votre entreprise de mode éthique. Quelques secondes supplémentaires...</p> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -top-6 -right-6 w-40 h-40 bg-purple-300 rounded-full opacity-20 blur-xl"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg text-white py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Ils nous font confiance</h2> |
| <p class="text-xl opacity-90 max-w-3xl mx-auto">Des milliers d'entrepreneurs et entreprises utilisent GRC Site Pro pour leur présence en ligne</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="testimonial-card p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sophie Martin" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Sophie Martin</h4> |
| <p class="text-sm opacity-80">Créatrice de Bijoux</p> |
| </div> |
| </div> |
| <p class="mb-6 opacity-90">"J'ai lancé ma boutique en ligne en 2 jours seulement avec GRC. Les outils de dropshipping m'ont permis de commencer sans stock et aujourd'hui je réalise plus de 5 000€ de CA mensuel."</p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300"></i> |
| </div> |
| </div> |
| |
| <div class="testimonial-card p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Leroy" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Thomas Leroy</h4> |
| <p class="text-sm opacity-80">Consultant Digital</p> |
| </div> |
| </div> |
| <p class="mb-6 opacity-90">"L'assistant IA est révolutionnaire. J'ai pu créer des sites professionnels pour mes clients en quelques minutes, ce qui me permet de me concentrer sur la stratégie plutôt que sur la technique."</p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300"></i> |
| </div> |
| </div> |
| |
| <div class="testimonial-card p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Camille Dubois" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Camille Dubois</h4> |
| <p class="text-sm opacity-80">Restauratrice</p> |
| </div> |
| </div> |
| <p class="mb-6 opacity-90">"Le système de réservation en ligne a transformé mon restaurant. Les clients peuvent maintenant réserver et commander en ligne, ce qui a augmenté mon chiffre d'affaires de 30%."</p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star text-yellow-300 mr-1"></i> |
| <i class="fas fa-star-half-alt text-yellow-300"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16 text-center"> |
| <button onclick="showMoreTestimonials()" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Voir plus de témoignages</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="pricing" class="bg-white py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Des tarifs simples et transparents</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Choisissez la formule qui correspond à vos besoins</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| |
| <div class="pricing-card bg-white border border-gray-200 rounded-xl p-8 transition duration-300"> |
| <div class="mb-6"> |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Basique</h3> |
| <p class="text-gray-600">Parfait pour les sites vitrines simples</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold text-gray-900">€9</span> |
| <span class="text-gray-500">/mois</span> |
| </div> |
| <button onclick="selectPlan('basic')" class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mb-8 hover:bg-gray-200 transition">Commencer</button> |
| <ul class="space-y-3"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>1 site web</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>10 pages maximum</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>5GB de stockage</span> |
| </li> |
| <li class="flex items-center text-gray-400"> |
| <i class="fas fa-times mr-2"></i> |
| <span>Pas d'e-commerce</span> |
| </li> |
| <li class="flex items-center text-gray-400"> |
| <i class="fas fa-times mr-2"></i> |
| <span>Support basique</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="pricing-card bg-white border-2 border-purple-500 rounded-xl p-8 shadow-lg relative transition duration-300"> |
| <div class="absolute top-0 right-0 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAIRE</div> |
| <div class="mb-6"> |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Professionnel</h3> |
| <p class="text-gray-600">Idéal pour les entreprises et boutiques en ligne</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold text-gray-900">€29</span> |
| <span class="text-gray-500">/mois</span> |
| </div> |
| <button onclick="selectPlan('pro')" class="w-full gradient-bg text-white py-3 rounded-lg font-bold mb-8 hover:opacity-90 transition">Commencer</button> |
| <ul class="space-y-3"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>3 sites web</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Pages illimitées</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>50GB de stockage</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>E-commerce complet</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Support prioritaire</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="pricing-card bg-white border border-gray-200 rounded-xl p-8 transition duration-300"> |
| <div class="mb-6"> |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Entreprise</h3> |
| <p class="text-gray-600">Pour les besoins avancés et le dropshipping</p> |
| </div> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold text-gray-900">€79</span> |
| <span class="text-gray-500">/mois</span> |
| </div> |
| <button onclick="selectPlan('business')" class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mb-8 hover:bg-gray-200 transition">Commencer</button> |
| <ul class="space-y-3"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>10 sites web</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Pages illimitées</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>200GB de stockage</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>E-commerce avancé</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Dropshipping intégré</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <p class="text-gray-600 mb-4">Vous avez des besoins spécifiques ?</p> |
| <button onclick="contactSales()" class="text-purple-600 font-medium hover:text-purple-800 flex items-center justify-center mx-auto"> |
| <i class="fas fa-envelope mr-2"></i> Contactez notre équipe |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg text-white py-20"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à créer votre site web professionnel ?</h2> |
| <p class="text-xl opacity-90 mb-8">Essayez GRC Site Pro gratuitement pendant 14 jours. Aucune carte de crédit requise.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <button onclick="startFreeTrial()" class="bg-white text-purple-600 px-8 py-4 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition text-lg">Commencer gratuitement</button> |
| <button onclick="contactExpert()" class="bg-transparent border-2 border-white px-8 py-4 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition text-lg flex items-center justify-center"> |
| <i class="fas fa-phone-alt mr-2"></i> Parler à un expert |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-20 pb-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-12"> |
| <div class="col-span-2"> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-cube text-purple-400 text-2xl mr-2"></i> |
| <span class="text-xl font-bold">GRC Site Pro</span> |
| </div> |
| <p class="text-gray-400 mb-6">La plateforme tout-en-un pour créer, gérer et développer votre présence en ligne professionnelle.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Produit</h3> |
| <ul class="space-y-3"> |
| <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li> |
| <li><a href="#templates" class="text-gray-400 hover:text-white">Modèles</a></li> |
| <li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li> |
| <li><a href="#" onclick="tryAIBuilder()" class="text-gray-400 hover:text-white">Créateur IA</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Ressources</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Entreprise</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 GRC Site Pro. Tous droits réservés.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a> |
| <a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a> |
| <a href="#" class="text-gray-400 hover:text-white">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| |
| <div id="login-modal" 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 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fas fa-user text-purple-600"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Connexion à votre compte</h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500">Entrez vos identifiants pour accéder à votre espace client.</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5"> |
| <form> |
| <div class="mb-4"> |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
| <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label> |
| <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500"> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="flex items-center"> |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label> |
| </div> |
| <div class="text-sm"> |
| <a href="#" class="font-medium text-purple-600 hover:text-purple-500">Mot de passe oublié?</a> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button onclick="submitLogin()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Se connecter |
| </button> |
| <button onclick="hideLoginModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Annuler |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="demo-modal" 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 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fas fa-play text-purple-600"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Démonstration GRC Site Pro</h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500">Découvrez comment créer votre site web en quelques minutes.</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5"> |
| <div class="bg-black aspect-w-16 aspect-h-9"> |
| <div class="w-full h-96 bg-gray-200 flex items-center justify-center"> |
| <i class="fas fa-play-circle text-6xl text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button onclick="hideDemoModal()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Fermer |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="template-modal" 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 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="template-modal-title">Prévisualisation du modèle</h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500">Visualisez ce modèle sur différents appareils.</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5"> |
| <div class="flex justify-center"> |
| <div class="border-8 border-gray-800 rounded-lg overflow-hidden"> |
| <img id="template-modal-img" src="" alt="Template Preview" class="w-full h-auto max-h-[80vh]"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button onclick="useThisTemplate()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Utiliser ce modèle |
| </button> |
| <button onclick="hideTemplateModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Fermer |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script> |
| |
| function toggleMobileMenu() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| } |
| |
| |
| function showLoginModal() { |
| document.getElementById('login-modal').classList.remove('hidden'); |
| } |
| |
| |
| function hideLoginModal() { |
| document.getElementById('login-modal').classList.add('hidden'); |
| } |
| |
| |
| function submitLogin() { |
| alert('Fonctionnalité de connexion en cours de développement'); |
| hideLoginModal(); |
| } |
| |
| |
| function showDemoVideo() { |
| document.getElementById('demo-modal').classList.remove('hidden'); |
| } |
| |
| |
| function hideDemoModal() { |
| document.getElementById('demo-modal').classList.add('hidden'); |
| } |
| |
| |
| function startFreeTrial() { |
| alert('Essai gratuit démarré ! Redirection vers la page d\'inscription...'); |
| } |
| |
| |
| function previewTemplate(templateType) { |
| let imgSrc = ''; |
| let title = ''; |
| |
| switch(templateType) { |
| case 'ecommerce': |
| imgSrc = 'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'; |
| title = 'Modèle Boutique Moderne'; |
| break; |
| case 'portfolio': |
| imgSrc = 'https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'; |
| title = 'Modèle Portfolio Créatif'; |
| break; |
| case 'corporate': |
| imgSrc = 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'; |
| title = 'Modèle Corporate Pro'; |
| break; |
| } |
| |
| document.getElementById('template-modal-img').src = imgSrc; |
| document.getElementById('template-modal-title').textContent = title; |
| document.getElementById('template-modal').classList.remove('hidden'); |
| } |
| |
| |
| function hideTemplateModal() { |
| document.getElementById('template-modal').classList.add('hidden'); |
| } |
| |
| |
| function useThisTemplate() { |
| alert('Modèle sélectionné ! Redirection vers l\'éditeur...'); |
| hideTemplateModal(); |
| } |
| |
| |
| function showAllTemplates() { |
| alert('Affichage de tous les modèles disponibles...'); |
| } |
| |
| |
| function createEcommerceStore() { |
| alert('Création de votre boutique en ligne...'); |
| } |
| |
| |
| function simulateCheckout() { |
| alert('Simulation de paiement réussie !'); |
| } |
| |
| |
| function generateSiteWithAI() { |
| const input = document.getElementById('ai-input').value; |
| if (input.trim() === '') { |
| alert('Veuillez décrire ce que vous souhaitez pour votre site web'); |
| return; |
| } |
| alert(`Génération en cours pour: "${input}"`); |
| } |
| |
| |
| function tryAIBuilder() { |
| alert('Lancement du créateur de site par IA...'); |
| } |
| |
| |
| function showMoreTestimonials() { |
| alert('Affichage de plus de témoignages...'); |
| } |
| |
| |
| function selectPlan(plan) { |
| alert(`Vous avez sélectionné le plan ${plan}. Redirection vers le paiement...`); |
| } |
| |
| |
| function contactSales() { |
| alert('Contactez notre équipe commerciale à sales@grcsitepro.com'); |
| } |
| |
| |
| function contactExpert() { |
| alert('Un expert vous contactera sous 24h. Merci !'); |
| } |
| </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=docto41/site-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
