|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Hoowa - Économisez, découvrez, soutenez</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f97316 0%, #22c55e 100%); |
|
|
} |
|
|
.qr-code { |
|
|
width: 200px; |
|
|
height: 200px; |
|
|
background: #fff; |
|
|
padding: 10px; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.how-it-works-step { |
|
|
position: relative; |
|
|
padding-left: 60px; |
|
|
} |
|
|
.how-it-works-step:before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: 20px; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
width: 2px; |
|
|
background: #f97316; |
|
|
} |
|
|
.how-it-works-step:last-child:before { |
|
|
display: none; |
|
|
} |
|
|
.step-number { |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: #f97316; |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
} |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #f97316; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
.offer-card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.offer-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-hand-holding-heart text-3xl text-orange-500 mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">Hoowa</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Accueil</a> |
|
|
<a href="#how-it-works" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Comment ça marche</a> |
|
|
<a href="#benefits" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Avantages</a> |
|
|
<a href="#merchants" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Commerçants</a> |
|
|
<a href="#solidarity" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Engagement solidaire</a> |
|
|
<a href="#member" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Espace membre</a> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> |
|
|
Rejoindre maintenant |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="gradient-bg text-white py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Économisez, découvrez, soutenez avec Hoowa !</h1> |
|
|
<p class="text-xl mb-8">Rejoignez notre communauté et profitez d'offres exclusives tout en soutenant des associations locales.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-white text-orange-500 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition duration-300"> |
|
|
Rejoindre maintenant |
|
|
</button> |
|
|
<button class="border-2 border-white text-white hover:bg-white hover:text-orange-500 px-6 py-3 rounded-md text-lg font-semibold transition duration-300"> |
|
|
En savoir plus |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="w-64 h-64 bg-white rounded-lg shadow-xl flex items-center justify-center"> |
|
|
<i class="fas fa-qrcode text-6xl text-orange-500"></i> |
|
|
</div> |
|
|
<div class="absolute -bottom-5 -right-5 bg-green-500 text-white rounded-full w-16 h-16 flex items-center justify-center shadow-lg"> |
|
|
<i class="fas fa-heart text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir Hoowa ?</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg text-center"> |
|
|
<div class="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-percentage text-2xl text-orange-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Économies garanties</h3> |
|
|
<p class="text-gray-600">Accédez à des réductions exclusives chez nos commerçants partenaires toute l'année.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg text-center"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-store text-2xl text-green-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Découvrez local</h3> |
|
|
<p class="text-gray-600">Explorez de nouveaux commerces de proximité qui partagent vos valeurs.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg text-center"> |
|
|
<div class="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-hands-helping text-2xl text-orange-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Impact solidaire</h3> |
|
|
<p class="text-gray-600">Une partie de votre abonnement est reversée à des associations locales.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Comment ça marche ?</h2> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="how-it-works-step mb-10"> |
|
|
<div class="step-number">1</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-user-plus text-orange-500 mr-3"></i> Inscription et paiement |
|
|
</h3> |
|
|
<p class="text-gray-600">Créez votre compte en quelques minutes et payez votre cotisation annuelle de seulement 29€.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="how-it-works-step mb-10"> |
|
|
<div class="step-number">2</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-qrcode text-green-500 mr-3"></i> Accès aux offres |
|
|
</h3> |
|
|
<p class="text-gray-600">Recevez votre QR Code personnel dans votre espace membre. Présentez-le chez nos commerçants partenaires pour profiter des avantages.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="how-it-works-step"> |
|
|
<div class="step-number">3</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-heart text-orange-500 mr-3"></i> Soutien aux associations |
|
|
</h3> |
|
|
<p class="text-gray-600">5€ de votre abonnement sont directement reversés à une association de votre choix parmi notre sélection.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-16 text-center"> |
|
|
<img src="https://via.placeholder.com/800x400?text=Schéma+de+fonctionnement+Hoowa" alt="Schéma de fonctionnement Hoowa" class="mx-auto rounded-lg shadow-md"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="benefits" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Avantages membres</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="offer-card bg-gray-50 rounded-lg overflow-hidden shadow-sm border border-gray-100"> |
|
|
<div class="h-40 bg-orange-100 flex items-center justify-center"> |
|
|
<i class="fas fa-utensils text-6xl text-orange-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Restauration</h3> |
|
|
<p class="text-gray-600 mb-4">-10% sur votre addition dans plus de 50 restaurants partenaires.</p> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> |
|
|
<span>Disponible dans toute la ville</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="offer-card bg-gray-50 rounded-lg overflow-hidden shadow-sm border border-gray-100"> |
|
|
<div class="h-40 bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-bag text-6xl text-green-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Commerces</h3> |
|
|
<p class="text-gray-600 mb-4">-15% sur une sélection de produits chez nos commerçants locaux.</p> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> |
|
|
<span>Plus de 100 commerces participants</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="offer-card bg-gray-50 rounded-lg overflow-hidden shadow-sm border border-gray-100"> |
|
|
<div class="h-40 bg-orange-100 flex items-center justify-center"> |
|
|
<i class="fas fa-spa text-6xl text-orange-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Bien-être</h3> |
|
|
<p class="text-gray-600 mb-4">-20% sur votre première séance de massage ou soin esthétique.</p> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> |
|
|
<span>Centres sélectionnés</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-center">Nos partenaires</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-24"> |
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Partenaire 1" class="max-h-12"> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-24"> |
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+2" alt="Partenaire 2" class="max-h-12"> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-24"> |
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+3" alt="Partenaire 3" class="max-h-12"> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-24"> |
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+4" alt="Partenaire 4" class="max-h-12"> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-24"> |
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Partenaire 5" class="max-h-12"> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-24"> |
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+6" alt="Partenaire 6" class="max-h-12"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="merchants" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex md:items-center md:space-x-12"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-3xl font-bold mb-6">Espace commerçants</h2> |
|
|
<p class="text-lg mb-6">Rejoignez notre réseau de commerçants partenaires et bénéficiez d'une visibilité accrue auprès d'une clientèle engagée.</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-users text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold mb-1">Nouveaux clients</h3> |
|
|
<p class="text-gray-600">Attirez une clientèle locale qui cherche à découvrir de nouveaux commerces.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-orange-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-bullhorn text-orange-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold mb-1">Publicité gratuite</h3> |
|
|
<p class="text-gray-600">Votre commerce est mis en avant sur notre plateforme et dans nos communications.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-hand-holding-usd text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold mb-1">Sans frais</h3> |
|
|
<p class="text-gray-600">Aucun coût pour rejoindre notre réseau, seulement des avantages.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-sm"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-center">Devenir partenaire</h3> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="business-name" class="block text-sm font-medium text-gray-700 mb-1">Nom du commerce</label> |
|
|
<input type="text" id="business-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Nom du contact</label> |
|
|
<input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="offer" class="block text-sm font-medium text-gray-700 mb-1">Offre proposée aux membres Hoowa</label> |
|
|
<textarea id="offer" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-md font-semibold transition duration-300"> |
|
|
Envoyer la demande |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="solidarity" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Engagement solidaire</h2> |
|
|
<p class="text-center max-w-3xl mx-auto text-lg mb-12">Chez Hoowa, nous croyons en l'économie locale et solidaire. C'est pourquoi chaque abonnement contribue à soutenir des associations locales qui œuvrent pour notre communauté.</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-16"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-leaf text-2xl text-green-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Association Verte</h3> |
|
|
<p class="text-gray-600 mb-4">Soutient des initiatives écologiques locales et des jardins partagés.</p> |
|
|
<div class="bg-orange-50 p-3 rounded-md"> |
|
|
<p class="text-sm font-medium text-orange-700">5 000€ collectés en 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-utensils text-2xl text-orange-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Solidarité Alimentaire</h3> |
|
|
<p class="text-gray-600 mb-4">Lutte contre la précarité alimentaire en redistribuant des repas équilibrés.</p> |
|
|
<div class="bg-orange-50 p-3 rounded-md"> |
|
|
<p class="text-sm font-medium text-orange-700">3 200€ collectés en 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-book text-2xl text-green-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Lire et Grandir</h3> |
|
|
<p class="text-gray-600 mb-4">Favorise l'accès à la lecture pour les enfants défavorisés.</p> |
|
|
<div class="bg-orange-50 p-3 rounded-md"> |
|
|
<p class="text-sm font-medium text-orange-700">4 500€ collectés en 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-r from-orange-500 to-green-500 rounded-xl p-8 text-white"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold mb-2">Notre impact en 2023</h3> |
|
|
<p class="text-lg">Grâce à vous, nous avons pu reverser plus de 12 700€ à des associations locales.</p> |
|
|
</div> |
|
|
<div class="text-center md:text-right"> |
|
|
<div class="text-4xl font-bold mb-1">5€</div> |
|
|
<p class="text-sm">par abonnement reversés</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="member" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden md:flex"> |
|
|
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Espace membre</h2> |
|
|
<p class="text-gray-600 mb-6">Accédez à votre QR Code personnel et gérez votre compte Hoowa.</p> |
|
|
|
|
|
<form class="mb-8"> |
|
|
<div class="mb-4"> |
|
|
<label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label> |
|
|
<input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-md font-semibold transition duration-300 mb-4"> |
|
|
Se connecter |
|
|
</button> |
|
|
<a href="#" class="text-sm text-orange-500 hover:text-orange-600 font-medium">Mot de passe oublié ?</a> |
|
|
</form> |
|
|
|
|
|
<div class="border-t pt-6"> |
|
|
<h3 class="text-lg font-semibold mb-3">Pas encore membre ?</h3> |
|
|
<button class="w-full border-2 border-orange-500 text-orange-500 hover:bg-orange-50 py-3 rounded-md font-semibold transition duration-300"> |
|
|
Créer un compte |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-orange-50 p-8 md:p-12 flex flex-col items-center justify-center"> |
|
|
<div class="text-center mb-8"> |
|
|
<i class="fas fa-qrcode text-6xl text-orange-500 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold">Votre QR Code personnel</h3> |
|
|
<p class="text-gray-600">Présentez-le chez nos commerçants pour profiter de vos avantages.</p> |
|
|
</div> |
|
|
<div class="qr-code mb-6"> |
|
|
<img src="https://via.placeholder.com/200x200?text=QR+Code" alt="QR Code" class="w-full h-full"> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-white text-orange-500 hover:bg-gray-100 px-4 py-2 rounded-md font-medium transition duration-300"> |
|
|
<i class="fas fa-download mr-2"></i> Télécharger |
|
|
</button> |
|
|
<button class="bg-white text-orange-500 hover:bg-gray-100 px-4 py-2 rounded-md font-medium transition duration-300"> |
|
|
<i class="fas fa-print mr-2"></i> Imprimer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-16 pb-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-hand-holding-heart text-2xl text-orange-500 mr-2"></i> |
|
|
<span class="text-xl font-bold">Hoowa</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">La carte de réduction solidaire qui soutient votre ville.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Accueil</a></li> |
|
|
<li><a href="#how-it-works" class="text-gray-400 hover:text-white transition duration-300">Comment ça marche</a></li> |
|
|
<li><a href="#benefits" class="text-gray-400 hover:text-white transition duration-300">Avantages</a></li> |
|
|
<li><a href="#merchants" class="text-gray-400 hover:text-white transition duration-300">Commerçants</a></li> |
|
|
<li><a href="#solidarity" class="text-gray-400 hover:text-white transition duration-300">Engagement solidaire</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Informations</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">CGU</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Politique de confidentialité</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mentions légales</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Contact</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-orange-500 mr-2"></i> |
|
|
<span class="text-gray-400">[email protected]</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone text-orange-500 mr-2"></i> |
|
|
<span class="text-gray-400">01 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-orange-500 mr-2"></i> |
|
|
<span class="text-gray-400">123 Rue de la Solidarité, 75000 Paris</span> |
|
|
</li> |
|
|
</ul> |
|
|
</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 Hoowa. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<img src="https://via.placeholder.com/60x40?text=Stripe" alt="Stripe" class="h-8"> |
|
|
<img src="https://via.placeholder.com/60x40?text=PayPal" alt="PayPal" class="h-8"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const merchantForm = document.querySelector('#merchants form'); |
|
|
if (merchantForm) { |
|
|
merchantForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const businessName = document.getElementById('business-name').value; |
|
|
const contactName = document.getElementById('contact-name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
|
|
|
if (!businessName || !contactName || !email) { |
|
|
alert('Veuillez remplir tous les champs obligatoires.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
alert('Merci pour votre demande ! Nous vous contacterons sous peu.'); |
|
|
this.reset(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const loginForm = document.querySelector('#member form'); |
|
|
if (loginForm) { |
|
|
loginForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const email = document.getElementById('login-email').value; |
|
|
const password = document.getElementById('login-password').value; |
|
|
|
|
|
if (!email || !password) { |
|
|
alert('Veuillez entrer votre email et mot de passe.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Connexion en cours...'); |
|
|
}); |
|
|
} |
|
|
</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=Adamchab/hoowa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
