Spaces:
Running
Running
Design a modern, responsive homepage UI for BeYaft, a platform that connects professionals and individuals through real, verifiable 'before/after' transformations. The layout should follow the structure of Superprof’s homepage but adapted to BeYaft’s theme. Hero Section: Gradient background in fresh, professional colors (suggest blue-green or teal tones instead of pink). Large bold headline: 'Trouvez le professionnel parfait pour votre transformation'. Search bar with placeholder text: 'Essayez "Relooking buffet à Paris < 100€"'. Search categories below the search bar with icon + label (examples: Rénovation, Décoration, Coaching, Beauté, Mode, Sport, Mariage, Jardinage). Key Figures Section: Below hero: Display statistics in a row with icons: '2 500+ transformations publiées', '1 000+ professionnels visibles', '97% de satisfaction', 'Disponible partout en France'. Featured Professionals Section: Title: 'Des professionnels évalués et vérifiés' with 5-star icon. Grid of professional cards with: Large photo of the transformation or pro. Name and location (e.g., 'Sophie — Paris 16e'). Rating with stars + number of reviews. Tags like 'Ambassadeur' or 'Expert certifié'. Short description of expertise (e.g., 'Relooking cuisine, salle de bain, dressing — 200+ projets réalisés'). Price/hour or project rate + CTA 'Voir le projet'. Inspiration Section: Below professionals: carousel or grid of recent projects with before/after thumbnails. Title: 'Inspirez-vous de projets réels'. Each project card should show: Before photo, After photo, short description, and location. Footer: Call to action: 'Publiez votre projet' (Pro ou particulier). Links: Comment ça marche, Trouver un pro, Inspirations, Contact. Ensure the style is clean, minimalist, and image-focused, similar to Superprof, but with more emphasis on before/after visuals and project authenticity. - Initial Deployment
255b018 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BeYaft - Transformations professionnelles vérifiées</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); | |
| } | |
| .before-after-container { | |
| position: relative; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .before-after-slider { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 50%; | |
| overflow: hidden; | |
| border-right: 2px solid white; | |
| } | |
| .before-after-slider img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .before-after-handle { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| cursor: ew-resize; | |
| } | |
| .before-after-handle i { | |
| color: #06b6d4; | |
| } | |
| .pro-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .project-card:hover .before-after-container { | |
| transform: scale(1.02); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <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-2xl font-bold text-cyan-600">BeYaft</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-cyan-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Comment ça marche</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trouver un pro</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Inspirations</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-md text-sm font-medium">Publier un projet</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-cyan-50 border-cyan-500 text-cyan-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Comment ça marche</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trouver un pro</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Inspirations</a> | |
| <div class="mt-4 pl-3 pr-4 py-2"> | |
| <button class="w-full bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-md text-sm font-medium">Publier un projet</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Trouvez le professionnel parfait pour votre transformation</h1> | |
| <p class="text-xl md:text-2xl mb-8">Des milliers de professionnels vérifiés pour réaliser vos projets</p> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="relative"> | |
| <input type="text" placeholder='Essayez "Relooking buffet à Paris < 100€"' class="w-full px-6 py-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-cyan-300"> | |
| <button class="absolute right-2 top-2 bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-2 rounded-full font-medium">Rechercher</button> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex flex-wrap justify-center gap-4"> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-home mr-2"></i> Rénovation | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-couch mr-2"></i> Décoration | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-user-tie mr-2"></i> Coaching | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-spa mr-2"></i> Beauté | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-tshirt mr-2"></i> Mode | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-dumbbell mr-2"></i> Sport | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-ring mr-2"></i> Mariage | |
| </a> | |
| <a href="#" class="flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full"> | |
| <i class="fas fa-leaf mr-2"></i> Jardinage | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Figures Section --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div> | |
| <div class="text-3xl font-bold text-cyan-600 mb-2">2 500+</div> | |
| <p class="text-gray-600">transformations publiées</p> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-cyan-600 mb-2">1 000+</div> | |
| <p class="text-gray-600">professionnels visibles</p> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-cyan-600 mb-2">97%</div> | |
| <p class="text-gray-600">de satisfaction</p> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-cyan-600 mb-2"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <p class="text-gray-600">Disponible partout en France</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Professionals Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Des professionnels évalués et vérifiés</h2> | |
| <div class="flex justify-center items-center"> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| <span class="ml-2 text-gray-600">basé sur des avis vérifiés</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Pro Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden pro-card transition-all duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Transformation" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded-full text-xs font-semibold text-cyan-600">Ambassadeur</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Sophie — Paris 16e</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| <span class="ml-1 text-gray-500 text-sm">(142 avis)</span> | |
| </div> | |
| </div> | |
| <div class="bg-cyan-100 text-cyan-800 px-2 py-1 rounded-full text-xs font-semibold">Expert certifié</div> | |
| </div> | |
| <p class="mt-3 text-gray-600 text-sm">Relooking cuisine, salle de bain, dressing — 200+ projets réalisés</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="font-bold text-cyan-600">À partir de 90€/h</div> | |
| <button class="text-cyan-600 hover:text-cyan-700 font-medium text-sm">Voir le projet <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pro Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden pro-card transition-all duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1583845112208-9d9259c6abf0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Transformation" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded-full text-xs font-semibold text-cyan-600">Top Pro</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Thomas — Lyon</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| <span class="ml-1 text-gray-500 text-sm">(89 avis)</span> | |
| </div> | |
| </div> | |
| <div class="bg-cyan-100 text-cyan-800 px-2 py-1 rounded-full text-xs font-semibold">Premium</div> | |
| </div> | |
| <p class="mt-3 text-gray-600 text-sm">Architecte d'intérieur — Spécialiste petits espaces</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="font-bold text-cyan-600">À partir de 120€/h</div> | |
| <button class="text-cyan-600 hover:text-cyan-700 font-medium text-sm">Voir le projet <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pro Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden pro-card transition-all duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Transformation" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Camille — Bordeaux</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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="far fa-star"></i> | |
| </div> | |
| <span class="ml-1 text-gray-500 text-sm">(56 avis)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-gray-600 text-sm">Designer textile — Création de rideaux, coussins sur mesure</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="font-bold text-cyan-600">À partir de 65€/h</div> | |
| <button class="text-cyan-600 hover:text-cyan-700 font-medium text-sm">Voir le projet <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="bg-white border border-cyan-600 text-cyan-600 hover:bg-cyan-50 px-6 py-3 rounded-md font-medium">Voir tous les professionnels</button> | |
| </div> | |
| </div> | |
| <!-- Inspiration Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Inspirez-vous de projets réels</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Découvrez des transformations avant/après réalisées par nos professionnels</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden project-card transition-all duration-300"> | |
| <div class="before-after-container h-64"> | |
| <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Before" class="w-full h-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="After" class="w-full h-full object-cover"> | |
| <div class="before-after-handle"> | |
| <i class="fas fa-arrows-alt-h"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-lg">Relooking complet d'une cuisine</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Passage d'une cuisine vintage à un style moderne et fonctionnel</p> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> Paris 15e | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden project-card transition-all duration-300"> | |
| <div class="before-after-container h-64"> | |
| <img src="https://images.unsplash.com/photo-1583845112260-9266d7a872ca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Before" class="w-full h-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://images.unsplash.com/photo-1583845112208-9f9259c6abf0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="After" class="w-full h-full object-cover"> | |
| <div class="before-after-handle"> | |
| <i class="fas fa-arrows-alt-h"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-lg">Transformation salon/salle à manger</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Optimisation d'un espace de vie pour une famille de 4</p> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> Lyon 3e | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden project-card transition-all duration-300"> | |
| <div class="before-after-container h-64"> | |
| <img src="https://images.unsplash.com/photo-1583845112173-1caf07ec4f0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Before" class="w-full h-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://images.unsplash.com/photo-1583845112208-9f9259c6abf0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="After" class="w-full h-full object-cover"> | |
| <div class="before-after-handle"> | |
| <i class="fas fa-arrows-alt-h"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-lg">Chambre d'enfant thématique</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Création d'une chambre d'enfant sur le thème de l'espace</p> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> Marseille | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded-md font-medium">Voir plus d'inspirations</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Prêt à transformer votre espace ?</h2> | |
| <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">Que vous soyez un particulier cherchant un professionnel ou un professionnel voulant montrer votre travail, BeYaft est la plateforme idéale.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded-md font-medium">Publier un projet</button> | |
| <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-md font-medium">Devenir professionnel</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">BeYaft</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">À propos</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Presse</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Carrières</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Confidentialité</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Découvrir</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Comment ça marche</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Trouver un pro</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Inspirations</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Professionnels</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Devenir pro</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Espace pro</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Formations</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Tarifs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Aide</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Nous contacter</a></li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-facebook-f mr-2 text-gray-300"></i> | |
| <i class="fab fa-twitter mr-2 text-gray-300"></i> | |
| <i class="fab fa-instagram text-gray-300"></i> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-700 text-center text-gray-400 text-sm"> | |
| <p>© 2023 BeYaft. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('nav button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Before/After slider functionality | |
| document.querySelectorAll('.before-after-container').forEach(container => { | |
| const slider = container.querySelector('.before-after-slider'); | |
| const handle = container.querySelector('.before-after-handle'); | |
| let isDragging = false; | |
| function moveSlider(e) { | |
| if (!isDragging) return; | |
| const containerRect = container.getBoundingClientRect(); | |
| let x = e.clientX - containerRect.left; | |
| // Keep within bounds | |
| x = Math.max(0, Math.min(x, containerRect.width)); | |
| const percent = (x / containerRect.width) * 100; | |
| slider.style.width = `${percent}%`; | |
| handle.style.left = `${percent}%`; | |
| } | |
| handle.addEventListener('mousedown', () => { | |
| isDragging = true; | |
| document.body.style.cursor = 'ew-resize'; | |
| }); | |
| document.addEventListener('mousemove', moveSlider); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| document.body.style.cursor = ''; | |
| }); | |
| // Touch support | |
| handle.addEventListener('touchstart', () => { | |
| isDragging = true; | |
| }); | |
| document.addEventListener('touchmove', (e) => { | |
| if (!isDragging) return; | |
| const touch = e.touches[0]; | |
| const containerRect = container.getBoundingClientRect(); | |
| let x = touch.clientX - containerRect.left; | |
| // Keep within bounds | |
| x = Math.max(0, Math.min(x, containerRect.width)); | |
| const percent = (x / containerRect.width) * 100; | |
| slider.style.width = `${percent}%`; | |
| handle.style.left = `${percent}%`; | |
| }); | |
| document.addEventListener('touchend', () => { | |
| isDragging = false; | |
| }); | |
| }); | |
| </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=luckaerickson/beyaft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |