Hugging Face's logo

Spaces:
josephbasa
/
tracer-vision
Running

App Files Community
josephbasa commited on
Commit
07a1499
·
verified ·
1 Parent(s): 12ffad2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +812 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tracer Vision
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tracer-vision
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,812 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TrackVision - Solutions de Traçage GPS Professionnel</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-bg {
18
+ background: linear-gradient(rgba(8, 28, 58, 0.8), rgba(8, 28, 58, 0.8)),
19
+ url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
20
+ background-size: cover;
21
+ background-position: center;
22
+ background-attachment: fixed;
23
+ animation: pan 30s infinite alternate;
24
+ }
25
+
26
+ @keyframes pan {
27
+ 0% { background-position: 0% 50%; }
28
+ 100% { background-position: 100% 50%; }
29
+ }
30
+
31
+ .btn-primary {
32
+ background: linear-gradient(45deg, #1e3a8a, #3b82f6);
33
+ transition: all 0.3s ease;
34
+ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
35
+ }
36
+
37
+ .btn-primary:hover {
38
+ transform: translateY(-3px);
39
+ box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
40
+ }
41
+
42
+ .service-card {
43
+ transition: all 0.3s ease;
44
+ border: 1px solid rgba(59, 130, 246, 0.1);
45
+ }
46
+
47
+ .service-card:hover {
48
+ transform: translateY(-10px);
49
+ box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
50
+ border-color: rgba(59, 130, 246, 0.3);
51
+ }
52
+
53
+ .service-icon {
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .service-card:hover .service-icon {
58
+ transform: scale(1.1);
59
+ color: #3b82f6;
60
+ }
61
+
62
+ .fade-in {
63
+ opacity: 0;
64
+ transform: translateY(20px);
65
+ transition: opacity 0.6s ease, transform 0.6s ease;
66
+ }
67
+
68
+ .fade-in.visible {
69
+ opacity: 1;
70
+ transform: translateY(0);
71
+ }
72
+
73
+ .counter {
74
+ font-size: 2.5rem;
75
+ font-weight: 700;
76
+ color: #1e3a8a;
77
+ }
78
+
79
+ .testimonial-card {
80
+ transition: all 0.3s ease;
81
+ }
82
+
83
+ .testimonial-card:hover {
84
+ transform: translateY(-5px);
85
+ box-shadow: 0 10px 20px rgba(30, 58, 138, 0.1);
86
+ }
87
+
88
+ .faq-item {
89
+ border-bottom: 1px solid #e5e7eb;
90
+ }
91
+
92
+ .faq-question {
93
+ transition: all 0.3s ease;
94
+ }
95
+
96
+ .faq-question:hover {
97
+ color: #3b82f6;
98
+ }
99
+
100
+ .faq-answer {
101
+ max-height: 0;
102
+ overflow: hidden;
103
+ transition: max-height 0.3s ease;
104
+ }
105
+
106
+ .faq-item.active .faq-answer {
107
+ max-height: 300px;
108
+ }
109
+
110
+ .input-field {
111
+ transition: all 0.3s ease;
112
+ border: 1px solid #e5e7eb;
113
+ }
114
+
115
+ .input-field:focus {
116
+ border-color: #3b82f6;
117
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
118
+ }
119
+
120
+ .map-container {
121
+ height: 400px;
122
+ background: #e5e7eb;
123
+ position: relative;
124
+ overflow: hidden;
125
+ }
126
+
127
+ .map-marker {
128
+ position: absolute;
129
+ width: 20px;
130
+ height: 20px;
131
+ background: #3b82f6;
132
+ border-radius: 50%;
133
+ box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.3);
134
+ animation: pulse 2s infinite;
135
+ }
136
+
137
+ @keyframes pulse {
138
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
139
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
140
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
141
+ }
142
+
143
+ .vehicle {
144
+ position: absolute;
145
+ width: 30px;
146
+ height: 30px;
147
+ background: url('https://cdn-icons-png.flaticon.com/512/2583/2583344.png') center/contain no-repeat;
148
+ animation: move 10s linear infinite;
149
+ }
150
+
151
+ @keyframes move {
152
+ 0% { transform: translate(0, 0); }
153
+ 25% { transform: translate(200px, 50px); }
154
+ 50% { transform: translate(400px, 0); }
155
+ 75% { transform: translate(200px, -50px); }
156
+ 100% { transform: translate(0, 0); }
157
+ }
158
+
159
+ @media (max-width: 768px) {
160
+ .hero-bg {
161
+ background-attachment: scroll;
162
+ }
163
+ }
164
+ </style>
165
+ </head>
166
+ <body class="bg-gray-50 text-gray-800">
167
+ <!-- Navigation -->
168
+ <nav class="bg-blue-900 text-white shadow-lg fixed w-full z-50">
169
+ <div class="container mx-auto px-6 py-3">
170
+ <div class="flex justify-between items-center">
171
+ <div class="flex items-center">
172
+ <i class="fas fa-map-marked-alt text-blue-300 text-2xl mr-2"></i>
173
+ <span class="font-semibold text-xl">TrackVision</span>
174
+ </div>
175
+ <div class="hidden md:flex space-x-8">
176
+ <a href="#accueil" class="hover:text-blue-300 transition">Accueil</a>
177
+ <a href="#services" class="hover:text-blue-300 transition">Services</a>
178
+ <a href="#avantages" class="hover:text-blue-300 transition">Avantages</a>
179
+ <a href="#temoignages" class="hover:text-blue-300 transition">Témoignages</a>
180
+ <a href="#contact" class="hover:text-blue-300 transition">Contact</a>
181
+ </div>
182
+ <button class="md:hidden focus:outline-none">
183
+ <i class="fas fa-bars text-xl"></i>
184
+ </button>
185
+ </div>
186
+ </div>
187
+ </nav>
188
+
189
+ <!-- Hero Section -->
190
+ <section id="accueil" class="hero-bg text-white pt-32 pb-20 md:pt-40 md:pb-28">
191
+ <div class="container mx-auto px-6 text-center">
192
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 fade-in">Suivi GPS en Temps Réel pour Votre Flotte</h1>
193
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto fade-in" style="transition-delay: 0.2s;">
194
+ Optimisez vos trajets, réduisez vos coûts et améliorez la sécurité de vos véhicules avec notre solution de traçage GPS professionnelle.
195
+ </p>
196
+ <div class="fade-in" style="transition-delay: 0.4s;">
197
+ <button class="btn-primary text-white font-semibold py-3 px-8 rounded-full text-lg">
198
+ Demander une démo <i class="fas fa-arrow-right ml-2"></i>
199
+ </button>
200
+ </div>
201
+
202
+ <!-- Animated Map Preview -->
203
+ <div class="mt-16 mx-auto max-w-5xl fade-in" style="transition-delay: 0.6s;">
204
+ <div class="map-container rounded-xl overflow-hidden relative">
205
+ <div class="map-marker" style="top: 50%; left: 30%;"></div>
206
+ <div class="map-marker" style="top: 30%; left: 60%;"></div>
207
+ <div class="map-marker" style="top: 70%; left: 70%;"></div>
208
+ <div class="vehicle" style="top: 50%; left: 10%;"></div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Services Section -->
215
+ <section id="services" class="py-20 bg-white">
216
+ <div class="container mx-auto px-6">
217
+ <div class="text-center mb-16 fade-in">
218
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Nos Services</h2>
219
+ <p class="text-gray-600 max-w-2xl mx-auto">
220
+ Découvrez notre gamme complète de solutions de traçage GPS adaptées à vos besoins professionnels.
221
+ </p>
222
+ </div>
223
+
224
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
225
+ <!-- Service 1 -->
226
+ <div class="service-card bg-white p-8 rounded-xl fade-in">
227
+ <div class="service-icon text-blue-600 text-4xl mb-6">
228
+ <i class="fas fa-clock"></i>
229
+ </div>
230
+ <h3 class="text-xl font-semibold mb-3 text-blue-900">Suivi en Temps Réel</h3>
231
+ <p class="text-gray-600">
232
+ Visualisez la position exacte de tous vos véhicules en temps réel avec une précision de quelques mètres.
233
+ </p>
234
+ </div>
235
+
236
+ <!-- Service 2 -->
237
+ <div class="service-card bg-white p-8 rounded-xl fade-in" style="transition-delay: 0.2s;">
238
+ <div class="service-icon text-blue-600 text-4xl mb-6">
239
+ <i class="fas fa-route"></i>
240
+ </div>
241
+ <h3 class="text-xl font-semibold mb-3 text-blue-900">Historique des Trajets</h3>
242
+ <p class="text-gray-600">
243
+ Consultez l'historique complet des déplacements de votre flotte avec des données précises sur les distances et les temps.
244
+ </p>
245
+ </div>
246
+
247
+ <!-- Service 3 -->
248
+ <div class="service-card bg-white p-8 rounded-xl fade-in" style="transition-delay: 0.4s;">
249
+ <div class="service-icon text-blue-600 text-4xl mb-6">
250
+ <i class="fas fa-bell"></i>
251
+ </div>
252
+ <h3 class="text-xl font-semibold mb-3 text-blue-900">Alertes Personnalisées</h3>
253
+ <p class="text-gray-600">
254
+ Recevez des notifications instantanées pour les excès de vitesse, sorties de zone ou comportements anormaux.
255
+ </p>
256
+ </div>
257
+
258
+ <!-- Service 4 -->
259
+ <div class="service-card bg-white p-8 rounded-xl fade-in" style="transition-delay: 0.6s;">
260
+ <div class="service-icon text-blue-600 text-4xl mb-6">
261
+ <i class="fas fa-chart-bar"></i>
262
+ </div>
263
+ <h3 class="text-xl font-semibold mb-3 text-blue-900">Rapports d'Activité</h3>
264
+ <p class="text-gray-600">
265
+ Générez des rapports détaillés pour analyser l'utilisation de votre flotte et optimiser vos opérations.
266
+ </p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Avantages Section -->
273
+ <section id="avantages" class="py-20 bg-blue-50">
274
+ <div class="container mx-auto px-6">
275
+ <div class="text-center mb-16 fade-in">
276
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Nos Avantages</h2>
277
+ <p class="text-gray-600 max-w-2xl mx-auto">
278
+ Pourquoi choisir TrackVision pour la gestion de votre flotte de véhicules ?
279
+ </p>
280
+ </div>
281
+
282
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
283
+ <div class="fade-in">
284
+ <div class="mb-8 flex items-start">
285
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
286
+ <i class="fas fa-tachometer-alt text-blue-600 text-xl"></i>
287
+ </div>
288
+ <div>
289
+ <h3 class="text-xl font-semibold mb-2 text-blue-900">Optimisation des Trajets</h3>
290
+ <p class="text-gray-600">
291
+ Réduisez les kilomètres inutiles et optimisez les itinéraires pour diminuer votre consommation de carburant jusqu'à 20%.
292
+ </p>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="mb-8 flex items-start">
297
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
298
+ <i class="fas fa-euro-sign text-blue-600 text-xl"></i>
299
+ </div>
300
+ <div>
301
+ <h3 class="text-xl font-semibold mb-2 text-blue-900">Réduction des Coûts</h3>
302
+ <p class="text-gray-600">
303
+ Contrôlez les dépenses liées à votre flotte et identifiez les économies potentielles grâce à nos analyses détaillées.
304
+ </p>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="flex items-start">
309
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
310
+ <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
311
+ </div>
312
+ <div>
313
+ <h3 class="text-xl font-semibold mb-2 text-blue-900">Sécurité Renforcée</h3>
314
+ <p class="text-gray-600">
315
+ Protégez vos actifs contre le vol et surveillez le comportement des conducteurs pour améliorer la sécurité routière.
316
+ </p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="fade-in" style="transition-delay: 0.3s;">
322
+ <div class="bg-white p-8 rounded-xl shadow-lg">
323
+ <div class="flex items-center mb-8">
324
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
325
+ <i class="fas fa-headset text-blue-600 text-xl"></i>
326
+ </div>
327
+ <div>
328
+ <h3 class="text-xl font-semibold text-blue-900">Assistance 24/7</h3>
329
+ <p class="text-gray-600">
330
+ Notre équipe est disponible à tout moment pour répondre à vos questions et résoudre vos problèmes.
331
+ </p>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="grid grid-cols-2 gap-6">
336
+ <div class="text-center">
337
+ <div class="counter mb-2" data-target="99">0</div>
338
+ <p class="text-gray-600 font-medium">% Disponibilité</p>
339
+ </div>
340
+ <div class="text-center">
341
+ <div class="counter mb-2" data-target="15">0</div>
342
+ <p class="text-gray-600 font-medium">Minutes de réponse</p>
343
+ </div>
344
+ <div class="text-center">
345
+ <div class="counter mb-2" data-target="100">0</div>
346
+ <p class="text-gray-600 font-medium">Clients satisfaits</p>
347
+ </div>
348
+ <div class="text-center">
349
+ <div class="counter mb-2" data-target="24">0</div>
350
+ <p class="text-gray-600 font-medium">/7 Support</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <!-- Témoignages Section -->
360
+ <section id="temoignages" class="py-20 bg-blue-900 text-white">
361
+ <div class="container mx-auto px-6">
362
+ <div class="text-center mb-16 fade-in">
363
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Ils nous font confiance</h2>
364
+ <p class="max-w-2xl mx-auto opacity-80">
365
+ Découvrez ce que nos clients disent de notre solution de traçage GPS.
366
+ </p>
367
+ </div>
368
+
369
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
370
+ <!-- Témoignage 1 -->
371
+ <div class="testimonial-card bg-blue-800 p-8 rounded-xl fade-in">
372
+ <div class="flex items-center mb-4">
373
+ <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center mr-4">
374
+ <i class="fas fa-user text-xl"></i>
375
+ </div>
376
+ <div>
377
+ <h4 class="font-semibold">Pierre D.</h4>
378
+ <p class="text-blue-300 text-sm">Directeur Logistique</p>
379
+ </div>
380
+ </div>
381
+ <p class="opacity-90">
382
+ "Depuis que nous utilisons TrackVision, nous avons réduit nos coûts logistiques de 18%. La plateforme est intuitive et les alertes en temps réel nous ont permis d'optimiser nos tournées."
383
+ </p>
384
+ <div class="mt-4 text-yellow-400">
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ <i class="fas fa-star"></i>
389
+ <i class="fas fa-star"></i>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Témoignage 2 -->
394
+ <div class="testimonial-card bg-blue-800 p-8 rounded-xl fade-in" style="transition-delay: 0.2s;">
395
+ <div class="flex items-center mb-4">
396
+ <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center mr-4">
397
+ <i class="fas fa-user text-xl"></i>
398
+ </div>
399
+ <div>
400
+ <h4 class="font-semibold">Sophie L.</h4>
401
+ <p class="text-blue-300 text-sm">Responsable Flotte</p>
402
+ </div>
403
+ </div>
404
+ <p class="opacity-90">
405
+ "La solution TrackVision a révolutionné notre gestion de flotte. Les rapports automatisés nous font gagner un temps précieux et l'historique des trajets est d'une précision remarquable."
406
+ </p>
407
+ <div class="mt-4 text-yellow-400">
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star-half-alt"></i>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Témoignage 3 -->
417
+ <div class="testimonial-card bg-blue-800 p-8 rounded-xl fade-in" style="transition-delay: 0.4s;">
418
+ <div class="flex items-center mb-4">
419
+ <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center mr-4">
420
+ <i class="fas fa-user text-xl"></i>
421
+ </div>
422
+ <div>
423
+ <h4 class="font-semibold">Thomas M.</h4>
424
+ <p class="text-blue-300 text-sm">PDG Transport</p>
425
+ </div>
426
+ </div>
427
+ <p class="opacity-90">
428
+ "L'assistance client de TrackVision est exceptionnelle. Ils ont su s'adapter à nos besoins spécifiques et nous fournissent des données cruciales pour notre activité de transport frigorifique."
429
+ </p>
430
+ <div class="mt-4 text-yellow-400">
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star"></i>
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Chiffres clés -->
441
+ <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
442
+ <div class="fade-in">
443
+ <div class="counter text-4xl font-bold mb-2" data-target="300">0</div>
444
+ <p class="text-blue-300 font-medium">Entreprises clientes</p>
445
+ </div>
446
+ <div class="fade-in" style="transition-delay: 0.2s;">
447
+ <div class="counter text-4xl font-bold mb-2" data-target="1000000">0</div>
448
+ <p class="text-blue-300 font-medium">Km suivis par an</p>
449
+ </div>
450
+ <div class="fade-in" style="transition-delay: 0.4s;">
451
+ <div class="counter text-4xl font-bold mb-2" data-target="99">0</div>
452
+ <p class="text-blue-300 font-medium">% de satisfaction</p>
453
+ </div>
454
+ <div class="fade-in" style="transition-delay: 0.6s;">
455
+ <div class="counter text-4xl font-bold mb-2" data-target="24">0</div>
456
+ <p class="text-blue-300 font-medium">Heures de support</p>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </section>
461
+
462
+ <!-- FAQ Section -->
463
+ <section class="py-20 bg-white">
464
+ <div class="container mx-auto px-6">
465
+ <div class="text-center mb-16 fade-in">
466
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Questions Fréquentes</h2>
467
+ <p class="text-gray-600 max-w-2xl mx-auto">
468
+ Trouvez rapidement des réponses à vos questions sur notre solution de traçage GPS.
469
+ </p>
470
+ </div>
471
+
472
+ <div class="max-w-3xl mx-auto">
473
+ <!-- FAQ Item 1 -->
474
+ <div class="faq-item mb-4 fade-in">
475
+ <div class="faq-question bg-blue-50 p-4 rounded-lg cursor-pointer flex justify-between items-center">
476
+ <h3 class="font-semibold text-blue-900">Comment fonctionne le système de traçage GPS ?</h3>
477
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
478
+ </div>
479
+ <div class="faq-answer px-4">
480
+ <p class="py-4 text-gray-600">
481
+ Notre système utilise des dispositifs GPS installés dans vos véhicules qui communiquent en temps réel avec nos serveurs via le réseau mobile. Les données sont ensuite traitées et affichées sur votre tableau de bord personnalisé, accessible depuis n'importe quel appareil connecté à internet.
482
+ </p>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- FAQ Item 2 -->
487
+ <div class="faq-item mb-4 fade-in" style="transition-delay: 0.1s;">
488
+ <div class="faq-question bg-blue-50 p-4 rounded-lg cursor-pointer flex justify-between items-center">
489
+ <h3 class="font-semibold text-blue-900">Quelle est la précision du système ?</h3>
490
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
491
+ </div>
492
+ <div class="faq-answer px-4">
493
+ <p class="py-4 text-gray-600">
494
+ Notre système offre une précision de 2 à 5 mètres en conditions optimales. La précision peut varier légèrement en zone urbaine dense ou en présence d'obstacles majeurs, mais reste suffisante pour toutes les applications professionnelles.
495
+ </p>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- FAQ Item 3 -->
500
+ <div class="faq-item mb-4 fade-in" style="transition-delay: 0.2s;">
501
+ <div class="faq-question bg-blue-50 p-4 rounded-lg cursor-pointer flex justify-between items-center">
502
+ <h3 class="font-semibold text-blue-900">Combien de temps les données sont-elles conservées ?</h3>
503
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
504
+ </div>
505
+ <div class="faq-answer px-4">
506
+ <p class="py-4 text-gray-600">
507
+ Nous conservons l'historique complet des trajets pendant 12 mois par défaut. Les données peuvent être exportées à tout moment pour archivage. Des options d'extension de durée de conservation sont disponibles pour les clients qui en ont besoin.
508
+ </p>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- FAQ Item 4 -->
513
+ <div class="faq-item mb-4 fade-in" style="transition-delay: 0.3s;">
514
+ <div class="faq-question bg-blue-50 p-4 rounded-lg cursor-pointer flex justify-between items-center">
515
+ <h3 class="font-semibold text-blue-900">L'installation est-elle compliquée ?</h3>
516
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
517
+ </div>
518
+ <div class="faq-answer px-4">
519
+ <p class="py-4 text-gray-600">
520
+ Nos dispositifs GPS sont conçus pour une installation simple et rapide. La plupart des modèles s'installent en moins de 15 minutes par véhicule sans nécessiter de modifications permanentes. Nous fournissons des instructions détaillées et notre équipe peut vous guider à distance si nécessaire.
521
+ </p>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- FAQ Item 5 -->
526
+ <div class="faq-item fade-in" style="transition-delay: 0.4s;">
527
+ <div class="faq-question bg-blue-50 p-4 rounded-lg cursor-pointer flex justify-between items-center">
528
+ <h3 class="font-semibold text-blue-900">Est-ce compatible avec mon système de gestion de flotte existant ?</h3>
529
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
530
+ </div>
531
+ <div class="faq-answer px-4">
532
+ <p class="py-4 text-gray-600">
533
+ Oui, notre solution propose des API ouvertes et des options d'intégration avec la plupart des systèmes de gestion de flotte existants. Notre équipe technique peut vous aider à configurer l'intégration selon vos besoins spécifiques.
534
+ </p>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </section>
540
+
541
+ <!-- Contact Section -->
542
+ <section id="contact" class="py-20 bg-blue-50">
543
+ <div class="container mx-auto px-6">
544
+ <div class="text-center mb-16 fade-in">
545
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Contactez-nous</h2>
546
+ <p class="text-gray-600 max-w-2xl mx-auto">
547
+ Prêt à optimiser votre flotte ? Notre équipe est à votre disposition pour répondre à toutes vos questions.
548
+ </p>
549
+ </div>
550
+
551
+ <div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
552
+ <div class="fade-in">
553
+ <form class="space-y-6">
554
+ <div>
555
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label>
556
+ <input type="text" id="name" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none">
557
+ </div>
558
+
559
+ <div>
560
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
561
+ <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none">
562
+ </div>
563
+
564
+ <div>
565
+ <label for="company" class="block text-gray-700 font-medium mb-2">Entreprise</label>
566
+ <input type="text" id="company" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none">
567
+ </div>
568
+
569
+ <div>
570
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
571
+ <textarea id="message" rows="4" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none"></textarea>
572
+ </div>
573
+
574
+ <button type="submit" class="btn-primary text-white font-semibold py-3 px-8 rounded-full w-full">
575
+ Envoyer le message <i class="fas fa-paper-plane ml-2"></i>
576
+ </button>
577
+ </form>
578
+ </div>
579
+
580
+ <div class="fade-in" style="transition-delay: 0.3s;">
581
+ <div class="bg-white p-8 rounded-xl shadow-lg h-full">
582
+ <h3 class="text-xl font-semibold text-blue-900 mb-6">Nos coordonnées</h3>
583
+
584
+ <div class="space-y-6">
585
+ <div class="flex items-start">
586
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
587
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
588
+ </div>
589
+ <div>
590
+ <h4 class="font-medium text-gray-800">Adresse</h4>
591
+ <p class="text-gray-600">12 Rue de la Technologie, 75015 Paris, France</p>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="flex items-start">
596
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
597
+ <i class="fas fa-phone-alt text-blue-600"></i>
598
+ </div>
599
+ <div>
600
+ <h4 class="font-medium text-gray-800">Téléphone</h4>
601
+ <p class="text-gray-600">+33 1 23 45 67 89</p>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="flex items-start">
606
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
607
+ <i class="fas fa-envelope text-blue-600"></i>
608
+ </div>
609
+ <div>
610
+ <h4 class="font-medium text-gray-800">Email</h4>
611
+ <p class="text-gray-600">contact@trackvision.fr</p>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="flex items-start">
616
+ <div class="bg-blue-100 p-3 rounded-full mr-6">
617
+ <i class="fas fa-clock text-blue-600"></i>
618
+ </div>
619
+ <div>
620
+ <h4 class="font-medium text-gray-800">Horaires</h4>
621
+ <p class="text-gray-600">Lundi - Vendredi : 9h - 18h</p>
622
+ <p class="text-gray-600">Support technique : 24h/24</p>
623
+ </div>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="mt-8">
628
+ <h4 class="font-medium text-gray-800 mb-4">Suivez-nous</h4>
629
+ <div class="flex space-x-4">
630
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200 transition">
631
+ <i class="fab fa-linkedin-in"></i>
632
+ </a>
633
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200 transition">
634
+ <i class="fab fa-twitter"></i>
635
+ </a>
636
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200 transition">
637
+ <i class="fab fa-facebook-f"></i>
638
+ </a>
639
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200 transition">
640
+ <i class="fab fa-instagram"></i>
641
+ </a>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </section>
649
+
650
+ <!-- Footer -->
651
+ <footer class="bg-blue-900 text-white py-12">
652
+ <div class="container mx-auto px-6">
653
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
654
+ <div>
655
+ <div class="flex items-center mb-4">
656
+ <i class="fas fa-map-marked-alt text-blue-300 text-2xl mr-2"></i>
657
+ <span class="font-semibold text-xl">TrackVision</span>
658
+ </div>
659
+ <p class="text-blue-300">
660
+ Solutions professionnelles de traçage GPS pour optimiser votre flotte et réduire vos coûts.
661
+ </p>
662
+ </div>
663
+
664
+ <div>
665
+ <h4 class="font-semibold text-lg mb-4">Liens utiles</h4>
666
+ <ul class="space-y-2">
667
+ <li><a href="#accueil" class="text-blue-300 hover:text-white transition">Accueil</a></li>
668
+ <li><a href="#services" class="text-blue-300 hover:text-white transition">Services</a></li>
669
+ <li><a href="#avantages" class="text-blue-300 hover:text-white transition">Avantages</a></li>
670
+ <li><a href="#temoignages" class="text-blue-300 hover:text-white transition">Témoignages</a></li>
671
+ <li><a href="#contact" class="text-blue-300 hover:text-white transition">Contact</a></li>
672
+ </ul>
673
+ </div>
674
+
675
+ <div>
676
+ <h4 class="font-semibold text-lg mb-4">Services</h4>
677
+ <ul class="space-y-2">
678
+ <li><a href="#" class="text-blue-300 hover:text-white transition">Suivi GPS</a></li>
679
+ <li><a href="#" class="text-blue-300 hover:text-white transition">Gestion de flotte</a></li>
680
+ <li><a href="#" class="text-blue-300 hover:text-white transition">Optimisation de trajets</a></li>
681
+ <li><a href="#" class="text-blue-300 hover:text-white transition">Alertes sécurité</a></li>
682
+ <li><a href="#" class="text-blue-300 hover:text-white transition">Formation conducteurs</a></li>
683
+ </ul>
684
+ </div>
685
+
686
+ <div>
687
+ <h4 class="font-semibold text-lg mb-4">Newsletter</h4>
688
+ <p class="text-blue-300 mb-4">
689
+ Abonnez-vous à notre newsletter pour recevoir nos dernières actualités.
690
+ </p>
691
+ <div class="flex">
692
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
693
+ <button class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-r-lg transition">
694
+ <i class="fas fa-paper-plane"></i>
695
+ </button>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="border-t border-blue-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
701
+ <p class="text-blue-300 mb-4 md:mb-0">
702
+ © 2023 TrackVision. Tous droits réservés.
703
+ </p>
704
+ <div class="flex space-x-6">
705
+ <a href="#" class="text-blue-300 hover:text-white transition">Mentions légales</a>
706
+ <a href="#" class="text-blue-300 hover:text-white transition">Politique de confidentialité</a>
707
+ <a href="#" class="text-blue-300 hover:text-white transition">CGV</a>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </footer>
712
+
713
+ <script>
714
+ // Animation au scroll
715
+ const fadeElements = document.querySelectorAll('.fade-in');
716
+
717
+ const appearOptions = {
718
+ threshold: 0.1,
719
+ rootMargin: "0px 0px -50px 0px"
720
+ };
721
+
722
+ const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
723
+ entries.forEach(entry => {
724
+ if (!entry.isIntersecting) {
725
+ return;
726
+ } else {
727
+ entry.target.classList.add('visible');
728
+ appearOnScroll.unobserve(entry.target);
729
+ }
730
+ });
731
+ }, appearOptions);
732
+
733
+ fadeElements.forEach(fadeElement => {
734
+ appearOnScroll.observe(fadeElement);
735
+ });
736
+
737
+ // FAQ accordéon
738
+ const faqItems = document.querySelectorAll('.faq-item');
739
+
740
+ faqItems.forEach(item => {
741
+ const question = item.querySelector('.faq-question');
742
+
743
+ question.addEventListener('click', () => {
744
+ // Fermer les autres items
745
+ faqItems.forEach(otherItem => {
746
+ if (otherItem !== item) {
747
+ otherItem.classList.remove('active');
748
+ otherItem.querySelector('.fa-chevron-down').classList.remove('rotate-180');
749
+ }
750
+ });
751
+
752
+ // Basculer l'item actuel
753
+ item.classList.toggle('active');
754
+ const icon = question.querySelector('.fa-chevron-down');
755
+ icon.classList.toggle('rotate-180');
756
+ });
757
+ });
758
+
759
+ // Compteurs animés
760
+ const counters = document.querySelectorAll('.counter');
761
+ const speed = 200;
762
+
763
+ function animateCounters() {
764
+ counters.forEach(counter => {
765
+ const target = +counter.getAttribute('data-target');
766
+ const count = +counter.innerText;
767
+ const increment = target / speed;
768
+
769
+ if (count < target) {
770
+ counter.innerText = Math.ceil(count + increment);
771
+ setTimeout(animateCounters, 1);
772
+ } else {
773
+ counter.innerText = target;
774
+ }
775
+ });
776
+ }
777
+
778
+ const counterObserver = new IntersectionObserver((entries) => {
779
+ entries.forEach(entry => {
780
+ if (entry.isIntersecting) {
781
+ animateCounters();
782
+ counterObserver.unobserve(entry.target);
783
+ }
784
+ });
785
+ }, {threshold: 0.5});
786
+
787
+ counters.forEach(counter => {
788
+ counterObserver.observe(counter);
789
+ counter.innerText = '0';
790
+ });
791
+
792
+ // Navigation mobile
793
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
794
+ const mobileMenu = document.querySelector('.md\\:flex');
795
+
796
+ mobileMenuButton.addEventListener('click', () => {
797
+ mobileMenu.classList.toggle('hidden');
798
+ mobileMenu.classList.toggle('flex');
799
+ mobileMenu.classList.toggle('flex-col');
800
+ mobileMenu.classList.toggle('absolute');
801
+ mobileMenu.classList.toggle('top-16');
802
+ mobileMenu.classList.toggle('left-0');
803
+ mobileMenu.classList.toggle('right-0');
804
+ mobileMenu.classList.toggle('bg-blue-900');
805
+ mobileMenu.classList.toggle('p-4');
806
+ mobileMenu.classList.toggle('space-y-4');
807
+ mobileMenu.classList.toggle('space-x-8');
808
+ mobileMenu.classList.toggle('shadow-lg');
809
+ });
810
+ </script>
811
+ <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=josephbasa/tracer-vision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
812
+ </html>