Hugging Face's logo

Spaces:
docto41
/
sitegenmatrix
Running

App Files Community
sitegenmatrix / index.html
docto41's picture
docto41
Add 3 files
39a8ec5 verified
raw
history blame contribute delete
79.6 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SiteGenMatrix - Générateur de Sites Web par IA</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
:root {
 --primary: #00f0ff;
 --secondary: #7b2dff;
 --dark: #0a0a1a;
 --light: #f0f8ff;
 }
body {
 font-family: 'Roboto', sans-serif;
 background-color: var(--dark);
 color: var(--light);
 overflow-x: hidden;
 }
.futuristic-text {
 font-family: 'Orbitron', sans-serif;
 }
.gradient-text {
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.glow {
 box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
 }
.holographic {
 background: linear-gradient(135deg, rgba(11, 13, 27, 0.8), rgba(33, 7, 77, 0.8));
 backdrop-filter: blur(10px);
 border: 1px solid rgba(0, 240, 255, 0.2);
 }
.cyber-input {
 background: rgba(10, 10, 26, 0.7);
 border: 1px solid var(--primary);
 color: var(--light);
 transition: all 0.3s;
 }
.cyber-input:focus {
 outline: none;
 box-shadow: 0 0 10px var(--primary);
 border-color: var(--secondary);
 }
.pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% {
 box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7);
 }
 70% {
 box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
 }
 }
.neon-btn {
 background: linear-gradient(45deg, var(--primary), var(--secondary));
 color: var(--dark);
 font-weight: bold;
 transition: all 0.3s;
 position: relative;
 overflow: hidden;
 }
.neon-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(0, 240, 255, 0.4);
 }
.neon-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 transition: all 0.5s;
 }
.neon-btn:hover::before {
 left: 100%;
 }
.grid-pattern {
 background-image:
linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
 background-size: 20px 20px;
 }
.website-preview {
 transform: perspective(1000px) rotateX(10deg);
 transition: all 0.5s;
 }
.website-preview:hover {
 transform: perspective(1000px) rotateX(0deg);
 }
.scanline {
 position: relative;
 overflow: hidden;
 }
.scanline::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 100%;
 background: linear-gradient(
 to bottom,
 transparent 0%,
 rgba(0, 240, 255, 0.05) 50%,
 transparent 100%
 );
 animation: scan 8s linear infinite;
 }
@keyframes scan {
 0% {
 transform: translateY(-100%);
 }
 100% {
 transform: translateY(100%);
 }
 }
 </style>
</head>
<body class="grid-pattern">
 <div class="min-h-screen flex flex-col">
 <!-- Header -->
 <header class="holographic py-6 px-4 sm:px-6 lg:px-8 border-b border-cyan-500/20">
 <div class="max-w-7xl mx-auto flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 flex items-center justify-center glow">
 <i class="fas fa-matrix text-white text-xl"></i>
 </div>
 <h1 class="futuristic-text text-2xl font-bold gradient-text">SiteGenMatrix</h1>
 </div>
 <nav class="hidden md:flex space-x-8">
 <a href="#" class="text-cyan-300 hover:text-white transition">Fonctionnalités</a>
 <a href="#" class="text-cyan-300 hover:text-white transition">Exemples</a>
 <a href="#" class="text-cyan-300 hover:text-white transition">Tarifs</a>
 <a href="#" class="text-cyan-300 hover:text-white transition">API</a>
 </nav>
 <button class="neon-btn px-6 py-2 rounded-full text-sm font-bold">
 <i class="fas fa-user-astronaut mr-2"></i> Connexion
 </button>
 </div>
 </header>
<!-- Main Content -->
 <main class="flex-grow">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 <div class="text-center mb-16">
 <h2 class="futuristic-text text-4xl md:text-6xl font-bold mb-6 gradient-text">
 <span class="text-white">Créez</span> des sites web réels <span class="text-white">instantanément</span>
 </h2>
 <p class="text-xl text-cyan-100 max-w-3xl mx-auto">
 Décrivez simplement votre vision et notre IA puissante générera un site web complet et fonctionnel.
 </p>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 <!-- Generator Form -->
 <div class="holographic p-8 rounded-xl border border-cyan-500/30 scanline">
 <h3 class="futuristic-text text-2xl font-bold mb-6 gradient-text">Description de votre site</h3>
<div class="space-y-6">
 <div>
 <label class="block text-cyan-300 mb-2">Nom du site</label>
 <input type="text" id="siteName" class="cyber-input w-full px-4 py-3 rounded-lg" placeholder="ex: Solutions Tech Quantique">
 </div>
<div>
 <label class="block text-cyan-300 mb-2">Type de site</label>
 <select id="siteType" class="cyber-input w-full px-4 py-3 rounded-lg">
 <option value="business">Entreprise/Corporate</option>
 <option value="ecommerce">E-commerce</option>
 <option value="portfolio">Portfolio</option>
 <option value="blog">Blog/Actualités</option>
 <option value="saas">SaaS/Application Web</option>
 <option value="custom">Personnalisé</option>
 </select>
 </div>
<div>
 <label class="block text-cyan-300 mb-2">Décrivez votre site web</label>
 <textarea id="siteDescription" class="cyber-input w-full px-4 py-3 rounded-lg min-h-[150px]" placeholder="Décrivez l'objectif, les fonctionnalités et les préférences de design pour votre site..."></textarea>
 </div>
<div class="grid grid-cols-2 gap-4">
 <div>
 <label class="block text-cyan-300 mb-2">Schéma de couleurs</label>
 <select id="colorScheme" class="cyber-input w-full px-4 py-3 rounded-lg">
 <option value="futuristic">Futuriste</option>
 <option value="minimal">Minimaliste</option>
 <option value="dark">Sombre</option>
 <option value="light">Clair</option>
 <option value="vibrant">Vibrant</option>
 </select>
 </div>
 <div>
 <label class="block text-cyan-300 mb-2">Style de mise en page</label>
 <select id="layoutStyle" class="cyber-input w-full px-4 py-3 rounded-lg">
 <option value="modern">Moderne</option>
 <option value="grid">Grille</option>
 <option value="asymmetrical">Asymétrique</option>
 <option value="fullscreen">Plein écran</option>
 </select>
 </div>
 </div>
<div class="pt-4">
 <button id="generateBtn" class="neon-btn w-full px-6 py-4 rounded-lg text-lg font-bold pulse">
 <i class="fas fa-bolt mr-2"></i> Générer le Site
 </button>
 </div>
 </div>
 </div>
<!-- Preview Area -->
 <div class="relative">
 <div class="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-xl blur opacity-75"></div>
 <div id="previewContainer" class="holographic relative rounded-xl p-6 h-[500px] overflow-y-auto website-preview">
 <div class="flex flex-col items-center justify-center h-full text-center">
 <div class="w-20 h-20 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 flex items-center justify-center mb-6 glow">
 <i class="fas fa-globe text-white text-3xl"></i>
 </div>
 <h3 class="futuristic-text text-2xl font-bold mb-2 gradient-text">Aperçu du Site</h3>
 <p class="text-cyan-200 max-w-md">
 Votre site généré apparaîtra ici. Décrivez votre vision et voyez-la prendre vie instantanément.
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Advanced Options -->
 <div class="mt-16">
 <div class="flex items-center justify-between mb-6">
 <h3 class="futuristic-text text-2xl font-bold gradient-text">Options avancées</h3>
 <button id="toggleAdvanced" class="text-cyan-300 hover:text-white transition flex items-center">
 <i class="fas fa-cog mr-2"></i> Afficher les options
 </button>
 </div>
<div id="advancedOptions" class="holographic p-6 rounded-xl border border-cyan-500/30 hidden">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div>
 <label class="block text-cyan-300 mb-2">Pages requises</label>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2" checked> Accueil
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> À propos
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Services
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Contact
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Blog
 </label>
 </div>
 </div>
<div>
 <label class="block text-cyan-300 mb-2">Fonctionnalités spéciales</label>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Animations
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Effet Parallax
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Mode sombre
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Fond vidéo
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Éléments 3D
 </label>
 </div>
 </div>
<div>
 <label class="block text-cyan-300 mb-2">Options d'intégration</label>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Google Analytics
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Réseaux sociaux
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Passerelle de paiement
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Newsletter
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="cyber-input mr-2"> Chat en direct
 </label>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="holographic border-t border-cyan-500/20 py-8">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">SiteGenMatrix</h4>
 <p class="text-cyan-100">
 Le générateur de sites web IA le plus avancé au monde. Créez des sites réels et fonctionnels instantanément.
 </p>
 </div>
 <div>
 <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">Produit</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Fonctionnalités</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Tarifs</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white transition">API</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Roadmap</a></li>
 </ul>
 </div>
 <div>
 <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">Ressources</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Documentation</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Tutoriels</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Blog</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white transition">Support</a></li>
 </ul>
 </div>
 <div>
 <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">Contact</h4>
 <div class="flex space-x-4">
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-github"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-discord"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-linkedin"></i>
 </a>
 </div>
 </div>
 </div>
 <div class="border-t border-cyan-500/20 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
 <p class="text-cyan-300">© 2023 SiteGenMatrix. Tous droits réservés.</p>
 <div class="flex space-x-6 mt-4 md:mt-0">
 <a href="#" class="text-cyan-300 hover:text-white transition">Confidentialité</a>
 <a href="#" class="text-cyan-300 hover:text-white transition">Conditions</a>
 <a href="#" class="text-cyan-300 hover:text-white transition">Cookies</a>
 </div>
 </div>
 </div>
 </footer>
 </div>
<script>
 // Toggle advanced options
 document.getElementById('toggleAdvanced').addEventListener('click', function() {
 const advancedOptions = document.getElementById('advancedOptions');
 const icon = this.querySelector('i');
if (advancedOptions.classList.contains('hidden')) {
 advancedOptions.classList.remove('hidden');
 icon.classList.remove('fa-cog');
 icon.classList.add('fa-times');
 this.innerHTML = '<i class="fas fa-times mr-2"></i> Masquer les options';
 } else {
 advancedOptions.classList.add('hidden');
 icon.classList.remove('fa-times');
 icon.classList.add('fa-cog');
 this.innerHTML = '<i class="fas fa-cog mr-2"></i> Afficher les options';
 }
 });
 // Generate website
 document.getElementById('generateBtn').addEventListener('click', function() {
 const siteName = document.getElementById('siteName').value || 'Mon Site Web';
 const siteType = document.getElementById('siteType').value;
 const description = document.getElementById('siteDescription').value || 'Un site web moderne avec un excellent design et des fonctionnalités avancées.';
 const colorScheme = document.getElementById('colorScheme').value;
 const layoutStyle = document.getElementById('layoutStyle').value;
// Show loading state
 const btn = this;
 const originalText = btn.innerHTML;
 btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Génération en cours...';
 btn.disabled = true;
// Simulate generation process
 setTimeout(() => {
 // Generate the website preview
 generateWebsitePreview(siteName, siteType, description, colorScheme, layoutStyle);
// Restore button
 btn.innerHTML = originalText;
 btn.disabled = false;
 }, 2000);
 });
function generateWebsitePreview(name, type, description, colorScheme, layoutStyle) {
 const previewContainer = document.getElementById('previewContainer');
// Determine template based on type
 let template;
 switch(type) {
 case 'business':
 template = generateBusinessTemplate(name, description, colorScheme, layoutStyle);
 break;
 case 'ecommerce':
 template = generateEcommerceTemplate(name, description, colorScheme, layoutStyle);
 break;
 case 'portfolio':
 template = generatePortfolioTemplate(name, description, colorScheme, layoutStyle);
 break;
 case 'blog':
 template = generateBlogTemplate(name, description, colorScheme, layoutStyle);
 break;
 case 'saas':
 template = generateSaasTemplate(name, description, colorScheme, layoutStyle);
 break;
 default:
 template = generateCustomTemplate(name, description, colorScheme, layoutStyle);
 }
previewContainer.innerHTML = template;
// Add animation to show generation is complete
 previewContainer.classList.add('glow');
 setTimeout(() => {
 previewContainer.classList.remove('glow');
 }, 1000);
 }
function generateBusinessTemplate(name, description, colorScheme, layoutStyle) {
 return `
 <div class="h-full">
 <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
 <div class="text-2xl font-bold gradient-text">${name}</div>
 <nav class="flex space-x-6">
 <a href="#" class="text-cyan-300 hover:text-white">Accueil</a>
 <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
 <a href="#" class="text-cyan-300 hover:text-white">Services</a>
 <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
 </nav>
 </header>
<main>
 <section class="mb-12">
 <div class="h-64 rounded-xl bg-gradient-to-r from-cyan-900/50 to-purple-900/50 mb-8 flex items-center justify-center">
 <h1 class="text-4xl font-bold text-center">Bienvenue chez ${name}</h1>
 </div>
 <p class="text-cyan-100 mb-6">${description}</p>
 <button class="neon-btn px-6 py-2 rounded-full">En savoir plus</button>
 </section>
<section class="mb-12">
 <h2 class="text-2xl font-bold gradient-text mb-6">Nos Services</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="holographic p-6 rounded-lg">
 <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-chart-line text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Croissance d'entreprise</h3>
 <p class="text-cyan-100">Stratégies pour développer votre entreprise et augmenter vos revenus.</p>
 </div>
 <div class="holographic p-6 rounded-lg">
 <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-globe text-purple-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Présence digitale</h3>
 <p class="text-cyan-100">Construisez votre identité en ligne avec nos solutions digitales.</p>
 </div>
 <div class="holographic p-6 rounded-lg">
 <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-users text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Consulting</h3>
 <p class="text-cyan-100">Conseils d'experts adaptés aux besoins de votre entreprise.</p>
 </div>
 </div>
 </section>
 </main>
<footer class="mt-12 pt-6 border-t border-cyan-500/20 text-center text-cyan-300">
 <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
 </footer>
 </div>
 `;
 }
function generateEcommerceTemplate(name, description, colorScheme, layoutStyle) {
 return `
 <div class="h-full">
 <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
 <div class="text-2xl font-bold gradient-text">${name}</div>
 <div class="flex items-center space-x-6">
 <nav class="flex space-x-6">
 <a href="#" class="text-cyan-300 hover:text-white">Boutique</a>
 <a href="#" class="text-cyan-300 hover:text-white">Catégories</a>
 <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
 </nav>
 <div class="flex space-x-4">
 <button class="text-cyan-300 hover:text-white">
 <i class="fas fa-search"></i>
 </button>
 <button class="text-cyan-300 hover:text-white">
 <i class="fas fa-user"></i>
 </button>
 <button class="text-cyan-300 hover:text-white relative">
 <i class="fas fa-shopping-cart"></i>
 <span class="absolute -top-2 -right-2 bg-cyan-500 text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
 </button>
 </div>
 </div>
 </header>
<main>
 <section class="mb-12">
 <div class="h-64 rounded-xl bg-gradient-to-r from-purple-900/50 to-cyan-900/50 mb-8 flex items-center justify-center">
 <div class="text-center">
 <h1 class="text-4xl font-bold mb-4">${name}</h1>
 <p class="text-xl text-cyan-100 max-w-2xl mx-auto">${description}</p>
 </div>
 </div>
<h2 class="text-2xl font-bold gradient-text mb-6">Produits phares</h2>
 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
 ${[1, 2, 3, 4].map(i => `
 <div class="holographic rounded-lg overflow-hidden">
 <div class="h-40 bg-cyan-900/30 flex items-center justify-center">
 <i class="fas fa-box-open text-4xl text-cyan-300"></i>
 </div>
 <div class="p-4">
 <h3 class="font-bold mb-2">Produit Premium ${i}</h3>
 <p class="text-cyan-100 text-sm mb-3">Article de haute qualité avec des fonctionnalités exceptionnelles</p>
 <div class="flex justify-between items-center">
 <span class="font-bold">${(99 + i * 10).toFixed(2)}€</span>
 <button class="text-xs neon-btn px-3 py-1 rounded-full">Ajouter au panier</button>
 </div>
 </div>
 </div>
 `).join('')}
 </div>
 </section>
 </main>
<footer class="mt-12 pt-6 border-t border-cyan-500/20">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="font-bold gradient-text mb-4">${name}</h3>
 <p class="text-cyan-100 text-sm">${description.substring(0, 100)}...</p>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Boutique</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Tous les produits</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Produits phares</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Nouveautés</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Offres spéciales</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Service client</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Contactez-nous</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">FAQ</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Livraison</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Retours</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Suivez-nous</h3>
 <div class="flex space-x-4">
 <a href="#" class="w-8 h-8 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-facebook-f text-xs"></i>
 </a>
 <a href="#" class="w-8 h-8 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-twitter text-xs"></i>
 </a>
 <a href="#" class="w-8 h-8 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
 <i class="fab fa-instagram text-xs"></i>
 </a>
 </div>
 </div>
 </div>
 <div class="mt-8 pt-6 border-t border-cyan-500/20 text-center text-sm text-cyan-300">
 <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
 </div>
 </footer>
 </div>
 `;
 }
function generatePortfolioTemplate(name, description, colorScheme, layoutStyle) {
 return `
 <div class="h-full">
 <header class="flex flex-col items-center py-8 mb-8 text-center">
 <div class="w-24 h-24 rounded-full bg-gradient-to-r from-cyan-500 to-purple-600 mb-4 flex items-center justify-center">
 <i class="fas fa-user-astronaut text-3xl text-white"></i>
 </div>
 <h1 class="text-3xl font-bold gradient-text mb-2">${name}</h1>
 <p class="text-cyan-300 max-w-md">${description}</p>
 <nav class="flex space-x-6 mt-6">
 <a href="#" class="text-cyan-300 hover:text-white">Projets</a>
 <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
 <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
 </nav>
 </header>
<main>
 <section class="mb-12">
 <h2 class="text-2xl font-bold gradient-text mb-6 text-center">Projets récents</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 ${[1, 2, 3, 4].map(i => `
 <div class="holographic rounded-xl overflow-hidden">
 <div class="h-48 bg-gradient-to-br from-cyan-900/30 to-purple-900/30 flex items-center justify-center">
 <i class="fas fa-project-diagram text-4xl text-cyan-300"></i>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-2">Projet ${i}</h3>
 <p class="text-cyan-100 mb-4">${description.substring(0, 100)}...</p>
 <div class="flex space-x-3">
 <span class="text-xs px-2 py-1 bg-cyan-900/30 rounded-full">Design</span>
 <span class="text-xs px-2 py-1 bg-purple-900/30 rounded-full">Développement</span>
 </div>
 </div>
 </div>
 `).join('')}
 </div>
 </section>
<section class="holographic rounded-xl p-8 mb-12">
 <h2 class="text-2xl font-bold gradient-text mb-6">À propos</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="md:col-span-2">
 <p class="text-cyan-100 mb-4">${description}</p>
 <p class="text-cyan-100">Avec des années d'expérience dans mon domaine, j'ai travaillé avec des clients de divers secteurs pour fournir des résultats exceptionnels.</p>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Compétences</h3>
 <ul class="space-y-3">
 <li>
 <div class="flex justify-between mb-1">
 <span class="text-cyan-300">Design Web</span>
 <span class="text-cyan-300">90%</span>
 </div>
 <div class="w-full bg-cyan-900/30 rounded-full h-1.5">
 <div class="bg-gradient-to-r from-cyan-500 to-purple-600 h-1.5 rounded-full" style="width: 90%"></div>
 </div>
 </li>
 <li>
 <div class="flex justify-between mb-1">
 <span class="text-cyan-300">Développement</span>
 <span class="text-cyan-300">85%</span>
 </div>
 <div class="w-full bg-cyan-900/30 rounded-full h-1.5">
 <div class="bg-gradient-to-r from-cyan-500 to-purple-600 h-1.5 rounded-full" style="width: 85%"></div>
 </div>
 </li>
 <li>
 <div class="flex justify-between mb-1">
 <span class="text-cyan-300">Photographie</span>
 <span class="text-cyan-300">75%</span>
 </div>
 <div class="w-full bg-cyan-900/30 rounded-full h-1.5">
 <div class="bg-gradient-to-r from-cyan-500 to-purple-600 h-1.5 rounded-full" style="width: 75%"></div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </section>
 </main>
<footer class="mt-12 pt-8 border-t border-cyan-500/20 text-center">
 <div class="flex justify-center space-x-6 mb-6">
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-linkedin-in"></i>
 </a>
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-github"></i>
 </a>
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-dribbble"></i>
 </a>
 </div>
 <p class="text-cyan-300">© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
 </footer>
 </div>
 `;
 }
function generateBlogTemplate(name, description, colorScheme, layoutStyle) {
 return `
 <div class="h-full">
 <header class="py-8 mb-8 text-center border-b border-cyan-500/20">
 <h1 class="text-4xl font-bold gradient-text mb-2">${name}</h1>
 <p class="text-cyan-300 max-w-2xl mx-auto">${description}</p>
 <nav class="flex justify-center space-x-8 mt-8">
 <a href="#" class="text-cyan-300 hover:text-white">Accueil</a>
 <a href="#" class="text-cyan-300 hover:text-white">Catégories</a>
 <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
 <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
 </nav>
 </header>
<main class="max-w-4xl mx-auto">
 <section class="mb-12">
 <article class="holographic rounded-xl overflow-hidden mb-8">
 <div class="h-64 bg-gradient-to-r from-purple-900/50 to-cyan-900/50 flex items-center justify-center">
 <i class="fas fa-feather-alt text-5xl text-cyan-300"></i>
 </div>
 <div class="p-8">
 <div class="flex items-center space-x-4 mb-4">
 <span class="text-xs px-3 py-1 bg-cyan-900/30 rounded-full">Technologie</span>
 <span class="text-xs text-cyan-300">15 mai 2023</span>
 </div>
 <h2 class="text-2xl font-bold mb-4">Le futur du développement web</h2>
 <p class="text-cyan-100 mb-6">${description.substring(0, 200)}...</p>
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <div class="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center">
 <i class="fas fa-user text-cyan-300"></i>
 </div>
 <span class="text-sm text-cyan-300">Par Admin</span>
 </div>
 <a href="#" class="text-sm neon-btn px-4 py-2 rounded-full">Lire plus</a>
 </div>
 </div>
 </article>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 ${[1, 2, 3, 4].map(i => `
 <article class="holographic rounded-xl overflow-hidden">
 <div class="h-40 bg-gradient-to-r from-cyan-900/50 to-purple-900/50 flex items-center justify-center">
 <i class="fas fa-${i%2===0?'code':'chart-pie'} text-3xl text-cyan-300"></i>
 </div>
 <div class="p-6">
 <div class="flex items-center space-x-4 mb-3">
 <span class="text-xs px-2 py-1 bg-cyan-900/30 rounded-full">${i%2===0?'Tech':'Business'}</span>
 <span class="text-xs text-cyan-300">${10+i} mai 2023</span>
 </div>
 <h3 class="text-lg font-bold mb-3">${i%2===0?'Nouveau Framework':'Analyse des tendances'}</h3>
 <p class="text-cyan-100 text-sm mb-4">${description.substring(0, 100)}...</p>
 <a href="#" class="text-sm text-cyan-300 hover:text-white inline-flex items-center">
 Lire plus <i class="fas fa-arrow-right ml-2 text-xs"></i>
 </a>
 </div>
 </article>
 `).join('')}
 </div>
 </section>
<div class="flex justify-center">
 <nav class="flex space-x-2">
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">1</a>
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">2</a>
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">3</a>
 <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">
 <i class="fas fa-chevron-right"></i>
 </a>
 </nav>
 </div>
 </main>
<footer class="mt-16 py-8 border-t border-cyan-500/20">
 <div class="max-w-4xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <h3 class="font-bold gradient-text mb-4">${name}</h3>
 <p class="text-cyan-100 text-sm">${description.substring(0, 120)}...</p>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Catégories</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Technologie</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Business</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Design</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Lifestyle</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">S'abonner</h3>
 <p class="text-cyan-100 text-sm mb-3">Recevez les derniers articles directement dans votre boîte mail</p>
 <div class="flex">
 <input type="email" placeholder="Votre email" class="cyber-input flex-grow px-4 py-2 rounded-l-lg text-sm">
 <button class="neon-btn px-4 py-2 rounded-r-lg text-sm">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
 <div class="mt-8 pt-6 border-t border-cyan-500/20 text-center text-sm text-cyan-300">
 <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
 </div>
 </div>
 </footer>
 </div>
 `;
 }
function generateSaasTemplate(name, description, colorScheme, layoutStyle) {
 return `
 <div class="h-full">
 <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
 <div class="flex items-center space-x-2">
 <div class="w-8 h-8 rounded-full bg-gradient-to-r from-cyan-500 to-purple-600 flex items-center justify-center">
 <i class="fas fa-cube text-white text-sm"></i>
 </div>
 <div class="text-xl font-bold gradient-text">${name}</div>
 </div>
 <nav class="hidden md:flex space-x-8">
 <a href="#" class="text-cyan-300 hover:text-white">Fonctionnalités</a>
 <a href="#" class="text-cyan-300 hover:text-white">Tarifs</a>
 <a href="#" class="text-cyan-300 hover:text-white">Docs</a>
 <a href="#" class="text-cyan-300 hover:text-white">Blog</a>
 </nav>
 <div class="flex space-x-4">
 <button class="text-cyan-300 hover:text-white px-4 py-2">Connexion</button>
 <button class="neon-btn px-6 py-2 rounded-full text-sm font-bold">S'inscrire</button>
 </div>
 </header>
<main>
 <section class="mb-16">
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 <div>
 <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-6">Solution SaaS puissante pour votre entreprise</h1>
 <p class="text-xl text-cyan-100 mb-8">${description}</p>
 <div class="flex flex-wrap gap-4">
 <button class="neon-btn px-8 py-3 rounded-full text-lg font-bold">
 Commencer <i class="fas fa-arrow-right ml-2"></i>
 </button>
 <button class="px-6 py-3 rounded-full border border-cyan-500/50 text-cyan-300 hover:bg-cyan-500/10 hover:text-white transition">
 <i class="fas fa-play-circle mr-2"></i> Voir la démo
 </button>
 </div>
 </div>
 <div class="holographic rounded-xl p-6">
 <div class="h-64 bg-gradient-to-br from-cyan-900/30 to-purple-900/30 rounded-lg flex items-center justify-center">
 <i class="fas fa-cloud text-5xl text-cyan-300"></i>
 </div>
 </div>
 </div>
 </section>
<section class="mb-16">
 <h2 class="text-3xl font-bold gradient-text mb-12 text-center">Pourquoi choisir ${name} ?</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="holographic p-6 rounded-xl">
 <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-bolt text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Ultra rapide</h3>
 <p class="text-cyan-100">Optimisé pour des performances maximales avec une latence minimale.</p>
 </div>
 <div class="holographic p-6 rounded-xl">
 <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-shield-alt text-purple-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Sécurisé</h3>
 <p class="text-cyan-100">Sécurité de niveau entreprise avec chiffrement de bout en bout.</p>
 </div>
 <div class="holographic p-6 rounded-xl">
 <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-expand text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Évolutif</h3>
 <p class="text-cyan-100">Évolue avec les besoins de votre entreprise, des startups aux grandes entreprises.</p>
 </div>
 </div>
 </section>
<section class="holographic rounded-xl p-8 mb-16">
 <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Plans tarifaires</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="holographic rounded-xl p-6 border border-cyan-500/30">
 <h3 class="text-xl font-bold mb-4">Starter</h3>
 <div class="text-4xl font-bold gradient-text mb-4">19€<span class="text-lg text-cyan-300">/mois</span></div>
 <p class="text-cyan-100 text-sm mb-6">Parfait pour les particuliers et petites équipes</p>
 <ul class="space-y-3 mb-8">
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">10,000 requêtes</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">5GB stockage</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Analytiques de base</span>
 </li>
 </ul>
 <button class="w-full neon-btn py-2 rounded-full">Commencer</button>
 </div>
 <div class="holographic rounded-xl p-6 border border-purple-500/50 relative">
 <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs px-2 py-1 rounded-bl rounded-tr">POPULAIRE</div>
 <h3 class="text-xl font-bold mb-4">Pro</h3>
 <div class="text-4xl font-bold gradient-text mb-4">49€<span class="text-lg text-cyan-300">/mois</span></div>
 <p class="text-cyan-100 text-sm mb-6">Pour les entreprises en croissance</p>
 <ul class="space-y-3 mb-8">
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">50,000 requêtes</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">25GB stockage</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Analytiques avancées</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Support prioritaire</span>
 </li>
 </ul>
 <button class="w-full neon-btn py-2 rounded-full">Commencer</button>
 </div>
 <div class="holographic rounded-xl p-6 border border-cyan-500/30">
 <h3 class="text-xl font-bold mb-4">Entreprise</h3>
 <div class="text-4xl font-bold gradient-text mb-4">99€<span class="text-lg text-cyan-300">/mois</span></div>
 <p class="text-cyan-100 text-sm mb-6">Pour les grandes organisations</p>
 <ul class="space-y-3 mb-8">
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Requêtes illimitées</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">100GB stockage</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Analytiques avancées</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Support 24/7</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
 <span class="text-sm">Solutions personnalisées</span>
 </li>
 </ul>
 <button class="w-full neon-btn py-2 rounded-full">Contact commercial</button>
 </div>
 </div>
 </section>
 </main>
<footer class="mt-12 pt-8 border-t border-cyan-500/20">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
 <div>
 <h3 class="font-bold gradient-text mb-4">${name}</h3>
 <p class="text-cyan-100 text-sm">${description.substring(0, 100)}...</p>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Produit</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Fonctionnalités</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Tarifs</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">API</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Intégrations</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Ressources</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Documentation</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Guides</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Blog</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Support</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Entreprise</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">À propos</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Carrières</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Contact</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Mentions légales</a></li>
 </ul>
 </div>
 </div>
 <div class="pt-6 border-t border-cyan-500/20 flex flex-col md:flex-row justify-between items-center">
 <p class="text-cyan-300 text-sm mb-4 md:mb-0">© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
 <div class="flex space-x-6">
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-linkedin-in"></i>
 </a>
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-github"></i>
 </a>
 <a href="#" class="text-cyan-300 hover:text-white">
 <i class="fab fa-facebook-f"></i>
 </a>
 </div>
 </div>
 </footer>
 </div>
 `;
 }
function generateCustomTemplate(name, description, colorScheme, layoutStyle) {
 return `
 <div class="h-full">
 <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
 <div class="text-2xl font-bold gradient-text">${name}</div>
 <nav class="hidden md:flex space-x-8">
 <a href="#" class="text-cyan-300 hover:text-white">Accueil</a>
 <a href="#" class="text-cyan-300 hover:text-white">Fonctionnalités</a>
 <a href="#" class="text-cyan-300 hover:text-white">Galerie</a>
 <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
 </nav>
 <button class="neon-btn px-6 py-2 rounded-full text-sm font-bold">
 <i class="fas fa-phone-alt mr-2"></i> Nous contacter
 </button>
 </header>
<main>
 <section class="mb-16">
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 <div>
 <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-6">Solution personnalisée pour vos besoins</h1>
 <p class="text-xl text-cyan-100 mb-8">${description}</p>
 <div class="flex flex-wrap gap-4">
 <button class="neon-btn px-8 py-3 rounded-full text-lg font-bold">
 En savoir plus <i class="fas fa-arrow-right ml-2"></i>
 </button>
 <button class="px-6 py-3 rounded-full border border-cyan-500/50 text-cyan-300 hover:bg-cyan-500/10 hover:text-white transition">
 <i class="fas fa-download mr-2"></i> Télécharger
 </button>
 </div>
 </div>
 <div class="holographic rounded-xl p-6">
 <div class="h-64 bg-gradient-to-br from-purple-900/30 to-cyan-900/30 rounded-lg flex items-center justify-center">
 <i class="fas fa-star text-5xl text-cyan-300"></i>
 </div>
 </div>
 </div>
 </section>
<section class="holographic rounded-xl p-8 mb-12">
 <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Nos Fonctionnalités</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <div class="p-6">
 <div class="w-14 h-14 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-cog text-2xl text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Personnalisable</h3>
 <p class="text-cyan-100">Adaptez chaque aspect à vos besoins spécifiques.</p>
 </div>
 <div class="p-6">
 <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-rocket text-2xl text-purple-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Haute performance</h3>
 <p class="text-cyan-100">Optimisé pour la vitesse et l'efficacité.</p>
 </div>
 <div class="p-6">
 <div class="w-14 h-14 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-shield-alt text-2xl text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Sécurisé</h3>
 <p class="text-cyan-100">Conçu pour protéger vos données et votre vie privée.</p>
 </div>
 <div class="p-6">
 <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-sync-alt text-2xl text-purple-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Automatisé</h3>
 <p class="text-cyan-100">Gagnez du temps avec des processus automatisés.</p>
 </div>
 <div class="p-6">
 <div class="w-14 h-14 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-chart-line text-2xl text-cyan-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Analytiques</h3>
 <p class="text-cyan-100">Obtenez des insights avec des analyses complètes.</p>
 </div>
 <div class="p-6">
 <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
 <i class="fas fa-headset text-2xl text-purple-300"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Support</h3>
 <p class="text-cyan-100">Support client 24/7 pour vous aider à tout moment.</p>
 </div>
 </div>
 </section>
<section class="mb-16">
 <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Témoignages</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="holographic p-6 rounded-xl">
 <div class="flex items-center mb-4">
 <div class="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-user text-cyan-300"></i>
 </div>
 <div>
 <h4 class="font-bold">Sarah Johnson</h4>
 <p class="text-cyan-300 text-sm">CEO, TechCorp</p>
 </div>
 </div>
 <p class="text-cyan-100">"Cette solution a transformé notre flux de travail et augmenté la productivité de 200%."</p>
 </div>
 <div class="holographic p-6 rounded-xl">
 <div class="flex items-center mb-4">
 <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-user text-purple-300"></i>
 </div>
 <div>
 <h4 class="font-bold">Michael Chen</h4>
 <p class="text-cyan-300 text-sm">CTO, InnovateX</p>
 </div>
 </div>
 <p class="text-cyan-100">"Les options de personnalisation sont inégalées. Exactement ce dont nous avions besoin."</p>
 </div>
 <div class="holographic p-6 rounded-xl">
 <div class="flex items-center mb-4">
 <div class="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-user text-cyan-300"></i>
 </div>
 <div>
 <h4 class="font-bold">Emma Rodriguez</h4>
 <p class="text-cyan-300 text-sm">Directrice, Global Solutions</p>
 </div>
 </div>
 <p class="text-cyan-100">"L'implémentation a été transparente et les résultats immédiats. Je recommande vivement!"</p>
 </div>
 </div>
 </section>
 </main>
<footer class="mt-12 pt-8 border-t border-cyan-500/20">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
 <div>
 <h3 class="font-bold gradient-text mb-4">${name}</h3>
 <p class="text-cyan-100 text-sm">${description.substring(0, 120)}...</p>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Liens rapides</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Accueil</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Fonctionnalités</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Tarifs</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Ressources</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Blog</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Documentation</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Support</a></li>
 <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Communauté</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold gradient-text mb-4">Nous contacter</h3>
 <ul class="space-y-2">
 <li class="flex items-center">
 <i class="fas fa-map-marker-alt text-cyan-300 mr-2 text-sm"></i>
 <span class="text-cyan-100 text-sm">123 Rue Tech, Ville Digitale</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-phone-alt text-cyan-300 mr-2 text-sm"></i>
 <span class="text-cyan-100 text-sm">+33 1 23 45 67 89</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-envelope text-cyan-300 mr-2 text-sm"></i>
 <span class="text-cyan-100 text-sm">info@${name.toLowerCase().replace(/\s+/g, '')}.com</span>
 </li>
 </ul>
 </div>
 </div>
 <div class="pt-6 border-t border-cyan-500/20 text-center text-sm text-cyan-300">
 <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
 </div>
 </footer>
 </div>
 `;
 }
 </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/sitegenmatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>