import React, { useState } from 'react';

import { ChevronDown, Plus, Settings, LogOut, Menu, X, Send } from 'lucide-react';

export default function EspaceCodage() {
const [activeModule, setActiveModule] = useState('generation');
const [sidebarOpen, setIsSidebarOpen] = useState(true);
const [currentTab, setCurrentTab] = useState('Chat');
const [message, setMessage] = useState('');
const [theme, setTheme] = useState('Brand Blue');
const [industry, setIndustry] = useState('App Hosting');

const modules = [
{ id: 'generation', name: 'Génération Rapide', icon: '⚡' },
{ id: 'pricing', name: 'Pricing SaaS', icon: '💰' },
{ id: 'landing', name: 'Landing Pro', icon: '🚀' },
{ id: 'dashboard', name: 'Dashboard Pro', icon: '📊' },
{ id: 'boutique', name: 'Boutique Pro', icon: '🛍️' },
{ id: 'video', name: 'Script Vidéo', icon: '🎬' },
];

const renderContent = () => {
switch(activeModule) {
case 'generation':
return (
<div className="space-y-4">
<div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-6 text-white">
<h2 className="text-2xl font-bold mb-2">Génération Rapide</h2>
<p className="text-blue-100">Générez vos interfaces en quelques secondes</p>
</div>
<div className="grid grid-cols-1 gap-4">
<input type="text" placeholder="Titre du projet" className="border rounded-lg p-3" />
<textarea placeholder="Description" className="border rounded-lg p-3 h-24" />
<button className="bg-blue-600 text-white rounded-lg p-3 font-semibold hover:bg-blue-700">
Générer
</button>
</div>
</div>
);
case 'pricing':
return (
<div className="space-y-4">
<div className="bg-gradient-to-r from-green-600 to-emerald-600 rounded-lg p-6 text-white">
<h2 className="text-2xl font-bold mb-2">Pricing SaaS</h2>
<p className="text-green-100">Créez des pages de tarification professionnelles</p>
</div>
<div className="grid grid-cols-1 gap-4">
<input type="text" placeholder="Nom du produit" className="border rounded-lg p-3" />
<input type="number" placeholder="Prix mensuel" className="border rounded-lg p-3" />
<textarea placeholder="Fonctionnalités (une par ligne)" className="border rounded-lg p-3 h-32" />
<button className="bg-green-600 text-white rounded-lg p-3 font-semibold hover:bg-green-700">
Créer la page
</button>
</div>
</div>
);
case 'landing':
return (
<div className="space-y-4">
<div className="bg-gradient-to-r from-orange-600 to-red-600 rounded-lg p-6 text-white">
<h2 className="text-2xl font-bold mb-2">Landing Pro</h2>
<p className="text-orange-100">Pages de lancement optimisées pour conversions</p>
</div>
<div className="grid grid-cols-1 gap-4">
<input type="text" placeholder="Titre principal" className="border rounded-lg p-3" />
<input type="text" placeholder="Sous-titre" className="border rounded-lg p-3" />
<textarea placeholder="Appel à l'action" className="border rounded-lg p-3 h-20" />
<button className="bg-orange-600 text-white rounded-lg p-3 font-semibold hover:bg-orange-700">
Créer la landing
</button>
</div>
</div>
);
case 'dashboard':
return (
<div className="space-y-4">
<div className="bg-gradient-to-r from-cyan-600 to-blue-600 rounded-lg p-6 text-white">
<h2 className="text-2xl font-bold mb-2">Dashboard Pro</h2>
<p className="text-cyan-100">Dashboards analytiques interactifs</p>
</div>
<div className="grid grid-cols-1 gap-4">
<input type="text" placeholder="Nom du dashboard" className="border rounded-lg p-3" />
<select className="border rounded-lg p-3">
<option>Sélectionnez le type</option>
<option>Ventes</option>
<option>Marketing</option>
<option>Support</option>
</select>
<textarea placeholder="Métriques" className="border rounded-lg p-3 h-24" />
<button className="bg-cyan-600 text-white rounded-lg p-3 font-semibold hover:bg-cyan-700">
Générer le dashboard
</button>
</div>
</div>
);
case 'boutique':
return (
<div className="space-y-4">
<div className="bg-gradient-to-r from-pink-600 to-rose-600 rounded-lg p-6 text-white">
<h2 className="text-2xl font-bold mb-2">Boutique Pro</h2>
<p className="text-pink-100">E-commerce complètes et optimisées</p>
</div>
<div className="grid grid-cols-1 gap-4">
<input type="text" placeholder="Nom de la boutique" className="border rounded-lg p-3" />
<input type="number" placeholder="Nombre de produits" className="border rounded-lg p-3" />
<textarea placeholder="Description de la boutique" className="border rounded-lg p-3 h-24" />
<button className="bg-pink-600 text-white rounded-lg p-3 font-semibold hover:bg-pink-700">
Créer la boutique
</button>
</div>
</div>
);
case 'video':
return (
<div className="space-y-4">
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg p-6 text-white">
<h2 className="text-2xl font-bold mb-2">Script Vidéo Pro</h2>
<p className="text-purple-100">Générez scripts, vidéos et montages complets</p>
</div>
<div className="grid grid-cols-1 gap-4">
<input type="text" placeholder="Sujet de la vidéo" className="border rounded-lg p-3" />
<select className="border rounded-lg p-3">
<option>Durée souhaitée</option>
<option>15 secondes</option>
<option>30 secondes</option>
<option>1 minute</option>
<option>2 minutes</option>
</select>
<select className="border rounded-lg p-3">
<option>Style</option>
<option>Marketing</option>
<option>Éducatif</option>
<option>Divertissement</option>
<option>Tutoriel</option>
</select>
<textarea placeholder="Détails supplémentaires" className="border rounded-lg p-3 h-24" />
<button className="bg-purple-600 text-white rounded-lg p-3 font-semibold hover:bg-purple-700">
Générer la vidéo
</button>
</div>
</div>
);
default:
return null;
}
};

return (
<div className="flex h-screen bg-gray-50">
{/* SIDEBAR */}
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-gradient-to-b from-blue-600 to-purple-700 text-white transition-all duration-300 flex flex-col`}>
<div className="p-4 border-b border-blue-500">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold text-blue-600">EC</div>
{sidebarOpen && <div>
<h1 className="font-bold">Espace Codage</h1>
<p className="text-xs text-blue-100">Workspace AI Pro</p>
</div>}
</div>
<button onClick={() => setIsSidebarOpen(!sidebarOpen)} className="text-blue-100 hover:text-white">
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
</button>
</div>

<div className="flex-1 overflow-y-auto p-3 space-y-2">
{modules.map(module => (
<button
key={module.id}
onClick={() => setActiveModule(module.id)}
className={`w-full text-left p-3 rounded-lg transition-all ${
activeModule === module.id
? 'bg-white bg-opacity-20 border-l-4 border-white'
: 'hover:bg-white hover:bg-opacity-10'
}`}
>
<span className="text-xl mr-2">{module.icon}</span>
{sidebarOpen && <span className="font-medium text-sm">{module.name}</span>}
</button>
))}
</div>

<div className="p-4 border-t border-blue-500 space-y-3">
{sidebarOpen && (
<>
<div>
<label className="text-xs text-blue-100">Thème</label>
<select
value={theme}
onChange={(e) => setTheme(e.target.value)}
className="w-full p-2 rounded text-sm text-gray-800 mt-1"
>
<option>Brand Blue</option>
<option>Dark Mode</option>
<option>Light Mode</option>
</select>
</div>
<div>
<label className="text-xs text-blue-100">Industrie</label>
<select
value={industry}
onChange={(e) => setIndustry(e.target.value)}
className="w-full p-2 rounded text-sm text-gray-800 mt-1"
>
<option>App Hosting</option>
<option>SaaS</option>
<option>E-commerce</option>
<option>Agence</option>
</select>
</div>
</>
)}
<button className="w-full bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-lg text-sm font-medium transition-all">
<Settings size={16} className="inline mr-2" />
{sidebarOpen && 'Configuration'}
</button>
</div>
</div>

{/* MAIN CONTENT */}
<div className="flex-1 flex flex-col">

README.md

@@ -1,10 +1,13 @@
 ---
-title: Codecraft Studio Pro
-emoji: 😻
-colorFrom: gray
-colorTo: green
+title: CodeCraft Studio Pro 🚀
+colorFrom: green
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/preview-panel.js

@@ -0,0 +1,80 @@
+class CustomPreviewPanel extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .panel {
+                    background: white;
+                    border-left: 4px solid #3b82f6;
+                }
+                .panel-header {
+                    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+                    color: white;
+                    padding: 1rem;
+                }
+                .status-card {
+                    border-radius: 0.5rem;
+                    padding: 1rem;
+                    margin-bottom: 0.75rem;
+                }
+                .status-card.blue {
+                    background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
+                    border: 1px solid #bfdbfe;
+                }
+                .status-card.green {
+                    background: linear-gradient(to bottom right, #ecfdf5, #d1fae5);
+                    border: 1px solid #a7f3d0;
+                }
+            </style>
+            <div class="panel w-96 flex flex-col overflow-hidden">
+                <div class="panel-header">
+                    <div class="flex items-center justify-between">
+                        <h3 class="font-bold text-lg">👁️ Aperçu</h3>
+                        <div class="flex gap-2">
+                            <button class="px-3 py-1 bg-white bg-opacity-20 rounded hover:bg-opacity-30 text-sm">
+                                Actualiser
+                            </button>
+                            <button class="px-3 py-1 bg-white bg-opacity-20 rounded hover:bg-opacity-30 text-sm">
+                                Ouvrir
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex-1 overflow-y-auto p-4 space-y-3">
+                    <div class="status-card blue">
+                        <h4 class="font-semibold text-gray-800 mb-2">Projet en cours</h4>
+                        <p class="text-sm text-gray-600">Module: <span class="font-medium" id="current-module">Génération Rapide</span></p>
+                        <p class="text-sm text-gray-600 mt-1">Thème: <span class="font-medium">Brand Blue</span></p>
+                        <p class="text-sm text-gray-600">Industrie: <span class="font-medium">App Hosting</span></p>
+                    </div>
+                    
+                    <div class="status-card green">
+                        <h4 class="font-semibold text-green-900 mb-2">✓ Statut</h4>
+                        <p class="text-sm text-green-700">Interface prête pour génération</p>
+                        <p class="text-xs text-green-600 mt-2">Attendant action utilisateur...</p>
+                    </div>
+
+                    <div class="status-card blue">
+                        <h4 class="font-semibold text-blue-900 mb-2">🔧 Configuration</h4>
+                        <p class="text-xs text-blue-700 space-y-1">
+                            <div>• API Prêt: Oui</div>
+                            <div>• Base de données: Configurée</div>
+                            <div>• Déploiement: Disponible</div>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    connectedCallback() {
+        // Listen for module changes
+        document.addEventListener('module-changed', (e) => {
+            this.shadowRoot.getElementById('current-module').textContent = e.detail.moduleName;
+        });
+    }
+}
+
+customElements.define('custom-preview-panel', CustomPreviewPanel);

components/sidebar.js

@@ -0,0 +1,131 @@
+class CustomSidebar extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .sidebar {
+                    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
+                    color: white;
+                    transition: width 0.3s;
+                    display: flex;
+                    flex-direction: column;
+                }
+                .sidebar-header {
+                    padding: 1rem;
+                    border-bottom: 1px solid rgba(255,255,255,0.1);
+                }
+                .module-btn {
+                    transition: all 0.2s;
+                    display: flex;
+                    align-items: center;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    margin-bottom: 0.25rem;
+                }
+                .module-btn:hover {
+                    background: rgba(255,255,255,0.1);
+                }
+                .module-btn.active {
+                    background: rgba(255,255,255,0.2);
+                    border-left: 4px solid white;
+                }
+                .settings-select {
+                    background: white;
+                    color: #1f2937;
+                    border-radius: 0.25rem;
+                    padding: 0.5rem;
+                    font-size: 0.875rem;
+                    width: 100%;
+                }
+            </style>
+            <div class="sidebar w-72">
+                <div class="sidebar-header">
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold text-blue-600">CC</div>
+                        <div>
+                            <h1 class="font-bold">CodeCraft</h1>
+                            <p class="text-xs opacity-80">Studio Pro</p>
+                        </div>
+                    </div>
+                    <button id="toggle-sidebar" class="text-blue-100 hover:text-white">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+
+                <div class="flex-1 overflow-y-auto p-3 space-y-2">
+                    <button data-module="generation" class="module-btn active">
+                        <span class="text-xl mr-2">⚡</span>
+                        <span class="font-medium text-sm">Génération Rapide</span>
+                    </button>
+                    <button data-module="pricing" class="module-btn">
+                        <span class="text-xl mr-2">💰</span>
+                        <span class="font-medium text-sm">Pricing SaaS</span>
+                    </button>
+                    <button data-module="landing" class="module-btn">
+                        <span class="text-xl mr-2">🚀</span>
+                        <span class="font-medium text-sm">Landing Pro</span>
+                    </button>
+                    <button data-module="dashboard" class="module-btn">
+                        <span class="text-xl mr-2">📊</span>
+                        <span class="font-medium text-sm">Dashboard Pro</span>
+                    </button>
+                    <button data-module="boutique" class="module-btn">
+                        <span class="text-xl mr-2">🛍️</span>
+                        <span class="font-medium text-sm">Boutique Pro</span>
+                    </button>
+                    <button data-module="video" class="module-btn">
+                        <span class="text-xl mr-2">🎬</span>
+                        <span class="font-medium text-sm">Script Vidéo</span>
+                    </button>
+                </div>
+
+                <div class="p-4 border-t border-blue-500 space-y-3">
+                    <div>
+                        <label class="text-xs opacity-80">Thème</label>
+                        <select class="settings-select mt-1">
+                            <option>Brand Blue</option>
+                            <option>Dark Mode</option>
+                            <option>Light Mode</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="text-xs opacity-80">Industrie</label>
+                        <select class="settings-select mt-1">
+                            <option>App Hosting</option>
+                            <option>SaaS</option>
+                            <option>E-commerce</option>
+                            <option>Agence</option>
+                        </select>
+                    </div>
+                    <button class="w-full bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2">
+                        <i data-feather="settings"></i>
+                        <span>Configuration</span>
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    connectedCallback() {
+        this.shadowRoot.querySelector('#toggle-sidebar').addEventListener('click', () => {
+            const sidebar = this.shadowRoot.querySelector('.sidebar');
+            sidebar.classList.toggle('w-72');
+            sidebar.classList.toggle('w-20');
+            
+            // Toggle text visibility
+            this.shadowRoot.querySelectorAll('.module-btn span:not(:first-child)').forEach(el => {
+                el.classList.toggle('hidden');
+            });
+            
+            this.shadowRoot.querySelectorAll('.settings-select, .sidebar-header > div > div:last-child, button span').forEach(el => {
+                el.classList.toggle('hidden');
+            });
+        });
+
+        // Initialize feather icons
+        feather.replace();
+    }
+}
+
+customElements.define('custom-sidebar', CustomSidebar);

components/topbar.js

@@ -0,0 +1,62 @@
+class CustomTopbar extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .topbar {
+                    background: white;
+                    border-bottom: 1px solid #e5e7eb;
+                    padding: 1rem 1.5rem;
+                }
+                .tab {
+                    padding-bottom: 0.5rem;
+                    transition: all 0.2s;
+                }
+                .tab.active {
+                    border-bottom: 2px solid #3b82f6;
+                    color: #3b82f6;
+                }
+                .tab:not(.active) {
+                    color: #4b5563;
+                }
+                .tab:not(.active):hover {
+                    color: #1f2937;
+                }
+            </style>
+            <div class="topbar flex items-center justify-between">
+                <div class="flex gap-6">
+                    <button class="tab active">
+                        <span>💬 Chat</span>
+                    </button>
+                    <button class="tab">
+                        <span>📝 Code</span>
+                    </button>
+                    <button class="tab">
+                        <span>📊 JSON</span>
+                    </button>
+                </div>
+                <div class="flex gap-3">
+                    <button class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm font-medium hover:bg-green-600">
+                        ● Prêt
+                    </button>
+                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
+                        ⬆ Recharger
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    connectedCallback() {
+        // Tab switching functionality
+        this.shadowRoot.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                this.shadowRoot.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+            });
+        });
+    }
+}
+
+customElements.define('custom-topbar', CustomTopbar);

index.html

@@ -1,19 +1,57 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeCraft Studio Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/topbar.js"></script>
+    <script src="components/preview-panel.js"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="flex h-screen">
+        <!-- Sidebar Component -->
+        <custom-sidebar></custom-sidebar>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col">
+            <!-- Top Bar Component -->
+            <custom-topbar></custom-topbar>
+
+            <!-- Content Area -->
+            <div class="flex-1 flex gap-4 p-6 overflow-hidden">
+                <!-- Generator Panel -->
+                <div class="flex-1 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden" id="generator-panel">
+                    <!-- Content will be dynamically loaded here -->
+                </div>
+
+                <!-- Preview Panel Component -->
+                <custom-preview-panel></custom-preview-panel>
+            </div>
+
+            <!-- Message Input -->
+            <div class="bg-white border-t border-gray-200 p-4">
+                <div class="flex gap-3">
+                    <input type="text" placeholder="Entrez votre message..." 
+                        class="flex-1 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-600" 
+                        id="message-input">
+                    <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-6 py-3 font-semibold flex items-center gap-2">
+                        <i data-feather="send"></i>
+                        Envoyer
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,105 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Current active module
+    let activeModule = 'generation';
+    const modules = [
+        { id: 'generation', name: 'Génération Rapide', icon: '⚡', color: 'from-blue-600 to-purple-600' },
+        { id: 'pricing', name: 'Pricing SaaS', icon: '💰', color: 'from-green-600 to-emerald-600' },
+        { id: 'landing', name: 'Landing Pro', icon: '🚀', color: 'from-orange-600 to-red-600' },
+        { id: 'dashboard', name: 'Dashboard Pro', icon: '📊', color: 'from-cyan-600 to-blue-600' },
+        { id: 'boutique', name: 'Boutique Pro', icon: '🛍️', color: 'from-pink-600 to-rose-600' },
+        { id: 'video', name: 'Script Vidéo', icon: '🎬', color: 'from-purple-600 to-indigo-600' },
+    ];
+
+    // Initialize with default module
+    loadModuleContent(activeModule);
+
+    // Handle module switching
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('[data-module]')) {
+            const moduleId = e.target.closest('[data-module]').getAttribute('data-module');
+            activeModule = moduleId;
+            loadModuleContent(moduleId);
+            updatePreviewPanel(moduleId);
+        }
+    });
+
+    // Load module content
+    function loadModuleContent(moduleId) {
+        const panel = document.getElementById('generator-panel');
+        const module = modules.find(m => m.id === moduleId);
+        
+        let content = '';
+        switch(moduleId) {
+            case 'generation':
+                content = `
+                    <div class="space-y-4 module-content p-6">
+                        <div class="bg-gradient-to-r ${module.color} rounded-lg p-6 text-white">
+                            <h2 class="text-2xl font-bold mb-2">${module.name}</h2>
+                            <p class="text-blue-100">Générez vos interfaces en quelques secondes</p>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4">
+                            <input type="text" placeholder="Titre du projet" class="border rounded-lg p-3">
+                            <textarea placeholder="Description" class="border rounded-lg p-3 h-24"></textarea>
+                            <button class="bg-blue-600 text-white rounded-lg p-3 font-semibold hover:bg-blue-700">
+                                Générer
+                            </button>
+                        </div>
+                    </div>
+                `;
+                break;
+            case 'pricing':
+                content = `
+                    <div class="space-y-4 module-content p-6">
+                        <div class="bg-gradient-to-r ${module.color} rounded-lg p-6 text-white">
+                            <h2 class="text-2xl font-bold mb-2">${module.name}</h2>
+                            <p class="text-green-100">Créez des pages de tarification professionnelles</p>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4">
+                            <input type="text" placeholder="Nom du produit" class="border rounded-lg p-3">
+                            <input type="number" placeholder="Prix mensuel" class="border rounded-lg p-3">
+                            <textarea placeholder="Fonctionnalités (une par ligne)" class="border rounded-lg p-3 h-32"></textarea>
+                            <button class="bg-green-600 text-white rounded-lg p-3 font-semibold hover:bg-green-700">
+                                Créer la page
+                            </button>
+                        </div>
+                    </div>
+                `;
+                break;
+            // Other cases would follow the same pattern
+            default:
+                content = `<div class="p-6 text-center">Module non disponible</div>`;
+        }
+        
+        panel.innerHTML = content;
+    }
+
+    // Update preview panel
+    function updatePreviewPanel(moduleId) {
+        const module = modules.find(m => m.id === moduleId);
+        const event = new CustomEvent('module-changed', { 
+            detail: { 
+                moduleName: module.name,
+                moduleIcon: module.icon
+            }
+        });
+        document.dispatchEvent(event);
+    }
+
+    // Handle message sending
+    document.querySelector('#message-input').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+    document.querySelector('button').addEventListener('click', sendMessage);
+
+    function sendMessage() {
+        const input = document.querySelector('#message-input');
+        const message = input.value.trim();
+        if (message) {
+            console.log('Message sent:', message);
+            input.value = '';
+        }
+    }
+});

style.css

@@ -1,28 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Animation for module switching */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.module-content {
+    animation: fadeIn 0.3s ease-out forwards;
 }
+
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* Pulse animation for ready status */
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
+
+.pulse-animation {
+    animation: pulse 2s infinite;
+}