Spaces:
Running
Running
"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
d4ff221
verified
| <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> |