Spaces:

Onise
/

canvascraft

Running

App Files Files Community

Onise commited on Nov 1, 2025

Commit

d03bb4e

verified ·

1 Parent(s): e9382cb

Crée une application web SaaS nommée ShortForge AI : un générateur de vidéos courtes (YouTube Shorts, TikTok, Reels) à partir de texte/script/URL.

Browse files

Objectif principal

Transformer un input (texte, script, lien Reddit) en vidéo 9:16 MP4 (1080×1920) avec voix IA, sous-titres synchronisés, fond vidéo, musique libre de droits, et templates viraux.

Expérience rapide, claire, prête à publier.

Hero

Titre : “Crée des shorts viraux en 60 secondes”

Sous-titre : “Texte → Voix IA → Vidéo 9:16 avec captions”

CTA primaire : “Générer ma vidéo”

CTA secondaire : “Voir un exemple”

Fonctionnalités MVP

Inputs : champ texte, import .txt, URL Reddit.

Voix IA : intégration API TTS (ex. ElevenLabs/Play.ht) avec sélection voix/ton.

Captions : transcription/synchronisation automatiques (ex. Whisper/AssemblyAI).

Templates : 4 styles par défaut (Narration, Reddit Story, Educatif, Top 5).

Éditeur simplifié : choix voix, template, fond (vidéo/image), musique, intensité SFX.

Export : MP4 9:16, bitrate par défaut, preset “Social”.

Bibliothèque : quelques fonds libres (gameplay/abstrait) + upload utilisateur.

Flux utilisateur

Coller texte / coller URL Reddit

Choisir voix + template + fond + musique

Aperçu rapide (player intégré)

Générer et télécharger la vidéo

UI/UX

Design sombre, minimal, focus sur l’action.

Layout 2 colonnes : paramètres à gauche, preview à droite.

Boutons clairs, états de progression (génération, rendu, prêt).

Messages d’erreur explicites, validations côté client.

Stack suggérée (indicatif)

Frontend : Next.js + Tailwind + shadcn/ui

Backend : Node.js + FFmpeg pour rendu

IA : API TTS (ElevenLabs/Play.ht), STT/alignement (Whisper/AssemblyAI), LLM pour reformulation optionnelle

Stockage : Supabase/Firebase Storage

Auth : Clerk/Supabase Auth

Paiement : Stripe (crédits ou abonnements)

Monétisation (dans l’UI)

Gratuit : 1 export/jour avec watermark

Pro : abonnement mensuel sans watermark + voix premium

Pages/Sections

/ : Landing + démonstration

/app : Générateur (éditeur + preview)

/pricing : Plans et limites

/account : Profil, facturation, crédits

Qualité & contraintes

Gestion des files de rendu, timeouts, files d’attente.

Réessais côté serveur si FFmpeg échoue.

Journalisation basique des jobs (statut : queued, processing, done, failed).

Style

Typo moderne (Inter), coins arrondis, micro-animations sur CTA.

Icônes simples, pas de surcharges visuelles.

Files changed (7) hide show

app.html +104 -0
app.js +101 -0
components/navbar.js +6 -10
index.html +72 -46
pricing.html +72 -0
script.js +5 -16
style.css +11 -12

app.html ADDED Viewed

	@@ -0,0 +1,104 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ShortForge AI – Générateur</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8 grid md:grid-cols-2 gap-6">
+        <!-- Left: Editor -->
+        <section class="bg-gray-800 rounded-xl p-6 space-y-6">
+            <h2 class="text-2xl font-bold">Éditeur</h2>
+            <!-- Input -->
+            <div>
+                <label class="block text-sm font-medium mb-2">Texte ou URL Reddit</label>
+                <textarea id="scriptInput" rows="5" placeholder="Copiez votre script ici…" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-gray-100"></textarea>
+                <div class="mt-2 flex gap-2">
+                    <button id="loadTxt" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">Importer .txt</button>
+                    <button id="loadReddit" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">Coller URL Reddit</button>
+                </div>
+            </div>
+            <!-- Voice -->
+            <div>
+                <label class="block text-sm font-medium mb-2">Voix</label>
+                <select id="voiceSelect" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg">
+                    <option value="fr-lea">Lea – Français</option>
+                    <option value="fr-remy">Rémy – Français</option>
+                    <option value="en-bella">Bella – US Female</option>
+                    <option value="en-mat">Mat – US Male</option>
+                </select>
+            </div>
+            <!-- Template -->
+            <div>
+                <label class="block text-sm font-medium mb-2">Template</label>
+                <div class="grid grid-cols-2 gap-3">
+                    <button class="template-btn active" data-template="narration">Narration</button>
+                    <button class="template-btn" data-template="reddit">Reddit Story</button>
+                    <button class="template-btn" data-template="educatif">Educatif</button>
+                    <button class="template-btn" data-template="top5">Top 5</button>
+                </div>
+            </div>
+            <!-- Background -->
+            <div>
+                <label class="block text-sm font-medium mb-2">Fond</label>
+                <select id="bgSelect" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg">
+                    <option value="gameplay1">Gameplay 1</option>
+                    <option value="gameplay2">Gameplay 2</option>
+                    <option value="abstract1">Abstract 1</option>
+                    <option value="abstract2">Abstract 2</option>
+                    <option value="upload">➕ Upload</option>
+                </select>
+            </div>
+            <!-- Music -->
+            <div>
+                <label class="block text-sm font-medium mb-2">Musique</label>
+                <select id="musicSelect" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg">
+                    <option value="none">Aucune</option>
+                    <option value="lofi1">Lo-Fi Chill</option>
+                    <option value="upbeat1">Upbeat Pop</option>
+                    <option value="ambient1">Ambient</option>
+                </select>
+            </div>
+            <!-- Generate -->
+            <button id="generateBtn" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all">
+                Générer la vidéo
+            </button>
+        </section>
+        <!-- Right: Preview -->
+        <section class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center">
+            <h2 class="text-2xl font-bold mb-4">Aperçu</h2>
+            <div id="previewPlayer" class="w-full max-w-xs aspect-[9/16] bg-black rounded-xl overflow-hidden hidden">
+                <video id="previewVideo" class="w-full h-full object-cover" controls></video>
+            </div>
+            <div id="previewPlaceholder" class="text-gray-400 text-center">
+                <i data-feather="video" class="w-16 h-16 mx-auto mb-2"></i>
+                <p>Aperçu en attente</p>
+            </div>
+            <a id="downloadBtn" class="mt-6 hidden px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all">
+                Télécharger MP4
+            </a>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="app.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

app.js ADDED Viewed

	@@ -0,0 +1,101 @@

+// ShortForge AI – App logic
+class ShortForgeApp {
+    constructor() {
+        this.currentTemplate = 'narration';
+        this.generated = false;
+        this.init();
+    }
+    init() {
+        this.bindEvents();
+        this.updateTemplateButtons();
+    }
+    bindEvents() {
+        // Template buttons
+        document.querySelectorAll('.template-btn').forEach(btn => {
+            btn.addEventListener('click', e => {
+                document.querySelectorAll('.template-btn').forEach(b => b.classList.remove('active'));
+                e.target.classList.add('active');
+                this.currentTemplate = e.target.dataset.template;
+            });
+        });
+        // Generate
+        document.getElementById('generateBtn').addEventListener('click', () => this.generate());
+        // Download
+        document.getElementById('downloadBtn').addEventListener('click', () => this.download());
+        // File upload
+        document.getElementById('loadTxt').addEventListener('click', () => this.loadTxt());
+        document.getElementById('loadReddit').addEventListener('click', () => this.loadReddit());
+    }
+    updateTemplateButtons() {
+        document.querySelectorAll('.template-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.template === this.currentTemplate);
+        });
+    }
+    async loadTxt() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.txt';
+        input.onchange = e => {
+            const file = e.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = evt => {
+                document.getElementById('scriptInput').value = evt.target.result;
+            };
+            reader.readAsText(file);
+        };
+        input.click();
+    }
+    loadReddit() {
+        const url = prompt('Collez l’URL Reddit du post :');
+        if (!url) return;
+        // Mock fetch
+        document.getElementById('scriptInput').value = 'Mock Reddit story récupéré !';
+    }
+    async generate() {
+        const script = document.getElementById('scriptInput').value.trim();
+        if (!script) return alert('Veuillez entrer un script.');
+        const btn = document.getElementById('generateBtn');
+        const original = btn.innerHTML;
+        btn.disabled = true;
+        btn.innerHTML = '<i data-feather="loader" class="inline w-5 h-5 mr-2 animate-spin"></i>Génération…';
+        feather.replace();
+        // Simulate API
+        await new Promise(r => setTimeout(r, 3000));
+        // Fake video
+        const video = document.getElementById('previewVideo');
+        video.src = 'https://sample-videos.com/shorts/9-16/mp4/20.mp4';
+        document.getElementById('previewPlayer').classList.remove('hidden');
+        document.getElementById('previewPlaceholder').classList.add('hidden');
+        document.getElementById('downloadBtn').classList.remove('hidden');
+        this.generated = true;
+        btn.disabled = false;
+        btn.innerHTML = original;
+        feather.replace();
+    }
+    download() {
+        if (!this.generated) return;
+        const link = document.createElement('a');
+        link.href = 'https://sample-videos.com/shorts/9-16/mp4/20.mp4';
+        link.download = 'shortforge-video.mp4';
+        link.click();
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    new ShortForgeApp();
+});

components/navbar.js CHANGED Viewed

@@ -129,22 +129,18 @@ class CustomNavbar extends HTMLElement {
                             CanvasCraft
                         </a>
                         <div class="nav-links">
-                            <a href="/templates">Templates</a>
-                            <a href="/video-creator.html">Video Creator</a>
-                            <a href="/categories">Categories</a>
-                            <a href="/about">About</a>
-                            <a href="/contact">Contact</a>
                         </div>
 <button class="mobile-menu-btn" id="mobileMenuBtn">
                             <i data-feather="menu"></i>
                         </button>
                     </div>
                     <div class="mobile-menu" id="mobileMenu">
-                        <a href="/templates">Templates</a>
-                        <a href="/video-creator.html">Video Creator</a>
-                        <a href="/categories">Categories</a>
-                        <a href="/about">About</a>
-                        <a href="/contact">Contact</a>
                     </div>
 </div>
             </nav>

                             CanvasCraft
                         </a>
                         <div class="nav-links">
+                            <a href="/">Accueil</a>
+                            <a href="/app.html">Générateur</a>
+                            <a href="/pricing.html">Pricing</a>
                         </div>
 <button class="mobile-menu-btn" id="mobileMenuBtn">
                             <i data-feather="menu"></i>
                         </button>
                     </div>
                     <div class="mobile-menu" id="mobileMenu">
+                        <a href="/">Accueil</a>
+                        <a href="/app.html">Générateur</a>
+                        <a href="/pricing.html">Pricing</a>
                     </div>
 </div>
             </nav>

index.html CHANGED Viewed

@@ -3,69 +3,96 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CanvasCraft - AI Generated Image Templates</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <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>
 </head>
-<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
     <custom-navbar></custom-navbar>
-    <main class="container mx-auto px-4 py-8">
-        <!-- Hero Section -->
-        <section class="text-center mb-16">
-            <h1 class="text-5xl font-bold text-gray-800 dark:text-white mb-4">
-                CanvasCraft Templates
             </h1>
-            <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
-                Discover stunning AI-generated image templates for your projects
-            </p>
-            <div class="flex justify-center gap-4">
-                <button id="gridView" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
-                    <i data-feather="grid" class="inline w-4 h-4 mr-2"></i>Grid View
-                </button>
-                <button id="listView" class="px-6 py-3 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors">
-                    <i data-feather="list" class="inline w-4 h-4 mr-2"></i>List View
                 </button>
             </div>
         </section>
-        <!-- Filter Section -->
-        <section class="mb-8">
-            <div class="flex flex-wrap gap-4 justify-center">
-                <select id="categoryFilter" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300">
-                    <option value="">All Categories</option>
-                    <option value="nature">Nature</option>
-                    <option value="technology">Technology</option>
-                    <option value="people">People</option>
-                    <option value="abstract">Abstract</option>
-                    <option value="minimal">Minimal</option>
-                </select>
-                <select id="sizeFilter" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300">
-                    <option value="">All Sizes</option>
-                    <option value="200x200">200x200</option>
-                    <option value="320x240">320x240</option>
-                    <option value="640x360">640x360</option>
-                    <option value="1024x576">1024x576</option>
-                    <option value="1200x630">1200x630</option>
-                </select>
             </div>
         </section>
-        <!-- Templates Grid -->
-        <section id="templatesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-            <!-- Templates will be dynamically loaded here -->
         </section>
-        <!-- Loading Spinner -->
-        <div id="loadingSpinner" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-white dark:bg-gray-800 p-8 rounded-lg">
-                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
-                <p class="mt-4 text-gray-600 dark:text-gray-300">Loading templates...</p>
             </div>
-        </div>
     </main>
     <custom-footer></custom-footer>
@@ -74,6 +101,5 @@
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ShortForge AI – Crée des shorts viraux en 60 secondes</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <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>
 </head>
+<body class="bg-gray-900 text-gray-100">
     <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-12">
+        <!-- HERO -->
+        <section class="text-center mb-20">
+            <h1 class="text-5xl md:text-6xl font-extrabold mb-4 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
+                Crée des shorts viraux en 60 secondes
             </h1>
+            <p class="text-xl text-gray-300 mb-8">Texte → Voix IA → Vidéo 9:16 avec captions</p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="/app.html" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all">
+                    Générer ma vidéo
+                </a>
+                <button id="demoBtn" class="px-8 py-3 bg-gray-800 text-gray-200 rounded-lg hover:bg-gray-700 transition-all">
+                    Voir un exemple
                 </button>
             </div>
         </section>
+        <!-- DEMO -->
+        <section id="demoSection" class="hidden max-w-3xl mx-auto mb-20">
+            <div class="bg-gray-800 rounded-xl p-6 shadow-2xl">
+                <h2 class="text-2xl font-bold mb-4">Exemple de vidéo générée</h2>
+                <div class="aspect-[9/16] max-w-sm mx-auto rounded-xl overflow-hidden bg-black">
+                    <video src="https://sample-videos.com/shorts/9-16/mp4/20.mp4" controls class="w-full h-full object-cover"></video>
+                </div>
             </div>
         </section>
+        <!-- FEATURES -->
+        <section class="mb-20">
+            <h2 class="text-3xl font-bold text-center mb-10">Fonctionnalités clés</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <i data-feather="mic" class="w-10 h-10 mb-4 text-blue-400"></i>
+                    <h3 class="text-xl font-semibold mb-2">Voix IA réalistes</h3>
+                    <p class="text-gray-300">Sélectionnez parmi une dizaine de voix naturelles en français et anglais.</p>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <i data-feather="type" class="w-10 h-10 mb-4 text-purple-400"></i>
+                    <h3 class="text-xl font-semibold mb-2">Captions synchronisés</h3>
+                    <p class="text-gray-300">Sous-titres animés automatiquement, parfaits pour les réseaux sociaux.</p>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <i data-feather="film" class="w-10 h-10 mb-4 text-green-400"></i>
+                    <h3 class="text-xl font-semibold mb-2">Templates viraux</h3>
+                    <p class="text-gray-300">Narration, Reddit Story, Educatif, Top 5… Prêt à exploser vos vues.</p>
+                </div>
+            </div>
         </section>
+        <!-- HOW IT WORKS -->
+        <section class="mb-20">
+            <h2 class="text-3xl font-bold text-center mb-10">Comment ça marche ?</h2>
+            <div class="grid md:grid-cols-4 gap-6 text-center">
+                <div>
+                    <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">1</div>
+                    <h4 class="font-semibold mb-2">Collez votre texte ou URL Reddit</h4>
+                </div>
+                <div>
+                    <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">2</div>
+                    <h4 class="font-semibold mb-2">Choisissez voix, template et fond</h4>
+                </div>
+                <div>
+                    <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">3</div>
+                    <h4 class="font-semibold mb-2">Prévisualisez en temps réel</h4>
+                </div>
+                <div>
+                    <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">4</div>
+                    <h4 class="font-semibold mb-2">Exportez votre MP4 9:16</h4>
+                </div>
             </div>
+        </section>
+        <!-- PRICING PREVIEW -->
+        <section class="mb-20 text-center">
+            <h2 class="text-3xl font-bold mb-4">Commencez gratuitement</h2>
+            <p class="text-gray-300 mb-8">1 export par jour avec watermark. Passez Pro pour illimité et voix premium.</p>
+            <a href="/pricing.html" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-lg hover:from-purple-600 hover:to-pink-700 transition-all">
+                Voir les plans
+            </a>
+        </section>
     </main>
     <custom-footer></custom-footer>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
 </body>
 </html>

pricing.html ADDED Viewed

	@@ -0,0 +1,72 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pricing – ShortForge AI</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-12">
+        <section class="text-center mb-12">
+            <h1 class="text-4xl font-bold mb-4">Plans & Pricing</h1>
+            <p class="text-gray-300">Commencez gratuitement, passez Pro quand vous êtes prêt.</p>
+        </section>
+        <section class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            <!-- Free -->
+            <div class="bg-gray-800 rounded-xl p-6 flex flex-col">
+                <h3 class="text-2xl font-bold mb-2">Free</h3>
+                <p class="text-3xl font-extrabold mb-4">0 €<span class="text-lg font-normal text-gray-400">/mois</span></p>
+                <ul class="space-y-2 mb-6 text-gray-300">
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>1 export par jour</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>Watermark ShortForge</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>Voix standard</li>
+                    <li class="flex items-start"><i data-feather="x" class="w-4 h-4 mr-2 mt-1 text-red-400"></i>Pas d’upload perso</li>
+                </ul>
+                <button class="mt-auto px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600">Current plan</button>
+            </div>
+            <!-- Pro -->
+            <div class="bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl p-6 flex flex-col border-2 border-purple-400">
+                <span class="self-start px-2 py-1 bg-purple-700 text-xs rounded-full mb-2">POPULAIRE</span>
+                <h3 class="text-2xl font-bold mb-2">Pro</h3>
+                <p class="text-3xl font-extrabold mb-4">9 €<span class="text-lg font-normal opacity-80">/mois</span></p>
+                <ul class="space-y-2 mb-6">
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-300"></i>Exports illimités</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-300"></i>Pas de watermark</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-300"></i>Voix premium</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-300"></i>Upload perso</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-300"></i>Support prioritaire</li>
+                </ul>
+                <button class="mt-auto px-4 py-2 bg-white text-purple-700 font-semibold rounded-lg hover:bg-gray-100">Upgrade</button>
+            </div>
+            <!-- Enterprise -->
+            <div class="bg-gray-800 rounded-xl p-6 flex flex-col">
+                <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
+                <p class="text-3xl font-extrabold mb-4">Sur mesure</p>
+                <ul class="space-y-2 mb-6 text-gray-300">
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>Tout inclus</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>API & intégrations</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>Comptes d’équipe</li>
+                    <li class="flex items-start"><i data-feather="check" class="w-4 h-4 mr-2 mt-1 text-green-400"></i>Succès client dédié</li>
+                </ul>
+                <button class="mt-auto px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600">Contact sales</button>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -1,20 +1,9 @@
-// CanvasCraft JavaScript
-class TemplateManager {
-    constructor() {
-        this.templates = [];
-        this.currentView = 'grid';
-        this.currentCategory = '';
-        this.currentSize = '';
-        this.init();
-    }
-    init() {
-        this.loadTemplates();
-        this.setupEventListeners();
-        this.setupThemeToggle();
-    }
-    async loadTemplates() {
         this.showLoading(true);
         // Simulate API call with generated images

+// ShortForge AI – Landing page JS
+document.getElementById('demoBtn').addEventListener('click', () => {
+    document.getElementById('demoSection').classList.toggle('hidden');
+});
+async loadTemplates() {
         this.showLoading(true);
         // Simulate API call with generated images

style.css CHANGED Viewed

@@ -1,19 +1,18 @@
-/* Custom styles for CanvasCraft */
 :root {
-    --primary-color: #3b82f6;
-    --secondary-color: #8b5cf6;
-    --accent-color: #10b981;
 }
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    :root {
-        --primary-color: #60a5fa;
-        --secondary-color: #a78bfa;
-        --accent-color: #34d399;
-    }
 }
 /* Smooth transitions */
 * {
     transition: background-color 0.3s ease, border-color 0.3s ease;

+/* ShortForge AI – Global styles */
 :root {
+    --primary-color: #60a5fa;
+    --secondary-color: #a78bfa;
+    --accent-color: #34d399;
 }
+/* Template buttons */
+.template-btn {
+    @apply px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors;
+}
+.template-btn.active {
+    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white;
 }
 /* Smooth transitions */
 * {
     transition: background-color 0.3s ease, border-color 0.3s ease;