Hugging Face's logo

Spaces:
Adamchab
/
taxi-dji
Running

App Files Community
Adamchab commited on
Commit
beda035
·
verified ·
1 Parent(s): ebe70c5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +679 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Taxi Dji
3
- emoji: ⚡
4
- colorFrom: green
5
- colorTo: yellow
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: taxi-dji
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
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,679 @@
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>Taxi DJI - Service de Taxi Premium en Île-de-France</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(23,23,23,0.7) 100%);
12
+ }
13
+ .btn-primary {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .btn-primary:hover {
17
+ transform: translateY(-3px);
18
+ box-shadow: 0 10px 20px rgba(234, 179, 8, 0.3);
19
+ }
20
+ .feature-card:hover {
21
+ transform: translateY(-10px);
22
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
23
+ }
24
+ .testimonial-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .testimonial-card:hover {
28
+ transform: scale(1.03);
29
+ }
30
+ .animate-bounce-slow {
31
+ animation: bounce 3s infinite;
32
+ }
33
+ @keyframes bounce {
34
+ 0%, 100% {
35
+ transform: translateY(0);
36
+ }
37
+ 50% {
38
+ transform: translateY(-15px);
39
+ }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-900 text-gray-100 font-sans">
44
+ <!-- Navigation -->
45
+ <nav class="bg-black bg-opacity-90 fixed w-full z-50 shadow-lg">
46
+ <div class="container mx-auto px-6 py-4">
47
+ <div class="flex items-center justify-between">
48
+ <div class="flex items-center">
49
+ <div class="text-yellow-400 mr-2">
50
+ <i class="fas fa-taxi text-3xl"></i>
51
+ </div>
52
+ <span class="text-yellow-400 font-bold text-2xl">TAXI DJI</span>
53
+ </div>
54
+ <div class="hidden md:flex space-x-8">
55
+ <a href="#accueil" class="text-yellow-400 hover:text-yellow-300 font-medium">Accueil</a>
56
+ <a href="#services" class="text-gray-300 hover:text-yellow-300 font-medium">Services</a>
57
+ <a href="#tarifs" class="text-gray-300 hover:text-yellow-300 font-medium">Tarifs</a>
58
+ <a href="#reservation" class="text-gray-300 hover:text-yellow-300 font-medium">Réservation</a>
59
+ <a href="#contact" class="text-gray-300 hover:text-yellow-300 font-medium">Contact</a>
60
+ </div>
61
+ <div class="md:hidden">
62
+ <button class="text-yellow-400 focus:outline-none">
63
+ <i class="fas fa-bars text-2xl"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </nav>
69
+
70
+ <!-- Hero Section -->
71
+ <section id="accueil" class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden">
72
+ <div class="absolute inset-0 bg-black opacity-60"></div>
73
+ <div class="absolute inset-0 bg-[url('https://static3.depositphotos.com/1006458/211/i/450/depositphotos_2111331-stock-photo-fast-taxi.jpg')] bg-cover bg-center"></div>
74
+
75
+ <div class="container mx-auto px-6 z-10">
76
+ <div class="flex flex-col md:flex-row items-center">
77
+ <div class="md:w-1/2 mb-12 md:mb-0">
78
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 text-yellow-400 leading-tight">
79
+ Service de Taxi <span class="text-white">Premium</span> en Île-de-France
80
+ </h1>
81
+ <p class="text-xl text-gray-300 mb-8">
82
+ Voyagez avec élégance et ponctualité. Nos chauffeurs professionnels vous garantissent un service haut de gamme dans toute la région.
83
+ </p>
84
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
85
+ <a href="#reservation" class="btn-primary bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-4 px-8 rounded-lg text-lg">
86
+ <i class="fas fa-calendar-check mr-2"></i> Réserver maintenant
87
+ </a>
88
+ <a href="tel:+33123456789" class="btn-primary bg-transparent border-2 border-yellow-400 hover:bg-yellow-400 hover:bg-opacity-20 text-yellow-400 font-bold py-4 px-8 rounded-lg text-lg">
89
+ <i class="fas fa-phone mr-2"></i> 01 23 45 67 89
90
+ </a>
91
+ </div>
92
+ </div>
93
+ <div class="md:w-1/2 flex justify-center animate-bounce-slow">
94
+ <img src="https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Taxi" class="rounded-lg shadow-2xl max-w-md w-full border-4 border-yellow-400">
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- Features Section -->
101
+ <section id="services" class="py-20 bg-gray-800">
102
+ <div class="container mx-auto px-6">
103
+ <div class="text-center mb-16">
104
+ <h2 class="text-3xl md:text-4xl font-bold text-yellow-400 mb-4">Nos Services Exclusifs</h2>
105
+ <div class="w-24 h-1 bg-yellow-400 mx-auto mb-6"></div>
106
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
107
+ Découvrez pourquoi Taxi DJI est le choix privilégié pour les déplacements haut de gamme en Île-de-France.
108
+ </p>
109
+ </div>
110
+
111
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
112
+ <div class="feature-card bg-gray-900 p-8 rounded-lg shadow-lg transition duration-300">
113
+ <div class="text-yellow-400 mb-6">
114
+ <i class="fas fa-star text-4xl"></i>
115
+ </div>
116
+ <h3 class="text-2xl font-bold text-white mb-4">Service Premium</h3>
117
+ <p class="text-gray-300">
118
+ Véhicules haut de gamme impeccables et chauffeurs professionnels en tenue élégante pour un service irréprochable.
119
+ </p>
120
+ </div>
121
+
122
+ <div class="feature-card bg-gray-900 p-8 rounded-lg shadow-lg transition duration-300">
123
+ <div class="text-yellow-400 mb-6">
124
+ <i class="fas fa-clock text-4xl"></i>
125
+ </div>
126
+ <h3 class="text-2xl font-bold text-white mb-4">Ponctualité Garantie</h3>
127
+ <p class="text-gray-300">
128
+ Nous valorisons votre temps. Retards impossibles avec notre système de suivi en temps réel.
129
+ </p>
130
+ </div>
131
+
132
+ <div class="feature-card bg-gray-900 p-8 rounded-lg shadow-lg transition duration-300">
133
+ <div class="text-yellow-400 mb-6">
134
+ <i class="fas fa-map-marked-alt text-4xl"></i>
135
+ </div>
136
+ <h3 class="text-2xl font-bold text-white mb-4">Couverture Complète</h3>
137
+ <p class="text-gray-300">
138
+ Service disponible 24h/24 dans toute l'Île-de-France : Paris, Versailles, Roissy, Orly et bien plus.
139
+ </p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Fleet Section -->
146
+ <section class="py-20 bg-black">
147
+ <div class="container mx-auto px-6">
148
+ <div class="text-center mb-16">
149
+ <h2 class="text-3xl md:text-4xl font-bold text-yellow-400 mb-4">Notre Flotte Exclusive</h2>
150
+ <div class="w-24 h-1 bg-yellow-400 mx-auto mb-6"></div>
151
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
152
+ Des véhicules haut de gamme pour répondre à tous vos besoins de déplacement.
153
+ </p>
154
+ </div>
155
+
156
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
157
+ <div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
158
+ <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mercedes Classe S" class="w-full h-64 object-cover">
159
+ <div class="p-6">
160
+ <h3 class="text-2xl font-bold text-yellow-400 mb-2">Mercedes Classe S</h3>
161
+ <p class="text-gray-300 mb-4">Le summum du confort et de l'élégance pour vos déplacements professionnels.</p>
162
+ <div class="flex justify-between text-gray-400">
163
+ <span><i class="fas fa-user-friends mr-2"></i> 3 passagers</span>
164
+ <span><i class="fas fa-suitcase mr-2"></i> 3 valises</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
170
+ <img src="https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2025&q=80" alt="BMW Série 7" class="w-full h-64 object-cover">
171
+ <div class="p-6">
172
+ <h3 class="text-2xl font-bold text-yellow-400 mb-2">BMW Série 7</h3>
173
+ <p class="text-gray-300 mb-4">Performance et sophistication pour des trajets mémorables.</p>
174
+ <div class="flex justify-between text-gray-400">
175
+ <span><i class="fas fa-user-friends mr-2"></i> 3 passagers</span>
176
+ <span><i class="fas fa-suitcase mr-2"></i> 3 valises</span>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
182
+ <img src="https://images.unsplash.com/photo-1591768793355-5d2d4c4f2b3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Van Premium" class="w-full h-64 object-cover">
183
+ <div class="p-6">
184
+ <h3 class="text-2xl font-bold text-yellow-400 mb-2">Van Premium</h3>
185
+ <p class="text-gray-300 mb-4">Idéal pour les groupes avec un espace généreux et un confort optimal.</p>
186
+ <div class="flex justify-between text-gray-400">
187
+ <span><i class="fas fa-user-friends mr-2"></i> 7 passagers</span>
188
+ <span><i class="fas fa-suitcase mr-2"></i> 8 valises</span>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- Pricing Section -->
197
+ <section id="tarifs" class="py-20 bg-gray-800">
198
+ <div class="container mx-auto px-6">
199
+ <div class="text-center mb-16">
200
+ <h2 class="text-3xl md:text-4xl font-bold text-yellow-400 mb-4">Nos Tarifs Transparents</h2>
201
+ <div class="w-24 h-1 bg-yellow-400 mx-auto mb-6"></div>
202
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
203
+ Des prix clairs sans surprise pour un service exceptionnel.
204
+ </p>
205
+ </div>
206
+
207
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
208
+ <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden border-2 border-yellow-400 transform hover:scale-105 transition duration-300">
209
+ <div class="bg-black text-center py-6">
210
+ <h3 class="text-2xl font-bold text-yellow-400">Paris Intra-muros</h3>
211
+ </div>
212
+ <div class="p-8 text-center">
213
+ <div class="text-5xl font-bold text-white mb-4">35€</div>
214
+ <p class="text-gray-300 mb-6">Course minimum</p>
215
+ <ul class="space-y-3 text-gray-300 mb-8">
216
+ <li class="flex items-center">
217
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Tous véhicules
218
+ </li>
219
+ <li class="flex items-center">
220
+ <i class="fas fa-check text-yellow-400 mr-2"></i> 24h/24
221
+ </li>
222
+ <li class="flex items-center">
223
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Prise en charge rapide
224
+ </li>
225
+ </ul>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden border-2 border-yellow-400 transform hover:scale-105 transition duration-300">
230
+ <div class="bg-black text-center py-6">
231
+ <h3 class="text-2xl font-bold text-yellow-400">Aéroports</h3>
232
+ </div>
233
+ <div class="p-8 text-center">
234
+ <div class="text-5xl font-bold text-white mb-4">60€</div>
235
+ <p class="text-gray-300 mb-6">À partir de (CDG/Orly)</p>
236
+ <ul class="space-y-3 text-gray-300 mb-8">
237
+ <li class="flex items-center">
238
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Suivi vol inclus
239
+ </li>
240
+ <li class="flex items-center">
241
+ <i class="fas fa-check text-yellow-400 mr-2"></i> 45 min d'attente
242
+ </li>
243
+ <li class="flex items-center">
244
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Assistance bagages
245
+ </li>
246
+ </ul>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden border-2 border-yellow-400 transform hover:scale-105 transition duration-300">
251
+ <div class="bg-black text-center py-6">
252
+ <h3 class="text-2xl font-bold text-yellow-400">Sur Mesure</h3>
253
+ </div>
254
+ <div class="p-8 text-center">
255
+ <div class="text-5xl font-bold text-white mb-4">?</div>
256
+ <p class="text-gray-300 mb-6">Devis personnalisé</p>
257
+ <ul class="space-y-3 text-gray-300 mb-8">
258
+ <li class="flex items-center">
259
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Événements spéciaux
260
+ </li>
261
+ <li class="flex items-center">
262
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Service à l'heure
263
+ </li>
264
+ <li class="flex items-center">
265
+ <i class="fas fa-check text-yellow-400 mr-2"></i> Solutions sur mesure
266
+ </li>
267
+ </ul>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="text-center mt-12">
273
+ <p class="text-gray-300 mb-6">
274
+ * Les tarifs sont indicatifs et peuvent varier selon la distance, le trafic et les options choisies.
275
+ </p>
276
+ <a href="#contact" class="inline-block bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-8 rounded-lg transition duration-300">
277
+ Demander un devis précis
278
+ </a>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Booking Section -->
284
+ <section id="reservation" class="py-20 bg-black">
285
+ <div class="container mx-auto px-6">
286
+ <div class="flex flex-col lg:flex-row items-center">
287
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
288
+ <h2 class="text-3xl md:text-4xl font-bold text-yellow-400 mb-6">Réservez Votre Taxi en Quelques Secondes</h2>
289
+ <p class="text-xl text-gray-300 mb-8">
290
+ Planifiez votre trajet en avance ou réservez immédiatement pour un départ dans les 15 minutes.
291
+ </p>
292
+ <div class="bg-gray-900 p-6 rounded-lg shadow-lg mb-8">
293
+ <div class="flex items-center mb-4">
294
+ <div class="text-yellow-400 mr-4">
295
+ <i class="fas fa-headset text-3xl"></i>
296
+ </div>
297
+ <div>
298
+ <h3 class="text-xl font-bold text-white">Assistance 24h/24</h3>
299
+ <p class="text-gray-300">Notre équipe est disponible à tout moment pour répondre à vos questions.</p>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ <div class="bg-gray-900 p-6 rounded-lg shadow-lg">
304
+ <div class="flex items-center">
305
+ <div class="text-yellow-400 mr-4">
306
+ <i class="fas fa-shield-alt text-3xl"></i>
307
+ </div>
308
+ <div>
309
+ <h3 class="text-xl font-bold text-white">Paiement Sécurisé</h3>
310
+ <p class="text-gray-300">Payez en ligne en toute sécurité ou en espèces auprès du chauffeur.</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="lg:w-1/2 bg-gray-900 p-8 rounded-lg shadow-2xl border border-yellow-400">
317
+ <h3 class="text-2xl font-bold text-yellow-400 mb-6 text-center">Formulaire de Réservation</h3>
318
+ <form id="bookingForm" class="space-y-6">
319
+ <div>
320
+ <label for="pickup" class="block text-gray-300 mb-2">Lieu de prise en charge</label>
321
+ <input type="text" id="pickup" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" placeholder="Adresse ou lieu précis" required>
322
+ </div>
323
+
324
+ <div>
325
+ <label for="destination" class="block text-gray-300 mb-2">Destination</label>
326
+ <input type="text" id="destination" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" placeholder="Adresse ou lieu précis" required>
327
+ </div>
328
+
329
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
330
+ <div>
331
+ <label for="date" class="block text-gray-300 mb-2">Date</label>
332
+ <input type="date" id="date" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
333
+ </div>
334
+
335
+ <div>
336
+ <label for="time" class="block text-gray-300 mb-2">Heure</label>
337
+ <input type="time" id="time" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
338
+ </div>
339
+ </div>
340
+
341
+ <div>
342
+ <label for="vehicle" class="block text-gray-300 mb-2">Type de véhicule</label>
343
+ <select id="vehicle" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
344
+ <option value="">Sélectionnez un véhicule</option>
345
+ <option value="mercedes">Mercedes Classe S</option>
346
+ <option value="bmw">BMW Série 7</option>
347
+ <option value="van">Van Premium</option>
348
+ </select>
349
+ </div>
350
+
351
+ <div>
352
+ <label for="passengers" class="block text-gray-300 mb-2">Nombre de passagers</label>
353
+ <input type="number" id="passengers" min="1" max="8" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
354
+ </div>
355
+
356
+ <button type="submit" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-4 px-6 rounded-lg transition duration-300">
357
+ Valider la réservation
358
+ </button>
359
+ </form>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Testimonials Section -->
366
+ <section class="py-20 bg-gray-800">
367
+ <div class="container mx-auto px-6">
368
+ <div class="text-center mb-16">
369
+ <h2 class="text-3xl md:text-4xl font-bold text-yellow-400 mb-4">Ce Que Disent Nos Clients</h2>
370
+ <div class="w-24 h-1 bg-yellow-400 mx-auto mb-6"></div>
371
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
372
+ La satisfaction de nos clients est notre meilleure publicité.
373
+ </p>
374
+ </div>
375
+
376
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
377
+ <div class="testimonial-card bg-gray-900 p-8 rounded-lg shadow-lg">
378
+ <div class="flex items-center mb-6">
379
+ <div class="text-yellow-400 text-3xl mr-4">
380
+ <i class="fas fa-quote-left"></i>
381
+ </div>
382
+ <div class="text-yellow-400 flex">
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ </div>
389
+ </div>
390
+ <p class="text-gray-300 italic mb-6">
391
+ "Service impeccable pour mon transfert à Roissy. Le chauffeur était à l'heure, très professionnel et la voiture était d'une propreté irréprochable. Je recommande vivement !"
392
+ </p>
393
+ <div class="flex items-center">
394
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-yellow-400 mr-4">
395
+ <i class="fas fa-user text-xl"></i>
396
+ </div>
397
+ <div>
398
+ <h4 class="text-white font-bold">Sophie L.</h4>
399
+ <p class="text-gray-400">Paris 16ème</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="testimonial-card bg-gray-900 p-8 rounded-lg shadow-lg">
405
+ <div class="flex items-center mb-6">
406
+ <div class="text-yellow-400 text-3xl mr-4">
407
+ <i class="fas fa-quote-left"></i>
408
+ </div>
409
+ <div class="text-yellow-400 flex">
410
+ <i class="fas fa-star"></i>
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star"></i>
413
+ <i class="fas fa-star"></i>
414
+ <i class="fas fa-star"></i>
415
+ </div>
416
+ </div>
417
+ <p class="text-gray-300 italic mb-6">
418
+ "J'utilise Taxi DJI pour tous mes déplacements professionnels. Toujours ponctuels, des véhicules luxueux et des chauffeurs discrets et courtois. Un service haut de gamme qui fait la différence."
419
+ </p>
420
+ <div class="flex items-center">
421
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-yellow-400 mr-4">
422
+ <i class="fas fa-user-tie text-xl"></i>
423
+ </div>
424
+ <div>
425
+ <h4 class="text-white font-bold">Marc D.</h4>
426
+ <p class="text-gray-400">La Défense</p>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="testimonial-card bg-gray-900 p-8 rounded-lg shadow-lg">
432
+ <div class="flex items-center mb-6">
433
+ <div class="text-yellow-400 text-3xl mr-4">
434
+ <i class="fas fa-quote-left"></i>
435
+ </div>
436
+ <div class="text-yellow-400 flex">
437
+ <i class="fas fa-star"></i>
438
+ <i class="fas fa-star"></i>
439
+ <i class="fas fa-star"></i>
440
+ <i class="fas fa-star"></i>
441
+ <i class="fas fa-star"></i>
442
+ </div>
443
+ </div>
444
+ <p class="text-gray-300 italic mb-6">
445
+ "Nous avons réservé un van pour notre groupe de 6 personnes. Très bon rapport qualité-prix, le chauffeur était aux petits soins et nous a même aidé avec nos bagages. À refaire sans hésiter !"
446
+ </p>
447
+ <div class="flex items-center">
448
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-yellow-400 mr-4">
449
+ <i class="fas fa-users text-xl"></i>
450
+ </div>
451
+ <div>
452
+ <h4 class="text-white font-bold">Famille R.</h4>
453
+ <p class="text-gray-400">Versailles</p>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </section>
460
+
461
+ <!-- Contact Section -->
462
+ <section id="contact" class="py-20 bg-black">
463
+ <div class="container mx-auto px-6">
464
+ <div class="flex flex-col lg:flex-row">
465
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
466
+ <h2 class="text-3xl md:text-4xl font-bold text-yellow-400 mb-6">Contactez-Nous</h2>
467
+ <p class="text-xl text-gray-300 mb-8">
468
+ Une question, une demande particulière ? Notre équipe est à votre écoute.
469
+ </p>
470
+
471
+ <div class="space-y-6">
472
+ <div class="flex items-start">
473
+ <div class="text-yellow-400 mt-1 mr-4">
474
+ <i class="fas fa-map-marker-alt text-2xl"></i>
475
+ </div>
476
+ <div>
477
+ <h3 class="text-xl font-bold text-white mb-1">Adresse</h3>
478
+ <p class="text-gray-300">123 Avenue des Champs-Élysées, 75008 Paris</p>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="flex items-start">
483
+ <div class="text-yellow-400 mt-1 mr-4">
484
+ <i class="fas fa-phone-alt text-2xl"></i>
485
+ </div>
486
+ <div>
487
+ <h3 class="text-xl font-bold text-white mb-1">Téléphone</h3>
488
+ <p class="text-gray-300">01 23 45 67 89</p>
489
+ <p class="text-gray-300">06 12 34 56 78 (Urgences)</p>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="flex items-start">
494
+ <div class="text-yellow-400 mt-1 mr-4">
495
+ <i class="fas fa-envelope text-2xl"></i>
496
+ </div>
497
+ <div>
498
+ <h3 class="text-xl font-bold text-white mb-1">Email</h3>
499
+ <p class="text-gray-300">[email protected]</p>
500
+ <p class="text-gray-300">[email protected]</p>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="flex items-start">
505
+ <div class="text-yellow-400 mt-1 mr-4">
506
+ <i class="fas fa-clock text-2xl"></i>
507
+ </div>
508
+ <div>
509
+ <h3 class="text-xl font-bold text-white mb-1">Horaires</h3>
510
+ <p class="text-gray-300">Service 24h/24, 7j/7</p>
511
+ <p class="text-gray-300">Bureau : Lun-Ven 9h-19h</p>
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+ <div class="mt-10">
517
+ <h3 class="text-xl font-bold text-yellow-400 mb-4">Suivez-Nous</h3>
518
+ <div class="flex space-x-4">
519
+ <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
520
+ <i class="fab fa-facebook-f text-xl"></i>
521
+ </a>
522
+ <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
523
+ <i class="fab fa-twitter text-xl"></i>
524
+ </a>
525
+ <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
526
+ <i class="fab fa-instagram text-xl"></i>
527
+ </a>
528
+ <a href="#" class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
529
+ <i class="fab fa-linkedin-in text-xl"></i>
530
+ </a>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="lg:w-1/2 bg-gray-900 p-8 rounded-lg shadow-2xl border border-yellow-400">
536
+ <h3 class="text-2xl font-bold text-yellow-400 mb-6">Envoyez-Nous un Message</h3>
537
+ <form id="contactForm" class="space-y-6">
538
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
539
+ <div>
540
+ <label for="name" class="block text-gray-300 mb-2">Nom</label>
541
+ <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
542
+ </div>
543
+
544
+ <div>
545
+ <label for="email" class="block text-gray-300 mb-2">Email</label>
546
+ <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
547
+ </div>
548
+ </div>
549
+
550
+ <div>
551
+ <label for="subject" class="block text-gray-300 mb-2">Sujet</label>
552
+ <input type="text" id="subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required>
553
+ </div>
554
+
555
+ <div>
556
+ <label for="message" class="block text-gray-300 mb-2">Message</label>
557
+ <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white" required></textarea>
558
+ </div>
559
+
560
+ <button type="submit" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-4 px-6 rounded-lg transition duration-300">
561
+ Envoyer le message
562
+ </button>
563
+ </form>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </section>
568
+
569
+ <!-- Map Section -->
570
+ <section class="h-96 bg-gray-800 overflow-hidden">
571
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937595!2d2.2922926156381903!3d48.858370079287475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sTour%20Eiffel!5e0!3m2!1sfr!2sfr!4v1623251234567!5m2!1sfr!2sfr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
572
+ </section>
573
+
574
+ <!-- Footer -->
575
+ <footer class="bg-black py-12">
576
+ <div class="container mx-auto px-6">
577
+ <div class="flex flex-col md:flex-row justify-between items-center">
578
+ <div class="flex items-center mb-6 md:mb-0">
579
+ <div class="text-yellow-400 mr-2">
580
+ <i class="fas fa-taxi text-3xl"></i>
581
+ </div>
582
+ <span class="text-yellow-400 font-bold text-2xl">TAXI DJI</span>
583
+ </div>
584
+
585
+ <div class="flex flex-wrap justify-center md:justify-end space-x-6 mb-6 md:mb-0">
586
+ <a href="#accueil" class="text-gray-300 hover:text-yellow-400">Accueil</a>
587
+ <a href="#services" class="text-gray-300 hover:text-yellow-400">Services</a>
588
+ <a href="#tarifs" class="text-gray-300 hover:text-yellow-400">Tarifs</a>
589
+ <a href="#reservation" class="text-gray-300 hover:text-yellow-400">Réservation</a>
590
+ <a href="#contact" class="text-gray-300 hover:text-yellow-400">Contact</a>
591
+ <a href="#" class="text-gray-300 hover:text-yellow-400">CGV</a>
592
+ </div>
593
+
594
+ <div class="flex space-x-4">
595
+ <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
596
+ <i class="fab fa-facebook-f"></i>
597
+ </a>
598
+ <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
599
+ <i class="fab fa-instagram"></i>
600
+ </a>
601
+ <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center text-yellow-400 hover:bg-yellow-400 hover:text-black transition duration-300">
602
+ <i class="fab fa-twitter"></i>
603
+ </a>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
608
+ <p>&copy; 2023 Taxi DJI - Tous droits réservés. SIRET : 123 456 789 00010</p>
609
+ <p class="mt-2">Service de taxi haut de gamme en Île-de-France</p>
610
+ </div>
611
+ </div>
612
+ </footer>
613
+
614
+ <!-- Floating WhatsApp Button -->
615
+ <div class="fixed bottom-6 right-6 z-50">
616
+ <a href="https://wa.me/33123456789" class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center text-white shadow-xl hover:bg-green-600 transition duration-300 animate-bounce">
617
+ <i class="fab fa-whatsapp text-3xl"></i>
618
+ </a>
619
+ </div>
620
+
621
+ <!-- Back to Top Button -->
622
+ <button id="backToTop" class="fixed bottom-6 left-6 w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center text-black shadow-xl hover:bg-yellow-500 transition duration-300 opacity-0 invisible">
623
+ <i class="fas fa-arrow-up text-xl"></i>
624
+ </button>
625
+
626
+ <script>
627
+ // Back to Top Button
628
+ const backToTopButton = document.getElementById('backToTop');
629
+
630
+ window.addEventListener('scroll', () => {
631
+ if (window.pageYOffset > 300) {
632
+ backToTopButton.classList.remove('opacity-0', 'invisible');
633
+ backToTopButton.classList.add('opacity-100', 'visible');
634
+ } else {
635
+ backToTopButton.classList.remove('opacity-100', 'visible');
636
+ backToTopButton.classList.add('opacity-0', 'invisible');
637
+ }
638
+ });
639
+
640
+ backToTopButton.addEventListener('click', () => {
641
+ window.scrollTo({
642
+ top: 0,
643
+ behavior: 'smooth'
644
+ });
645
+ });
646
+
647
+ // Form Submission
648
+ document.getElementById('bookingForm').addEventListener('submit', function(e) {
649
+ e.preventDefault();
650
+ alert('Merci pour votre réservation ! Nous vous contacterons sous peu pour confirmation.');
651
+ this.reset();
652
+ });
653
+
654
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
655
+ e.preventDefault();
656
+ alert('Merci pour votre message ! Nous vous répondrons dans les plus brefs délais.');
657
+ this.reset();
658
+ });
659
+
660
+ // Smooth Scrolling for Anchor Links
661
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
662
+ anchor.addEventListener('click', function(e) {
663
+ e.preventDefault();
664
+
665
+ const targetId = this.getAttribute('href');
666
+ if (targetId === '#') return;
667
+
668
+ const targetElement = document.querySelector(targetId);
669
+ if (targetElement) {
670
+ window.scrollTo({
671
+ top: targetElement.offsetTop - 80,
672
+ behavior: 'smooth'
673
+ });
674
+ }
675
+ });
676
+ });
677
+ </script>
678
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Adamchab/taxi-dji" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
679
+ </html>