Hugging Face's logo

Spaces:
docto41
/
web-gen-ai
Running

App Files Community
1
web-gen-ai / index.html
Cherif12's picture
Cherif12
Update index.html
2ab9b84 verified
raw
history blame
75.7 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGen AI - Esteriore brothers events</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, #3b82f6 0%, #8b5cf6 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover: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);
}
.input-focus:focus {
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}
.wave-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-bg svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.wave-bg .shape-fill {
fill: #FFFFFF;
}
.loading-dots {
display: inline-flex;
align-items: center;
}
.loading-dots span {
width: 8px;
height: 8px;
margin: 0 3px;
background-color: #3b82f6;
border-radius: 50%;
display: inline-block;
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1);
}
}
.site-preview {
transition: all 0.5s ease;
}
.tab-active {
border-bottom: 3px solid #3b82f6;
color: #3b82f6;
font-weight: 600;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Header -->
<header class="gradient-bg text-white relative overflow-hidden">
<div class="container mx-auto px-6 py-12">
<nav class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fas fa-code text-2xl"></i>
<span class="text-xl font-bold">WebGen AI</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#types" class="hover:text-gray-200">Types de sites</a>
<a href="#features" class="hover:text-gray-200">Fonctionnalités</a>
<a href="#examples" class="hover:text-gray-200">Exemples</a>
<a href="#pricing" class="hover:text-gray-200">Tarifs</a>
</div>
<button class="md:hidden text-xl" id="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
</nav>
<div class="mt-16 md:mt-24 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Créez n'importe quel type <br>de site web en minutes</h1>
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">L'IA la plus avancée pour générer des sites web professionnels adaptés à tous vos besoins</p>
<div class="flex justify-center space-x-4">
<button id="try-free-btn" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
Essayer gratuitement
</button>
<button id="see-examples-btn" class="border border-white text-white font-bold px-8 py-4 rounded-full hover:bg-white hover:text-blue-600 transition duration-300">
Voir des exemples
</button>
</div>
</div>
<div class="mt-20 relative">
<div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
<div class="p-1 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
<div class="bg-white p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex space-x-2">
<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="text-sm text-gray-500">www.votresite.com</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 h-64 flex items-center justify-center">
<p class="text-gray-500">Votre site web généré par IA apparaîtra ici</p>
</div>
</div>
</div>
</div>
<div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-6 py-2 rounded-full shadow-md">
<span class="text-blue-600 font-medium">Exemple de rendu</span>
</div>
</div>
</div>
<div class="wave-bg">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</header>
<!-- Site Types Section -->
<section id="types" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Types de sites disponibles</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Choisissez parmi nos nombreux modèles spécialisés</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- E-commerce -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-shopping-cart text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">E-commerce</h3>
<p class="text-gray-600 mb-4">Boutique en ligne complète avec panier, paiement et gestion de produits</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Produits</span>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Panier</span>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Paiement</span>
</div>
</div>
<!-- Blog -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-blog text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Blog</h3>
<p class="text-gray-600 mb-4">Plateforme de publication avec catégories, commentaires et abonnements</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Articles</span>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Commentaires</span>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Newsletter</span>
</div>
</div>
<!-- Portfolio -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-briefcase text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Portfolio</h3>
<p class="text-gray-600 mb-4">Présentation professionnelle de vos travaux et compétences</p>
<div class="flex flex-wrap gap-2">
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Galerie</span>
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">CV</span>
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Contact</span>
</div>
</div>
<!-- SaaS -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-cloud text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Application SaaS</h3>
<p class="text-gray-600 mb-4">Site pour votre logiciel avec espace client et documentation</p>
<div class="flex flex-wrap gap-2">
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Dashboard</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Authentification</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">API</span>
</div>
</div>
<!-- Communauté -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-users text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Communauté</h3>
<p class="text-gray-600 mb-4">Plateforme sociale avec profils, forums et interactions</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Profils</span>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Forum</span>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Messagerie</span>
</div>
</div>
<!-- Événements -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-calendar-alt text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Événements</h3>
<p class="text-gray-600 mb-4">Site pour conférences, festivals ou rencontres professionnelles</p>
<div class="flex flex-wrap gap-2">
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Billetterie</span>
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Programme</span>
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Sponsors</span>
</div>
</div>
<!-- Éducation -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-graduation-cap text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Éducation</h3>
<p class="text-gray-600 mb-4">Plateforme de cours en ligne avec leçons et évaluations</p>
<div class="flex flex-wrap gap-2">
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Cours</span>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Quiz</span>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Certificats</span>
</div>
</div>
<!-- Autre -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
<i class="fas fa-lightbulb text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Autre projet</h3>
<p class="text-gray-600 mb-4">Nous créons le site parfait pour votre besoin spécifique</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Personnalisé</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Unique</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Sur mesure</span>
</div>
</div>
</div>
</div>
</section>
<!-- Generator Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Générateur de site IA</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Décrivez votre projet et notre IA créera un site web personnalisé en temps réel.</p>
</div>
<div class="max-w-5xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
<!-- Tabs -->
<div class="flex border-b border-gray-200">
<button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300 tab-active" data-tab="standard">
<i class="fas fa-bolt mr-2"></i> Standard
</button>
<button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="advanced">
<i class="fas fa-cogs mr-2"></i> Avancé
</button>
<button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="import">
<i class="fas fa-file-import mr-2"></i> Importer
</button>
</div>
<!-- Tab Content -->
<div class="p-8">
<!-- Standard Tab -->
<div id="standard-tab" class="tab-content">
<div class="mb-6">
<label for="site-purpose" class="block text-sm font-medium text-gray-700 mb-2">Quel est le but principal de votre site ?</label>
<select id="site-purpose" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
<option value="">Sélectionnez...</option>
<option value="ecommerce">Vendre des produits/services</option>
<option value="blog">Publier du contenu/blog</option>
<option value="portfolio">Présenter mon travail</option>
<option value="community">Créer une communauté</option>
<option value="education">Enseigner/former</option>
<option value="event">Promouvoir un événement</option>
<option value="other">Autre</option>
</select>
</div>
<div class="mb-6">
<label for="site-description" class="block text-sm font-medium text-gray-700 mb-2">Décrivez votre site en quelques phrases</label>
<textarea id="site-description" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none" placeholder="Ex: Je veux un site pour mon application de gestion de projets avec une page d'accueil explicative, un tableau de bord pour les utilisateurs et une page de tarification."></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<label for="site-style" class="block text-sm font-medium text-gray-700 mb-2">Style préféré</label>
<select id="site-style" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
<option value="">Sélectionnez...</option>
<option value="modern">Moderne et épuré</option>
<option value="creative">Créatif et coloré</option>
<option value="professional">Professionnel et sérieux</option>
<option value="minimal">Minimaliste</option>
<option value="bold">Audacieux et contrasté</option>
</select>
</div>
<div>
<label for="site-pages" class="block text-sm font-medium text-gray-700 mb-2">Pages nécessaires</label>
<select id="site-pages" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
<option value="basic">Accueil, À propos, Contact</option>
<option value="standard">+ Services/Produits, Blog</option>
<option value="advanced">+ Galerie, Équipe, FAQ</option>
<option value="custom">Je spécifierai</option>
</select>
</div>
</div>
</div>
<!-- Advanced Tab -->
<div id="advanced-tab" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="primary-color" class="block text-sm font-medium text-gray-700 mb-2">Couleur principale</label>
<input type="color" id="primary-color" value="#3b82f6" class="w-full h-12 cursor-pointer">
</div>
<div>
<label for="font-family" class="block text-sm font-medium text-gray-700 mb-2">Police d'écriture</label>
<select id="font-family" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
<option value="sans">Sans-serif (moderne)</option>
<option value="serif">Serif (traditionnel)</option>
<option value="mono">Monospace (technique)</option>
<option value="custom">Personnalisée</option>
</select>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Fonctionnalités avancées</label>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="flex items-center">
<input id="multi-language" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="multi-language" class="ml-2 block text-sm text-gray-700">Multilingue</label>
</div>
<div class="flex items-center">
<input id="dark-mode" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="dark-mode" class="ml-2 block text-sm text-gray-700">Mode sombre</label>
</div>
<div class="flex items-center">
<input id="seo-optimized" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="seo-optimized" class="ml-2 block text-sm text-gray-700">Optimisé SEO</label>
</div>
<div class="flex items-center">
<input id="analytics" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="analytics" class="ml-2 block text-sm text-gray-700">Analytics intégré</label>
</div>
<div class="flex items-center">
<input id="membership" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="membership" class="ml-2 block text-sm text-gray-700">Espace membre</label>
</div>
<div class="flex items-center">
<input id="api-ready" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="api-ready" class="ml-2 block text-sm text-gray-700">Prêt pour API</label>
</div>
</div>
</div>
<div class="mb-6">
<label for="tech-stack" class="block text-sm font-medium text-gray-700 mb-2">Stack technique préférée</label>
<select id="tech-stack" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
<option value="auto">Automatique (recommandé)</option>
<option value="react">React + Node.js</option>
<option value="vue">Vue.js + Laravel</option>
<option value="angular">Angular + .NET</option>
<option value="static">HTML/CSS/JS statique</option>
</select>
</div>
</div>
<!-- Import Tab -->
<div id="import-tab" class="tab-content hidden">
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Importer depuis</label>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<button class="border border-gray-300 rounded-lg py-3 px-4 hover:bg-gray-100 transition duration-300 flex items-center justify-center">
<i class="fab fa-figma text-xl text-purple-600 mr-2"></i> Figma
</button>
<button class="border border-gray-300 rounded-lg py-3 px-4 hover:bg-gray-100 transition duration-300 flex items-center justify-center">
<i class="fab fa-wordpress text-xl text-blue-600 mr-2"></i> WordPress
</button>
<button class="border border-gray-300 rounded-lg py-3 px-4 hover:bg-gray-100 transition duration-300 flex items-center justify-center">
<i class="fas fa-file-upload text-xl text-green-600 mr-2"></i> Fichier ZIP
</button>
</div>
</div>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
<p class="text-gray-600 mb-2">Glissez-déposez vos fichiers ici ou</p>
<button class="bg-blue-600 text-white font-medium px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
Parcourir les fichiers
</button>
<p class="text-xs text-gray-500 mt-4">Formats supportés: .fig, .zip, .wpress (max 50MB)</p>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button id="generate-btn" class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 flex items-center justify-center">
<i class="fas fa-magic mr-2"></i> Générer mon site
</button>
<button id="see-examples-btn-2" class="border border-blue-600 text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-blue-50 transition duration-300">
Voir des exemples
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Fonctionnalités puissantes</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Tout ce dont vous avez besoin pour créer le site parfait</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
<i class="fas fa-robot text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">IA avancée</h3>
<p class="text-gray-600">Notre intelligence artificielle comprend votre besoin et crée un site parfaitement adapté.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
<i class="fas fa-paint-brush text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Design personnalisable</h3>
<p class="text-gray-600">Modifiez facilement les couleurs, polices et dispositions pour correspondre à votre marque.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
<i class="fas fa-mobile-alt text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">100% Responsive</h3>
<p class="text-gray-600">Des sites qui s'adaptent parfaitement à tous les appareils, des smartphones aux ordinateurs.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
<i class="fas fa-search-dollar text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">SEO intégré</h3>
<p class="text-gray-600">Structure optimisée pour le référencement dès la génération pour une meilleure visibilité.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
<i class="fas fa-server text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Hébergement inclus</h3>
<p class="text-gray-600">Pas besoin de configurer un hébergeur, votre site est directement en ligne après génération.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md card-hover">
<div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
<i class="fas fa-lock text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Sécurité renforcée</h3>
<p class="text-gray-600">Protection contre les attaques, SSL inclus et mises à jour automatiques de sécurité.</p>
</div>
</div>
</div>
</section>
<!-- Examples Section -->
<section id="examples" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Exemples de sites générés</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Découvrez ce que notre IA peut créer pour vous</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- E-commerce Example -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
<i class="fas fa-shopping-cart text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">Boutique en ligne</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">E-commerce</span>
</div>
<p class="text-gray-600 mb-4">Site complet avec catalogue produits, panier et paiement sécurisé.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">Généré en 2min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="ecommerce">
Voir le démo <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Blog Example -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
<i class="fas fa-blog text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">Blog professionnel</h3>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Publication</span>
</div>
<p class="text-gray-600 mb-4">Plateforme de blog avec système de commentaires et newsletter.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">Généré en 1min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="blog">
Voir le démo <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Portfolio Example -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-pink-400 to-red-500 flex items-center justify-center">
<i class="fas fa-briefcase text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">Portfolio créatif</h3>
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">Présentation</span>
</div>
<p class="text-gray-600 mb-4">Galerie professionnelle pour montrer vos travaux et compétences.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">Généré en 1min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="portfolio">
Voir le démo <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- SaaS Example -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-red-400 to-orange-500 flex items-center justify-center">
<i class="fas fa-cloud text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">Application SaaS</h3>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Logiciel</span>
</div>
<p class="text-gray-600 mb-4">Site pour votre logiciel avec espace client et documentation.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">Généré en 3min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="saas">
Voir le démo <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Community Example -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-orange-400 to-yellow-500 flex items-center justify-center">
<i class="fas fa-users text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">Plateforme communautaire</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Social</span>
</div>
<p class="text-gray-600 mb-4">Réseau social avec profils, forums et messagerie privée.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">Généré en 4min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="community">
Voir le démo <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Event Example -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-yellow-400 to-green-500 flex items-center justify-center">
<i class="fas fa-calendar-alt text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold">Site événementiel</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Événement</span>
</div>
<p class="text-gray-600 mb-4">Site pour conférence avec billetterie, programme et sponsors.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">Généré en 2min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="event">
Voir le démo <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-16">
<button id="see-more-examples-btn" class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 inline-flex items-center">
<i class="fas fa-eye mr-2"></i> Voir plus d'exemples
</button>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tarifs abordables</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Choisissez le plan qui correspond à vos besoins</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free Plan -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-800">Essai gratuit</h3>
<p class="text-gray-600">Parfait pour tester notre plateforme</p>
</div>
<div class="p-6">
<div class="mb-6">
<span class="text-4xl font-bold">0€</span>
<span class="text-gray-500">/mois</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>1 site généré</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Prévisualisation 7 jours</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Types de sites limités</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Pas d'hébergement</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Pas de nom de domaine</span>
</li>
</ul>
<button id="free-plan-btn" class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
Commencer gratuitement
</button>
</div>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transform scale-105">
<div class="bg-blue-600 text-white p-2 text-center text-sm font-bold">
LE PLUS POPULAIRE
</div>
<div class="p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-800">Professionnel</h3>
<p class="text-gray-600">Idéal pour freelances et petites entreprises</p>
</div>
<div class="p-6">
<div class="mb-6">
<span class="text-4xl font-bold">29€</span>
<span class="text-gray-500">/mois</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>5 sites générés/mois</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Hébergement inclus</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Tous types de sites</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Nom de domaine offert</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Support prioritaire</span>
</li>
</ul>
<button id="pro-plan-btn" class="w-full gradient-bg text-white font-bold py-3 rounded-lg hover:opacity-90 transition duration-300">
Choisir ce plan
</button>
</div>
</div>
<!-- Business Plan -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-800">Entreprise</h3>
<p class="text-gray-600">Pour les agences et grandes sociétés</p>
</div>
<div class="p-6">
<div class="mb-6">
<span class="text-4xl font-bold">99€</span>
<span class="text-gray-500">/mois</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Sites illimités</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Hébergement premium</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Fonctionnalités avancées</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Noms de domaine illimités</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Support 24/7</span>
</li>
</ul>
<button id="business-plan-btn" class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
Choisir ce plan
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<p class="text-gray-600">Vous avez besoin d'une solution personnalisée? <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Contactez-nous</a></p>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à créer votre site web?</h2>
<p class="text-xl mb-10 max-w-2xl mx-auto">Essayez gratuitement WebGen AI et découvrez comment créer un site professionnel en quelques minutes.</p>
<button id="cta-btn" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
Commencer maintenant
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-code text-2xl"></i>
<span class="text-xl font-bold">WebGen AI</span>
</div>
<p class="text-gray-400">La solution intelligente pour créer des sites web professionnels sans effort.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Produit</h4>
<ul class="space-y-2">
<li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
<li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li>
<li><a href="#examples" class="text-gray-400 hover:text-white">Exemples</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Ressources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-envelope mr-2 text-gray-400"></i>
<span class="text-gray-400">[email protected]</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone mr-2 text-gray-400"></i>
<span class="text-gray-400">+33 1 23 45 67 89</span>
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
<span class="text-gray-400">Paris, France</span>
</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 WebGen AI. Tous droits réservés.</p>
<div class="flex space-x-6">
<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>
</footer>
<!-- Results Modal -->
<div id="results-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl max-w-6xl w-full max-h-screen overflow-y-auto">
<div class="p-6 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
<h3 class="text-xl font-bold">Votre site web généré</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<div class="flex space-x-2">
<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="text-sm text-gray-500">www.votresite.com</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 h-96 overflow-auto bg-gray-50">
<div id="generated-site" class="bg-white p-4 rounded">
<div class="text-center py-8">
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
<p class="mt-4 text-gray-600">Génération de votre site en cours...</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Nom du site</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg" value="Mon Site Professionnel">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Domaine personnalisé</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="ex: monsite.com">
</div>
</div>
<div class="flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4">
<button id="edit-design-btn" class="border border-gray-300 text-gray-700 font-medium px-6 py-2 rounded-lg hover:bg-gray-50">
Modifier le design
</button>
<button id="publish-site-btn" class="gradient-bg text-white font-bold px-6 py-2 rounded-lg hover:opacity-90">
Publier mon site
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Tab functionality
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
// Remove active class from all buttons
tabBtns.forEach(b => b.classList.remove('tab-active'));
// Add active class to clicked button
this.classList.add('tab-active');
// Hide all tab contents
tabContents.forEach(content => content.classList.add('hidden'));
// Show selected tab content
document.getElementById(`${tabId}-tab`).classList.remove('hidden');
});
});
// Modal functionality
const generateBtn = document.getElementById('generate-btn');
const resultsModal = document.getElementById('results-modal');
const closeModal = document.getElementById('close-modal');
const generatedSite = document.getElementById('generated-site');
generateBtn.addEventListener('click', function() {
resultsModal.classList.remove('hidden');
// Simulate AI generation after 3 seconds
setTimeout(() => {
// Get selected site type
const siteType = document.getElementById('site-purpose').value || 'other';
let siteContent = '';
if (siteType === 'ecommerce') {
siteContent = generateEcommerceSite();
} else if (siteType === 'blog') {
siteContent = generateBlogSite();
} else if (siteType === 'portfolio') {
siteContent = generatePortfolioSite();
} else if (siteType === 'community') {
siteContent = generateCommunitySite();
} else if (siteType === 'education') {
siteContent = generateEducationSite();
} else if (siteType === 'event') {
siteContent = generateEventSite();
} else {
siteContent = generateGenericSite();
}
generatedSite.innerHTML = siteContent;
}, 3000);
});
closeModal.addEventListener('click', function() {
resultsModal.classList.add('hidden');
// Reset the generated site content
generatedSite.innerHTML = `
<div class="text-center py-8">
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
<p class="mt-4 text-gray-600">Génération de votre site en cours...</p>
</div>
`;
});
// Button functionalities
const tryFreeBtn = document.getElementById('try-free-btn');
const seeExamplesBtn = document.getElementById('see-examples-btn');
const seeExamplesBtn2 = document.getElementById('see-examples-btn-2');
const seeMoreExamplesBtn = document.getElementById('see-more-examples-btn');
const freePlanBtn = document.getElementById('free-plan-btn');
const proPlanBtn = document.getElementById('pro-plan-btn');
const businessPlanBtn = document.getElementById('business-plan-btn');
const ctaBtn = document.getElementById('cta-btn');
const editDesignBtn = document.getElementById('edit-design-btn');
const publishSiteBtn = document.getElementById('publish-site-btn');
const demoBtns = document.querySelectorAll('.demo-btn');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
// Scroll to section function
function scrollToSection(sectionId) {
const section = document.querySelector(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
// Button event listeners
tryFreeBtn.addEventListener('click', () => scrollToSection('#pricing'));
seeExamplesBtn.addEventListener('click', () => scrollToSection('#examples'));
seeExamplesBtn2.addEventListener('click', () => scrollToSection('#examples'));
seeMoreExamplesBtn.addEventListener('click', () => scrollToSection('#examples'));
freePlanBtn.addEventListener('click', () => {
scrollToSection('#generator');
setTimeout(() => {
document.getElementById('generate-btn').click();
}, 500);
});
proPlanBtn.addEventListener('click', () => {
scrollToSection('#generator');
setTimeout(() => {
document.getElementById('generate-btn').click();
}, 500);
});
businessPlanBtn.addEventListener('click', () => {
scrollToSection('#generator');
setTimeout(() => {
document.getElementById('generate-btn').click();
}, 500);
});
ctaBtn.addEventListener('click', () => scrollToSection('#pricing'));
editDesignBtn.addEventListener('click', () => {
document.querySelector('[data-tab="advanced"]').click();
resultsModal.classList.add('hidden');
});
publishSiteBtn.addEventListener('click', () => {
alert('Votre site a été publié avec succès!');
resultsModal.classList.add('hidden');
});
demoBtns.forEach(btn => {
btn.addEventListener('click', function() {
const type = this.getAttribute('data-type');
resultsModal.classList.remove('hidden');
setTimeout(() => {
let siteContent = '';
if (type === 'ecommerce') {
siteContent = generateEcommerceSite();
} else if (type === 'blog') {
siteContent = generateBlogSite();
} else if (type === 'portfolio') {
siteContent = generatePortfolioSite();
} else if (type === 'saas') {
siteContent = generateSaasSite();
} else if (type === 'community') {
siteContent = generateCommunitySite();
} else if (type === 'event') {
siteContent = generateEventSite();
}
generatedSite.innerHTML = siteContent;
}, 1000);
});
});
mobileMenuBtn.addEventListener('click', function() {
const nav = document.querySelector('nav div.hidden.md\\:flex');
if (nav.classList.contains('hidden')) {
nav.classList.remove('hidden');
nav.classList.add('flex', 'flex-col', 'absolute', 'top-20', 'right-6', 'bg-white', 'p-4', 'rounded-lg', 'shadow-lg', 'z-50');
} else {
nav.classList.add('hidden');
nav.classList.remove('flex', 'flex-col', 'absolute', 'top-20', 'right-6', 'bg-white', 'p-4', 'rounded-lg', 'shadow-lg', 'z-50');
}
});
// Site generation functions
function generateEcommerceSite() {
return `
<div class="max-w-6xl mx-auto">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-blue-600">Ma Boutique en Ligne</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-800 hover:text-blue-600">Accueil</a>
<a href="#" class="text-gray-800 hover:text-blue-600">Boutique</a>
<a href="#" class="text-gray-800 hover:text-blue-600">Nouveautés</a>
<a href="#" class="text-gray-800 hover:text-blue-600">Contact</a>
</nav>
<div class="flex items-center space-x-4">
<button class="text-gray-800 hover:text-blue-600">
<i class="fas fa-search"></i>
</button>
<button class="text-gray-800 hover:text-blue-600 relative">
<i class="fas fa-shopping-cart"></i>
<span class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Nouvelle Collection</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto">Découvrez nos produits exclusifs avec des réductions allant jusqu'à 30%</p>
<button class="bg-white text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-gray-100 transition duration-300">
Acheter maintenant
</button>
</div>
</section>
<!-- Featured Products -->
<section class="py-16">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold mb-12 text-center">Produits Populaires</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="bg-gray-100 h-48 flex items-center justify-center">
<i class="fas fa-tshirt text-6xl text-gray-400"></i>
</div>
<div class="p-4">
<h3 class="text-lg font-bold mb-2">T-shirt Premium</h3>
<div class="flex justify-between items-center mb-2">
<span class="text-blue-600 font-bold">29,99€</span>
<span class="text-sm text-gray-500 line-through">39,99€</span>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
Ajouter au panier
</button>
</div>
</div>
<!-- Product 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="bg-gray-100 h-48 flex items-center justify-center">
<i class="fas fa-headphones text-6xl text-gray-400"></i>
</div>
<div class="p-4">
<h3 class="text-lg font-bold mb-2">Casque Audio</h3>
<div class="flex justify-between items-center mb-2">
<span class="text-blue-600 font-bold">89,99€</span>
<span class="text-sm text-gray-500 line-through">109,99€</span>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
Ajouter au panier
</button>
</div>
</div>
<!-- Product 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="bg-gray-100 h-48 flex items-center justify-center">
<i class="fas fa-laptop text-6xl text-gray-400"></i>
</div>
<div class="p-4">
<h3 class="text-lg font-bold mb-2">Ordinateur Portable</h3>
<div class="flex justify-between items-center mb-2">
<span class="text-blue-600 font-bold">899,99€</span>
<span class="text-sm text-gray-500 line-through">999,99€</span>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
Ajouter au panier
</button>
</div>
</div>
<!-- Product 4 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="bg-gray-100 h-48 flex items-center justify-center">
<i class="fas fa-shoe-prints text-6xl text-gray-400"></i>
</div>
<div class="p-4">
<h3 class="text-lg font-bold mb-2">Chaussures Sport</h3>
<div class="flex justify-between items-center mb-2">
<span class="text-blue-600 font-bold">59,99€</span>
<span class="text-sm text-gray-500 line-through">79,99€</span>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
Ajouter au panier
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="text-xl font-bold">Ma Boutique en Ligne</div>
<p class="text-gray-400">Paris, France</p>
</div>
<div class="flex space-x-6">
<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-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
© 2023 Ma Boutique en Ligne. Tous droits réservés.
</div>
</div>
</footer>
</div>
`;
}
function generateBlogSite() {
return `
<div class="max-w-6xl mx-auto">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-purple-600">Mon Blog</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-800 hover:text-purple-600">Accueil</a>
<a href="#" class="text-gray-800 hover:text-purple-600">Catégories</a>
<a href="#" class="text-gray-800 hover:text-purple-600">À propos</a>
<a href="#" class="text-gray-800 hover:text-purple-600">Contact</a>
</nav>
<button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition duration-300">
S'abonner
</button>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-purple-500 to-pink-600 text-white py-16">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez mes dernières pensées</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto">Partage d'idées, réflexions et conseils sur divers sujets</p>
<div class="max-w-md mx-auto relative">
<input type="text" placeholder="Rechercher des articles..." class="w-full px-4 py-3 rounded-lg text-gray-800">
<button class="absolute right-2 top-2 text-purple-600">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</section>
<!-- Featured Posts -->
<section class="py-16">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
<!-- Featured Post -->
<div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
<div class="h-64 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
<i class="fas fa-feather-alt text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Technologie</span>
<span class="text-gray-500 text-sm ml-4">15 mai 2023</span>
</div>
<h2 class="text-2xl font-bold mb-
</html>