| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Abdoul Shop - Votre boutique en ligne</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> |
| |
| .hero { |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .transition-all { |
| transition: all 0.3s ease; |
| } |
| |
| .page { |
| display: none; |
| } |
| |
| .page.active { |
| display: block; |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .cart-panel { |
| transform: translateX(100%); |
| transition: transform 0.3s ease; |
| } |
| |
| .cart-panel.open { |
| transform: translateX(0); |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <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"> |
| <a href="#" onclick="showPage('home')" class="text-2xl font-bold text-indigo-600">Abdoul Shop</a> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" onclick="showPage('home')" class="text-gray-700 hover:text-indigo-600 transition-all">Accueil</a> |
| <a href="#" onclick="showPage('shop')" class="text-gray-700 hover:text-indigo-600 transition-all">Boutique</a> |
| <a href="#" onclick="showPage('about')" class="text-gray-700 hover:text-indigo-600 transition-all">À propos</a> |
| <a href="#" onclick="showPage('contact')" class="text-gray-700 hover:text-indigo-600 transition-all">Contact</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <button onclick="toggleCart()" class="relative text-gray-700 hover:text-indigo-600"> |
| <i class="fas fa-shopping-cart text-xl"></i> |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </button> |
| <button class="md:hidden text-gray-700" onclick="toggleMobileMenu()"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="md:hidden hidden bg-white py-2 px-4 shadow-lg"> |
| <a href="#" onclick="showPage('home')" class="block py-2 text-gray-700 hover:text-indigo-600">Accueil</a> |
| <a href="#" onclick="showPage('shop')" class="block py-2 text-gray-700 hover:text-indigo-600">Boutique</a> |
| <a href="#" onclick="showPage('about')" class="block py-2 text-gray-700 hover:text-indigo-600">À propos</a> |
| <a href="#" onclick="showPage('contact')" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a> |
| </div> |
| </header> |
|
|
| |
| <div id="cart-panel" class="cart-panel fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg z-50 overflow-y-auto"> |
| <div class="p-4"> |
| <div class="flex justify-between items-center border-b pb-3"> |
| <h3 class="text-xl font-bold">Votre Panier</h3> |
| <button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div id="cart-items" class="py-4"> |
| |
| <p class="text-gray-500 text-center py-8">Votre panier est vide</p> |
| </div> |
| |
| <div class="border-t pt-4"> |
| <div class="flex justify-between mb-4"> |
| <span class="font-semibold">Total:</span> |
| <span id="cart-total" class="font-bold">0 FCFA</span> |
| </div> |
| <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all"> |
| Passer la commande |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleCart()"></div> |
|
|
| |
| <main> |
| |
| <div id="home-page" class="page active"> |
| |
| <section class="hero text-white py-20 md:py-32"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Bienvenue chez Abdoul Shop</h1> |
| <p class="text-xl md:text-2xl mb-8">Découvrez notre sélection exclusive d'articles de qualité</p> |
| <a href="#" onclick="showPage('shop')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full inline-block transition-all"> |
| Voir la boutique |
| </a> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Nos Catégories</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all"> |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Électronique" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Électronique</h3> |
| <p class="text-gray-600 mb-4">Découvrez nos derniers gadgets électroniques</p> |
| <a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a> |
| </div> |
| </div> |
| |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all"> |
| <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mode" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Mode & Accessoires</h3> |
| <p class="text-gray-600 mb-4">Restez élégant avec nos collections tendance</p> |
| <a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a> |
| </div> |
| </div> |
| |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all"> |
| <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Maison" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Maison & Déco</h3> |
| <p class="text-gray-600 mb-4">Embellissez votre intérieur avec style</p> |
| <a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Produits Populaires</h2> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre intelligente" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Montre Intelligente Pro</h3> |
| <div class="flex items-center mb-2"> |
| <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> |
| <span class="text-gray-600 text-sm ml-2">(42 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">45,000 FCFA</span> |
| <button onclick="addToCart('Montre Intelligente Pro', 45000, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Appareil photo" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Appareil Photo Compact</h3> |
| <div class="flex items-center mb-2"> |
| <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="far fa-star"></i> |
| </div> |
| <span class="text-gray-600 text-sm ml-2">(28 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">85,000 FCFA</span> |
| <button onclick="addToCart('Appareil Photo Compact', 85000, 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sac à dos" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">Promo</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Sac à Dos Élégant</h3> |
| <div class="flex items-center mb-2"> |
| <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="text-gray-600 text-sm ml-2">(56 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="font-bold text-lg">25,000 FCFA</span> |
| <span class="text-sm text-gray-500 line-through ml-2">32,000 FCFA</span> |
| </div> |
| <button onclick="addToCart('Sac à Dos Élégant', 25000, 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Parfum" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Parfum Élégance</h3> |
| <div class="flex items-center mb-2"> |
| <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="far fa-star"></i> |
| </div> |
| <span class="text-gray-600 text-sm ml-2">(34 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">18,000 FCFA</span> |
| <button onclick="addToCart('Parfum Élégance', 18000, 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-10"> |
| <a href="#" onclick="showPage('shop')" class="inline-block border-2 border-indigo-600 text-indigo-600 font-semibold py-2 px-6 rounded-full hover:bg-indigo-600 hover:text-white transition-all"> |
| Voir tous les produits |
| </a> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos clients</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <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"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"J'ai reçu ma commande rapidement et l'article était exactement comme sur la photo. Service client très réactif. Je recommande!"</p> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-semibold">Aïssatou D.</h4> |
| <p class="text-gray-500 text-sm">Dakar</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <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> |
| </div> |
| <p class="text-gray-600 mb-4">"Excellent rapport qualité-prix. La livraison a pris un peu de temps mais le produit en valait la peine. Je reviendrai."</p> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-semibold">Mamadou K.</h4> |
| <p class="text-gray-500 text-sm">Bamako</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <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"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"Commande facile et livraison rapide. Le produit est de très bonne qualité. Service après-vente disponible et efficace."</p> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-semibold">Fatou B.</h4> |
| <p class="text-gray-500 text-sm">Abidjan</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-indigo-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-4">Abonnez-vous à notre newsletter</h2> |
| <p class="text-xl mb-8">Recevez nos offres exclusives et nouveautés directement dans votre boîte mail</p> |
| |
| <form class="max-w-md mx-auto flex"> |
| <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800"> |
| <button type="submit" class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-r transition-all"> |
| S'abonner |
| </button> |
| </form> |
| </div> |
| </section> |
| </div> |
| |
| |
| <div id="shop-page" class="page"> |
| |
| <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl font-bold mb-4">Tous nos articles</h1> |
| <p class="text-xl max-w-2xl mx-auto">Découvrez notre vaste sélection de produits de qualité dans toutes les catégories</p> |
| </div> |
| </section> |
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> |
| <h2 class="text-2xl font-bold">Nos Produits</h2> |
| <div class="mt-4 md:mt-0"> |
| <select class="border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>Trier par: Pertinence</option> |
| <option>Prix croissant</option> |
| <option>Prix décroissant</option> |
| <option>Nouveautés</option> |
| <option>Meilleures ventes</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row"> |
| |
| <div class="w-full md:w-64 mb-8 md:mb-0 md:mr-8"> |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> |
| <h3 class="font-semibold text-lg mb-4">Catégories</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Tous les produits</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Électronique</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Mode & Accessoires</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Maison & Déco</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Beauté & Santé</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Sports & Loisirs</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Enfants</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-indigo-600">Bureau</a></li> |
| </ul> |
| |
| <h3 class="font-semibold text-lg mt-6 mb-4">Filtrer par prix</h3> |
| <div class="mb-4"> |
| <input type="range" min="0" max="100000" step="5000" class="w-full"> |
| </div> |
| <div class="flex justify-between text-sm text-gray-600"> |
| <span>0 FCFA</span> |
| <span>150,000 FCFA</span> |
| </div> |
| |
| <button class="w-full mt-6 bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all"> |
| Appliquer les filtres |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-grow"> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre intelligente" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Montre Intelligente Pro</h3> |
| <div class="flex items-center mb-2"> |
| <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> |
| <span class="text-gray-600 text-sm ml-2">(42 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">45,000 FCFA</span> |
| <button onclick="addToCart('Montre Intelligente Pro', 45000, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Appareil photo" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Appareil Photo Compact</h3> |
| <div class="flex items-center mb-2"> |
| <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="far fa-star"></i> |
| </div> |
| <span class="text-gray-600 text-sm ml-2">(28 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">85,000 FCFA</span> |
| <button onclick="addToCart('Appareil Photo Compact', 85000, 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sac à dos" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">Promo</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Sac à Dos Élégant</h3> |
| <div class="flex items-center mb-2"> |
| <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="text-gray-600 text-sm ml-2">(56 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="font-bold text-lg">25,000 FCFA</span> |
| <span class="text-sm text-gray-500 line-through ml-2">32,000 FCFA</span> |
| </div> |
| <button onclick="addToCart('Sac à Dos Élégant', 25000, 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Parfum" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Parfum Élégance</h3> |
| <div class="flex items-center mb-2"> |
| <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="far fa-star"></i> |
| </div> |
| <span class="text-gray-600 text-sm ml-2">(34 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">18,000 FCFA</span> |
| <button onclick="addToCart('Parfum Élégance', 18000, 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chaussures" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Chaussures de Sport</h3> |
| <div class="flex items-center mb-2"> |
| <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="far fa-star"></i> |
| </div> |
| <span class="text-gray-600 text-sm ml-2">(39 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">22,000 FCFA</span> |
| <button onclick="addToCart('Chaussures de Sport', 22000, 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre" class="w-full h-48 object-cover"> |
| <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Montre Classique</h3> |
| <div class="flex items-center mb-2"> |
| <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="text-gray-600 text-sm ml-2">(47 avis)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">35,000 FCFA</span> |
| <button onclick="addToCart('Montre Classique', 35000, 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-10 flex justify-center"> |
| <nav class="flex items-center space-x-2"> |
| <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">«</a> |
| <a href="#" class="px-3 py-1 rounded border border-indigo-600 bg-indigo-600 text-white">1</a> |
| <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">2</a> |
| <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">3</a> |
| <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">4</a> |
| <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">5</a> |
| <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">»</a> |
| </nav> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| |
| <div id="about-page" class="page"> |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h1 class="text-4xl font-bold mb-4">À propos de Abdoul Shop</h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre engagement envers la qualité et le service client</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row items-center mb-16"> |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
| <h2 class="text-3xl font-bold mb-6">Notre Histoire</h2> |
| <p class="text-gray-600 mb-4">Abdoul Shop a été fondé en 2015 avec une vision simple: fournir des produits de qualité à des prix abordables pour la communauté locale.</p> |
| <p class="text-gray-600 mb-4">Ce qui a commencé comme une petite boutique physique s'est rapidement transformé en une entreprise florissante avec une présence en ligne importante.</p> |
| <p class="text-gray-600">Aujourd'hui, nous sommes fiers de servir des milliers de clients satisfaits à travers toute la région, avec une sélection soigneusement choisie de produits dans diverses catégories.</p> |
| </div> |
| <div class="lg:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Notre équipe" class="rounded-lg shadow-lg w-full"> |
| </div> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row items-center mb-16"> |
| <div class="lg:w-1/2 order-last lg:order-first"> |
| <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Notre mission" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pl-12"> |
| <h2 class="text-3xl font-bold mb-6">Notre Mission</h2> |
| <p class="text-gray-600 mb-4">Notre mission est de rendre les produits de qualité accessibles à tous, tout en fournissant un service client exceptionnel.</p> |
| <p class="text-gray-600 mb-4">Nous croyons que chaque client mérite:</p> |
| <ul class="text-gray-600 mb-4 space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i> |
| <span>Des produits authentiques et de haute qualité</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i> |
| <span>Des prix compétitifs et transparents</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i> |
| <span>Une expérience d'achat simple et agréable</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i> |
| <span>Un service après-vente réactif et efficace</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold mb-8">Notre Équipe</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| <div class="bg-gray-50 p-6 rounded-lg"> |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Abdoul" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">Abdoul Diop</h3> |
| <p class="text-indigo-600 mb-3">Fondateur & PDG</p> |
| <p class="text-gray-600">Abdoul a fondé l'entreprise avec la vision de créer une boutique fiable pour la communauté locale.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg"> |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Aminata" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">Aminata Ndiaye</h3> |
| <p class="text-indigo-600 mb-3">Directrice Commerciale</p> |
| <p class="text-gray-600">Aminata supervise les opérations quotidiennes et s'assure que chaque client est satisfait.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg"> |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Moussa" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">Moussa Fall</h3> |
| <p class="text-indigo-600 mb-3">Responsable Logistique</p> |
| <p class="text-gray-600">Moussa gère la chaîne d'approvisionnement et s'assure que les produits arrivent à temps.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| |
| <div id="contact-page" class="page"> |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h1 class="text-4xl font-bold mb-4">Contactez-nous</h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Nous sommes là pour répondre à toutes vos questions</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> |
| <h2 class="text-2xl font-bold mb-6">Envoyez-nous un message</h2> |
| <form> |
| <div class="mb-4"> |
| <label for="name" class="block text-gray-700 mb-2">Votre nom</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="email" class="block text-gray-700 mb-2">Votre email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="subject" class="block text-gray-700 mb-2">Sujet</label> |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-gray-700 mb-2">Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded hover:bg-indigo-700 transition-all font-semibold"> |
| Envoyer le message |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm h-full"> |
| <h2 class="text-2xl font-bold mb-6">Nos coordonnées</h2> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-indigo-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Adresse</h3> |
| <p class="text-gray-600">123 Avenue de la Liberté, Dakar, Sénégal</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt text-indigo-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Téléphone</h3> |
| <p class="text-gray-600">+221 33 123 45 67</p> |
| <p class="text-gray-600">+221 77 890 12 34 (WhatsApp)</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-indigo-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Email</h3> |
| <p class="text-gray-600">contact@abdoulshop.com</p> |
| <p class="text-gray-600">support@abdoulshop.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock text-indigo-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Heures d'ouverture</h3> |
| <p class="text-gray-600">Lundi - Vendredi: 8h00 - 18h00</p> |
| <p class="text-gray-600">Samedi: 9h00 - 16h00</p> |
| <p class="text-gray-600">Dimanche: Fermé</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h3 class="font-semibold text-lg mb-4">Suivez-nous</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3859.227465736822!2d-17.443788924683!3d14.69223048576163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec1725a5b5a7e9b%3A0x5d5e5e5e5e5e5e5e!2sDakar%2C%20Senegal!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-lg"></iframe> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Abdoul Shop</h3> |
| <p class="text-gray-400 mb-4">Votre boutique en ligne préférée pour tous vos besoins quotidiens.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Liens rapides</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" onclick="showPage('home')" class="text-gray-400 hover:text-white transition-all">Accueil</a></li> |
| <li><a href="#" onclick="showPage('shop')" class="text-gray-400 hover:text-white transition-all">Boutique</a></li> |
| <li><a href="#" onclick="showPage('about')" class="text-gray-400 hover:text-white transition-all">À propos</a></li> |
| <li><a href="#" onclick="showPage('contact')" class="text-gray-400 hover:text-white transition-all">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Catégories</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Électronique</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Mode</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Maison & Déco</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Beauté</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Sports & Loisirs</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Newsletter</h4> |
| <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir nos offres spéciales et nouveautés.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full"> |
| <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r transition-all"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Abdoul Shop. Tous droits réservés.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition-all">Conditions générales</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all">Politique de confidentialité</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all">Mentions légales</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| let cart = []; |
| let cartTotal = 0; |
| |
| function toggleCart() { |
| const cartPanel = document.getElementById('cart-panel'); |
| const overlay = document.getElementById('overlay'); |
| |
| cartPanel.classList.toggle('open'); |
| overlay.classList.toggle('hidden'); |
| |
| |
| if (cartPanel.classList.contains('open')) { |
| document.body.style.overflow = 'hidden'; |
| } else { |
| document.body.style.overflow = ''; |
| } |
| } |
| |
| function addToCart(name, price, image) { |
| |
| const existingItem = cart.find(item => item.name === name); |
| |
| if (existingItem) { |
| existingItem.quantity += 1; |
| } else { |
| cart.push({ |
| name: name, |
| price: price, |
| image: image, |
| quantity: 1 |
| }); |
| } |
| |
| |
| cartTotal += price; |
| |
| |
| updateCartUI(); |
| |
| |
| showNotification(`${name} ajouté au panier`); |
| } |
| |
| function updateCartUI() { |
| const cartItemsContainer = document.getElementById('cart-items'); |
| const cartCount = document.getElementById('cart-count'); |
| const cartTotalElement = document.getElementById('cart-total'); |
| |
| |
| const totalItems = cart.reduce((total, item) => total + item.quantity, 0); |
| cartCount.textContent = totalItems; |
| |
| |
| if (cart.length === 0) { |
| cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Votre panier est vide</p>'; |
| } else { |
| let html = ''; |
| |
| cart.forEach(item => { |
| html += ` |
| <div class="flex items-center py-4 border-b"> |
| <div class="w-16 h-16 rounded overflow-hidden mr-4"> |
| <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-grow"> |
| <h4 class="font-medium">${item.name}</h4> |
| <p class="text-gray-600">${item.price.toLocaleString()} FCFA x ${item.quantity}</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="font-semibold mr-4">${(item.price * item.quantity).toLocaleString()} FCFA</span> |
| <button onclick="removeFromCart('${item.name}')" class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| }); |
| |
| cartItemsContainer.innerHTML = html; |
| } |
| |
| |
| cartTotalElement.textContent = cartTotal.toLocaleString() + ' FCFA'; |
| } |
| |
| function removeFromCart(name) { |
| const itemIndex = cart.findIndex(item => item.name === name); |
| |
| if (itemIndex !== -1) { |
| const item = cart[itemIndex]; |
| cartTotal -= item.price * item.quantity; |
| |
| |
| cart.splice(itemIndex, 1); |
| |
| |
| updateCartUI(); |
| |
| |
| showNotification(`${name} retiré du panier`); |
| } |
| } |
| |
| function showNotification(message) { |
| const notification = document.createElement('div'); |
| notification.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-6 py-3 rounded shadow-lg flex items-center'; |
| notification.innerHTML = ` |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>${message}</span> |
| `; |
| |
| document.body.appendChild(notification); |
| |
| |
| setTimeout(() => { |
| notification.classList.add('opacity-0', 'transition-all', 'duration-300'); |
| setTimeout(() => notification.remove(), 300); |
| }, 3000); |
| } |
| |
| |
| function showPage(pageId) { |
| |
| document.querySelectorAll('.page').forEach(page => { |
| page.classList.remove('active'); |
| }); |
| |
| |
| document.getElementById(`${pageId}-page`).classList.add('active'); |
| |
| |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| |
| |
| window.scrollTo(0, 0); |
| } |
| |
| function toggleMobileMenu() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| showPage('home'); |
| }); |
| </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=Jacky-9/batchana" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
