Spaces:

AFROSALSA
/

lotus-service

Running

App Files Files Community

AFROSALSA commited on Jul 23, 2025

Commit

d4ff221

verified ·

1 Parent(s): f85a4ec

"Crée un site web professionnel de mise en relation pour services domestiques au Maroc (nom provisoire : DariLink). 1. Services proposés (en tableau récapitulatif) : Catégorie Exemples de métiers Zone de couverture Ménage Femme/homme de ménage Toutes grandes villes Garde d'enfants Nounou, précepteur scolaire Casablanca, Rabat, Marrakech... Soins Aide malade, auxiliaire Sécurité Gardien, vigile Transport Chauffeur Bâtiment Aide-maçon, peintre Spécialisés Cuisinier, jardinier 2. Fonctionnalités clés : Prix unique : 500 MAD par recrutement (affiché en gros sur chaque page) Garantie de remplacement : Système de 3 remplacements gratuits sous 30 jours (mécanisme de suivi intégré) Couverture géographique : Page dédiée avec carte interactive (villes desservies : Casablanca, Rabat, Marrakech, Fès, Tanger, Agadir, Meknès) Triple langue : Français/Arabe/Anglais (sélecteur de drapeaux en header) 3. Design requis : Palette : Bleu royal (#0d6efd) + Blanc + Or (#FFD700) (confiance/luxe) Sections obligatoires : Bannière hero avec CTA "Trouvez votre professionnel en 24h" Étapes simplifiées (1. Choix 2. Paiement 3. Mise en relation) Témoignages clients (carrousels) FAQ légale (droit du travail marocain) Responsive mobile-first 4. Backend : Formulaire intelligent avec : Type de service (menu déroulant) Ville (géolocalisation automatique) Calendrier de disponibilité Dashboard admin pour gérer les remplacements/compteurs 5. Sécurité & Légal : Badges de confiance : Certifications CNSS visibles Page "Engagements" : Respect du Code du travail marocain Cryptage des paiements (option Carte Bancaire + CMI) 6. Marketing : Argumentaire phare : "500 MAD seulement pour un service garanti 30 jours" Bannières multilingues : "خادمة منزلية بضمان الاستبدال" / "Guaranteed Replacement Housekeeper" Intégration WhatsApp Business (bouton flottant) Compléments suggérés : ✅ Pack "Prémium" : Option ménage + jardinage (-10%) ✅ Espace employés : Déposer CV en ligne (gratuit) ✅ Alertes SMS : Notifications de remplacement ✅ Partenariats : Logo Royal Air Maroc (offres employés) Exemple de micro-copywriting : "Vous embauchez un talent, pas un CV : Notre garantie 3×30 jours vous offre la sérénité !" - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Lotus Service
-emoji: 👀
-colorFrom: green
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: lotus-service
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 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,667 @@
-<!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>DariLink - Services Domestiques au Maroc</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">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#0d6efd',
+                        gold: '#FFD700',
+                        dark: '#1a202c'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f8fafc;
+        }
+        .hero-bg {
+            background: linear-gradient(rgba(13, 110, 253, 0.85), rgba(13, 110, 253, 0.9)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');
+            background-size: cover;
+            background-position: center;
+        }
+        .service-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .testimonial-card {
+            transition: all 0.3s ease;
+        }
+        .testimonial-card:hover {
+            transform: scale(1.02);
+        }
+        .step-card {
+            position: relative;
+            overflow: hidden;
+        }
+        .step-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, #0d6efd, #FFD700);
+        }
+        .price-tag {
+            position: relative;
+            display: inline-block;
+            padding: 15px 30px;
+            background: #0d6efd;
+            color: white;
+            font-weight: 700;
+            font-size: 1.5rem;
+            border-radius: 50px;
+            box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
+            animation: pulse 2s infinite;
+        }
+        .price-tag::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: -15px;
+            width: 30px;
+            height: 30px;
+            background: #0d6efd;
+            border-radius: 50%;
+            transform: translateY(-50%);
+            z-index: -1;
+        }
+        .price-tag::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: -15px;
+            width: 30px;
+            height: 30px;
+            background: #0d6efd;
+            border-radius: 50%;
+            transform: translateY(-50%);
+            z-index: -1;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(13, 110, 253, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
+        }
+        .flag-selector {
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .flag-selector:hover {
+            transform: scale(1.1);
+        }
+        .map-container {
+            position: relative;
+            overflow: hidden;
+            border-radius: 15px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .map-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(13, 110, 253, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+            padding: 20px;
+        }
+        .map-overlay h3 {
+            background: rgba(255, 255, 255, 0.9);
+            padding: 10px 20px;
+            border-radius: 50px;
+            font-weight: 700;
+            color: #0d6efd;
+        }
+        .feature-icon {
+            width: 70px;
+            height: 70px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(13, 110, 253, 0.1);
+            border-radius: 50%;
+            margin: 0 auto 20px;
+            color: #0d6efd;
+            font-size: 1.8rem;
+        }
+        .whatsapp-float {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            z-index: 1000;
+            background: #25D366;
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
+            animation: pulse-whatsapp 2s infinite;
+        }
+        @keyframes pulse-whatsapp {
+            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
+        }
+        .badge {
+            display: inline-block;
+            padding: 5px 15px;
+            background: #0d6efd;
+            color: white;
+            border-radius: 50px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin: 5px;
+        }
+        .faq-item {
+            border-bottom: 1px solid #e2e8f0;
+            padding: 15px 0;
+        }
+        .faq-question {
+            font-weight: 600;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .faq-answer {
+            margin-top: 10px;
+            padding-left: 20px;
+            color: #4a5568;
+            display: none;
+        }
+        .active .faq-answer {
+            display: block;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- WhatsApp Float Button -->
+    <a href="https://wa.me/212612345678" target="_blank" class="whatsapp-float">
+        <i class="fab fa-whatsapp"></i>
+    </a>
+    <!-- Header -->
+    <header class="bg-white shadow-md sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-xl">D</div>
+                <span class="ml-2 text-xl font-bold text-primary">DariLink</span>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#services" class="text-gray-600 hover:text-primary font-medium">Services</a>
+                <a href="#how-it-works" class="text-gray-600 hover:text-primary font-medium">Comment ça marche</a>
+                <a href="#testimonials" class="text-gray-600 hover:text-primary font-medium">Témoignages</a>
+                <a href="#coverage" class="text-gray-600 hover:text-primary font-medium">Couverture</a>
+                <a href="#faq" class="text-gray-600 hover:text-primary font-medium">FAQ</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <div class="flex space-x-2">
+                    <span class="flag-selector text-2xl" onclick="changeLanguage('fr')">🇫🇷</span>
+                    <span class="flag-selector text-2xl" onclick="changeLanguage('ar')">🇲🇦</span>
+                    <span class="flag-selector text-2xl" onclick="changeLanguage('en')">🇬🇧</span>
+                </div>
+                <button class="bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition">Connexion</button>
+                <button class="md:hidden text-gray-600">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero-bg text-white py-20">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">Trouvez votre professionnel en 24h</h1>
+            <p class="text-xl mb-10 max-w-2xl mx-auto">Connectez-vous avec des professionnels qualifiés pour tous vos besoins domestiques au Maroc</p>
+            <div class="price-tag mb-10">500 MAD par recrutement</div>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="bg-gold text-dark px-8 py-4 rounded-lg font-bold text-lg hover:bg-yellow-500 transition">Trouver un professionnel</button>
+                <button class="bg-transparent border-2 border-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-primary transition">Déposer un CV</button>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Nos Services</h2>
+            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Trouvez le professionnel parfait pour répondre à vos besoins domestiques</p>
+            <div class="overflow-x-auto">
+                <table class="min-w-full bg-white border border-gray-200 rounded-lg">
+                    <thead>
+                        <tr class="bg-primary text-white">
+                            <th class="py-3 px-4 text-left">Catégorie</th>
+                            <th class="py-3 px-4 text-left">Exemples de métiers</th>
+                            <th class="py-3 px-4 text-left">Zone de couverture</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Ménage</td>
+                            <td class="py-3 px-4">Femme/homme de ménage</td>
+                            <td class="py-3 px-4">Toutes grandes villes</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Garde d'enfants</td>
+                            <td class="py-3 px-4">Nounou, précepteur scolaire</td>
+                            <td class="py-3 px-4">Casablanca, Rabat, Marrakech...</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Soins</td>
+                            <td class="py-3 px-4">Aide malade, auxiliaire</td>
+                            <td class="py-3 px-4">Toutes grandes villes</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Sécurité</td>
+                            <td class="py-3 px-4">Gardien, vigile</td>
+                            <td class="py-3 px-4">Toutes grandes villes</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Transport</td>
+                            <td class="py-3 px-4">Chauffeur</td>
+                            <td class="py-3 px-4">Toutes grandes villes</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Bâtiment</td>
+                            <td class="py-3 px-4">Aide-maçon, peintre</td>
+                            <td class="py-3 px-4">Toutes grandes villes</td>
+                        </tr>
+                        <tr class="hover:bg-gray-50">
+                            <td class="py-3 px-4 font-medium">Spécialisés</td>
+                            <td class="py-3 px-4">Cuisinier, jardinier</td>
+                            <td class="py-3 px-4">Toutes grandes villes</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works -->
+    <section id="how-it-works" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Comment ça marche</h2>
+            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Notre processus simple et garanti pour trouver le professionnel idéal</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="step-card bg-white p-8 rounded-xl shadow-md text-center">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6">1</div>
+                    <h3 class="text-xl font-bold mb-3">Choix du service</h3>
+                    <p class="text-gray-600">Sélectionnez le type de service dont vous avez besoin et spécifiez votre ville et disponibilité.</p>
+                </div>
+                <div class="step-card bg-white p-8 rounded-xl shadow-md text-center">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6">2</div>
+                    <h3 class="text-xl font-bold mb-3">Paiement sécurisé</h3>
+                    <p class="text-gray-600">Payez les 500 MAD par recrutement via notre système sécurisé avec carte bancaire ou CMI.</p>
+                </div>
+                <div class="step-card bg-white p-8 rounded-xl shadow-md text-center">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6">3</div>
+                    <h3 class="text-xl font-bold mb-3">Mise en relation</h3>
+                    <p class="text-gray-600">Nous vous mettons en contact avec un professionnel qualifié dans les 24h maximum.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Nos Engagements</h2>
+            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Pour votre sérénité et confiance, nous vous garantissons</p>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="text-center">
+                    <div class="feature-icon">
+                        <i class="fas fa-sync-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Garantie 3×30 jours</h3>
+                    <p class="text-gray-600">3 remplacements gratuits sous 30 jours si le professionnel ne convient pas.</p>
+                </div>
+                <div class="text-center">
+                    <div class="feature-icon">
+                        <i class="fas fa-map-marker-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Couverture nationale</h3>
+                    <p class="text-gray-600">Présence dans les principales villes du Maroc avec des professionnels qualifiés.</p>
+                </div>
+                <div class="text-center">
+                    <div class="feature-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Sécurité optimale</h3>
+                    <p class="text-gray-600">Vérification des professionnels et cryptage des paiements pour votre sécurité.</p>
+                </div>
+                <div class="text-center">
+                    <div class="feature-icon">
+                        <i class="fas fa-certificate"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Conformité légale</h3>
+                    <p class="text-gray-600">Respect du Code du travail marocain et certifications CNSS visibles.</p>
+                </div>
+            </div>
+            <div class="mt-16 bg-gray-50 rounded-xl p-8 flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+                    <h3 class="text-2xl font-bold mb-4">Pack Premium</h3>
+                    <p class="text-gray-600 mb-4">Combinez ménage et jardinage avec une réduction de 10% sur votre service.</p>
+                    <button class="bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">Découvrir l'offre</button>
+                </div>
+                <div class="md:w-1/2 bg-gold rounded-lg p-6 text-center">
+                    <p class="text-xl font-bold mb-2">Économisez 10%</p>
+                    <p class="text-dark">Avec notre pack combiné ménage + jardinage</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Coverage Map -->
+    <section id="coverage" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Couverture Géographique</h2>
+            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Nous desservons les principales villes du Maroc</p>
+            <div class="map-container h-96 bg-gray-200 rounded-xl relative">
+                <div class="map-overlay">
+                    <h3 class="text-2xl font-bold mb-4">Villes desservies</h3>
+                    <div class="flex flex-wrap justify-center">
+                        <span class="badge">Casablanca</span>
+                        <span class="badge">Rabat</span>
+                        <span class="badge">Marrakech</span>
+                        <span class="badge">Fès</span>
+                        <span class="badge">Tanger</span>
+                        <span class="badge">Agadir</span>
+                        <span class="badge">Meknès</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section id="testimonials" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Témoignages Clients</h2>
+            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Découvrez ce que nos clients disent de notre service</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="testimonial-card bg-gray-50 p-6 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold">A</div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Ahmed Benali</h4>
+                            <p class="text-gray-600 text-sm">Casablanca</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic">"J'ai trouvé une femme de ménage exceptionnelle en moins de 24h. La garantie de remplacement m'a donné confiance. Service parfait!"</p>
+                    <div class="flex text-gold mt-4">
+                        <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 class="testimonial-card bg-gray-50 p-6 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold">S</div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Salma El Amrani</h4>
+                            <p class="text-gray-600 text-sm">Rabat</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic">"La nounou que j'ai trouvée grâce à DariLink s'occupe de mes enfants comme si c'était les siens. Service fiable et professionnel."</p>
+                    <div class="flex text-gold mt-4">
+                        <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 class="testimonial-card bg-gray-50 p-6 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold">M</div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Mehdi Ouazzani</h4>
+                            <p class="text-gray-600 text-sm">Marrakech</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic">"J'ai utilisé le service pour trouver un jardinier. La qualité du travail est remarquable et le prix imbattable. Je recommande vivement!"</p>
+                    <div class="flex text-gold mt-4">
+                        <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>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section id="faq" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Questions Fréquentes</h2>
+            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Toutes les informations légales et pratiques sur nos services</p>
+            <div class="max-w-3xl mx-auto">
+                <div class="faq-item">
+                    <div class="faq-question" onclick="toggleFAQ(this)">
+                        <span>Comment fonctionne la garantie de remplacement ?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p>Notre garantie de remplacement vous offre 3 remplacements gratuits sous 30 jours si le professionnel ne convient pas. Vous contactez notre service client qui procède à un remplacement dans les 24h.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question" onclick="toggleFAQ(this)">
+                        <span>Quels sont mes droits selon le Code du travail marocain ?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p>Nous respectons strictement le Code du travail marocain. Les professionnels sont informés de leurs droits et obligations. Vous avez droit à un contrat clair, un salaire conforme au SMIG et une couverture CNSS.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question" onclick="toggleFAQ(this)">
+                        <span>Comment sont vérifiés les professionnels ?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p>Nous effectuons une vérification complète de chaque professionnel : pièce d'identité, casier judiciaire, références antérieures et compétences. Tous sont inscrits à la CNSS et formés aux normes de sécurité.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question" onclick="toggleFAQ(this)">
+                        <span>Quels modes de paiement acceptez-vous ?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p>Nous acceptons les paiements par carte bancaire (Carte Bleue, Visa, Mastercard) et via le système CMI sécurisé. Tous les paiements sont cryptés et sécurisés.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question" onclick="toggleFAQ(this)">
+                        <span>Puis-je déposer mon CV gratuitement ?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p>Oui, l'espace employés est totalement gratuit. Vous pouvez déposer votre CV, créer un profil détaillé et recevoir des propositions de missions correspondant à votre profil.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-dark text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-xl">D</div>
+                        <span class="ml-2 text-xl font-bold">DariLink</span>
+                    </div>
+                    <p class="text-gray-400 mb-4">Votre plateforme de confiance pour les services domestiques au Maroc.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Services</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Ménage</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Garde d'enfants</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Soins à domicile</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Sécurité</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Transport</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Liens utiles</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Engagements</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Conditions générales</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Contact</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-3"></i>
+                            <span>123 Avenue Mohammed V, Casablanca</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone mr-3"></i>
+                            <span>+212 522 123 456</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-3"></i>
+                            <span>contact@darilink.ma</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
+                <p>© 2023 DariLink. Tous droits réserv��s. Respect du Code du travail marocain.</p>
+                <div class="mt-4 flex justify-center space-x-6">
+                    <span class="badge bg-gold text-dark">CNSS Certifié</span>
+                    <span class="badge bg-gold text-dark">Paiement Sécurisé</span>
+                    <span class="badge bg-gold text-dark">Service Garanti</span>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Toggle FAQ items
+        function toggleFAQ(element) {
+            const faqItem = element.parentElement;
+            faqItem.classList.toggle('active');
+            const icon = element.querySelector('i');
+            if (faqItem.classList.contains('active')) {
+                icon.classList.remove('fa-chevron-down');
+                icon.classList.add('fa-chevron-up');
+            } else {
+                icon.classList.remove('fa-chevron-up');
+                icon.classList.add('fa-chevron-down');
+            }
+        }
+        // Language switcher
+        function changeLanguage(lang) {
+            // In a real implementation, this would change the language
+            // For this demo, we'll just show an alert
+            alert(`Changement de langue vers: ${lang.toUpperCase()}`);
+        }
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    window.scrollTo({
+                        top: target.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    </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=AFROSALSA/lotus-service" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>