Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Grain d'Or - Café en grain d'exception</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #FFF9F2; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #F8E1C5 0%, #E7B98A 100%); | |
| } | |
| .coffee-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(120, 60, 20, 0.15); | |
| } | |
| .nav-link:hover { | |
| color: #C97D4A; | |
| } | |
| .btn-primary { | |
| background-color: #C97D4A; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #B56A3A; | |
| transform: translateY(-2px); | |
| } | |
| .flavor-note { | |
| background-color: #F8E1C5; | |
| border-left: 3px solid #C97D4A; | |
| } | |
| .footer-divider { | |
| border-top: 1px solid rgba(201, 125, 74, 0.2); | |
| } | |
| /* Animation for notifications */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeOut { | |
| from { opacity: 1; transform: translateY(0); } | |
| to { opacity: 0; transform: translateY(20px); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| .animate-fade-out { | |
| animation: fadeOut 0.3s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coffee text-3xl text-amber-900 mr-2"></i> | |
| <h1 class="title-font text-2xl font-bold text-amber-900">Grain d'Or</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Nos cafés</a> | |
| <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Origines</a> | |
| <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Méthodes</a> | |
| <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Notre histoire</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-amber-900 hover:text-amber-700"> | |
| <i class="fas fa-search text-lg"></i> | |
| </button> | |
| <button class="p-2 text-amber-900 hover:text-amber-700 relative"> | |
| <i class="fas fa-shopping-cart text-lg"></i> | |
| <span class="absolute -top-1 -right-1 bg-amber-700 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button class="md:hidden p-2 text-amber-900"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="title-font text-4xl md:text-5xl font-bold text-amber-900 mb-4">Découvrez l'âme du café</h2> | |
| <p class="text-amber-800 text-lg mb-8">Des grains d'exception torréfiés avec passion pour révéler des arômes uniques et des saveurs mémorables.</p> | |
| <button class="btn-primary text-white font-medium py-3 px-8 rounded-full shadow-md">Explorer notre sélection</button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café en grain de qualité" class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">Nos cafés d'exception</h3> | |
| <p class="text-amber-800 max-w-2xl mx-auto">Sélectionnés parmi les meilleures plantations du monde et torréfiés artisanalement en France.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="coffee-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511920170033-f839b4c1d0dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café Ethiopie Yirgacheffe" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4 bg-amber-700 text-white text-xs font-bold px-3 py-1 rounded-full">NOUVEAUTÉ</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="title-font text-xl font-bold text-amber-900">Ethiopie Yirgacheffe</h4> | |
| <span class="text-amber-700 font-bold">24,90€</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Notes florales et fruitées avec une touche de bergamote et de miel.</p> | |
| <div class="flavor-note px-4 py-2 mb-4 rounded"> | |
| <p class="text-amber-900 text-sm font-medium"><i class="fas fa-mug-hot mr-2"></i> Torréfaction: Clair</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex text-amber-500"> | |
| <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> | |
| <span class="text-gray-600 text-sm ml-2">(48)</span> | |
| </div> | |
| <button class="btn-primary text-white text-sm font-medium py-2 px-4 rounded-full">Ajouter au panier</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="coffee-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1536244881128-91c3b8b3a9b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café Colombie Huila" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="title-font text-xl font-bold text-amber-900">Colombie Huila</h4> | |
| <span class="text-amber-700 font-bold">22,50€</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Équilibre parfait entre douceur et acidité, avec des notes de caramel et de noix.</p> | |
| <div class="flavor-note px-4 py-2 mb-4 rounded"> | |
| <p class="text-amber-900 text-sm font-medium"><i class="fas fa-mug-hot mr-2"></i> Torréfaction: Moyenne</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex text-amber-500"> | |
| <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> | |
| <span class="text-gray-600 text-sm ml-2">(62)</span> | |
| </div> | |
| <button class="btn-primary text-white text-sm font-medium py-2 px-4 rounded-full">Ajouter au panier</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="coffee-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551033401-9a8be525c809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café Brésil Cerrado" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4 bg-amber-700 text-white text-xs font-bold px-3 py-1 rounded-full">BEST-SELLER</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="title-font text-xl font-bold text-amber-900">Brésil Cerrado</h4> | |
| <span class="text-amber-700 font-bold">19,90€</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Corps généreux avec des arômes de chocolat noir et de fruits secs.</p> | |
| <div class="flavor-note px-4 py-2 mb-4 rounded"> | |
| <p class="text-amber-900 text-sm font-medium"><i class="fas fa-mug-hot mr-2"></i> Torréfaction: Corsée</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex text-amber-500"> | |
| <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> | |
| <span class="text-gray-600 text-sm ml-2">(127)</span> | |
| </div> | |
| <button class="btn-primary text-white text-sm font-medium py-2 px-4 rounded-full">Ajouter au panier</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border-2 border-amber-700 text-amber-700 font-medium py-2 px-8 rounded-full hover:bg-amber-700 hover:text-white transition-all">Voir toute la collection</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brewing Methods --> | |
| <section class="py-16 bg-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">L'art de préparer votre café</h3> | |
| <p class="text-amber-800 max-w-2xl mx-auto">Découvrez nos conseils pour sublimer vos grains et révéler tout leur potentiel.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-filter text-amber-700 text-2xl"></i> | |
| </div> | |
| <h4 class="title-font text-xl font-bold text-amber-900 text-center mb-2">Pour Over</h4> | |
| <p class="text-gray-600 text-center">Méthode douce qui met en valeur les notes aromatiques complexes des cafés de spécialité.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-coffee-pot text-amber-700 text-2xl"></i> | |
| </div> | |
| <h4 class="title-font text-xl font-bold text-amber-900 text-center mb-2">French Press</h4> | |
| <p class="text-gray-600 text-center">Idéale pour des cafés riches en corps et en arômes, parfaite pour nos mélanges corsés.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-bolt text-amber-700 text-2xl"></i> | |
| </div> | |
| <h4 class="title-font text-xl font-bold text-amber-900 text-center mb-2">Expresso</h4> | |
| <p class="text-gray-600 text-center">Pour une expérience intense, révélant toute la puissance et la complexité de nos grains.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Subscription --> | |
| <section class="py-16 bg-amber-900 text-white"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h3 class="title-font text-3xl font-bold mb-4">L'abonnement qui vous ressemble</h3> | |
| <p class="mb-6 opacity-90">Recevez chaque mois une sélection de nos meilleurs cafés, adaptée à vos préférences et découvertes.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-amber-300 mr-3"></i> | |
| <span>Livraison gratuite et flexible</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-amber-300 mr-3"></i> | |
| <span>Découvertes exclusives</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-amber-300 mr-3"></i> | |
| <span>10% de réduction sur tous vos achats</span> | |
| </li> | |
| </ul> | |
| <button class="bg-white text-amber-900 font-medium py-3 px-8 rounded-full shadow-md hover:bg-amber-100 transition-all">Démarrer l'abonnement</button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg max-w-md"> | |
| <img src="https://images.unsplash.com/photo-1550583720-4fb2172b7590?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Abonnement café" class="rounded mb-4"> | |
| <h4 class="title-font text-xl font-bold text-amber-900 mb-2">Découverte du mois</h4> | |
| <p class="text-gray-600 mb-4">Chaque mois, notre torréfacteur expert sélectionne pour vous un café rare et exceptionnel, accompagné de notes de dégustation et de conseils de préparation.</p> | |
| <div class="flex items-center text-amber-700"> | |
| <i class="fas fa-gift text-xl mr-2"></i> | |
| <span class="font-medium">Offert pour tout nouvel abonnement</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">Ils ont adoré</h3> | |
| <p class="text-amber-800 max-w-2xl mx-auto">Découvrez ce que nos clients passionnés pensent de nos cafés.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols- | |
| </html> |