Sjokode commited on
Commit
bd2bf69
·
verified ·
1 Parent(s): 14ed44c

remplace les couton contacter et transforme les en voir le profil - Follow Up Deployment

Browse files
Files changed (2) hide show
  1. index.html +341 -735
  2. prompts.txt +4 -5
index.html CHANGED
@@ -1,739 +1,345 @@
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>SkillBridge - Catégorie Bâtiment</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
- .scrollbar-hide {
11
- -ms-overflow-style: none;
12
- scrollbar-width: none;
13
- }
14
- .scrollbar-hide::-webkit-scrollbar {
15
- display: none;
16
- }
17
- .hero-section {
18
- position: relative;
19
- height: 400px;
20
- overflow: hidden;
21
- }
22
- .hero-image {
23
- position: absolute;
24
- top: 0;
25
- left: 0;
26
- width: 100%;
27
- height: 100%;
28
- object-fit: cover;
29
- filter: brightness(0.6);
30
- }
31
- .hero-content {
32
- position: relative;
33
- z-index: 10;
34
- }
35
- .subcategory-btn.active {
36
- background-color: #4f46e5;
37
- color: white;
38
- }
39
- .artisan-card:hover {
40
- transform: translateY(-5px);
41
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
42
- }
43
- .artisan-rating {
44
- background-color: rgba(255, 255, 255, 0.9);
45
- border-radius: 20px;
46
- padding: 2px 8px;
47
- }
48
- </style>
49
- </head>
50
- <body class="font-sans antialiased text-gray-800 bg-gray-50">
51
- <!-- Navigation -->
52
- <nav class="bg-white shadow-sm sticky top-0 z-50">
53
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
- <div class="flex justify-between h-16 items-center">
55
- <div class="flex items-center">
56
- <div class="flex-shrink-0 flex items-center">
57
- <i class="fas fa-hands-helping text-indigo-600 text-2xl mr-2"></i>
58
- <span class="text-xl font-bold text-indigo-600">SkillBridge</span>
59
- </div>
60
- </div>
61
- <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
62
- <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Accueil</a>
63
- <a href="#" class="text-indigo-600 border-b-2 border-indigo-600 px-3 py-2 text-sm font-medium">Services</a>
64
- <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Artisans</a>
65
- <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Avis</a>
66
- </div>
67
- <div class="hidden md:ml-6 md:flex md:items-center space-x-4">
68
- <a href="#" class="px-4 py-2 text-sm font-medium rounded-md text-indigo-600 hover:bg-indigo-50">Connexion</a>
69
- <a href="#" class="px-4 py-2 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">S'inscrire</a>
70
- </div>
71
- <div class="md:hidden">
72
- <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
73
- <i class="fas fa-bars"></i>
74
- </button>
75
- </div>
76
- </div>
77
- </div>
78
- </nav>
79
-
80
- <!-- Hero Section with Category Image -->
81
- <div class="hero-section">
82
- <img src=" class="hero-image">
83
- <div class="h-full flex items-center justify-center hero-content">
84
- <div class="text-center px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
85
- <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
86
- Bâtiment et Construction
87
- </h1>
88
- <p class="mt-4 text-xl text-indigo-100 max-w-3xl mx-auto">
89
- Trouvez les meilleurs professionnels pour vos projets de construction et rénovation
90
- </p>
91
- <div class="mt-8 max-w-md mx-auto relative">
92
- <div class="relative rounded-md shadow-sm">
93
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
94
- <i class="fas fa-search text-gray-400"></i>
95
- </div>
96
- <input type="text" class="block w-full pl-10 pr-12 py-4 border border-transparent rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:border-white" placeholder="Rechercher un artisan...">
97
- <div class="absolute inset-y-0 right-0 flex items-center">
98
- <button class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
99
- Rechercher
100
- </button>
101
- </div>
102
- </div>
103
- </div>
104
- </div>
105
- </div>
106
- </div>
107
-
108
- <!-- Subcategories Section -->
109
- <div class="sticky top-16 z-40 bg-white shadow-sm py-4 border-t border-gray-200">
110
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
111
- <button class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white p-2 rounded-full shadow-md text-gray-600 hover:text-indigo-600 hover:bg-gray-100 transition-colors duration-200">
112
- <i class="fas fa-chevron-left"></i>
113
- </button>
114
- <button class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white p-2 rounded-full shadow-md text-gray-600 hover:text-indigo-600 hover:bg-gray-100 transition-colors duration-200">
115
- <i class="fas fa-chevron-right"></i>
116
- </button>
117
- <div class="overflow-x-auto whitespace-nowrap py-2 px-8 scrollbar-hide" id="subcategories-container">
118
- <div class="inline-flex space-x-4">
119
- <button class="subcategory-btn active px-6 py-3 rounded-full bg-indigo-100 text-indigo-700 font-medium hover:bg-indigo-200 transition-colors duration-300" data-subcategory="all">
120
- Tous
121
- </button>
122
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="maçonnerie">
123
- Maçonnerie
124
- </button>
125
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="charpente">
126
- Charpente
127
- </button>
128
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="couverture">
129
- Couverture
130
- </button>
131
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="terrassement">
132
- Terrassement
133
- </button>
134
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="demolition">
135
- Démolition
136
- </button>
137
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="isolation">
138
- Isolation
139
- </button>
140
- <button class="subcategory-btn px-6 py-3 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors duration-300" data-subcategory="gros-oeuvre">
141
- Gros œuvre
142
- </button>
143
- </div>
144
- </div>
145
- </div>
146
-
147
- <!-- Trending Artisans Section -->
148
- <div class="pt-4 pb-12 bg-gray-50"> <!-- Reduced top padding since sticky header is now visible -->
149
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
150
- <div class="flex justify-between items-center mb-8">
151
- <div>
152
- <h2 class="text-2xl font-bold text-gray-900">
153
- Artisans tendances en <span id="current-subcategory">Maçonnerie</span>
154
- </h2>
155
- <p class="mt-2 text-gray-500">
156
- Les professionnels les mieux notés dans cette spécialité
157
- </p>
158
- </div>
159
- <a href="#" class="hidden sm:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300">
160
- Voir tous les artisans
161
- <i class="fas fa-arrow-right ml-2"></i>
162
- </a>
163
- </div>
164
-
165
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="artisans-container">
166
- <!-- Artisan 1 -->
167
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
168
- <div class="relative">
169
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
170
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
171
- <i class="fas fa-star text-yellow-400 mr-1"></i>
172
- <span class="text-sm font-medium">4.9 (128 avis)</span>
173
- </div>
174
- </div>
175
- <div class="p-4">
176
- <div class="flex justify-between items-start">
177
- <div>
178
- <h3 class="text-lg font-bold text-gray-900">Jean Dupont</h3>
179
- <p class="text-indigo-600">Maçonnerie</p>
180
- </div>
181
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Disponible</span>
182
- </div>
183
- <div class="mt-4 flex items-center text-sm text-gray-500">
184
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
185
- <span>Paris, Île-de-France</span>
186
- </div>
187
- <div class="mt-4 flex justify-between items-center">
188
- <span class="text-lg font-bold text-gray-900">50€/h</span>
189
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
190
- </div>
191
- </div>
192
- </div>
193
-
194
- <!-- Artisan 2 -->
195
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
196
- <div class="relative">
197
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1607990283143-e81e7a2c9349?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
198
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
199
- <i class="fas fa-star text-yellow-400 mr-1"></i>
200
- <span class="text-sm font-medium">4.8 (95 avis)</span>
201
- </div>
202
- </div>
203
- <div class="p-4">
204
- <div class="flex justify-between items-start">
205
- <div>
206
- <h3 class="text-lg font-bold text-gray-900">Pierre Martin</h3>
207
- <p class="text-indigo-600">Charpente</p>
208
- </div>
209
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Disponible</span>
210
- </div>
211
- <div class="mt-4 flex items-center text-sm text-gray-500">
212
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
213
- <span>Lyon, Auvergne-Rhône-Alpes</span>
214
- </div>
215
- <div class="mt-4 flex justify-between items-center">
216
- <span class="text-lg font-bold text-gray-900">60€/h</span>
217
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <!-- Artisan 3 -->
223
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
224
- <div class="relative">
225
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
226
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
227
- <i class="fas fa-star text-yellow-400 mr-1"></i>
228
- <span class="text-sm font-medium">4.7 (156 avis)</span>
229
- </div>
230
- </div>
231
- <div class="p-4">
232
- <div class="flex justify-between items-start">
233
- <div>
234
- <h3 class="text-lg font-bold text-gray-900">Thomas Leroy</h3>
235
- <p class="text-indigo-600">Couverture</p>
236
- </div>
237
- <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Bientôt disponible</span>
238
- </div>
239
- <div class="mt-4 flex items-center text-sm text-gray-500">
240
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
241
- <span>Marseille, Provence-Alpes-Côte d'Azur</span>
242
- </div>
243
- <div class="mt-4 flex justify-between items-center">
244
- <span class="text-lg font-bold text-gray-900">55€/h</span>
245
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
246
- </div>
247
- </div>
248
- </div>
249
-
250
- <!-- Artisan 4 -->
251
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
252
- <div class="relative">
253
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1580489944761-15a05d5e885d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
254
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
255
- <i class="fas fa-star text-yellow-400 mr-1"></i>
256
- <span class="text-sm font-medium">4.9 (210 avis)</span>
257
- </div>
258
- </div>
259
- <div class="p-4">
260
- <div class="flex justify-between items-start">
261
- <div>
262
- <h3 class="text-lg font-bold text-gray-900">Sophie Lambert</h3>
263
- <p class="text-indigo-600">Isolation</p>
264
- </div>
265
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Disponible</span>
266
- </div>
267
- <div class="mt-4 flex items-center text-sm text-gray-500">
268
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
269
- <span>Toulouse, Occitanie</span>
270
- </div>
271
- <div class="mt-4 flex justify-between items-center">
272
- <span class="text-lg font-bold text-gray-900">45€/h</span>
273
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
274
- </div>
275
- </div>
276
- </div>
277
- </div>
278
-
279
- <div class="mt-8 text-center sm:hidden">
280
- <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300">
281
- Voir tous les artisans
282
- <i class="fas fa-arrow-right ml-2"></i>
283
- </a>
284
- </div>
285
- </div>
286
- </div>
287
-
288
- <!-- Services Section -->
289
- <div class="py-12 bg-gray-50">
290
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
291
- <div class="flex justify-between items-center mb-8">
292
- <div>
293
- <h2 class="text-2xl font-bold text-gray-900">
294
- Nos Services
295
- </h2>
296
- <p class="mt-2 text-gray-500">
297
- Découvrez toutes les solutions que nous proposons
298
- </p>
299
- </div>
300
- <a href="#" class="hidden sm:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300">
301
- Voir tous les services
302
- <i class="fas fa-arrow-right ml-2"></i>
303
- </a>
304
- </div>
305
-
306
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
307
- <!-- Service 1 -->
308
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
309
- <div class="relative">
310
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Service">
311
- </div>
312
- <div class="p-4">
313
- <h3 class="text-lg font-bold text-gray-900">Estimation de projet</h3>
314
- <p class="mt-2 text-gray-600">
315
- Obtenez une estimation précise du coût et du temps nécessaire.
316
- </p>
317
- <div class="mt-4">
318
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">En savoir plus</a>
319
- </div>
320
- </div>
321
- </div>
322
-
323
- <!-- Service 2 -->
324
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
325
- <div class="relative">
326
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Service">
327
- </div>
328
- <div class="p-4">
329
- <h3 class="text-lg font-bold text-gray-900">Devis en ligne</h3>
330
- <p class="mt-2 text-gray-600">
331
- Recevez des devis personnalisés de nos artisans qualifiés.
332
- </p>
333
- <div class="mt-4">
334
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">En savoir plus</a>
335
- </div>
336
- </div>
337
- </div>
338
-
339
- <!-- Service 3 -->
340
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
341
- <div class="relative">
342
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Service">
343
- </div>
344
- <div class="p-4">
345
- <h3 class="text-lg font-bold text-gray-900">Mise en relation</h3>
346
- <p class="mt-2 text-gray-600">
347
- Trouvez le professionnel idéal pour votre projet.
348
- </p>
349
- <div class="mt-4">
350
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">En savoir plus</a>
351
- </div>
352
- </div>
353
- </div>
354
-
355
- <!-- Service 4 -->
356
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
357
- <div class="relative">
358
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Service">
359
- </div>
360
- <div class="p-4">
361
- <h3 class="text-lg font-bold text-gray-900">Garantie qualité</h3>
362
- <p class="mt-2 text-gray-600">
363
- Artisans certifiés pour un travail de qualité.
364
- </p>
365
- <div class="mt-4">
366
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">En savoir plus</a>
367
- </div>
368
- </div>
369
- </div>
370
- </div>
371
-
372
- <div class="mt-8 text-center sm:hidden">
373
- <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300">
374
- Voir tous les services
375
- <i class="fas fa-arrow-right ml-2"></i>
376
- </a>
377
- </div>
378
- </div>
379
- </div>
380
-
381
- <!-- Why Choose Us Section -->
382
- <div class="py-12 bg-white">
383
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
384
- <div class="text-center mb-12">
385
- <h2 class="text-2xl font-bold text-gray-900">
386
- Pourquoi choisir nos artisans ?
387
- </h2>
388
- <p class="mt-2 text-gray-500">
389
- Nous sélectionnons rigoureusement les meilleurs professionnels pour vous
390
- </p>
391
- </div>
392
-
393
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
394
- <div class="text-center">
395
- <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600 mb-4">
396
- <i class="fas fa-check-circle text-2xl"></i>
397
- </div>
398
- <h3 class="text-lg font-medium text-gray-900">Qualité garantie</h3>
399
- <p class="mt-2 text-gray-500">
400
- Tous nos artisans sont vérifiés et notés par nos soins
401
- </p>
402
- </div>
403
- <div class="text-center">
404
- <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600 mb-4">
405
- <i class="fas fa-euro-sign text-2xl"></i>
406
- </div>
407
- <h3 class="text-lg font-medium text-gray-900">Prix transparents</h3>
408
- <p class="mt-2 text-gray-500">
409
- Pas de surprise, les tarifs sont affichés clairement
410
- </p>
411
- </div>
412
- <div class="text-center">
413
- <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600 mb-4">
414
- <i class="fas fa-shield-alt text-2xl"></i>
415
- </div>
416
- <h3 class="text-lg font-medium text-gray-900">Assurance incluse</h3>
417
- <p class="mt-2 text-gray-500">
418
- Tous nos artisans sont assurés pour votre tranquillité
419
- </p>
420
- </div>
421
- </div>
422
- </div>
423
- </div>
424
-
425
- <!-- CTA Section -->
426
- <div class="bg-indigo-700">
427
- <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
428
- <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
429
- <span class="block">Prêt à lancer votre projet ?</span>
430
- </h2>
431
- <p class="mt-4 max-w-2xl text-xl text-indigo-100 mx-auto">
432
- Contactez directement les artisans disponibles près de chez vous
433
- </p>
434
- <div class="mt-8">
435
- <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50">
436
- Trouver un artisan
437
- </a>
438
- </div>
439
- </div>
440
- </div>
441
-
442
- <!-- Footer -->
443
- <footer class="bg-gray-800">
444
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
445
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
446
- <div>
447
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
448
- SkillBridge
449
- </h3>
450
- <ul class="mt-4 space-y-4">
451
- <li>
452
- <a href="#" class="text-base text-gray-300 hover:text-white">
453
- À propos
454
- </a>
455
- </li>
456
- <li>
457
- <a href="#" class="text-base text-gray-300 hover:text-white">
458
- Carrières
459
- </a>
460
- </li>
461
- <li>
462
- <a href="#" class="text-base text-gray-300 hover:text-white">
463
- Blog
464
- </a>
465
- </li>
466
- </ul>
467
- </div>
468
- <div>
469
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
470
- Pour les clients
471
- </h3>
472
- <ul class="mt-4 space-y-4">
473
- <li>
474
- <a href="#" class="text-base text-gray-300 hover:text-white">
475
- Comment ça marche
476
- </a>
477
- </li>
478
- <li>
479
- <a href="#" class="text-base text-gray-300 hover:text-white">
480
- Trouver un pro
481
- </a>
482
- </li>
483
- <li>
484
- <a href="#" class="text-base text-gray-300 hover:text-white">
485
- Avis clients
486
- </a>
487
- </li>
488
- </ul>
489
- </div>
490
- <div>
491
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
492
- Pour les pros
493
- </h3>
494
- <ul class="mt-4 space-y-4">
495
- <li>
496
- <a href="#" class="text-base text-gray-300 hover:text-white">
497
- Devenir pro
498
- </a>
499
- </li>
500
- <li>
501
- <a href="#" class="text-base text-gray-300 hover:text-white">
502
- Conseils pros
503
- </li>
504
- <li>
505
- <a href="#" class="text-base text-gray-300 hover:text-white">
506
- Centre d'aide
507
- </a>
508
- </li>
509
- </ul>
510
- </div>
511
- <div>
512
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
513
- Contact
514
- </h3>
515
- <ul class="mt-4 space-y-4">
516
- <li>
517
- <a href="#" class="text-base text-gray-300 hover:text-white">
518
- support@skillbridge.com
519
- </a>
520
- </li>
521
- <li>
522
- <a href="#" class="text-base text-gray-300 hover:text-white">
523
- 01 23 45 67 89
524
- </a>
525
- </li>
526
- <li class="flex space-x-4">
527
- <a href="#" class="text-gray-400 hover:text-white">
528
- <i class="fab fa-facebook-f"></i>
529
- </a>
530
- <a href="#" class="text-gray-400 hover:text-white">
531
- <i class="fab fa-twitter"></i>
532
- </a>
533
- <a href="#" class="text-gray-400 hover:text-white">
534
- <i class="fab fa-instagram"></i>
535
- </a>
536
- </li>
537
- </ul>
538
- </div>
539
- </div>
540
- <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
541
- <p class="text-base text-gray-400">
542
- &copy; 2023 SkillBridge. Tous droits réservés.
543
- </p>
544
- <div class="mt-4 md:mt-0">
545
- <a href="#" class="text-base text-gray-400 hover:text-white mr-4">
546
- Confidentialit��
547
- </a>
548
- <a href="#" class="text-base text-gray-400 hover:text-white mr-4">
549
- Conditions
550
- </a>
551
- <a href="#" class="text-base text-gray-400 hover:text-white">
552
- Cookies
553
- </a>
554
- </div>
555
- </div>
556
- </div>
557
- </footer>
558
-
559
- <script>
560
- document.addEventListener('DOMContentLoaded', function() {
561
- // Subcategory scrolling functionality
562
- const subcategoriesContainer = document.getElementById('subcategories-container');
563
- const scrollLeftBtn = document.querySelector('.fa-chevron-left').parentElement;
564
- const scrollRightBtn = document.querySelector('.fa-chevron-right').parentElement;
565
 
566
- scrollLeftBtn.addEventListener('click', () => {
567
- subcategoriesContainer.scrollBy({
568
- left: -200,
569
- behavior: 'smooth'
570
- });
571
- });
572
 
573
- scrollRightBtn.addEventListener('click', () => {
574
- subcategoriesContainer.scrollBy({
575
- left: 200,
576
- behavior: 'smooth'
577
- });
578
- });
579
-
580
- // Subcategory filter functionality
581
- const subcategoryBtns = document.querySelectorAll('.subcategory-btn');
582
- const currentSubcategory = document.getElementById('current-subcategory');
583
- const artisansContainer = document.getElementById('artisans-container');
 
 
 
 
 
 
 
584
 
585
- subcategoryBtns.forEach(btn => {
586
- btn.addEventListener('click', function() {
587
- // Remove active class from all buttons
588
- subcategoryBtns.forEach(b => b.classList.remove('active', 'bg-indigo-600', 'text-white'));
589
- subcategoryBtns.forEach(b => b.classList.add('bg-gray-100', 'text-gray-700'));
590
-
591
- // Add active class to clicked button
592
- this.classList.remove('bg-gray-100', 'text-gray-700');
593
- this.classList.add('active', 'bg-indigo-600', 'text-white');
594
-
595
- // Update current subcategory text
596
- const subcategoryName = this.textContent.trim();
597
- currentSubcategory.textContent = subcategoryName;
598
-
599
- // In a real app, you would fetch artisans for this subcategory here
600
- // For this example, we'll just simulate it
601
- console.log(`Loading artisans for subcategory: ${this.dataset.subcategory}`);
602
-
603
- // Simulate loading
604
- artisansContainer.innerHTML = `
605
- <div class="col-span-full text-center py-12">
606
- <div class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600">
607
- <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
608
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
609
- <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
610
- </svg>
611
- Chargement des artisans...
612
- </div>
613
- </div>
614
- `;
615
-
616
- // After a delay, show the artisans again
617
- setTimeout(() => {
618
- // In a real app, you would insert the fetched artisans here
619
- // For this example, we'll just show the original artisans
620
- artisansContainer.innerHTML = `
621
- <!-- Artisan 1 -->
622
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
623
- <div class="relative">
624
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
625
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
626
- <i class="fas fa-star text-yellow-400 mr-1"></i>
627
- <span class="text-sm font-medium">4.9 (128 avis)</span>
628
- </div>
629
- </div>
630
- <div class="p-4">
631
- <div class="flex justify-between items-start">
632
- <div>
633
- <h3 class="text-lg font-bold text-gray-900">Jean Dupont</h3>
634
- <p class="text-indigo-600">${subcategoryName}</p>
635
- </div>
636
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Disponible</span>
637
- </div>
638
- <div class="mt-4 flex items-center text-sm text-gray-500">
639
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
640
- <span>Paris, Île-de-France</span>
641
- </div>
642
- <div class="mt-4 flex justify-between items-center">
643
- <span class="text-lg font-bold text-gray-900">50€/h</span>
644
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
645
- </div>
646
- </div>
647
- </div>
648
-
649
- <!-- Artisan 2 -->
650
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
651
- <div class="relative">
652
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1607990283143-e81e7a2c9349?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
653
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
654
- <i class="fas fa-star text-yellow-400 mr-1"></i>
655
- <span class="text-sm font-medium">4.8 (95 avis)</span>
656
- </div>
657
- </div>
658
- <div class="p-4">
659
- <div class="flex justify-between items-start">
660
- <div>
661
- <h3 class="text-lg font-bold text-gray-900">Pierre Martin</h3>
662
- <p class="text-indigo-600">${subcategoryName}</p>
663
- </div>
664
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Disponible</span>
665
- </div>
666
- <div class="mt-4 flex items-center text-sm text-gray-500">
667
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
668
- <span>Lyon, Auvergne-Rhône-Alpes</span>
669
- </div>
670
- <div class="mt-4 flex justify-between items-center">
671
- <span class="text-lg font-bold text-gray-900">60€/h</span>
672
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
673
- </div>
674
- </div>
675
- </div>
676
-
677
- <!-- Artisan 3 -->
678
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
679
- <div class="relative">
680
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
681
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
682
- <i class="fas fa-star text-yellow-400 mr-1"></i>
683
- <span class="text-sm font-medium">4.7 (156 avis)</span>
684
- </div>
685
- </div>
686
- <div class="p-4">
687
- <div class="flex justify-between items-start">
688
- <div>
689
- <h3 class="text-lg font-bold text-gray-900">Thomas Leroy</h3>
690
- <p class="text-indigo-600">${subcategoryName}</p>
691
- </div>
692
- <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Bientôt disponible</span>
693
- </div>
694
- <div class="mt-4 flex items-center text-sm text-gray-500">
695
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
696
- <span>Marseille, Provence-Alpes-Côte d'Azur</span>
697
- </div>
698
- <div class="mt-4 flex justify-between items-center">
699
- <span class="text-lg font-bold text-gray-900">55€/h</span>
700
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
701
- </div>
702
- </div>
703
- </div>
704
-
705
- <!-- Artisan 4 -->
706
- <div class="artisan-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
707
- <div class="relative">
708
- <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1580489944761-15a05d5e885d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artisan">
709
- <div class="absolute bottom-2 left-2 artisan-rating flex items-center">
710
- <i class="fas fa-star text-yellow-400 mr-1"></i>
711
- <span class="text-sm font-medium">4.9 (210 avis)</span>
712
- </div>
713
- </div>
714
- <div class="p-4">
715
- <div class="flex justify-between items-start">
716
- <div>
717
- <h3 class="text-lg font-bold text-gray-900">Sophie Lambert</h3>
718
- <p class="text-indigo-600">${subcategoryName}</p>
719
- </div>
720
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Disponible</span>
721
- </div>
722
- <div class="mt-4 flex items-center text-sm text-gray-500">
723
- <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i>
724
- <span>Toulouse, Occitanie</span>
725
- </div>
726
- <div class="mt-4 flex justify-between items-center">
727
- <span class="text-lg font-bold text-gray-900">45€/h</span>
728
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Voir profil</a>
729
- </div>
730
- </div>
731
- </div>
732
- `;
733
- }, 1000);
734
- });
735
- });
736
- });
737
- </script>
738
- <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=Sjokode/skillbridge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
739
- </html>
 
1
+ <html lang="en"><head><meta charset="utf-8">
 
 
 
2
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
3
+ <base href="/">
4
+ <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
5
+ <link rel="stylesheet" href="app.css">
6
+ <link rel="stylesheet" href="MatinikTaff.styles.css">
7
+ <link rel="icon" type="image/png" href="favicon.png">
8
+ <style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0px;bottom:0px}.-bottom-10{bottom:-2.5rem}.left-0{left:0px}.left-4{left:1rem}.right-0{right:0px}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-0.5rem}.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-24{height:6rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-screen{height:100vh}.w-11{width:2.75rem}.w-4{width:1rem}.w-64{width:16rem}.w-full{width:100%}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-x-6 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.rounded-r-md{border-top-right-radius:0.375rem;border-bottom-right-radius:0.375rem}.border{border-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-5{padding-bottom:1.25rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:0.75rem}.pr-28{padding-right:7rem}.pt-14{padding-top:3.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:0.05em}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-opacity, 1))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]::after{content:var(--tw-content);left:2px}.after\:top-\[2px\]::after{content:var(--tw-content);top:2px}.after\:h-5::after{content:var(--tw-content);height:1.25rem}.after\:w-5::after{content:var(--tw-content);width:1.25rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:border::after{content:var(--tw-content);border-width:1px}.after\:border-gray-300::after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.after\:bg-white::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.after\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\:content-\[\'\'\]::after{--tw-content:'';content:var(--tw-content)}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206 / var(--tw-bg-opacity, 1))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.hover\:text-indigo-600:hover{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-inset:focus{--tw-ring-inset:inset}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.peer:checked ~ .peer-checked\:bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.peer:checked ~ .peer-checked\:after\:translate-x-full::after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked ~ .peer-checked\:after\:border-white::after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.peer:focus ~ .peer-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus ~ .peer-focus\:ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.peer:focus ~ .peer-focus\:ring-indigo-300{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252 / var(--tw-ring-opacity, 1))}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:ml-6{margin-left:1.5rem}.md\:mt-0{margin-top:0px}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-sm{max-width:24rem}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}</style></head>
9
+
10
+ <body><script src="https://cdn.tailwindcss.com" b-bhopcadze7=""></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" b-bhopcadze7="">
12
+ <link href="css/site.css" rel="stylesheet" b-bhopcadze7="">
13
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" b-bhopcadze7="">
14
+
15
+ <div class="main-layout" b-bhopcadze7=""><nav class="bg-white shadow-lg" b-s133ccvhw9=""><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" b-s133ccvhw9=""><div class="flex justify-between h-16" b-s133ccvhw9=""><div class="flex items-center" b-s133ccvhw9=""><div class="flex-shrink-0 flex items-center" b-s133ccvhw9=""><i class="fas fa-hands-helping text-indigo-600 text-2xl mr-2" b-s133ccvhw9=""></i>
16
+ <span class="text-xl font-bold text-indigo-600" b-s133ccvhw9="">SkillBridge</span></div></div>
17
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8" b-s133ccvhw9=""><a href="/Categories" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium" b-s133ccvhw9="">Trouver un artisan</a>
18
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium" b-s133ccvhw9="">Trouver un travail</a>
19
+ <a href="/Weather" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium" b-s133ccvhw9="">Poster un travail</a></div>
20
+ <div class="hidden md:ml-6 md:flex md:items-center" b-s133ccvhw9=""><a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium" b-s133ccvhw9="">S'inscrire</a>
21
+ <a href="#" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700" b-s133ccvhw9="">Se connecter</a></div>
22
+ <div class="-mr-2 flex items-center md:hidden" b-s133ccvhw9=""><button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" b-s133ccvhw9=""><span class="sr-only" b-s133ccvhw9="">Open main menu</span>
23
+ <i class="fas fa-bars" b-s133ccvhw9=""></i></button></div></div></div></nav>
24
+ <div class="main-content" b-bhopcadze7=""><!--!--><div class="flex"><!--!--><div class="hidden md:block w-64 h-screen bg-white border-r border-gray-200 p-4 overflow-y-auto"><!--!--><div class="mb-8"><div class="flex items-center justify-between mb-4"><span class="text-sm font-medium text-gray-500">Artisans</span>
25
+ <label class="relative inline-flex items-center cursor-pointer"><input type="checkbox" class="sr-only peer" checked="">
26
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div></label>
27
+ <span class="text-sm font-medium text-gray-500">Services</span></div></div>
28
+
29
+ <div><!--!--><h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Catégories</h3>
30
+ <div class="space-y-1"><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Bâtiment &amp; Rénovation</span><!--!-->
31
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Informatique &amp; Tech</span><!--!-->
32
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Beauté &amp; Bien-être</span><!--!-->
33
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Événementiel</span><!--!-->
34
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Cours particuliers</span><!--!-->
35
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Jardinage &amp; Extérieurs</span><!--!-->
36
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Nettoyage &amp; Ménage</span><!--!-->
37
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Services Véhicule</span><!--!-->
38
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Animaux</span><!--!-->
39
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Petits Bricolages</span><!--!-->
40
+ <svg class="w-4 h-4 transition-transform duration-200 " 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><div class="mb-1"><button class="flex justify-between items-center w-full px-3 py-2 text-sm font-medium text-left text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-md"><span>Transport &amp; Livraison</span><!--!-->
41
+ <svg class="w-4 h-4 transition-transform duration-200 " 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></div></div></div><!--!-->
42
+
43
+
44
+ <div class="flex-1 p-4"><!--!--><div class="w-full max-w-5xl mx-auto px-4"><div class="relative rounded-md shadow-sm"><!--!--><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i class="fas fa-search text-gray-400"></i></div>
45
+
46
+ <input type="text" placeholder="Rechercher un artisan, service, ou mot-clé..." class="block w-full pl-10 pr-28 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"><!--!-->
47
+
48
+ <div class="absolute inset-y-0 right-0 flex items-center"><button class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"><!--!-->
49
+ Rechercher
50
+ </button></div></div></div><!--!--><div class="space-y-4"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
51
+
52
+
53
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Jean Dupont</h2><!--!-->
54
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
55
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
56
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
57
+
58
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
59
+ <span>Paris, Île-de-France</span></div><!--!-->
60
+
61
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
62
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
63
+
64
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
65
+ <p class="font-bold">Experience</p></div>
66
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
67
+ <p class="font-bold">CompletedProjects</p></div>
68
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
69
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
70
+
71
+
72
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-user mr-2"></i> Voir le profil
73
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
74
+
75
+
76
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Sophie Lambert</h2><!--!-->
77
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
78
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
79
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
80
+
81
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
82
+ <span>Lyon, Auvergne-Rhône-Alpes</span></div><!--!-->
83
+
84
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
85
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
86
+
87
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
88
+ <p class="font-bold">Experience</p></div>
89
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
90
+ <p class="font-bold">CompletedProjects</p></div>
91
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
92
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
93
+
94
+
95
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
96
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
97
+
98
+
99
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Ali Benomar</h2><!--!-->
100
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
101
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
102
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
103
+
104
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
105
+ <span>Marseille, Provence-Alpes-Côte d'Azur</span></div><!--!-->
106
+
107
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
108
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
109
+
110
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
111
+ <p class="font-bold">Experience</p></div>
112
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
113
+ <p class="font-bold">CompletedProjects</p></div>
114
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
115
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
116
+
117
+
118
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
119
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
120
+
121
+
122
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Claire Moreau</h2><!--!-->
123
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
124
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
125
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
126
+
127
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
128
+ <span>Toulouse, Occitanie</span></div><!--!-->
129
+
130
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
131
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
132
+
133
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
134
+ <p class="font-bold">Experience</p></div>
135
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
136
+ <p class="font-bold">CompletedProjects</p></div>
137
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
138
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
139
+
140
+
141
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
142
+ </button></div></div></div></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
143
+
144
+
145
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Marc Delattre</h2><!--!-->
146
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
147
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
148
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
149
+
150
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
151
+ <span>Nice, Provence-Alpes-Côte d'Azur</span></div><!--!-->
152
+
153
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
154
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
155
+
156
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
157
+ <p class="font-bold">Experience</p></div>
158
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
159
+ <p class="font-bold">CompletedProjects</p></div>
160
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
161
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
162
+
163
+
164
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
165
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
166
+
167
+
168
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Laura Martin</h2><!--!-->
169
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
170
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
171
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
172
+
173
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
174
+ <span>Bordeaux, Nouvelle-Aquitaine</span></div><!--!-->
175
+
176
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
177
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
178
+
179
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
180
+ <p class="font-bold">Experience</p></div>
181
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
182
+ <p class="font-bold">CompletedProjects</p></div>
183
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
184
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
185
+
186
+
187
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
188
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
189
+
190
+
191
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Thomas Roux</h2><!--!-->
192
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
193
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
194
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
195
+
196
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
197
+ <span>Strasbourg, Grand Est</span></div><!--!-->
198
+
199
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
200
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
201
+
202
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
203
+ <p class="font-bold">Experience</p></div>
204
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
205
+ <p class="font-bold">CompletedProjects</p></div>
206
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
207
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
208
+
209
+
210
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
211
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
212
+
213
+
214
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Inès Giraud</h2><!--!-->
215
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
216
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
217
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
218
+
219
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
220
+ <span>Rennes, Bretagne</span></div><!--!-->
221
+
222
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
223
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
224
+
225
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
226
+ <p class="font-bold">Experience</p></div>
227
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
228
+ <p class="font-bold">CompletedProjects</p></div>
229
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
230
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
231
+
232
+
233
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
234
+ </button></div></div></div></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
235
+
236
+
237
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Lucas Bernard</h2><!--!-->
238
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
239
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
240
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
241
+
242
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
243
+ <span>Montpellier, Occitanie</span></div><!--!-->
244
+
245
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
246
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
247
+
248
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
249
+ <p class="font-bold">Experience</p></div>
250
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
251
+ <p class="font-bold">CompletedProjects</p></div>
252
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
253
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
254
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
255
 
256
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
257
+ </button></div></div></div><!--!--><div class="artisan-card bg-white rounded-xl overflow-hidden w-full md:max-w-sm shadow hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-1" style="height: 100%;"><div><div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600 relative"><div class="absolute -bottom-10 left-4"><img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Profil" class="profile-img rounded-full shadow-lg"></div></div><!--!-->
258
+
 
 
 
259
 
260
+ <div class="p-6 pt-14"><div class="flex justify-between items-start"><div><h2 class="text-xl font-bold text-gray-800">Émilie Chapel</h2><!--!-->
261
+ <p class="text-purple-600 font-medium"><!--!--><i class="fas fa-briefcase mr-1"></i> </p></div><!--!-->
262
+ <div class="flex items-center"><span class="text-yellow-500 font-bold">0.0</span><!--!-->
263
+ <i class="fas fa-star rating-star ml-1"></i></div></div><!--!-->
264
+
265
+ <div class="mt-3 flex items-center text-gray-600"><!--!--><i class="fas fa-map-marker-alt mr-2"></i>
266
+ <span>Reims, Grand Est</span></div><!--!-->
267
+
268
+ <div class="mt-4"><span class="availability-dot unavailable"></span><!--!-->
269
+ <span class="text-gray-700 font-medium">Indisponible</span></div><!--!-->
270
+
271
+ <!--!--><div class="mt-5 border-t border-gray-100 pt-4"><div class="flex justify-between"><div class="text-center"><p class="text-gray-500 text-sm">Expérience</p>
272
+ <p class="font-bold">Experience</p></div>
273
+ <div class="text-center"><p class="text-gray-500 text-sm">Projets</p>
274
+ <p class="font-bold">CompletedProjects</p></div>
275
+ <div class="text-center"><p class="text-gray-500 text-sm">Réactivité</p>
276
+ <p class="font-bold">ResponseTime</p></div></div></div></div><!--!-->
277
+
278
 
279
+ <!--!--><div class="px-5 pb-5"><button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition duration-200"><i class="fas fa-comment-dots mr-2"></i> Contacter
280
+ </button></div></div></div></div></div></div></div></div>
281
+ <footer class="bg-gray-800"><div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"><div class="grid grid-cols-2 md:grid-cols-4 gap-8"><div><h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
282
+ SkillBridge
283
+ </h3>
284
+ <ul class="mt-4 space-y-4"><li><a href="#" class="text-base text-gray-300 hover:text-white">
285
+ À propos
286
+ </a></li>
287
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
288
+ Carrières
289
+ </a></li>
290
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
291
+ Blog
292
+ </a></li></ul></div>
293
+ <div><h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
294
+ Pour les clients
295
+ </h3>
296
+ <ul class="mt-4 space-y-4"><li><a href="#" class="text-base text-gray-300 hover:text-white">
297
+ Comment ça marche
298
+ </a></li>
299
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
300
+ Trouver un professionnel
301
+ </a></li>
302
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
303
+ Avis clients
304
+ </a></li></ul></div>
305
+ <div><h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
306
+ Pour les professionnels
307
+ </h3>
308
+ <ul class="mt-4 space-y-4"><li><a href="#" class="text-base text-gray-300 hover:text-white">
309
+ Devenir professionnel
310
+ </a></li>
311
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
312
+ Conseils pour réussir
313
+ </a></li>
314
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
315
+ Centre d'aide
316
+ </a></li></ul></div>
317
+ <div><h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
318
+ Légal
319
+ </h3>
320
+ <ul class="mt-4 space-y-4"><li><a href="#" class="text-base text-gray-300 hover:text-white">
321
+ Confidentialité
322
+ </a></li>
323
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
324
+ Conditions
325
+ </a></li>
326
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">
327
+ Cookies
328
+ </a></li></ul></div></div>
329
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"><div class="flex space-x-6 md:order-2"><a href="#" class="text-gray-400 hover:text-white"><span class="sr-only">Facebook</span>
330
+ <i class="fab fa-facebook-f text-xl"></i></a>
331
+ <a href="#" class="text-gray-400 hover:text-white"><span class="sr-only">Instagram</span>
332
+ <i class="fab fa-instagram text-xl"></i></a>
333
+ <a href="#" class="text-gray-400 hover:text-white"><span class="sr-only">Twitter</span>
334
+ <i class="fab fa-twitter text-xl"></i></a>
335
+ <a href="#" class="text-gray-400 hover:text-white"><span class="sr-only">LinkedIn</span>
336
+ <i class="fab fa-linkedin-in text-xl"></i></a></div>
337
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
338
+ © 2023 SkillBridge. Tous droits réservés.
339
+ </p></div></div></footer></div>
340
+
341
+ <script src="_framework/blazor.web.js"></script>
342
+ <!-- Visual Studio Browser Link -->
343
+ <script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestid="c894b5510b114db2950fa93ffeb506be" data-requestmappingfromserver="false" data-connecturl="http://localhost:60258/60daa124abd849f29b0b35e1f1985ecb/browserLink"></script>
344
+ <!-- End Browser Link -->
345
+ <script src="/_framework/aspnetcore-browser-refresh.js"></script><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=Sjokode/skillbridge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body></html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
prompts.txt CHANGED
@@ -1,5 +1,4 @@
1
- fais moi un section service
2
- la section service doit plus ressemblez a la section artisans et la section subcategory doit etre sur une ligne
3
- the sub categories also should stick on top of the page and should be able to defile horizontally if too big
4
- there should be a scrolling horizontal barre and have arrow on the left and the right to helpt with scrolling
5
- the subcatergory should stick on top when scolled past
 
1
+ esct ce que tu peux faire quelquechose de ce que je t'ai envoyé
2
+ why is the backgroud black
3
+ make the blackbackground white
4
+ remplace les couton contacter et transforme les en voir le profil