-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
364 lines (353 loc) · 33 KB
/
Copy pathindex.html
File metadata and controls
364 lines (353 loc) · 33 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
355
356
357
358
359
360
361
362
363
364
<!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>
<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" />
<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="#" 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="#atouts" class="hover:text-[var(--huges-green)] transition-colors">Nos atouts</a>
<a href="#formules" class="hover:text-[var(--huges-green)] transition-colors">Formules</a>
<a href="#temoignages" class="hover:text-[var(--huges-green)] transition-colors">Témoignages</a>
<a href="#faq" class="hover:text-[var(--huges-green)] transition-colors">FAQ</a>
<a href="#contact" class="hover:text-[var(--huges-green)] transition-colors">Contact</a>
<a href="#formules" 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="#atouts" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Nos atouts</a>
<a href="#formules" @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="#temoignages" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Témoignages</a>
<a href="#faq" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">FAQ</a>
<a href="#contact" @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" @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">
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">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">
<a href="#formules" 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>
<section id="atouts" class="max-w-7xl mx-auto px-6 py-20 lg:py-28">
<div class="text-center">
<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-3 gap-8 text-center">
<div class="p-8">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-4">
<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" /></svg>
</div>
<h3 class="font-bold text-xl">Ultra-Rapide</h3>
<p class="mt-2 text-gray-600">Recevez et envoyez vos colis en un temps record dans tout Dakar. Idéal pour les urgences !</p>
</div>
<div class="p-8">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-4">
<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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
</div>
<h3 class="font-bold text-xl">Économique</h3>
<p class="mt-2 text-gray-600">Nos abonnements sont conçus pour vous faire économiser sur vos frais de livraison récurrents.</p>
</div>
<div class="p-8">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-[var(--huges-green)] mx-auto mb-4">
<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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
</div>
<h3 class="font-bold text-xl">Simple & Digital</h3>
<p class="mt-2 text-gray-600">Commandez en quelques clics via WhatsApp et suivez votre colis en temps réel jusqu'à destination.</p>
</div>
</div>
</section>
<section id="formules" class="bg-[var(--huges-light-gray)] py-20 lg:py-28">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Des formules adaptées à chaque besoin</h2>
</div>
<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-white border border-gray-200 flex flex-col">
<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-2 text-gray-700 flex-grow">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>10 livraisons incluses (soit 1400 FCFA/course)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Max. 2 livraisons / jour</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Suivi en temps réel</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-white border border-gray-200 flex flex-col">
<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-2 text-gray-700 flex-grow">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>25 livraisons incluses (soit 1340 FCFA/course)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Max. 6 livraisons / semaine</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Priorité sur le planning</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-2 ring-amber-400">
<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-2 flex-grow">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-amber-300 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>50 livraisons incluses (soit 1300 FCFA/course)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-amber-300 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Aucune limite journalière</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-amber-300 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Facturation mensuelle dédiée</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-white border border-gray-200 flex flex-col">
<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-2 text-gray-700 flex-grow">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>100 livraisons incluses (soit 1200 FCFA/course)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Aucune limite journalière</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Priorité sur les créneaux repas</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="max-w-7xl mx-auto px-6 py-20 lg:py-28" x-data="priceSimulator()">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="bg-white p-8 rounded-lg shadow-sm">
<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-50 p-10 rounded-2xl">
<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>
<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>
<section id="temoignages" class="max-w-7xl mx-auto px-6 py-20 lg:py-28">
<div class="text-center">
<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-white rounded-lg shadow-sm">
<img src="https://i.postimg.cc/yNNSbWd7/portrait-successful-black-businesswoman-smiling-confidently-generated-by-ai.jpg" alt="Photo de Awa Ndiaye" class="w-24 h-24 rounded-full mx-auto mb-6 object-cover">
<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-white rounded-lg shadow-sm">
<img src="https://i.postimg.cc/J0KyJ7d0/handsome-young-african-man-turtleneck-looking-away-standing-against-gray-background.jpg" alt="Photo de Moussa Fall" class="w-24 h-24 rounded-full mx-auto mb-6 object-cover">
<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-white rounded-lg shadow-sm">
<img src="https://i.postimg.cc/L82W3rVf/Screenshot-2024-05-21-at-15-53-15.png" alt="Photo de Fatou Diallo" class="w-24 h-24 rounded-full mx-auto mb-6 object-cover">
<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>
</section>
<section id="faq" class="py-20 lg:py-28">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Questions fréquentes</h2>
</div>
<div class="mt-12 space-y-4">
<div x-data="{ open: false }" class="bg-white p-6 rounded-lg shadow-sm">
<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 l'ensemble de la région de Dakar, y compris le centre-ville (Plateau), les quartiers résidentiels (Almadies, Mermoz) et la banlieue proche (Pikine, Guediawaye). Les tarifs de nos abonnements sont valables pour toutes ces zones.</p>
</div>
</div>
<div x-data="{ open: false }" class="bg-white p-6 rounded-lg shadow-sm">
<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">
<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'ai plus de livraisons que mon pack ?</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 livraisons supplémentaires sont facturées à un tarif préférentiel pour nos abonnés. Nous vous prévenons lorsque vous approchez de la limite de votre pack pour que vous puissiez décider de passer au pack supérieur si cela est plus avantageux pour vous.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="max-w-7xl mx-auto px-6 py-20 lg:py-28 text-center">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Prêt à optimiser vos livraisons ?</h2>
<p class="mt-4 max-w-2xl mx-auto text-lg text-gray-600">Contactez-nous dès aujourd'hui pour discuter de vos besoins. Notre équipe est prête à vous proposer la meilleure solution.</p>
<div class="mt-8">
<a href="https://wa.me/221764669165" target="_blank" class="inline-block bg-[var(--huges-green)] hover:bg-[var(--huges-light-green)] text-white px-10 py-4 rounded-lg font-bold text-lg transition-transform hover:scale-105 shadow-lg">
Discuter sur WhatsApp
</a>
<p class="mt-4 text-gray-500">Ou par email : contact@huges-service.com</p>
</div>
</section>
</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="#atouts" class="text-gray-400 hover:text-white">Nos atouts</a></li>
<li><a href="#formules" class="text-gray-400 hover:text-white">Formules</a></li>
<li><a href="#temoignages" class="text-gray-400 hover:text-white">Témoignages</a></li>
<li><a href="#faq" class="text-gray-400 hover:text-white">FAQ</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</button></li>
<li><button @click="legalModalOpen = true" class="text-gray-400 hover:text-white text-left">Conditions Générales de Vente</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>
</body>
</html>