-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathformules.html
More file actions
216 lines (209 loc) · 20.8 KB
/
Copy pathformules.html
File metadata and controls
216 lines (209 loc) · 20.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Nos Formules — Huges Service</title>
<!-- ========== DEBUT Favicon (CHEMINS CORRIGÉS) ========== -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<!-- ========== FIN Favicon (CHEMINS CORRIGÉS) ========== -->
<meta name="description" content="Découvrez nos abonnements de livraison flexibles et économiques pour tous les besoins à Dakar." />
<meta name="theme-color" content="#386641" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
:root {
--huges-green: #386641;
--huges-orange: #F59E0B;
--huges-light-green: #6A994E;
--huges-light-gray: #F7F7F7;
}
</style>
</head>
<body class="antialiased bg-white text-gray-800 font-sans" x-data="{ mobileMenuOpen: false, legalModalOpen: false }">
<div class="min-h-screen flex flex-col">
<header class="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-gray-200">
<div class="max-w-7xl mx-auto px-6">
<div class="relative flex items-center justify-between h-16">
<a href="index.html" class="flex items-center gap-3" aria-label="Huges Service - Accueil">
<img src="https://i.postimg.cc/nz5CJRy6/Chat-GPT-Image-27-juil-2025-05-17-01.png" alt="Logo Huges Service" class="h-12 w-auto" />
<div>
<div class="text-lg font-bold text-gray-900">Huges Service</div>
<div class="text-xs text-gray-500 -mt-1">Livraison moto — Dakar</div>
</div>
</a>
<nav class="hidden md:flex items-center gap-6 text-sm font-medium text-gray-700">
<a href="index.html" class="hover:text-[var(--huges-green)] transition-colors">Accueil</a>
<a href="formules.html" class="text-[var(--huges-green)] transition-colors">Formules</a>
<a href="a-propos.html" class="hover:text-[var(--huges-green)] transition-colors">À Propos</a>
<a href="contact.html" class="hover:text-[var(--huges-green)] transition-colors">Contact</a>
<a href="formules.html" class="ml-4 inline-block bg-[var(--huges-orange)] hover:bg-amber-500 text-white px-5 py-2.5 rounded-lg shadow-sm font-semibold transition-transform hover:scale-105">
Voir les abonnements
</a>
</nav>
<div class="flex md:hidden">
<button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:bg-gray-100 focus:outline-none">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': mobileMenuOpen, 'inline-flex': !mobileMenuOpen }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
<path :class="{'hidden': !mobileMenuOpen, 'inline-flex': mobileMenuOpen }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div x-show="mobileMenuOpen" x-transition class="md:hidden">
<nav class="px-2 pt-2 pb-4 space-y-1 sm:px-3 text-center">
<a href="index.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Accueil</a>
<a href="formules.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Formules</a>
<a href="a-propos.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">À Propos</a>
<a href="contact.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Contact</a>
<a href="formules.html" @click="mobileMenuOpen = false" class="mt-4 block w-full bg-[var(--huges-orange)] hover:bg-amber-500 text-white px-5 py-2.5 rounded-lg shadow-sm font-semibold">Voir les abonnements</a>
</nav>
</div>
</header>
<main>
<section id="formules" class="bg-white py-20 lg:py-28">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center" data-aos="fade-down">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Des formules adaptées à chaque besoin</h2>
<p class="mt-4 max-w-2xl mx-auto text-lg text-gray-600">Que vous soyez un particulier, un freelance ou une grande entreprise, nous avons l'abonnement qu'il vous faut.</p>
</div>
<!-- CARTES DE FORMULES MISES À JOUR AVEC ICÔNES -->
<div class="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 items-stretch">
<article class="p-6 rounded-xl bg-gray-50 border border-gray-200 flex flex-col" data-aos="zoom-in-up" data-aos-delay="100">
<h4 class="font-bold text-lg text-[var(--huges-green)]">Starter</h4>
<p class="text-sm text-gray-500 mt-1">Particuliers & Petits besoins</p>
<div class="my-4 text-3xl font-extrabold text-gray-900">14 000 <span class="text-base font-medium text-gray-500">FCFA/mois</span></div>
<ul class="text-sm space-y-3 text-gray-700 flex-grow">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path></svg><span><span class="font-semibold">10 livraisons</span> incluses</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span>Max. 2 livraisons / jour</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path></svg><span>Suivi en temps réel</span></li>
</ul>
<a href="https://wa.me/221764669165?text=Bonjour,%20je%20suis%20intéressé(e)%20par%20le%20pack%20Starter." class="mt-6 text-center w-full inline-block bg-gray-200 text-gray-800 font-semibold px-4 py-3 rounded-lg hover:bg-gray-300 transition-colors">Choisir ce pack</a>
</article>
<article class="p-6 rounded-xl bg-gray-50 border border-gray-200 flex flex-col" data-aos="zoom-in-up" data-aos-delay="200">
<h4 class="font-bold text-lg text-[var(--huges-green)]">Pro Mobile</h4>
<p class="text-sm text-gray-500 mt-1">Freelances & Indépendants</p>
<div class="my-4 text-3xl font-extrabold text-gray-900">33 500 <span class="text-base font-medium text-gray-500">FCFA/mois</span></div>
<ul class="text-sm space-y-3 text-gray-700 flex-grow">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path></svg><span><span class="font-semibold">25 livraisons</span> incluses</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0h18"></path></svg><span>Max. 6 livraisons / semaine</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span>Priorité sur le planning</span></li>
</ul>
<a href="https://wa.me/221764669165?text=Bonjour,%20je%20suis%20intéressé(e)%20par%20le%20pack%20Pro%20Mobile." class="mt-6 text-center w-full inline-block bg-gray-200 text-gray-800 font-semibold px-4 py-3 rounded-lg hover:bg-gray-300 transition-colors">Choisir ce pack</a>
</article>
<article class="relative p-6 rounded-xl bg-[var(--huges-green)] text-white shadow-lg flex flex-col ring-4 ring-[var(--huges-orange)]" data-aos="zoom-in-up" data-aos-delay="300">
<div class="absolute -top-4 right-4 bg-[var(--huges-orange)] text-white text-xs font-bold px-3 py-1 rounded-full">LE PLUS POPULAIRE</div>
<h4 class="font-bold text-lg">E-commerce Boost</h4>
<p class="text-sm text-green-200 mt-1">Boutiques en ligne</p>
<div class="my-4 text-3xl font-extrabold">65 000 <span class="text-base font-medium text-green-200">FCFA/mois</span></div>
<ul class="text-sm space-y-3 flex-grow">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-amber-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125V6.375c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v.001c0 .621.504 1.125 1.125 1.125z"></path></svg><span><span class="font-semibold">50 livraisons</span> incluses</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-amber-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0h18"></path></svg><span><span class="font-semibold">Aucune limite</span> journalière</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-amber-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path></svg><span><span class="font-semibold">Facturation</span> mensuelle</span></li>
</ul>
<a href="https://wa.me/221764669165?text=Bonjour,%20je%20suis%20intéressé(e)%20par%20le%20pack%20E-commerce%20Boost." class="mt-6 text-center w-full inline-block bg-[var(--huges-orange)] text-white font-semibold px-4 py-3 rounded-lg hover:bg-amber-500 transition-transform hover:scale-105">Je m'abonne</a>
</article>
<article class="p-6 rounded-xl bg-gray-50 border border-gray-200 flex flex-col" data-aos="zoom-in-up" data-aos-delay="400">
<h4 class="font-bold text-lg text-[var(--huges-green)]">Resto Pro</h4>
<p class="text-sm text-gray-500 mt-1">Restaurants & Dark Kitchens</p>
<div class="my-4 text-3xl font-extrabold text-gray-900">120 000 <span class="text-base font-medium text-gray-500">FCFA/mois</span></div>
<ul class="text-sm space-y-3 text-gray-700 flex-grow">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path></svg><span><span class="font-semibold">100 livraisons</span> incluses</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0h18"></path></svg><span><span class="font-semibold">Aucune limite</span> journalière</span></li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span>Priorité sur les créneaux repas</span></li>
</ul>
<a href="https://wa.me/221764669165?text=Bonjour,%20je%20suis%20intéressé(e)%20par%20le%20pack%20Resto%20Pro." class="mt-6 text-center w-full inline-block bg-gray-200 text-gray-800 font-semibold px-4 py-3 rounded-lg hover:bg-gray-300 transition-colors">Choisir ce pack</a>
</article>
</div>
</div>
</section>
<section id="simulateur" class="bg-gray-50 py-20 lg:py-28" x-data="priceSimulator()">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="p-8 rounded-lg" data-aos="fade-right">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Calculez le tarif d'une course</h2>
<p class="mt-4 text-lg text-gray-600">Obtenez une estimation immédiate pour une livraison unique. Découvrez combien vous pourriez économiser avec un abonnement !</p>
<div class="mt-8 space-y-4">
<div>
<label for="depart" class="block text-sm font-medium text-gray-700">Point de départ</label>
<select id="depart" x-model="startZone" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
<option value="plateau">Dakar-Plateau</option>
<option value="medina">Medina</option>
<option value="fass">Fass-Colobane-Gueule Tapée</option>
<option value="mermoz">Mermoz-Sacré-Coeur</option>
<option value="almadies">Almadies</option>
<option value="yoff">Yoff</option>
<option value="parcelles">Parcelles Assainies</option>
<option value="pikine">Pikine</option>
</select>
</div>
<div>
<label for="arrivee" class="block text-sm font-medium text-gray-700">Point d'arrivée</label>
<select id="arrivee" x-model="endZone" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
<option value="plateau">Dakar-Plateau</option>
<option value="medina">Medina</option>
<option value="fass">Fass-Colobane-Gueule Tapée</option>
<option value="mermoz">Mermoz-Sacré-Coeur</option>
<option value="almadies">Almadies</option>
<option value="yoff">Yoff</option>
<option value="parcelles">Parcelles Assainies</option>
<option value="pikine">Pikine</option>
</select>
</div>
<button @click="calculatePrice()" class="w-full bg-[var(--huges-green)] text-white font-semibold py-3 px-4 rounded-lg hover:bg-[var(--huges-light-green)] transition-colors">Calculer mon tarif</button>
</div>
</div>
<div class="text-center bg-green-100/50 p-10 rounded-2xl" data-aos="fade-left" data-aos-delay="200">
<p class="text-lg text-gray-600">Tarif estimé pour cette course :</p>
<div class="my-4 text-5xl font-extrabold text-[var(--huges-green)]" x-text="price ? price + ' FCFA' : '...'">...</div>
<div x-show="price" x-transition class="text-gray-700">
<p>Avec notre pack <strong class="font-bold">E-commerce Boost</strong>, cette livraison vous coûterait seulement <strong class="font-bold">1300 FCFA</strong>.</p>
<a href="#formules" class="mt-4 inline-block text-[var(--huges-green)] font-bold hover:underline">Voir les abonnements →</a>
</div>
</div>
</div>
</div>
<script>
function priceSimulator() {
return {
startZone: 'plateau',
endZone: 'medina',
price: null,
prices: {
plateau: { plateau: 1500, medina: 1800, fass: 1800, mermoz: 2000, almadies: 2500, yoff: 2800, parcelles: 3000, pikine: 3500 },
medina: { plateau: 1800, medina: 1500, fass: 1500, mermoz: 1800, almadies: 2200, yoff: 2500, parcelles: 3000, pikine: 3500 },
fass: { plateau: 1800, medina: 1500, fass: 1500, mermoz: 1800, almadies: 2200, yoff: 2500, parcelles: 3000, pikine: 3500 },
mermoz: { plateau: 2000, medina: 1800, fass: 1800, mermoz: 1500, almadies: 1800, yoff: 2000, parcelles: 2500, pikine: 3000 },
almadies: { plateau: 2500, medina: 2200, fass: 2200, mermoz: 1800, almadies: 1500, yoff: 1800, parcelles: 3000, pikine: 4000 },
yoff: { plateau: 2800, medina: 2500, fass: 2500, mermoz: 2000, almadies: 1800, yoff: 1500, parcelles: 2500, pikine: 3500 },
parcelles:{ plateau: 3000, medina: 3000, fass: 3000, mermoz: 2500, almadies: 3000, yoff: 2500, parcelles: 1500, pikine: 2000 },
pikine: { plateau: 3500, medina: 3500, fass: 3500, mermoz: 3000, almadies: 4000, yoff: 3500, parcelles: 2000, pikine: 1500 },
},
calculatePrice() {
this.price = this.prices[this.startZone][this.endZone];
}
}
}
</script>
</section>
</main>
<footer class="bg-gray-900 text-white">
<!-- ... (Le footer reste identique) ... -->
</footer>
</div>
<!-- ... (Le modal reste identique) ... -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 800,
once: true,
});
</script>
</body>
</html>