Spaces:

evoluxsa
/

kodaly

Running

App Files Files Community

evoluxsa commited on Apr 5, 2025

Commit

cd892a0

verified ·

1 Parent(s): 6809f5e

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +728 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Kodaly
-emoji: 📊
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: kodaly
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,728 @@
-<!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>Kodaly - Collectez des avis clients en temps réel</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=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            scroll-behavior: smooth;
+        }
+        .hero {
+            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
+        }
+        .btn-pulse:hover {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+        .fade-in {
+            opacity: 0;
+            transition: opacity 0.8s ease-in-out;
+        }
+        .fade-in.visible {
+            opacity: 1;
+        }
+        .slide-up {
+            transform: translateY(50px);
+            opacity: 0;
+            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
+        }
+        .slide-up.visible {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .feature-card {
+            transition: all 0.3s ease;
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .input-field:focus {
+            box-shadow: 0 0 0 2px #ef4444;
+        }
+        .counter {
+            font-size: 3rem;
+            font-weight: 700;
+            color: #ef4444;
+        }
+    </style>
+</head>
+<body class="bg-amber-50 text-gray-800">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <span class="text-red-600 font-bold text-2xl">KODALY</span>
+                    </div>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#features" class="text-gray-700 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Fonctionnalités</a>
+                    <a href="#how-it-works" class="text-gray-700 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Comment ça marche</a>
+                    <a href="#testimonials" class="text-gray-700 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Témoignages</a>
+                    <a href="#faq" class="text-gray-700 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">FAQ</a>
+                    <a href="#contact" class="bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700 transition duration-300">Essayer gratuitement</a>
+                </div>
+                <div class="md:hidden flex items-center">
+                    <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-red-600 focus:outline-none">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div class="mobile-menu hidden md:hidden bg-white">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-red-600 hover:bg-gray-50">Fonctionnalités</a>
+                <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-red-600 hover:bg-gray-50">Comment ça marche</a>
+                <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-red-600 hover:bg-gray-50">Témoignages</a>
+                <a href="#faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-red-600 hover:bg-gray-50">FAQ</a>
+                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-red-600 hover:bg-red-700">Essayer gratuitement</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero min-h-screen flex items-center justify-center text-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 slide-up">Transformez chaque repas en opportunité d'écoute client</h1>
+            <p class="text-xl md:text-2xl mb-10 slide-up" style="transition-delay: 0.2s;">Collectez des avis clients en temps réel grâce à notre solution QR code intégrée directement sur vos factures.</p>
+            <div class="slide-up" style="transition-delay: 0.4s;">
+                <a href="#contact" class="btn-pulse bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300 inline-flex items-center">
+                    Essayer gratuitement <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Logos Section -->
+    <section class="py-12 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <p class="text-center text-gray-500 mb-8">Ils nous font confiance :</p>
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
+                <img src="https://via.placeholder.com/150x60?text=Restaurant+1" alt="Restaurant 1" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto">
+                <img src="https://via.placeholder.com/150x60?text=Restaurant+2" alt="Restaurant 2" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto">
+                <img src="https://via.placeholder.com/150x60?text=Restaurant+3" alt="Restaurant 3" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto">
+                <img src="https://via.placeholder.com/150x60?text=Restaurant+4" alt="Restaurant 4" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto">
+                <img src="https://via.placeholder.com/150x60?text=Restaurant+5" alt="Restaurant 5" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto">
+            </div>
+        </div>
+    </section>
+    <!-- How It Works Section -->
+    <section id="how-it-works" class="py-20 bg-amber-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 slide-up">Comment ça marche ?</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto slide-up" style="transition-delay: 0.2s;">Une solution simple en 3 étapes pour recueillir les avis de vos clients</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Step 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center fade-in">
+                    <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-qrcode text-red-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">1. QR code sur la facture</h3>
+                    <p class="text-gray-600">Nous générons un QR code personnalisé que vous imprimez directement sur vos factures.</p>
+                </div>
+                <!-- Step 2 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center fade-in" style="transition-delay: 0.2s;">
+                    <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-mobile-alt text-orange-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">2. Scan du formulaire</h3>
+                    <p class="text-gray-600">Vos clients scannent le QR code et accèdent à un formulaire d'avis simple et intuitif.</p>
+                </div>
+                <!-- Step 3 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center fade-in" style="transition-delay: 0.4s;">
+                    <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-chart-line text-amber-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">3. Dashboard en temps réel</h3>
+                    <p class="text-gray-600">Visualisez et analysez les retours clients instantanément sur votre espace dédié.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 slide-up">Fonctionnalités clés</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto slide-up" style="transition-delay: 0.2s;">Découvrez comment Kodaly révolutionne la collecte d'avis pour les restaurants</p>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="feature-card bg-amber-50 p-8 rounded-xl hover:border-red-200 border-2 border-transparent">
+                    <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-tachometer-alt text-red-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Dashboard complet</h3>
+                    <p class="text-gray-600 mb-4">Accédez à toutes vos données clients en un seul endroit avec des indicateurs clairs et personnalisables.</p>
+                    <a href="#" class="text-red-600 font-medium inline-flex items-center">En savoir plus <i class="fas fa-chevron-right ml-2"></i></a>
+                </div>
+                <!-- Feature 2 -->
+                <div class="feature-card bg-amber-50 p-8 rounded-xl hover:border-red-200 border-2 border-transparent">
+                    <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-bell text-orange-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Alertes intelligentes</h3>
+                    <p class="text-gray-600 mb-4">Recevez des notifications en temps réel pour les avis négatifs et réagissez immédiatement.</p>
+                    <a href="#" class="text-red-600 font-medium inline-flex items-center">En savoir plus <i class="fas fa-chevron-right ml-2"></i></a>
+                </div>
+                <!-- Feature 3 -->
+                <div class="feature-card bg-amber-50 p-8 rounded-xl hover:border-red-200 border-2 border-transparent">
+                    <div class="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-chart-pie text-amber-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Statistiques détaillées</h3>
+                    <p class="text-gray-600 mb-4">Analysez les tendances sur plusieurs périodes et identifiez les points à améliorer.</p>
+                    <a href="#" class="text-red-600 font-medium inline-flex items-center">En savoir plus <i class="fas fa-chevron-right ml-2"></i></a>
+                </div>
+                <!-- Feature 4 -->
+                <div class="feature-card bg-amber-50 p-8 rounded-xl hover:border-red-200 border-2 border-transparent">
+                    <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-users text-red-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Intégration CRM</h3>
+                    <p class="text-gray-600 mb-4">Connectez vos données clients à votre système de fidélisation ou CRM existant.</p>
+                    <a href="#" class="text-red-600 font-medium inline-flex items-center">En savoir plus <i class="fas fa-chevron-right ml-2"></i></a>
+                </div>
+                <!-- Feature 5 -->
+                <div class="feature-card bg-amber-50 p-8 rounded-xl hover:border-red-200 border-2 border-transparent">
+                    <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-star text-orange-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Gestion de réputation</h3>
+                    <p class="text-gray-600 mb-4">Améliorez votre note moyenne et votre visibilité sur les plateformes en ligne.</p>
+                    <a href="#" class="text-red-600 font-medium inline-flex items-center">En savoir plus <i class="fas fa-chevron-right ml-2"></i></a>
+                </div>
+                <!-- Feature 6 -->
+                <div class="feature-card bg-amber-50 p-8 rounded-xl hover:border-red-200 border-2 border-transparent">
+                    <div class="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-file-export text-amber-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Export des données</h3>
+                    <p class="text-gray-600 mb-4">Exportez vos données clients dans différents formats pour des analyses approfondies.</p>
+                    <a href="#" class="text-red-600 font-medium inline-flex items-center">En savoir plus <i class="fas fa-chevron-right ml-2"></i></a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Benefits Section -->
+    <section class="py-20 bg-red-600 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 slide-up">Les avantages Kodaly</h2>
+                <p class="text-xl max-w-3xl mx-auto slide-up" style="transition-delay: 0.2s;">Découvrez comment notre solution peut transformer votre relation client</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Benefit 1 -->
+                <div class="bg-white bg-opacity-10 p-8 rounded-xl fade-in">
+                    <div class="w-14 h-14 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-chart-line text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Augmentation du taux de réponse</h3>
+                    <p>Avec notre QR code directement sur la facture, obtenez jusqu'à 5 fois plus d'avis que les méthodes traditionnelles.</p>
+                </div>
+                <!-- Benefit 2 -->
+                <div class="bg-white bg-opacity-10 p-8 rounded-xl fade-in" style="transition-delay: 0.2s;">
+                    <div class="w-14 h-14 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-clock text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Réactivité améliorée</h3>
+                    <p>Identifiez et répondez aux problèmes en temps réel avant qu'ils n'affectent votre réputation en ligne.</p>
+                </div>
+                <!-- Benefit 3 -->
+                <div class="bg-white bg-opacity-10 p-8 rounded-xl fade-in" style="transition-delay: 0.4s;">
+                    <div class="w-14 h-14 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-heart text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fidélisation client</h3>
+                    <p>Montrez à vos clients que leur opinion compte et transformez les critiques en opportunités d'amélioration.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials & Stats Section -->
+    <section id="testimonials" class="py-20 bg-amber-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 slide-up">Ils nous recommandent</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto slide-up" style="transition-delay: 0.2s;">Découvrez ce que disent les restaurateurs qui utilisent déjà Kodaly</p>
+            </div>
+            <!-- Testimonials Carousel -->
+            <div class="mb-20 relative overflow-hidden">
+                <div class="carousel-inner flex transition-transform duration-500 ease-in-out">
+                    <!-- Testimonial 1 -->
+                    <div class="carousel-item w-full flex-shrink-0 px-4">
+                        <div class="bg-white p-8 rounded-xl shadow-lg max-w-3xl mx-auto">
+                            <div class="flex items-center mb-6">
+                                <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Marie D." class="w-16 h-16 rounded-full object-cover">
+                                <div class="ml-4">
+                                    <h4 class="font-bold">Marie D.</h4>
+                                    <p class="text-gray-600">Le Bistrot Parisien</p>
+                                    <div class="flex text-amber-400 mt-1">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="text-gray-700 italic">"Depuis que nous utilisons Kodaly, nous recevons 3 fois plus d'avis qu'avant. Le système d'alerte nous permet de répondre immédiatement aux clients mécontents et de transformer leur expérience. Notre note Google est passée de 4.2 à 4.7 en seulement 3 mois !"</p>
+                        </div>
+                    </div>
+                    <!-- Testimonial 2 -->
+                    <div class="carousel-item w-full flex-shrink-0 px-4">
+                        <div class="bg-white p-8 rounded-xl shadow-lg max-w-3xl mx-auto">
+                            <div class="flex items-center mb-6">
+                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Pierre L." class="w-16 h-16 rounded-full object-cover">
+                                <div class="ml-4">
+                                    <h4 class="font-bold">Pierre L.</h4>
+                                    <p class="text-gray-600">La Table Provençale</p>
+                                    <div class="flex text-amber-400 mt-1">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="text-gray-700 italic">"La simplicité d'utilisation de Kodaly est impressionnante. Nos clients adorent pouvoir donner leur avis directement depuis leur téléphone. Le dashboard nous donne des insights précieux sur ce qui fonctionne et ce qui doit être amélioré dans notre restaurant."</p>
+                        </div>
+                    </div>
+                    <!-- Testimonial 3 -->
+                    <div class="carousel-item w-full flex-shrink-0 px-4">
+                        <div class="bg-white p-8 rounded-xl shadow-lg max-w-3xl mx-auto">
+                            <div class="flex items-center mb-6">
+                                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sophie M." class="w-16 h-16 rounded-full object-cover">
+                                <div class="ml-4">
+                                    <h4 class="font-bold">Sophie M.</h4>
+                                    <p class="text-gray-600">Le Petit Gourmet</p>
+                                    <div class="flex text-amber-400 mt-1">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star-half-alt"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="text-gray-700 italic">"Grâce à Kodaly, nous avons pu identifier un problème récurrent avec l'un de nos plats que nous n'avions pas remarqué auparavant. Après l'avoir modifié selon les retours clients, les ventes ont augmenté de 30%. Une solution indispensable pour tout restaurateur soucieux de la qualité !"</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Carousel Controls -->
+                <button class="carousel-prev absolute left-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md ml-2 z-10">
+                    <i class="fas fa-chevron-left text-red-600"></i>
+                </button>
+                <button class="carousel-next absolute right-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md mr-2 z-10">
+                    <i class="fas fa-chevron-right text-red-600"></i>
+                </button>
+            </div>
+            <!-- Stats -->
+            <div class="grid md:grid-cols-3 gap-8 text-center">
+                <div class="fade-in">
+                    <div class="counter mb-2" data-target="5000">0</div>
+                    <p class="text-xl font-medium">avis collectés</p>
+                </div>
+                <div class="fade-in" style="transition-delay: 0.2s;">
+                    <div class="counter mb-2" data-target="200">0</div>
+                    <p class="text-xl font-medium">restaurants utilisent Kodaly</p>
+                </div>
+                <div class="fade-in" style="transition-delay: 0.4s;">
+                    <div class="counter mb-2" data-target="47">0</div>
+                    <p class="text-xl font-medium">note moyenne /5</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section id="faq" class="py-20 bg-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 slide-up">Questions fréquentes</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto slide-up" style="transition-delay: 0.2s;">Trouvez les réponses aux questions que vous vous posez</p>
+            </div>
+            <div class="space-y-4">
+                <!-- FAQ Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden fade-in">
+                    <button class="accordion-btn w-full flex justify-between items-center p-6 text-left font-medium text-gray-800 hover:bg-amber-50 transition duration-300">
+                        <span>Comment intégrer le QR code sur mes factures ?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0 text-gray-600">
+                            <p>L'intégration est très simple. Nous vous fournissons un fichier image du QR code que vous pouvez ajouter à votre logiciel de facturation existant. La plupart des systèmes d'impression de tickets ou de factures permettent d'insérer une image fixe. Notre équipe peut également vous aider à configurer cette intégration si nécessaire.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- FAQ Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden fade-in" style="transition-delay: 0.1s;">
+                    <button class="accordion-btn w-full flex justify-between items-center p-6 text-left font-medium text-gray-800 hover:bg-amber-50 transition duration-300">
+                        <span>Quel est le taux de réponse moyen avec Kodaly ?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0 text-gray-600">
+                            <p>Nos clients obtiennent en moyenne un taux de réponse de 15 à 25%, ce qui est significativement plus élevé que les méthodes traditionnelles comme les emails (2-5%). La facilité d'utilisation (simple scan du QR code) et le moment choisi (juste après l'expérience au restaurant) expliquent ces excellents résultats.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- FAQ Item 3 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden fade-in" style="transition-delay: 0.2s;">
+                    <button class="accordion-btn w-full flex justify-between items-center p-6 text-left font-medium text-gray-800 hover:bg-amber-50 transition duration-300">
+                        <span>Puis-je personnaliser les questions du formulaire ?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0 text-gray-600">
+                            <p>Absolument ! Notre solution vous permet de personnaliser entièrement le questionnaire. Vous pouvez choisir parmi des questions prédéfinies ou créer vos propres questions. Nous recommandons généralement de garder le formulaire court (3-5 questions maximum) pour maximiser le taux de réponse.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- FAQ Item 4 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden fade-in" style="transition-delay: 0.3s;">
+                    <button class="accordion-btn w-full flex justify-between items-center p-6 text-left font-medium text-gray-800 hover:bg-amber-50 transition duration-300">
+                        <span>Comment sont protégées les données de mes clients ?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0 text-gray-600">
+                            <p>La protection des données est notre priorité. Kodaly est conforme au RGPD. Les données sont stockées sur des serveurs sécurisés en Europe. Vous conservez la propriété de toutes vos données et pouvez les supprimer à tout moment. Nous n'utilisons jamais les données à des fins publicitaires ou ne les partageons avec des tiers.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- FAQ Item 5 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden fade-in" style="transition-delay: 0.4s;">
+                    <button class="accordion-btn w-full flex justify-between items-center p-6 text-left font-medium text-gray-800 hover:bg-amber-50 transition duration-300">
+                        <span>Existe-t-il un engagement sur la durée ?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0 text-gray-600">
+                            <p>Non, aucun engagement n'est requis. Vous pouvez souscrire à notre offre mensuelle et résilier à tout moment. Nous proposons également une période d'essai gratuit de 14 jours sans carte bancaire pour vous permettre de tester la solution sans risque.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-red-600 text-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 slide-up">Prêt à transformer votre relation client ?</h2>
+                <p class="text-xl max-w-3xl mx-auto slide-up" style="transition-delay: 0.2s;">Contactez-nous pour une démonstration ou commencez votre essai gratuit dès maintenant</p>
+            </div>
+            <div class="bg-white bg-opacity-10 rounded-xl p-8 md:p-12 backdrop-blur-sm fade-in">
+                <form id="contact-form" class="space-y-6">
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <label for="name" class="block mb-2 font-medium">Nom complet</label>
+                            <input type="text" id="name" class="input-field w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:border-white placeholder-white placeholder-opacity-70 transition duration-300" placeholder="Votre nom">
+                        </div>
+                        <div>
+                            <label for="email" class="block mb-2 font-medium">Email</label>
+                            <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:border-white placeholder-white placeholder-opacity-70 transition duration-300" placeholder="votre@email.com">
+                        </div>
+                    </div>
+                    <div>
+                        <label for="restaurant" class="block mb-2 font-medium">Nom de votre restaurant</label>
+                        <input type="text" id="restaurant" class="input-field w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:border-white placeholder-white placeholder-opacity-70 transition duration-300" placeholder="Le délicieux restaurant">
+                    </div>
+                    <div>
+                        <label for="message" class="block mb-2 font-medium">Message</label>
+                        <textarea id="message" rows="4" class="input-field w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:border-white placeholder-white placeholder-opacity-70 transition duration-300" placeholder="Votre message..."></textarea>
+                    </div>
+                    <div class="pt-2">
+                        <button type="submit" class="w-full bg-white text-red-600 font-bold py-4 px-6 rounded-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
+                            Envoyer la demande <i class="fas fa-paper-plane ml-2"></i>
+                        </button>
+                    </div>
+                </form>
+                <div id="form-success" class="hidden mt-6 p-4 bg-white bg-opacity-20 rounded-lg text-center">
+                    <i class="fas fa-check-circle text-3xl mb-3 text-green-300"></i>
+                    <h3 class="text-xl font-bold mb-2">Message envoyé avec succès !</h3>
+                    <p>Nous vous contacterons dans les plus brefs délais.</p>
+                </div>
+            </div>
+            <div class="mt-12 text-center fade-in">
+                <p class="mb-6">Ou contactez-nous directement :</p>
+                <div class="flex justify-center space-x-6">
+                    <a href="tel:+33123456789" class="flex items-center hover:text-amber-200 transition duration-300">
+                        <i class="fas fa-phone-alt mr-2"></i> +33 1 23 45 67 89
+                    </a>
+                    <a href="mailto:contact@kodaly.com" class="flex items-center hover:text-amber-200 transition duration-300">
+                        <i class="fas fa-envelope mr-2"></i> contact@kodaly.com
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 bg-amber-100">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 slide-up">Essayez Kodaly gratuitement pendant 14 jours</h2>
+            <p class="text-xl text-gray-700 mb-8 slide-up" style="transition-delay: 0.2s;">Aucune carte bancaire requise. Découvrez par vous-même comment Kodaly peut transformer votre relation client.</p>
+            <div class="slide-up" style="transition-delay: 0.4s;">
+                <a href="#contact" class="btn-pulse bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300 inline-flex items-center">
+                    Commencer l'essai gratuit <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-16 pb-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-4 gap-8 mb-12">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4">KODALY</h3>
+                    <p class="text-gray-400">La solution innovante pour collecter et analyser les avis clients en temps réel dans le secteur de la restauration.</p>
+                </div>
+                <div>
+                    <h4 class="font-bold text-lg mb-4">Navigation</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#features" class="text-gray-400 hover:text-white transition duration-300">Fonctionnalités</a></li>
+                        <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition duration-300">Comment ça marche</a></li>
+                        <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Témoignages</a></li>
+                        <li><a href="#faq" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold text-lg mb-4">Légal</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mentions légales</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">CGU</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Politique de confidentialité</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">RGPD</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold text-lg mb-4">Nous suivre</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 mb-4 md:mb-0">© 2023 Kodaly. Tous droits réservés.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">Français</a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">English</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.querySelector('.mobile-menu-button');
+        const mobileMenu = document.querySelector('.mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Accordion functionality
+        const accordionButtons = document.querySelectorAll('.accordion-btn');
+        accordionButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const content = button.nextElementSibling;
+                const icon = button.querySelector('i');
+                // Toggle the content
+                if (content.style.maxHeight) {
+                    content.style.maxHeight = null;
+                    icon.classList.remove('transform', 'rotate-180');
+                } else {
+                    content.style.maxHeight = content.scrollHeight + 'px';
+                    icon.classList.add('transform', 'rotate-180');
+                }
+            });
+        });
+        // Testimonial carousel
+        let currentSlide = 0;
+        const carouselItems = document.querySelectorAll('.carousel-item');
+        const carouselInner = document.querySelector('.carousel-inner');
+        const prevButton = document.querySelector('.carousel-prev');
+        const nextButton = document.querySelector('.carousel-next');
+        function updateCarousel() {
+            const itemWidth = carouselItems[0].offsetWidth;
+            carouselInner.style.transform = `translateX(-${currentSlide * itemWidth}px)`;
+        }
+        nextButton.addEventListener('click', () => {
+            if (currentSlide < carouselItems.length - 1) {
+                currentSlide++;
+            } else {
+                currentSlide = 0;
+            }
+            updateCarousel();
+        });
+        prevButton.addEventListener('click', () => {
+            if (currentSlide > 0) {
+                currentSlide--;
+            } else {
+                currentSlide = carouselItems.length - 1;
+            }
+            updateCarousel();
+        });
+        // Animated counters
+        const counters = document.querySelectorAll('.counter');
+        const speed = 200;
+        function animateCounters() {
+            counters.forEach(counter => {
+                const target = +counter.getAttribute('data-target');
+                const count = +counter.innerText;
+                const increment = target / speed;
+                if (count < target) {
+                    counter.innerText = Math.ceil(count + increment);
+                    setTimeout(animateCounters, 1);
+                } else {
+                    counter.innerText = target;
+                }
+            });
+        }
+        // Form submission
+        const contactForm = document.getElementById('contact-form');
+        const formSuccess = document.getElementById('form-success');
+        contactForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            // Here you would typically send the form data to your server
+            // For this example, we'll just show the success message
+            contactForm.classList.add('hidden');
+            formSuccess.classList.remove('hidden');
+        });
+        // Scroll animations
+        function checkScroll() {
+            const fadeElements = document.querySelectorAll('.fade-in');
+            const slideUpElements = document.querySelectorAll('.slide-up');
+            fadeElements.forEach(element => {
+                const elementPosition = element.getBoundingClientRect().top;
+                const screenPosition = window.innerHeight / 1.2;
+                if (elementPosition < screenPosition) {
+                    element.classList.add('visible');
+                }
+            });
+            slideUpElements.forEach(element => {
+                const elementPosition = element.getBoundingClientRect().top;
+                const screenPosition = window.innerHeight / 1.2;
+                if (elementPosition < screenPosition) {
+                    element.classList.add('visible');
+                }
+            });
+            // Start counter animation when stats section is visible
+            const statsSection = document.querySelector('#testimonials');
+            const statsPosition = statsSection.getBoundingClientRect().top;
+            const statsScreenPosition = window.innerHeight / 1.2;
+            if (statsPosition < statsScreenPosition && !counters[0].classList.contains('animated')) {
+                counters.forEach(counter => counter.classList.add('animated'));
+                animateCounters();
+            }
+        }
+        window.addEventListener('scroll', checkScroll);
+        window.addEventListener('load', checkScroll);
+    </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=evoluxsa/kodaly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>