-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
354 lines (334 loc) · 27.5 KB
/
index.html
File metadata and controls
354 lines (334 loc) · 27.5 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Huges Service — Livraison Moto Express à Dakar</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="Huges Service : livraison moto rapide et abonnements mensuels pour e-commerçants, restaurateurs et particuliers à 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="text-[var(--huges-green)] transition-colors">Accueil</a>
<a href="formules.html" class="hover: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 class="relative bg-gray-900 text-white">
<div class="absolute inset-0">
<img src="https://i.postimg.cc/QCMk55JC/Generated-Image-August-17-2025-6-08-AM.jpg" alt="Livreur à moto Huges Service dans les rues de Dakar" class="w-full h-full object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-black/30"></div>
</div>
<div class="relative max-w-7xl mx-auto px-6 py-32 lg:py-48 text-center">
<h1 class="text-4xl lg:text-6xl font-extrabold" data-aos="fade-down">
Livrez vite. <span class="text-[var(--huges-orange)]">Livrez mieux.</span>
</h1>
<p class="mt-4 max-w-2xl mx-auto text-lg text-gray-200" data-aos="fade-up" data-aos-delay="200">La solution de livraison par abonnement à Dakar qui booste votre activité et simplifie votre quotidien.</p>
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400">
<a href="formules.html" class="bg-[var(--huges-orange)] hover:bg-amber-500 text-white px-8 py-4 rounded-lg font-bold text-lg transition-transform hover:scale-105 shadow-lg">Découvrir nos formules</a>
<a href="https://wa.me/221764669165" target="_blank" class="bg-white/20 backdrop-blur-sm border border-white/30 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white/30 transition">Contacter via WhatsApp</a>
</div>
</div>
</section>
<!-- ========== DÉBUT DE LA SECTION MODIFIÉE ========== -->
<section id="atouts" class="max-w-7xl mx-auto px-6 py-20 lg:py-28">
<div class="text-center" data-aos="fade-down">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Vos livraisons à Dakar, la sérénité en plus</h2>
</div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-center">
<div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm text-center transition-transform hover:scale-105 hover:shadow-lg" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-5">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h3 class="font-bold text-xl text-gray-900">Ultra-Rapide</h3>
<p class="mt-2 text-gray-600">Vos colis livrés en un temps record dans tout Dakar.</p>
</div>
<div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm text-center transition-transform hover:scale-105 hover:shadow-lg" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-5">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A3.375 3.375 0 006.375 8.25v1.875c0 1.864 1.511 3.375 3.375 3.375h1.5c1.864 0 3.375-1.511 3.375-3.375V8.25A3.375 3.375 0 0012 4.875z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75h.008v.008H12v-.008z"></path></svg>
</div>
<h3 class="font-bold text-xl text-gray-900">Économique</h3>
<p class="mt-2 text-gray-600">Économisez sur chaque course grâce à nos abonnements.</p>
</div>
<div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm text-center transition-transform hover:scale-105 hover:shadow-lg" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-5">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"></path></svg>
</div>
<h3 class="font-bold text-xl text-gray-900">Simple & Digital</h3>
<p class="mt-2 text-gray-600">Commandez et suivez vos livraisons via WhatsApp.</p>
</div>
<!-- BLOC AJOUTÉ ET CENTRÉ -->
<div class="md:col-span-2 lg:col-span-1 lg:col-start-2 bg-white p-8 rounded-xl border border-gray-200 shadow-sm text-center transition-transform hover:scale-105 hover:shadow-lg" data-aos="fade-up" data-aos-delay="400">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-5">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<h3 class="font-bold text-xl text-gray-900">Espace Client Dédié</h3>
<p class="mt-2 text-gray-600">Suivez votre solde de crédits et vos courses en temps réel via votre portail personnel.</p>
</div>
</div>
</section>
<!-- ========== FIN DE LA SECTION MODIFIÉE ========== -->
<section id="processus" class="bg-[var(--huges-light-gray)] 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">La livraison en 3 étapes simples</h2>
</div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-16 text-center relative">
<div class="hidden md:block absolute top-12 left-0 w-full h-0.5">
<svg width="100%" height="2" class="absolute top-0"><line x1="0" y1="1" x2="100%" y2="1" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 8"/></svg>
</div>
<div class="relative z-10" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-center h-24 w-24 rounded-full bg-[var(--huges-green)] text-white mx-auto mb-5 shadow-lg border-4 border-white">
<span class="text-3xl font-bold">1</span>
</div>
<h3 class="font-bold text-xl text-gray-900">Contactez-nous</h3>
<p class="mt-2 text-gray-600">Passez votre commande de livraison simplement via WhatsApp.</p>
</div>
<div class="relative z-10" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center justify-center h-24 w-24 rounded-full bg-[var(--huges-green)] text-white mx-auto mb-5 shadow-lg border-4 border-white">
<span class="text-3xl font-bold">2</span>
</div>
<h3 class="font-bold text-xl text-gray-900">On récupère votre colis</h3>
<p class="mt-2 text-gray-600">Un de nos livreurs se rend rapidement au point de départ.</p>
</div>
<div class="relative z-10" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center justify-center h-24 w-24 rounded-full bg-[var(--huges-green)] text-white mx-auto mb-5 shadow-lg border-4 border-white">
<span class="text-3xl font-bold">3</span>
</div>
<h3 class="font-bold text-xl text-gray-900">On livre en express</h3>
<p class="mt-2 text-gray-600">Votre colis arrive à destination en toute sécurité.</p>
</div>
</div>
</div>
</section>
<section id="temoignages" class="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">Ils nous font confiance</h2>
</div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="p-8 bg-gray-50 rounded-lg" data-aos="fade-right" data-aos-delay="100">
<img src="Images/woman-8237167_1280.jpg" alt="Photo de Awa Ndiaye" class="w-24 h-24 rounded-full mx-auto mb-6 object-cover ring-4 ring-white">
<p class="text-gray-600 italic">"Depuis que nous utilisons Huges Service, notre logistique s'est simplifiée. La fiabilité et la rapidité sont toujours au rendez-vous. Un partenaire indispensable !"</p>
<div class="mt-4 font-bold text-gray-900">Awa Ndiaye</div>
<div class="text-sm text-gray-500">Gérante de "La Petite Boutique"</div>
</div>
<div class="p-8 bg-gray-50 rounded-lg" data-aos="fade-up" data-aos-delay="200">
<img src="Images/black-man-7154113_1280.jpg" alt="Photo de Moussa Fall" class="w-24 h-24 rounded-full mx-auto mb-6 object-cover ring-4 ring-white">
<p class="text-gray-600 italic">"En tant que restaurateur, la livraison est cruciale. L'offre Resto Pro est parfaite pour gérer nos pics d'activité. Nos clients sont servis à temps, et chauds."</p>
<div class="mt-4 font-bold text-gray-900">Moussa Fall</div>
<div class="text-sm text-gray-500">Chef du "Dakar Kitchen"</div>
</div>
<div class="p-8 bg-gray-50 rounded-lg" data-aos="fade-left" data-aos-delay="300">
<img src="Images/Fatou.jpg" alt="Photo de Fatou Diallo" class="w-24 h-24 rounded-full mx-auto mb-6 object-cover ring-4 ring-white">
<p class="text-gray-600 italic">"Je gagne un temps précieux sur mes petites courses et envois de documents. Le pack Starter est flexible et économique, exactement ce dont j'avais besoin."</p>
<div class="mt-4 font-bold text-gray-900">Fatou Diallo</div>
<div class="text-sm text-gray-500">Freelance</div>
</div>
</div>
</div>
</section>
<!-- ========== DÉBUT DE LA SECTION ZONES AJOUTÉE ========== -->
<section id="zones" class="bg-[var(--huges-light-gray)] 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">Notre Système de Livraison par Zones</h2>
<p class="mt-4 max-w-3xl mx-auto text-lg text-gray-600">Pour une tarification juste et transparente, nous avons organisé Dakar en 3 zones. Le coût de chaque course est calculé en crédits, vous assurant de ne payer que pour la distance réellement parcourue.</p>
</div>
<div class="mt-16" data-aos="fade-up">
<div class="overflow-x-auto bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<table class="w-full text-left border-collapse">
<thead class="bg-gray-50">
<tr>
<th class="p-4 font-bold text-gray-700 border-b-2 border-gray-200">Zone</th>
<th class="p-4 font-bold text-gray-700 border-b-2 border-gray-200">Nom de la Zone</th>
<th class="p-4 font-bold text-gray-700 border-b-2 border-gray-200">Quartiers Principaux Inclus</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="p-4 border-b border-gray-200 font-semibold text-[var(--huges-green)]">Zone 1</td>
<td class="p-4 border-b border-gray-200 font-semibold">Cœur de Ville</td>
<td class="p-4 border-b border-gray-200 text-gray-600">Plateau, Médina, Point E, Fann, Mermoz, Sacré-Cœur, Liberté 1 à 6, Gueule Tapée, Fass.</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="p-4 border-b border-gray-200 font-semibold text-[var(--huges-green)]">Zone 2</td>
<td class="p-4 border-b border-gray-200 font-semibold">Couronne Urbaine</td>
<td class="p-4 border-b border-gray-200 text-gray-600">Almadies, Ngor, Ouakam, Virage, Sicap, Dieuppeul-Derklé, HLM, Grand Yoff, Patte d'Oie.</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="p-4 border-b border-gray-200 font-semibold text-[var(--huges-green)]">Zone 3</td>
<td class="p-4 border-b border-gray-200 font-semibold">Périphérie Proche</td>
<td class="p-4 border-b border-gray-200 text-gray-600">Yoff, Parcelles Assainies, Foire, Nord Foire, Ouest Foire, Cambérène.</td>
</tr>
<tr class="bg-gray-100">
<td class="p-4 font-semibold text-gray-500">Hors Zone</td>
<td class="p-4 font-semibold text-gray-500">Sur Devis</td>
<td class="p-4 text-gray-600">Pikine, Guédiawaye, Rufisque, Diamniadio. Contactez-nous pour une tarification spéciale.</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-12 p-8 bg-green-50 border border-green-200 rounded-lg">
<h3 class="font-bold text-xl text-gray-900">Comment fonctionne le système de crédits ?</h3>
<p class="mt-2 text-gray-700">Chaque abonnement vous donne des "crédits de livraison". Une course simple dans la même zone coûte 1 crédit. Si la course est plus longue, elle utilise simplement un peu plus de crédits, en toute transparence :</p>
<ul class="mt-4 space-y-2 list-disc list-inside text-gray-700">
<li>Livraison au sein d'une même zone (ex: Zone 1 → Zone 1) = <span class="font-bold">1 crédit</span> décompté.</li>
<li>Livraison vers une zone voisine (ex: Zone 1 → Zone 2) = <span class="font-bold">1.5 crédit</span> décompté.</li>
<li>Livraison traversant 2 zones (ex: Zone 1 → Zone 3) = <span class="font-bold">2 crédits</span> décomptés.</li>
</ul>
<p class="mt-4 text-sm text-gray-600 italic"><b>Exemple :</b> Une boutique au Plateau (Zone 1) qui livre un client aux Almadies (Zone 2) utilisera 1.5 crédit de son forfait.</p>
</div>
</div>
</div>
</section>
<!-- ========== FIN DE LA SECTION ZONES AJOUTÉE ========== -->
<!-- ========== DÉBUT DE LA SECTION FAQ MISE À JOUR ========== -->
<section id="faq" class="bg-white py-20 lg:py-28">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center" data-aos="fade-down">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Questions fréquentes</h2>
</div>
<div class="mt-12 space-y-4" data-aos="fade-up">
<div x-data="{ open: false }" class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<button @click="open = !open" class="w-full flex justify-between items-center text-left text-lg font-semibold text-gray-800">
<span>Quelles sont les zones couvertes par vos services ?</span>
<svg class="w-5 h-5 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div x-show="open" x-collapse class="mt-3 text-gray-600">
<p>Nous couvrons tout Dakar et sa périphérie proche grâce à notre système de 3 zones. Le coût en crédits de chaque livraison dépend des zones de départ et d'arrivée. Vous pouvez consulter le tableau détaillé de nos zones juste au-dessus pour plus de précisions.</p>
</div>
</div>
<div x-data="{ open: false }" class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<button @click="open = !open" class="w-full flex justify-between items-center text-left text-lg font-semibold text-gray-800">
<span>Comment fonctionne le paiement de l'abonnement ?</span>
<svg class="w-5 h-5 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div x-show="open" x-collapse class="mt-3 text-gray-600">
<p>Le paiement est mensuel et s'effectue simplement via les solutions de mobile money (Orange Money, Wave) ou par virement bancaire pour les entreprises. La facture vous est envoyée au début de chaque mois.</p>
</div>
</div>
<div x-data="{ open: false }" class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<button @click="open = !open" class="w-full flex justify-between items-center text-left text-lg font-semibold text-gray-800">
<span>Que se passe-t-il si j'utilise tous mes crédits ?</span>
<svg class="w-5 h-5 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div x-show="open" x-collapse class="mt-3 text-gray-600">
<p>Pas de souci ! Les crédits supplémentaires sont facturés à un tarif préférentiel pour nos abonnés. Nous vous prévenons lorsque vous approchez de la limite de votre forfait pour que vous puissiez décider de passer au forfait supérieur si cela est plus avantageux pour vous.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ========== FIN DE LA SECTION FAQ MISE À JOUR ========== -->
</main>
<footer class="bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<h3 class="font-bold text-lg">Huges Service</h3>
<p class="mt-2 text-sm text-gray-400 max-w-sm">La solution de livraison par abonnement qui accélère votre business à Dakar. Fiabilité, rapidité et économies garanties.</p>
</div>
<div>
<h4 class="font-semibold text-gray-200">Navigation</h4>
<ul class="mt-4 space-y-2 text-sm">
<li><a href="formules.html" class="text-gray-400 hover:text-white">Formules</a></li>
<li><a href="a-propos.html" class="text-gray-400 hover:text-white">À Propos</a></li>
<li><a href="contact.html" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-gray-200">Contact & Légal</h4>
<ul class="mt-4 space-y-2 text-sm">
<li><a href="https://wa.me/221764669165" target="_blank" class="text-gray-400 hover:text-white">WhatsApp : +221 76 466 91 65</a></li>
<li><span class="text-gray-400">Email : contact@huges-service.com</span></li>
<li class="mt-2"><button @click="legalModalOpen = true" class="text-gray-400 hover:text-white text-left">Mentions légales & CGV</button></li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-800 pt-6 text-center text-sm text-gray-500">
<p>© 2025 Huges Service. Tous droits réservés.</p>
</div>
</div>
</footer>
</div>
<div x-show="legalModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50" style="display: none;">
<div @click.away="legalModalOpen = false" class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto p-8">
<button @click="legalModalOpen = false" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<h2 class="text-2xl font-bold text-gray-900 mb-4">Mentions Légales & CGV</h2>
<div class="prose max-w-none text-gray-600">
<p class="font-bold">1. Informations sur l'éditeur</p>
<p>Ce site est la propriété de Huges Service, entreprise enregistrée à Dakar, Sénégal. Adresse : 123 Avenue de l'Indépendance, Dakar. Email : contact@huges-service.com. Téléphone : +221 76 466 91 65.</p>
<p class="font-bold">2. Conditions Générales de Vente (CGV)</p>
<p>Les présentes conditions régissent les abonnements aux services de livraison de Huges Service. L'abonnement est mensuel, payable d'avance par mobile money ou virement. Les livraisons incluses dans le forfait doivent être utilisées dans le mois en cours et ne sont pas reportables. Toute livraison supplémentaire sera facturée au tarif préférentiel abonné.</p>
<p class="font-bold">3. Responsabilité</p>
<p>Huges Service s'engage à mettre tout en œuvre pour assurer une livraison rapide et sécurisée. La responsabilité de Huges Service ne saurait être engagée en cas de force majeure (conditions météorologiques extrêmes, manifestations, etc.). Les colis doivent être correctement emballés par l'expéditeur.</p>
<p class="font-bold">4. Données personnelles</p>
<p>Les informations collectées sont nécessaires à la gestion de votre abonnement. Conformément à la législation en vigueur, vous disposez d'un droit d'accès, de rectification et de suppression de vos données personnelles.</p>
</div>
</div>
</div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 800,
once: true,
});
</script>
</body>
</html>