|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NexusWeb - Le Futur de la Création de Sites Web</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> |
|
|
@keyframes gradientFlow { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(-45deg, #6e00ff, #ff00aa, #00b8ff, #00ff9d); |
|
|
background-size: 400% 400%; |
|
|
animation: gradientFlow 15s ease infinite; |
|
|
} |
|
|
|
|
|
.holographic-card { |
|
|
background: rgba(255, 255, 255, 0.08); |
|
|
backdrop-filter: blur(16px); |
|
|
-webkit-backdrop-filter: blur(16px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.18); |
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
|
|
} |
|
|
|
|
|
.glow-effect { |
|
|
box-shadow: 0 0 20px rgba(110, 0, 255, 0.5); |
|
|
} |
|
|
|
|
|
.code-editor { |
|
|
background-color: #1e1e3f; |
|
|
font-family: 'Courier New', monospace; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.preview-window { |
|
|
background-color: white; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
transform-style: preserve-3d; |
|
|
transform: perspective(1000px) rotateX(5deg); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, #6e00ff, #00ff9d); |
|
|
} |
|
|
|
|
|
.ai-thinking { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.ai-thinking::after { |
|
|
content: "..."; |
|
|
position: absolute; |
|
|
animation: ellipsis 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes ellipsis { |
|
|
0% { content: "."; } |
|
|
33% { content: ".."; } |
|
|
66% { content: "..."; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-white font-sans"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-16"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center"> |
|
|
<i class="fas fa-atom text-purple-500 text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-3xl font-bold">Nexus<span class="text-purple-300">Web</span></h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="hover:text-purple-300 transition">Fonctionnalités</a> |
|
|
<a href="#" class="hover:text-purple-300 transition">Modèles</a> |
|
|
<a href="#" class="hover:text-purple-300 transition">Tarifs</a> |
|
|
<a href="#" class="hover:text-purple-300 transition">Documentation</a> |
|
|
</nav> |
|
|
<button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-100 transition"> |
|
|
Essayer la Bêta |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main> |
|
|
<div class="max-w-4xl mx-auto text-center mb-20"> |
|
|
<h2 class="text-5xl font-bold mb-6 leading-tight"> |
|
|
Le Futur de la <span class="text-purple-300">Création de Sites Web</span> |
|
|
</h2> |
|
|
<p class="text-xl opacity-90 mb-10"> |
|
|
Décrivez votre site web idéal en langage naturel et regardez notre IA générer un site complet, |
|
|
prêt pour la production avec des milliers de lignes de code parfait en quelques minutes. |
|
|
</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 px-8 py-3 rounded-full font-medium transition glow-effect"> |
|
|
Commencer à Créer |
|
|
</button> |
|
|
<button class="border border-white hover:bg-white hover:bg-opacity-10 px-8 py-3 rounded-full font-medium transition"> |
|
|
Voir la Démo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card rounded-2xl p-8 mb-16"> |
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="text-2xl font-bold">Décrivez Votre Site Web</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-white bg-opacity-10 hover:bg-opacity-20 p-2 rounded-lg"> |
|
|
<i class="fas fa-magic"></i> |
|
|
</button> |
|
|
<button class="bg-white bg-opacity-10 hover:bg-opacity-20 p-2 rounded-lg"> |
|
|
<i class="fas fa-history"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex mb-2"> |
|
|
<button class="px-4 py-2 bg-purple-600 rounded-l-lg">Basique</button> |
|
|
<button class="px-4 py-2 bg-gray-800">Avancé</button> |
|
|
<button class="px-4 py-2 bg-gray-800 rounded-r-lg">Expert</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2 font-medium">Objectif du Site</label> |
|
|
<select class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 mb-4"> |
|
|
<option>E-commerce</option> |
|
|
<option selected>Entreprise/Corporate</option> |
|
|
<option>Portfolio</option> |
|
|
<option>Blog/Actualités</option> |
|
|
<option>Réseau Social</option> |
|
|
<option>Application Web</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2 font-medium">Décrivez votre site en détail</label> |
|
|
<textarea class="w-full h-40 bg-gray-900 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3" placeholder="Exemple : 'Créez un site corporate moderne pour une startup spécialisée dans les solutions d'IA. Nous avons besoin d'une page d'accueil avec une section hero, à propos, services (consultance IA, solutions personnalisées, formation), témoignages clients, section équipe avec profils, formulaire de contact et section blog. Utilisez une palette de couleurs bleu et blanc avec des éléments futuristes.'">Créez un site corporate moderne pour une startup spécialisée dans les solutions d'IA. Nous avons besoin d'une page d'accueil avec une section hero, à propos, services (consultance IA, solutions personnalisées, formation), témoignages clients, section équipe avec profils, formulaire de contact et section blog. Utilisez une palette de couleurs bleu et blanc avec des éléments futuristes.</textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Palette de Couleurs</label> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-600 border-2 border-white"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-white border-2 border-white"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-800 border-2 border-white flex items-center justify-center"> |
|
|
<i class="fas fa-plus text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Style de Design</label> |
|
|
<select class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-2"> |
|
|
<option>Moderne</option> |
|
|
<option selected>Futuriste</option> |
|
|
<option>Minimaliste</option> |
|
|
<option>Vibrant</option> |
|
|
<option>Élégant</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-medium transition flex items-center justify-center space-x-2 glow-effect"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
<span>Générer le Site</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="text-2xl font-bold">Aperçu en Direct</h3> |
|
|
<div class="text-sm text-purple-300 ai-thinking">L'IA génère votre site</div> |
|
|
</div> |
|
|
|
|
|
<div class="preview-window overflow-hidden h-96 relative"> |
|
|
|
|
|
<div class="progress-bar"></div> |
|
|
|
|
|
|
|
|
<div class="p-6 h-full overflow-auto"> |
|
|
<div class="flex flex-col items-center justify-center h-full text-gray-800"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-cog fa-spin text-4xl text-purple-600 mb-4"></i> |
|
|
<h4 class="text-xl font-bold mb-2">Construction de Votre Site</h4> |
|
|
<p class="text-gray-600">Analyse de votre description et génération de code optimisé...</p> |
|
|
|
|
|
<div class="mt-6 w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<div class="mt-2 text-sm text-gray-500"> |
|
|
<span>Étape actuelle : </span> |
|
|
<span class="font-medium">Création de la structure des composants</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 grid grid-cols-3 gap-2"> |
|
|
<div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 text-center"> |
|
|
<div class="text-sm text-gray-400">Pages</div> |
|
|
<div class="font-bold">8</div> |
|
|
</div> |
|
|
<div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 text-center"> |
|
|
<div class="text-sm text-gray-400">Composants</div> |
|
|
<div class="font-bold">24</div> |
|
|
</div> |
|
|
<div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 text-center"> |
|
|
<div class="text-sm text-gray-400">Lignes de Code</div> |
|
|
<div class="font-bold">12,740</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-20"> |
|
|
<h3 class="text-3xl font-bold text-center mb-12">Comment Ça Marche</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="holographic-card p-6 rounded-xl"> |
|
|
<div class="w-12 h-12 rounded-lg bg-purple-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-comment-dots text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-3">Décrivez Votre Vision</h4> |
|
|
<p class="opacity-80">Expliquez simplement ce dont vous avez besoin en langage naturel. Notre IA comprend les exigences complexes et peut même poser des questions de clarification.</p> |
|
|
</div> |
|
|
|
|
|
<div class="holographic-card p-6 rounded-xl"> |
|
|
<div class="w-12 h-12 rounded-lg bg-blue-500 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-cogs text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-3">Conception Architecturale par IA</h4> |
|
|
<p class="opacity-80">Notre système conçoit l'architecture technique optimale, la structure des composants et les flux de données pour vos besoins spécifiques.</p> |
|
|
</div> |
|
|
|
|
|
<div class="holographic-card p-6 rounded-xl"> |
|
|
<div class="w-12 h-12 rounded-lg bg-green-500 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-code text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-3">Génération Instantanée de Code</h4> |
|
|
<p class="opacity-80">Obtenez des milliers de lignes de code propre, prêt pour la production dans plusieurs frameworks avec une documentation complète et des tests.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card rounded-2xl p-8 mb-16"> |
|
|
<h3 class="text-3xl font-bold mb-8">Capacités Avancées</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-4 flex-shrink-0"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2">Architecture Multi-Pages</h4> |
|
|
<p class="opacity-80">Générez des sites complexes avec des dizaines de pages interconnectées, un routage dynamique et des structures de navigation intelligentes.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center mr-4 flex-shrink-0"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2">Intégration de Données Dynamiques</h4> |
|
|
<p class="opacity-80">Connectez-vous automatiquement aux bases de données, API ou systèmes CMS avec des modèles de données générés et du code d'intégration.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="w-10 h-10 rounded-lg bg-green-500 flex items-center justify-center mr-4 flex-shrink-0"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2">Complètement Responsive</h4> |
|
|
<p class="opacity-80">Chaque site généré inclut un comportement responsive parfait sur toutes les tailles d'appareils avec des composants adaptatifs.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-lg bg-yellow-500 flex items-center justify-center mr-4 flex-shrink-0"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2">Optimisé pour la Performance</h4> |
|
|
<p class="opacity-80">Le code généré inclut des optimisations automatiques comme le découpage de code, le chargement différé et l'optimisation d'images.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-20"> |
|
|
<h3 class="text-3xl font-bold text-center mb-8">Code de Qualité Professionnelle</h3> |
|
|
<p class="text-center max-w-2xl mx-auto opacity-90 mb-12">Notre IA génère un code propre, maintenable avec une architecture appropriée et une documentation qui répond aux standards de l'industrie.</p> |
|
|
|
|
|
<div class="grid lg:grid-cols-2 gap-8"> |
|
|
<div class="code-editor p-6 rounded-xl"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="text-sm text-gray-400">components/HeroSection.jsx</div> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded text-green-400">React</span> |
|
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">TSX</span> |
|
|
</div> |
|
|
</div> |
|
|
<pre class="text-sm text-gray-300 overflow-x-auto"><code> |
|
|
import React from 'react'; |
|
|
import PropTypes from 'prop-types'; |
|
|
|
|
|
/** |
|
|
* HeroSection - Composant hero principal pour la page d'accueil |
|
|
* @param {string} title - Texte du titre principal |
|
|
* @param {string} subtitle - Texte de soutien |
|
|
* @param {array} ctaButtons - Tableau de boutons d'appel à l'action |
|
|
*/ |
|
|
const HeroSection = ({ title, subtitle, ctaButtons }) => { |
|
|
return ( |
|
|
<section className="hero bg-gradient-to-r from-blue-600 to-purple-700 py-20"> |
|
|
<div className="container mx-auto px-6"> |
|
|
<div className="max-w-3xl"> |
|
|
<h1 className="text-5xl font-bold text-white mb-6">{title}</h1> |
|
|
<p className="text-xl text-white opacity-90 mb-8">{subtitle}</p> |
|
|
<div className="flex space-x-4"> |
|
|
{ctaButtons.map((button, index) => ( |
|
|
<button |
|
|
key={index} |
|
|
className={`px-8 py-3 rounded-full font-medium ${ |
|
|
button.primary |
|
|
? 'bg-white text-purple-700' |
|
|
: 'border border-white text-white' |
|
|
}`} |
|
|
> |
|
|
{button.label} |
|
|
</button> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
); |
|
|
}; |
|
|
|
|
|
HeroSection.propTypes = { |
|
|
title: PropTypes.string.isRequired, |
|
|
subtitle: PropTypes.string.isRequired, |
|
|
ctaButtons: PropTypes.arrayOf( |
|
|
PropTypes.shape({ |
|
|
label: PropTypes.string.isRequired, |
|
|
primary: PropTypes.bool |
|
|
}) |
|
|
).isRequired |
|
|
}; |
|
|
|
|
|
export default HeroSection; |
|
|
</code></pre> |
|
|
</div> |
|
|
|
|
|
<div class="code-editor p-6 rounded-xl"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="text-sm text-gray-400">services/apiService.js</div> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded text-yellow-400">JavaScript</span> |
|
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">Node.js</span> |
|
|
</div> |
|
|
</div> |
|
|
<pre class="text-sm text-gray-300 overflow-x-auto"><code> |
|
|
const axios = require('axios'); |
|
|
const { cache } = require('./cacheManager'); |
|
|
|
|
|
/** |
|
|
* Service API pour gérer toutes les communications backend |
|
|
* Inclut la mise en cache automatique, la gestion des erreurs et la logique de réessai |
|
|
*/ |
|
|
class ApiService { |
|
|
constructor(baseURL) { |
|
|
this.client = axios.create({ |
|
|
baseURL, |
|
|
timeout: 10000, |
|
|
headers: { |
|
|
'Content-Type': 'application/json' |
|
|
} |
|
|
}); |
|
|
|
|
|
// Configuration des intercepteurs |
|
|
this._setupInterceptors(); |
|
|
} |
|
|
|
|
|
_setupInterceptors() { |
|
|
// Intercepteur de requête pour la mise en cache |
|
|
this.client.interceptors.request.use(config => { |
|
|
const cacheKey = this._generateCacheKey(config); |
|
|
const cachedResponse = cache.get(cacheKey); |
|
|
|
|
|
if (cachedResponse && !config.forceRefresh) { |
|
|
return Promise.reject({ |
|
|
cached: true, |
|
|
data: cachedResponse |
|
|
}); |
|
|
} |
|
|
return config; |
|
|
}); |
|
|
|
|
|
// Intercepteur de réponse |
|
|
this.client.interceptors.response.use( |
|
|
response => { |
|
|
// Mise en cache des réponses réussies |
|
|
const cacheKey = this._generateCacheKey(response.config); |
|
|
cache.set(cacheKey, response.data); |
|
|
return response; |
|
|
}, |
|
|
error => { |
|
|
// Gestion des réponses mises en cache |
|
|
if (error.cached) { |
|
|
return Promise.resolve({ data: error.data }); |
|
|
} |
|
|
|
|
|
// Logique de réessai pour les erreurs 5xx |
|
|
if (error.response && error.response.status >= 500) { |
|
|
return this._retryRequest(error.config); |
|
|
} |
|
|
|
|
|
return Promise.reject(error); |
|
|
} |
|
|
); |
|
|
} |
|
|
|
|
|
// ... méthodes supplémentaires ... |
|
|
} |
|
|
|
|
|
module.exports = ApiService; |
|
|
</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="border-t border-white border-opacity-10 pt-12 pb-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">NexusWeb</h4> |
|
|
<p class="opacity-80">Le futur de la création de sites web propulsé par une IA avancée.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Produit</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Fonctionnalités</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Tarifs</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Modèles</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">API</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Ressources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Documentation</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Blog</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Communauté</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Statut</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Entreprise</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">À propos</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Carrières</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Contact</a></li> |
|
|
<li><a href="#" class="opacity-80 hover:opacity-100 transition">Mentions légales</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center pt-6 border-t border-white border-opacity-10"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p class="opacity-80">© 2023 NexusWeb. Tous droits réservés.</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition"><i class="fab fa-github"></i></a> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="opacity-80 hover:opacity-100 transition"><i class="fab fa-discord"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Simuler la progression de génération |
|
|
document.querySelector('.glow-effect').addEventListener('click', function() { |
|
|
const progressBar = document.querySelector('.progress-bar'); |
|
|
const progressText = document.querySelector('.ai-thinking'); |
|
|
const previewWindow = document.querySelector('.preview-window'); |
|
|
|
|
|
// Réinitialiser |
|
|
progressBar.style.width = '0%'; |
|
|
progressText.textContent = "L'IA génère votre site"; |
|
|
previewWindow.innerHTML = ` |
|
|
<div class="progress-bar"></div> |
|
|
<div class="p-6 h-full overflow-auto"> |
|
|
<div class="flex flex-col items-center justify-center h-full text-gray-800"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-cog fa-spin text-4xl text-purple-600 mb-4"></i> |
|
|
<h4 class="text-xl font-bold mb-2">Construction de Votre Site</h4> |
|
|
<p class="text-gray-600">Analyse de votre description et génération de code optimisé...</p> |
|
|
|
|
|
<div class="mt-6 w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 0%" id="detailed-progress"></div> |
|
|
</div> |
|
|
<div class="mt-2 text-sm text-gray-500"> |
|
|
<span>Étape actuelle : </span> |
|
|
<span class="font-medium" id="current-step">Initialisation</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
const detailedProgress = document.getElementById('detailed-progress'); |
|
|
const currentStep = document.getElementById('current-step'); |
|
|
|
|
|
// Simuler la progression |
|
|
let progress = 0; |
|
|
const steps = [ |
|
|
{percent: 10, text: "Analyse des exigences"}, |
|
|
{percent: 25, text: "Conception de l'architecture"}, |
|
|
{percent: 40, text: "Génération des composants"}, |
|
|
{percent: 60, text: "Création de la structure des pages"}, |
|
|
{percent: 75, text: "Implémentation de la logique métier"}, |
|
|
{percent: 90, text: "Optimisation des performances"}, |
|
|
{percent: 100, text: "Finalisation du projet"} |
|
|
]; |
|
|
|
|
|
let currentStepIndex = 0; |
|
|
const interval = setInterval(() => { |
|
|
if (currentStepIndex < steps.length) { |
|
|
progress = steps[currentStepIndex].percent; |
|
|
currentStep.textContent = steps[currentStepIndex].text; |
|
|
currentStepIndex++; |
|
|
} else if (progress < 100) { |
|
|
progress += 1; |
|
|
} else { |
|
|
clearInterval(interval); |
|
|
progressText.textContent = 'Site généré avec succès !'; |
|
|
|
|
|
// Afficher un aperçu fictif |
|
|
previewWindow.innerHTML = ` |
|
|
<div class="h-full bg-white"> |
|
|
<div class="h-16 border-b flex items-center px-6"> |
|
|
<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="ml-4 text-sm text-gray-600">preview.nexusweb.ai/votre-site</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-700 text-white p-12 rounded-2xl mb-8"> |
|
|
<h1 class="text-4xl font-bold mb-4">Bienvenue sur Votre Site Généré par IA</h1> |
|
|
<p class="text-xl opacity-90 mb-6">Ce site complet a été créé automatiquement à partir de votre description.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-white text-purple-700 px-8 py-3 rounded-full font-medium">Commencer</button> |
|
|
<button class="border border-white text-white px-8 py-3 rounded-full font-medium">En savoir plus</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-4"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Propulsé par IA</h3> |
|
|
<p class="text-gray-600">Généré par une intelligence artificielle avancée formée sur des millions de sites.</p> |
|
|
</div> |
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mb-4"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Code Propre</h3> |
|
|
<p class="text-gray-600">Code prêt pour la production avec une architecture appropriée et une documentation.</p> |
|
|
</div> |
|
|
<div class="border rounded-lg p-6"> |
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mb-4"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Complètement Responsive</h3> |
|
|
<p class="text-gray-600">Parfaitement adapté à tous les appareils du desktop au mobile.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
return; |
|
|
} |
|
|
|
|
|
progressBar.style.width = `${progress}%`; |
|
|
detailedProgress.style.width = `${progress}%`; |
|
|
}, 800); |
|
|
}); |
|
|
</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/po" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
