Spaces:
Running
Running
Crée un site web professionnel et moderne appelé “Djamel Pro”. C’est une boutique numérique qui vend plus de 50 ebooks puissants dans le domaine du développement personnel : confiance en soi, gestion du stress, réussite, motivation et autonomie mentale. Le site doit inclure : - Une page d’accueil motivante avec citation, texte fort, design moderne - Une boutique claire avec filtres (thèmes, popularité, nouveautés) - Une fiche produit avec bouton “Téléchargement immédiat après achat” - Un bouton WhatsApp pour contact direct avec le fondateur : +221XXXXXXXX - Un formulaire de contact (email : tipscoran@gmail.com) - Une page “À propos de Djamel Pro” courte, inspirante et professionnelle - Une section FAQ avec réponses simples sur les paiements, téléchargements et sécurité - Un tableau de bord admin (invisible au public) pour voir : - Nombre de visites - Nombre de ventes - Taux de conversion - Provenance des visiteurs - Pages les plus vues - Utilisateurs connectés en temps réel - Intégration de Google Analytics et Facebook Pixel - Design élégant en bleu, noir et blanc avec animations douces - Optimisation mobile parfaite - Espace client personnel pour re-télécharger les ebooks - Option “mode sombre” - Zone pour insérer une vidéo plus tard - Site très rapide avec chargement intelligent Donne-moi un résultat propre, stylé, professionnel, prêt à l’emploi. Laisse-moi des sections personnalisables pour ajouter des contenus nouveaux (offres, vidéos, témoignages, etc). - Initial Deployment
4086813 verified | <html lang="fr" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Djamel Pro - Ebooks de développement personnel</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 = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| dark: '#0f172a', | |
| light: '#f8fafc' | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.5s ease-in-out', | |
| 'float': 'float 3s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom CSS for elements that can't be done with Tailwind */ | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #2563eb 0%, #0f172a 100%); | |
| } | |
| .ebook-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); | |
| } | |
| .dark .ebook-card { | |
| background-color: #1e293b; | |
| } | |
| .dark .ebook-card:hover { | |
| box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04); | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #2563eb; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #2563eb; | |
| } | |
| /* Smooth transitions */ | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-dark text-gray-800 dark:text-gray-200 transition-all duration-300"> | |
| <!-- WhatsApp Floating Button --> | |
| <div class="fixed bottom-6 right-6 z-50 animate-bounce"> | |
| <a href="https://wa.me/+221XXXXXXXX" target="_blank" class="bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-all"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| </div> | |
| <!-- Dark Mode Toggle --> | |
| <div class="fixed top-4 right-4 z-50"> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| <span class="text-sm font-medium"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:inline"></i> | |
| </span> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-40 transition-all duration-300"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white font-bold">DP</div> | |
| <span class="text-xl font-bold text-primary dark:text-white">Djamel Pro</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-700 dark:text-gray-200 hover:text-primary font-medium">Accueil</a> | |
| <a href="#boutique" class="text-gray-700 dark:text-gray-200 hover:text-primary font-medium">Boutique</a> | |
| <a href="#about" class="text-gray-700 dark:text-gray-200 hover:text-primary font-medium">À propos</a> | |
| <a href="#faq" class="text-gray-700 dark:text-gray-200 hover:text-primary font-medium">FAQ</a> | |
| <a href="#contact" class="text-gray-700 dark:text-gray-200 hover:text-primary font-medium">Contact</a> | |
| <a href="#login" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all">Espace Client</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-200 focus:outline-none"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden pb-4"> | |
| <a href="#home" class="block py-2 text-gray-700 dark:text-gray-200 hover:text-primary">Accueil</a> | |
| <a href="#boutique" class="block py-2 text-gray-700 dark:text-gray-200 hover:text-primary">Boutique</a> | |
| <a href="#about" class="block py-2 text-gray-700 dark:text-gray-200 hover:text-primary">À propos</a> | |
| <a href="#faq" class="block py-2 text-gray-700 dark:text-gray-200 hover:text-primary">FAQ</a> | |
| <a href="#contact" class="block py-2 text-gray-700 dark:text-gray-200 hover:text-primary">Contact</a> | |
| <a href="#login" class="block mt-2 bg-primary text-white px-4 py-2 rounded-md text-center hover:bg-blue-700">Espace Client</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Transformez votre vie avec nos ebooks puissants</h1> | |
| <p class="text-xl mb-8 opacity-90">Plus de 50 guides pratiques pour booster votre confiance, gérer le stress et atteindre vos objectifs.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#boutique" class="bg-white text-primary px-6 py-3 rounded-md font-bold hover:bg-gray-100 text-center transition-all">Découvrir la boutique</a> | |
| <a href="#about" class="border-2 border-white text-white px-6 py-3 rounded-md font-bold hover:bg-white hover:text-primary text-center transition-all">En savoir plus</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center animate-float"> | |
| <img src="https://via.placeholder.com/500x400" alt="Ebooks Djamel Pro" class="rounded-lg shadow-2xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Quote --> | |
| <section class="bg-gray-100 dark:bg-gray-700 py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <blockquote class="max-w-3xl mx-auto"> | |
| <p class="text-2xl md:text-3xl italic font-medium mb-4">"Le succès n'est pas final, l'échec n'est pas fatal : c'est le courage de continuer qui compte."</p> | |
| <footer class="text-lg">— Winston Churchill</footer> | |
| </blockquote> | |
| </div> | |
| </section> | |
| <!-- Video Placeholder Section --> | |
| <section class="py-16 bg-white dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Découvrez notre dernière vidéo</h2> | |
| <div class="bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden max-w-4xl mx-auto aspect-video flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <i class="fas fa-play-circle text-5xl text-primary mb-4"></i> | |
| <p class="text-xl">Espace réservé pour une future vidéo</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Boutique Section --> | |
| <section id="boutique" class="py-16 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Notre Boutique d'Ebooks</h2> | |
| <p class="text-center text-lg mb-12 max-w-2xl mx-auto">Choisissez parmi notre sélection d'ebooks puissants pour transformer votre vie.</p> | |
| <!-- Filters --> | |
| <div class="flex flex-wrap justify-center mb-12 gap-4"> | |
| <button class="filter-btn active px-4 py-2 rounded-full bg-primary text-white" data-filter="all">Tous</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-filter="confiance">Confiance en soi</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-filter="stress">Gestion du stress</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-filter="reussite">Réussite</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-filter="motivation">Motivation</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-filter="nouveaute">Nouveautés</button> | |
| </div> | |
| <!-- Ebooks Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> | |
| <!-- Ebook 1 --> | |
| <div class="ebook-card bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md transition-all duration-300" data-category="confiance"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x200" alt="Confiance en soi" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded">Bestseller</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Maîtrisez votre confiance</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Techniques puissantes pour développer une confiance inébranlable.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary">19,99€</span> | |
| <button class="view-details-btn bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white px-4 py-2 rounded text-sm transition-all" data-id="1">Voir détails</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ebook 2 --> | |
| <div class="ebook-card bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md transition-all duration-300" data-category="stress"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x200" alt="Gestion du stress" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">Nouveau</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Stress Zéro</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Méthodes scientifiques pour éliminer le stress de votre vie.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary">24,99€</span> | |
| <button class="view-details-btn bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white px-4 py-2 rounded text-sm transition-all" data-id="2">Voir détails</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ebook 3 --> | |
| <div class="ebook-card bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md transition-all duration-300" data-category="reussite"> | |
| <img src="https://via.placeholder.com/300x200" alt="Réussite" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Les 7 Lois de la Réussite</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Principes intemporels pour atteindre l'excellence dans tous les domaines.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary">29,99€</span> | |
| <button class="view-details-btn bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white px-4 py-2 rounded text-sm transition-all" data-id="3">Voir détails</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ebook 4 --> | |
| <div class="ebook-card bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md transition-all duration-300" data-category="motivation"> | |
| <img src="https://via.placeholder.com/300x200" alt="Motivation" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Le Feu Intérieur</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Allumez et entretenez votre motivation comme jamais auparavant.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary">17,99€</span> | |
| <button class="view-details-btn bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white px-4 py-2 rounded text-sm transition-all" data-id="4">Voir détails</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-primary text-white px-6 py-3 rounded-md font-bold hover:bg-blue-700 transition-all">Voir tous les ebooks</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Témoignages</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-4">A</div> | |
| <div> | |
| <h4 class="font-bold">Amadou B.</h4> | |
| <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> | |
| </div> | |
| </div> | |
| <p class="italic">"L'ebook sur la confiance en soi a changé ma vie. Je me sens plus sûr de moi au travail et dans mes relations."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-4">F</div> | |
| <div> | |
| <h4 class="font-bold">Fatou D.</h4> | |
| <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-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="italic">"Les techniques de gestion du stress sont incroyablement efficaces. Je les utilise quotidiennement maintenant."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-4">M</div> | |
| <div> | |
| <h4 class="font-bold">Moussa K.</h4> | |
| <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> | |
| </div> | |
| </div> | |
| <p class="italic">"Grâce aux principes de réussite, j'ai pu doubler mon chiffre d'affaires en 6 mois seulement. Merci Djamel Pro!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://via.placeholder.com/500x400" alt="À propos de Djamel Pro" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6">À propos de Djamel Pro</h2> | |
| <p class="mb-4">Djamel Pro est né de la passion d'aider les gens à réaliser leur plein potentiel. Fort de 10 ans d'expérience en coaching et développement personnel, j'ai créé cette plateforme pour rendre ces connaissances accessibles à tous.</p> | |
| <p class="mb-4">Nos ebooks sont le fruit de recherches approfondies et d'expériences pratiques. Chaque guide est conçu pour vous donner des résultats tangibles et durables.</p> | |
| <p class="mb-6">Notre mission est simple : vous fournir les outils les plus efficaces pour transformer votre vie, une étape à la fois.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#boutique" class="bg-primary text-white px-6 py-3 rounded-md font-bold hover:bg-blue-700 transition-all">Nos ebooks</a> | |
| <a href="#contact" class="border-2 border-primary text-primary dark:text-white px-6 py-3 rounded-md font-bold hover:bg-primary hover:text-white transition-all">Nous contacter</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-16 bg-white dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Foire aux questions</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- FAQ Item 1 --> | |
| <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none"> | |
| <span>Comment puis-je accéder à mes ebooks après achat?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-2 hidden"> | |
| <p class="text-gray-600 dark:text-gray-300">Immédiatement après votre paiement, vous recevrez un email avec un lien de téléchargement. Vous pourrez également accéder à tous vos ebooks depuis votre espace client à tout moment.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none"> | |
| <span>Quels sont les modes de paiement acceptés?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-2 hidden"> | |
| <p class="text-gray-600 dark:text-gray-300">Nous acceptons les cartes de crédit/débit (Visa, Mastercard), PayPal, et les paiements mobiles via Orange Money et Wave.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none"> | |
| <span>Est-ce que mes données de paiement sont sécurisées?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-2 hidden"> | |
| <p class="text-gray-600 dark:text-gray-300">Absolument. Nous utilisons des passerelles de paiement sécurisées avec cryptage SSL. Nous ne stockons jamais vos informations de carte bancaire sur nos serveurs.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none"> | |
| <span>Puis-je obtenir un remboursement si l'ebook ne me convient pas?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-2 hidden"> | |
| <p class="text-gray-600 dark:text-gray-300">Nous offrons une garantie satisfait ou remboursé de 30 jours. Si vous n'êtes pas satisfait, contactez-nous et nous vous rembourserons sans poser de questions.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg focus:outline-none"> | |
| <span>Comment puis-je vous contacter pour d'autres questions?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-2 hidden"> | |
| <p class="text-gray-600 dark:text-gray-300">Vous pouvez nous contacter via le formulaire sur cette page, par WhatsApp au +221XXXXXXXX, ou par email à tipscoran@gmail.com. Nous répondons généralement dans les 24 heures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Contactez-nous</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h3 class="text-xl font-bold mb-4">Informations de contact</h3> | |
| <p class="mb-6">Nous sommes là pour répondre à toutes vos questions. N'hésitez pas à nous contacter par l'un des moyens ci-dessous.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-primary text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Email</h4> | |
| <p>tipscoran@gmail.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fab fa-whatsapp text-primary text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">WhatsApp</h4> | |
| <p>+221XXXXXXXX</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-primary text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Heures d'ouverture</h4> | |
| <p>Lundi - Vendredi: 9h - 18h</p> | |
| <p>Samedi: 10h - 14h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form id="contact-form" class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md"> | |
| <div class="mb-4"> | |
| <label for="name" class="block font-medium mb-2">Nom complet</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block font-medium mb-2">Sujet</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700"></textarea> | |
| </div> | |
| <button type="submit" class="bg-primary text-white px-6 py-3 rounded-md font-bold hover:bg-blue-700 transition-all w-full">Envoyer le message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Login Modal (hidden by default) --> | |
| <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-md relative"> | |
| <button id="close-login" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h2 class="text-2xl font-bold mb-6 text-center">Connexion à votre espace</h2> | |
| <form id="login-form"> | |
| <div class="mb-4"> | |
| <label for="login-email" class="block font-medium mb-2">Email</label> | |
| <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="login-password" class="block font-medium mb-2">Mot de passe</label> | |
| <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700" required> | |
| </div> | |
| <button type="submit" class="bg-primary text-white px-6 py-3 rounded-md font-bold hover:bg-blue-700 transition-all w-full mb-4">Se connecter</button> | |
| <div class="text-center"> | |
| <a href="#" class="text-primary hover:underline">Mot de passe oublié?</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Product Modal (hidden by default) --> | |
| <div id="product-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden overflow-y-auto py-10"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-4xl relative"> | |
| <button id="close-product" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 md:pr-6"> | |
| <img id="modal-product-image" src="https://via.placeholder.com/300" alt="Product" class="w-full rounded-lg shadow"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h2 id="modal-product-title" class="text-2xl font-bold mb-2">Titre de l'ebook</h2> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <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="text-gray-600 dark:text-gray-300">(42 avis)</span> | |
| </div> | |
| <div class="mb-6"> | |
| <span id="modal-product-price" class="text-3xl font-bold text-primary">19,99€</span> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold mb-2">Description</h3> | |
| <p id="modal-product-description" class="text-gray-600 dark:text-gray-300">Description détaillée de l'ebook. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold mb-2">Détails</h3> | |
| <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300"> | |
| <li id="modal-product-pages">Format: PDF (120 pages)</li> | |
| <li id="modal-product-format">Taille: 5.2 MB</li> | |
| <li id="modal-product-access">Accès immédiat après paiement</li> | |
| <li id="modal-product-updates">Mises à jour gratuites</li> | |
| </ul> | |
| </div> | |
| <button id="buy-now-btn" class="bg-primary text-white px-6 py-3 rounded-md font-bold hover:bg-blue-700 transition-all w-full mb-4"> | |
| <i class="fas fa-download mr-2"></i> Téléchargement immédiat après achat | |
| </button> | |
| <div class="text-center text-sm text-gray-500 dark:text-gray-400"> | |
| <p>Garantie satisfait ou remboursé 30 jours</p> | |
| <p>Paiement sécurisé</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Djamel Pro</h3> | |
| <p class="mb-4">Votre source d'ebooks puissants pour transformer votre vie.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Liens rapides</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-300 hover:text-white">Accueil</a></li> | |
| <li><a href="#boutique" class="text-gray-300 hover:text-white">Boutique</a></li> | |
| <li><a href="#about" class="text-gray-300 hover:text-white">À propos</a></li> | |
| <li><a href="#faq" class="text-gray-300 hover:text-white">FAQ</a></li> | |
| <li><a href="#contact" class="text-gray-300 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Catégories</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Confiance en soi</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Gestion du stress</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Réussite</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Motivation</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Autonomie mentale</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Newsletter</h3> | |
| <p class="mb-4">Abonnez-vous pour recevoir des conseils exclusifs et des offres spéciales.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l text-gray-800 w-full focus:outline-none"> | |
| <button type="submit" class="bg-primary px-4 py-2 rounded-r hover:bg-blue-700 transition-all"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center"> | |
| <p>© 2023 Djamel Pro. Tous droits réservés.</p> | |
| <div class="mt-2 text-sm text-gray-400"> | |
| <a href="#" class="hover:text-white">Conditions générales</a> | | |
| <a href="#" class="hover:text-white">Politique de confidentialité</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Analytics Scripts (Placeholders - replace with actual codes) --> | |
| <script> | |
| // Google Analytics | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-XXXXX-Y', 'auto'); | |
| ga('send', 'pageview'); | |
| // Facebook Pixel | |
| !function(f,b,e,v,n,t,s) | |
| {if(f.fbq)return;n=f.fbq=function(){n.callMethod? | |
| n.callMethod.apply(n,arguments):n.queue.push(arguments)}; | |
| if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; | |
| n.queue=[];t=b.createElement(e);t.async=!0; | |
| t.src=v;s=b.getElementsByTagName(e)[0]; | |
| s.parentNode.insertBefore(t,s)}(window, document,'script', | |
| 'https://connect.facebook.net/en_US/fbevents.js'); | |
| fbq('init', 'XXXXXXXXXXXXXXX'); | |
| fbq('track', 'PageView'); | |
| </script> | |
| <noscript> | |
| <img height="1" width="1" style="display:none" | |
| src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"/> | |
| </noscript> | |
| <!-- Main JavaScript --> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Dark Mode Toggle | |
| const toggle = document.getElementById('toggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or use system preference | |
| const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| const savedTheme = localStorage.getItem('theme'); | |
| if (savedTheme === 'dark' || (!savedTheme && userPrefersDark)) { | |
| html.classList.add('dark'); | |
| toggle.checked = true; | |
| } | |
| toggle.addEventListener('change', () => { | |
| if (toggle.checked) { | |
| html.classList.add('dark'); | |
| localStorage.setItem('theme', 'dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| localStorage.setItem('theme', 'light'); | |
| } | |
| }); | |
| // FAQ Accordion | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', () => { | |
| const answer = question.nextElementSibling; | |
| const icon = question.querySelector('i'); | |
| answer.classList.toggle('hidden'); | |
| icon.classList.toggle('transform'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Filter Ebooks | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const ebookCards = document.querySelectorAll('.ebook-card'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| filterButtons.forEach(btn => btn.classList.remove('active', 'bg-primary', 'text-white')); | |
| filterButtons.forEach(btn => btn.classList.add('bg-gray-200', 'dark:bg-gray-700')); | |
| // Add active class to clicked button | |
| button.classList.add('active', 'bg-primary', 'text-white'); | |
| button.classList.remove('bg-gray-200', 'dark:bg-gray-700'); | |
| const filter = button.dataset.filter; | |
| ebookCards.forEach(card => { | |
| if (filter === 'all' || card.dataset.category === filter) { | |
| card.classList.remove('hidden'); | |
| } else { | |
| card.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Login Modal | |
| const loginModal = document.getElementById('login-modal'); | |
| const closeLogin = document.getElementById('close-login'); | |
| const loginLinks = document.querySelectorAll('a[href="#login"]'); | |
| loginLinks.forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| loginModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| closeLogin.addEventListener('click', () => { | |
| loginModal.classList.add('hidden'); | |
| }); | |
| // Product Modal | |
| const productModal = document.getElementById('product-modal'); | |
| const closeProduct = document.getElementById('close-product'); | |
| const viewDetailsButtons = document.querySelectorAll('.view-details-btn'); | |
| // Sample product data (in a real app, this would come from a database) | |
| const products = { | |
| 1: { | |
| title: "Maîtrisez votre confiance", | |
| price: "19,99€", | |
| description: "Techniques puissantes pour développer une confiance inébranlable dans tous les aspects de votre vie. Ce guide complet vous fournit des exercices pratiques, des stratégies éprouvées et des conseils d'experts pour surmonter le doute de soi et rayonner de confiance.", | |
| image: "https://via.placeholder.com/300", | |
| pages: "Format: PDF (120 pages)", | |
| format: "Taille: 5.2 MB", | |
| access: "Accès immédiat après paiement", | |
| updates: "Mises à jour gratuites" | |
| }, | |
| 2: { | |
| title: "Stress Zéro", | |
| price: "24,99€", | |
| description: "Méthodes scientifiques pour éliminer le stress de votre vie. Apprenez à identifier les sources de stress, à les neutraliser et à développer des habitudes qui favorisent la paix intérieure et la résilience face aux défis quotidiens.", | |
| image: "https://via.placeholder.com/300", | |
| pages: "Format: PDF (150 pages)", | |
| format: "Taille: 6.8 MB", | |
| access: "Accès immédiat après paiement", | |
| updates: "Mises à jour gratuites" | |
| }, | |
| 3: { | |
| title: "Les 7 Lois de la Réussite", | |
| price: "29,99€", | |
| description: "Principes intemporels pour atteindre l'excellence dans tous les domaines. Découvrez les secrets des personnes qui réussissent et apprenez à les appliquer dans votre propre vie pour obtenir des résultats extraordinaires.", | |
| image: "https://via.placeholder.com/300", | |
| pages: "Format: PDF (200 pages)", | |
| format: "Taille: 8.5 MB", | |
| access: "Accès immédiat après paiement", | |
| updates: "Mises à jour gratuites" | |
| }, | |
| 4: { | |
| title: "Le Feu Intérieur", | |
| price: "17,99€", | |
| description: "Allumez et entretenez votre motivation comme jamais auparavant. Ce guide pratique vous montre comment trouver votre 'pourquoi', maintenir votre élan et surmonter les périodes de doute pour atteindre vos objectifs les plus ambitieux.", | |
| image: "https://via.placeholder.com/300", | |
| pages: "Format: PDF (90 pages)", | |
| format: "Taille: 4.3 MB", | |
| access: "Accès immédiat après paiement", | |
| updates: "Mises à jour gratuites" | |
| } | |
| }; | |
| viewDetailsButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const productId = button.dataset.id; | |
| const product = products[productId]; | |
| document.getElementById('modal-product-title').textContent = product.title; | |
| document.getElementById('modal-product-price').textContent = product.price; | |
| document.getElementById('modal-product-description').textContent = product.description; | |
| document.getElementById('modal-product-image').src = product.image; | |
| document.getElementById('modal-product-pages').textContent = product.pages; | |
| document.getElementById('modal-product-format').textContent = product.format; | |
| document.getElementById('modal-product-access').textContent = product.access; | |
| document.getElementById('modal-product-updates').textContent = product.updates; | |
| productModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| closeProduct.addEventListener('click', () => { | |
| productModal.classList.add('hidden'); | |
| }); | |
| // Buy Now Button | |
| const buyNowBtn = document.getElementById('buy-now-btn'); | |
| buyNowBtn.addEventListener('click', () => { | |
| alert('Félicitations! Vous allez être redirigé vers la page de paiement sécurisé.'); | |
| // In a real app, this would redirect to checkout | |
| }); | |
| // Contact Form Submission | |
| const contactForm = document.getElementById('contact-form'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Merci pour votre message! Nous vous répondrons dans les plus brefs délais.'); | |
| contactForm.reset(); | |
| }); | |
| // Login Form Submission | |
| const loginForm = document.getElementById('login-form'); | |
| loginForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const email = document.getElementById('login-email').value; | |
| const password = document.getElementById('login-password').value; | |
| // In a real app, this would validate and send to server | |
| if (email && password) { | |
| alert('Connexion réussie! Redirection vers votre espace client...'); | |
| loginModal.classList.add('hidden'); | |
| loginForm.reset(); | |
| } else { | |
| alert('Veuillez remplir tous les champs.'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| 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=Tipscoran/djamel-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |