|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>IA BVL - Générateur de Sites Web Intelligents</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); |
|
|
} |
|
|
.ai-response { |
|
|
border-left: 4px solid #a777e3; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.ai-response:hover { |
|
|
transform: translateX(5px); |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-robot text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">IA BVL</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul class="flex space-x-6"> |
|
|
<li><a href="#" class="hover:text-gray-200 transition">Accueil</a></li> |
|
|
<li><a href="#" class="hover:text-gray-200 transition">Fonctionnalités</a></li> |
|
|
<li><a href="#" class="hover:text-gray-200 transition">Tarifs</a></li> |
|
|
<li><a href="#" class="hover:text-gray-200 transition">Contact</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<button class="bg-white text-purple-600 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition"> |
|
|
Essayer gratuitement |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-20"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Créez des sites web en quelques secondes avec l'IA BVL</h2> |
|
|
<p class="text-xl mb-8">Notre intelligence artificielle avancée génère des sites web complets et personnalisés en fonction de vos besoins.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition pulse-animation"> |
|
|
Commencer maintenant <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition"> |
|
|
Voir la démo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative floating"> |
|
|
<div class="absolute -inset-4 bg-purple-400 rounded-2xl opacity-20 blur"></div> |
|
|
<div class="relative bg-white rounded-2xl shadow-xl p-4 w-80 h-96"> |
|
|
<div class="flex space-x-2 mb-4"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="bg-gray-100 rounded-lg p-4 h-80 overflow-y-auto"> |
|
|
<div class="ai-response bg-white p-4 rounded-lg mb-4 shadow-sm"> |
|
|
<p class="font-semibold text-purple-600">IA BVL:</p> |
|
|
<p>Bonjour! Décrivez-moi le site web que vous souhaitez créer et je le générerai pour vous.</p> |
|
|
</div> |
|
|
<div class="bg-gray-200 p-4 rounded-lg mb-4 shadow-sm"> |
|
|
<p class="font-semibold text-gray-700">Vous:</p> |
|
|
<p>Je veux un site vitrine pour mon restaurant avec menu, galerie photos et formulaire de réservation.</p> |
|
|
</div> |
|
|
<div class="ai-response bg-white p-4 rounded-lg shadow-sm"> |
|
|
<p class="font-semibold text-purple-600">IA BVL:</p> |
|
|
<p>J'ai créé votre site! Voici le lien: <a href="#" class="text-purple-600 underline">restaurant-exemple.bvl.com</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Générateur de Site Web IA</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Décrivez votre projet</h3> |
|
|
<p class="text-gray-600">Plus votre description est précise, meilleur sera le résultat.</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="mb-6"> |
|
|
<label for="project-type" class="block text-sm font-medium text-gray-700 mb-2">Type de projet</label> |
|
|
<select id="project-type" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
<option value="">Sélectionnez un type</option> |
|
|
<option value="portfolio">Portfolio</option> |
|
|
<option value="ecommerce">Boutique en ligne</option> |
|
|
<option value="blog">Blog</option> |
|
|
<option value="business">Site vitrine</option> |
|
|
<option value="landing">Page de destination</option> |
|
|
<option value="other">Autre</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="project-description" class="block text-sm font-medium text-gray-700 mb-2">Description détaillée</label> |
|
|
<textarea id="project-description" rows="6" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Ex: Je veux un site pour mon agence immobilière avec une galerie de propriétés, un formulaire de contact et une carte interactive..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label for="style-preference" class="block text-sm font-medium text-gray-700 mb-2">Style préféré</label> |
|
|
<select id="style-preference" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
<option value="">Choisissez un style</option> |
|
|
<option value="modern">Moderne</option> |
|
|
<option value="minimal">Minimaliste</option> |
|
|
<option value="vintage">Vintage</option> |
|
|
<option value="professional">Professionnel</option> |
|
|
<option value="creative">Créatif</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="color-scheme" class="block text-sm font-medium text-gray-700 mb-2">Schéma de couleurs</label> |
|
|
<select id="color-scheme" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
<option value="">Choisissez une palette</option> |
|
|
<option value="purple">Violet/Blanc</option> |
|
|
<option value="blue">Bleu/Blanc</option> |
|
|
<option value="dark">Mode sombre</option> |
|
|
<option value="light">Mode clair</option> |
|
|
<option value="custom">Personnalisé</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center mb-6"> |
|
|
<input id="responsive-design" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked> |
|
|
<label for="responsive-design" class="ml-2 block text-sm text-gray-700">Design responsive (adapté mobile)</label> |
|
|
</div> |
|
|
|
|
|
<button id="generate-btn" class="w-full bg-purple-600 text-white py-4 px-6 rounded-lg font-bold hover:bg-purple-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Générer mon site web |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4">Pourquoi choisir IA BVL?</h2> |
|
|
<p class="text-xl text-center text-gray-600 mb-12 max-w-2xl mx-auto">Notre intelligence artificielle combine 2123 modèles spécialisés pour créer le site web parfait.</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-bolt text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Rapide</h3> |
|
|
<p class="text-gray-600">Générez un site web complet en moins de 60 secondes. Plus besoin de passer des heures à coder ou concevoir.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-cogs text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Personnalisable</h3> |
|
|
<p class="text-gray-600">Modifiez facilement chaque élément de votre site grâce à notre éditeur visuel intuitif.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-shield-alt text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Sécurisé</h3> |
|
|
<p class="text-gray-600">Hébergement sécurisé, mises à jour automatiques et protection contre les attaques inclus.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-mobile-alt text-yellow-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Optimisé mobile</h3> |
|
|
<p class="text-gray-600">Tous les sites sont automatiquement optimisés pour les appareils mobiles et tablettes.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-chart-line text-red-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">SEO intégré</h3> |
|
|
<p class="text-gray-600">Notre IA optimise automatiquement votre site pour les moteurs de recherche.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-globe text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Multilingue</h3> |
|
|
<p class="text-gray-600">Créez des sites en plusieurs langues avec notre système de traduction automatique.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Exemples de sites générés</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Site e-commerce" class="w-full h-48 object-cover"> |
|
|
<div class="absolute inset-0 bg-purple-600 opacity-0 hover:opacity-70 flex items-center justify-center transition"> |
|
|
<button class="text-white border-2 border-white px-4 py-2 rounded-full font-semibold">Voir le site</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-xl mb-2">Boutique de mode</h3> |
|
|
<p class="text-gray-600 mb-4">Site e-commerce avec catalogue produits, panier et paiement sécurisé.</p> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">e-commerce</span> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">moderne</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Site portfolio" class="w-full h-48 object-cover"> |
|
|
<div class="absolute inset-0 bg-purple-600 opacity-0 hover:opacity-70 flex items-center justify-center transition"> |
|
|
<button class="text-white border-2 border-white px-4 py-2 rounded-full font-semibold">Voir le site</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-xl mb-2">Portfolio créatif</h3> |
|
|
<p class="text-gray-600 mb-4">Site portfolio pour photographe avec galerie et formulaire de contact.</p> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">portfolio</span> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">minimaliste</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Site entreprise" class="w-full h-48 object-cover"> |
|
|
<div class="absolute inset-0 bg-purple-600 opacity-0 hover:opacity-70 flex items-center justify-center transition"> |
|
|
<button class="text-white border-2 border-white px-4 py-2 rounded-full font-semibold">Voir le site</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-xl mb-2">Site corporate</h3> |
|
|
<p class="text-gray-600 mb-4">Site vitrine professionnel avec présentation d'équipe et blog intégré.</p> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">entreprise</span> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">professionnel</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="border-2 border-purple-600 text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-600 hover:text-white transition"> |
|
|
Voir plus d'exemples <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos utilisateurs</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"J'ai créé mon site e-commerce en 5 minutes alors que je n'y connais rien en tech. Incroyable!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Marie D." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Marie D.</h4> |
|
|
<p class="text-gray-500 text-sm">Créatrice de bijoux</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"En tant que freelance, IA BVL m'a permis de proposer des sites web à mes clients sans passer des heures à coder."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas L." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Thomas L.</h4> |
|
|
<p class="text-gray-500 text-sm">Designer freelance</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"Le SEO intégré est fantastique. Mon site est bien classé sur Google sans que je n'aie rien à faire."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sophie R." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Sophie R.</h4> |
|
|
<p class="text-gray-500 text-sm">Consultante marketing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Prêt à créer votre site web?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Essayez IA BVL gratuitement et découvrez comment notre intelligence artificielle peut transformer vos idées en réalité.</p> |
|
|
<button class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition text-lg"> |
|
|
Commencer maintenant <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> IA BVL |
|
|
</h3> |
|
|
<p class="text-gray-400">L'intelligence artificielle qui crée des sites web parfaits en quelques secondes.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Produit</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Exemples</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Ressources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@iabvl.com</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> Paris, France</li> |
|
|
</ul> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 IA BVL. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Conditions</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="generation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4"> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-cog fa-spin text-purple-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Génération en cours</h3> |
|
|
<p class="text-gray-600 mb-6">Notre IA combine 2123 modèles spécialisés pour créer votre site web parfait.</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-6"> |
|
|
<div id="progress-bar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<p id="generation-status" class="text-sm text-gray-500">Analyse de votre demande...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="result-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-8 max-w-2xl w-full mx-4"> |
|
|
<div class="flex justify-between items-start mb-6"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-2">Votre site est prêt!</h3> |
|
|
<p class="text-gray-600">Voici le résultat généré par notre IA.</p> |
|
|
</div> |
|
|
<button id="close-modal" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 mb-6"> |
|
|
<div class="flex items-center justify-center space-x-4"> |
|
|
<div class="text-green-500 text-4xl"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Site généré avec succès</h4> |
|
|
<p class="text-gray-600">Lien: <a href="#" class="text-purple-600 underline">mon-site.bvl.com</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="border border-gray-200 rounded-lg p-4"> |
|
|
<h4 class="font-semibold mb-3">Actions disponibles</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center text-purple-600 hover:text-purple-800"> |
|
|
<i class="fas fa-external-link-alt mr-2"></i> Visiter le site |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center text-purple-600 hover:text-purple-800"> |
|
|
<i class="fas fa-edit mr-2"></i> Modifier le design |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center text-purple-600 hover:text-purple-800"> |
|
|
<i class="fas fa-download mr-2"></i> Télécharger le code |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4"> |
|
|
<h4 class="font-semibold mb-3">Prochaines étapes</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> Ajouter un nom de domaine |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> Configurer le SEO |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> Activer les statistiques |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<button class="flex-1 bg-purple-600 text-white py-3 rounded-lg font-bold hover:bg-purple-700 transition"> |
|
|
Publier maintenant |
|
|
</button> |
|
|
<button class="flex-1 border border-purple-600 text-purple-600 py-3 rounded-lg font-bold hover:bg-purple-50 transition"> |
|
|
Personnaliser davantage |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('generate-btn').addEventListener('click', function() { |
|
|
const modal = document.getElementById('generation-modal'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const statusText = document.getElementById('generation-status'); |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
|
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress > 100) progress = 100; |
|
|
progressBar.style.width = progress + '%'; |
|
|
|
|
|
if (progress < 30) { |
|
|
statusText.textContent = "Analyse de votre demande..."; |
|
|
} else if (progress < 60) { |
|
|
statusText.textContent = "Création de la structure du site..."; |
|
|
} else if (progress < 90) { |
|
|
statusText.textContent = "Optimisation du design et du contenu..."; |
|
|
} else { |
|
|
statusText.textContent = "Finalisation..."; |
|
|
} |
|
|
|
|
|
if (progress === 100) { |
|
|
clearInterval(interval); |
|
|
setTimeout(() => { |
|
|
modal.classList.add('hidden'); |
|
|
document.getElementById('result-modal').classList.remove('hidden'); |
|
|
}, 500); |
|
|
} |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-modal').addEventListener('click', function() { |
|
|
document.getElementById('result-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', function(event) { |
|
|
if (event.target === document.getElementById('generation-modal')) { |
|
|
document.getElementById('generation-modal').classList.add('hidden'); |
|
|
} |
|
|
if (event.target === document.getElementById('result-modal')) { |
|
|
document.getElementById('result-modal').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=docto41/ia-bvl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
