Hugging Face's logo

Spaces:
Bourdin
/
peintre
Running

App Files Community
Bourdin commited on
Commit
9cda6f5
·
verified ·
1 Parent(s): 285bf4e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +603 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Peintre
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: purple
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: peintre
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
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,603 @@
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>Artisan Peintre | Peinture, Toiture & Rénovation</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 {
11
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .service-card:hover {
17
+ transform: translateY(-10px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+
21
+ .before-after {
22
+ position: relative;
23
+ overflow: hidden;
24
+ }
25
+
26
+ .before-after img {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .before-after:hover img {
31
+ transform: scale(1.05);
32
+ }
33
+
34
+ .testimonial-card {
35
+ transition: all 0.3s ease;
36
+ }
37
+
38
+ .testimonial-card:hover {
39
+ transform: scale(1.03);
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="font-sans bg-gray-50">
44
+ <!-- Header -->
45
+ <header class="bg-white shadow-md sticky top-0 z-50">
46
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
47
+ <div class="flex items-center">
48
+ <i class="fas fa-paint-roller text-amber-500 text-3xl mr-2"></i>
49
+ <h1 class="text-xl font-bold text-gray-800">ARTISAN<span class="text-amber-500">PRO</span></h1>
50
+ </div>
51
+
52
+ <nav class="hidden md:flex space-x-8">
53
+ <a href="#accueil" class="text-gray-800 hover:text-amber-500 font-medium">Accueil</a>
54
+ <a href="#services" class="text-gray-800 hover:text-amber-500 font-medium">Services</a>
55
+ <a href="#realisations" class="text-gray-800 hover:text-amber-500 font-medium">Réalisations</a>
56
+ <a href="#avis" class="text-gray-800 hover:text-amber-500 font-medium">Avis</a>
57
+ <a href="#contact" class="text-gray-800 hover:text-amber-500 font-medium">Contact</a>
58
+ </nav>
59
+
60
+ <div class="md:hidden">
61
+ <button id="menu-btn" class="text-gray-800 focus:outline-none">
62
+ <i class="fas fa-bars text-2xl"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Mobile Menu -->
68
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
69
+ <a href="#accueil" class="block py-2 text-gray-800 hover:text-amber-500">Accueil</a>
70
+ <a href="#services" class="block py-2 text-gray-800 hover:text-amber-500">Services</a>
71
+ <a href="#realisations" class="block py-2 text-gray-800 hover:text-amber-500">Réalisations</a>
72
+ <a href="#avis" class="block py-2 text-gray-800 hover:text-amber-500">Avis</a>
73
+ <a href="#contact" class="block py-2 text-gray-800 hover:text-amber-500">Contact</a>
74
+ </div>
75
+ </header>
76
+
77
+ <!-- Hero Section -->
78
+ <section id="accueil" class="hero min-h-screen flex items-center justify-center text-white">
79
+ <div class="container mx-auto px-4 text-center">
80
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Artisan Peintre & Rénovation</h1>
81
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Expert en peinture, toiture et rénovation complète pour particuliers et professionnels.</p>
82
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
83
+ <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Demander un devis</a>
84
+ <a href="tel:+33123456789" class="bg-white hover:bg-gray-100 text-gray-800 font-bold py-3 px-6 rounded-lg transition duration-300">
85
+ <i class="fas fa-phone mr-2"></i>01 23 45 67 89
86
+ </a>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- About Section -->
92
+ <section class="py-16 bg-white">
93
+ <div class="container mx-auto px-4">
94
+ <div class="flex flex-col md:flex-row items-center">
95
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
96
+ <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Artisan au travail" class="rounded-lg shadow-xl w-full">
97
+ </div>
98
+ <div class="md:w-1/2">
99
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">À propos de notre entreprise</h2>
100
+ <p class="text-gray-600 mb-4">Fondée en 2010, notre entreprise artisanale se spécialise dans les travaux de peinture, de toiture et de rénovation complète pour tous types de bâtiments.</p>
101
+ <p class="text-gray-600 mb-6">Avec une équipe de professionnels qualifiés, nous nous engageons à fournir un travail de qualité supérieure, dans le respect des délais et des budgets.</p>
102
+ <div class="grid grid-cols-2 gap-4">
103
+ <div class="flex items-center">
104
+ <i class="fas fa-check-circle text-amber-500 mr-2 text-xl"></i>
105
+ <span class="text-gray-700">15 ans d'expérience</span>
106
+ </div>
107
+ <div class="flex items-center">
108
+ <i class="fas fa-check-circle text-amber-500 mr-2 text-xl"></i>
109
+ <span class="text-gray-700">Garantie décennale</span>
110
+ </div>
111
+ <div class="flex items-center">
112
+ <i class="fas fa-check-circle text-amber-500 mr-2 text-xl"></i>
113
+ <span class="text-gray-700">Éco-responsable</span>
114
+ </div>
115
+ <div class="flex items-center">
116
+ <i class="fas fa-check-circle text-amber-500 mr-2 text-xl"></i>
117
+ <span class="text-gray-700">Devis gratuit</span>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- Services Section -->
126
+ <section id="services" class="py-16 bg-gray-100">
127
+ <div class="container mx-auto px-4">
128
+ <div class="text-center mb-12">
129
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nos Services</h2>
130
+ <p class="text-gray-600 max-w-2xl mx-auto">Des solutions complètes pour tous vos projets de peinture, toiture et rénovation.</p>
131
+ </div>
132
+
133
+ <div class="grid md:grid-cols-3 gap-8">
134
+ <!-- Service 1 -->
135
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300">
136
+ <div class="text-amber-500 mb-4">
137
+ <i class="fas fa-paint-roller text-4xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Peinture intérieure & extérieure</h3>
140
+ <p class="text-gray-600 mb-4">Rénovation complète de vos murs, plafonds, boiseries avec des produits haut de gamme et respectueux de l'environnement.</p>
141
+ <ul class="text-gray-600 space-y-2">
142
+ <li class="flex items-start">
143
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
144
+ <span>Préparation des supports</span>
145
+ </li>
146
+ <li class="flex items-start">
147
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
148
+ <span>Peinture écologique</span>
149
+ </li>
150
+ <li class="flex items-start">
151
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
152
+ <span>Finitions impeccables</span>
153
+ </li>
154
+ </ul>
155
+ </div>
156
+
157
+ <!-- Service 2 -->
158
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300">
159
+ <div class="text-amber-500 mb-4">
160
+ <i class="fas fa-home text-4xl"></i>
161
+ </div>
162
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Toiture & Couverture</h3>
163
+ <p class="text-gray-600 mb-4">Installation, réparation et entretien de tous types de toitures pour protéger durablement votre habitation.</p>
164
+ <ul class="text-gray-600 space-y-2">
165
+ <li class="flex items-start">
166
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
167
+ <span>Tuiles, ardoises, zinc</span>
168
+ </li>
169
+ <li class="flex items-start">
170
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
171
+ <span>Isolation de toiture</span>
172
+ </li>
173
+ <li class="flex items-start">
174
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
175
+ <span>Démoussage & étanchéité</span>
176
+ </li>
177
+ </ul>
178
+ </div>
179
+
180
+ <!-- Service 3 -->
181
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300">
182
+ <div class="text-amber-500 mb-4">
183
+ <i class="fas fa-tools text-4xl"></i>
184
+ </div>
185
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Rénovation complète</h3>
186
+ <p class="text-gray-600 mb-4">Transformation complète de votre espace avec des solutions clés en main pour tous corps d'état.</p>
187
+ <ul class="text-gray-600 space-y-2">
188
+ <li class="flex items-start">
189
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
190
+ <span>Maçonnerie & cloisonnement</span>
191
+ </li>
192
+ <li class="flex items-start">
193
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
194
+ <span>Électricité & plomberie</span>
195
+ </li>
196
+ <li class="flex items-start">
197
+ <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
198
+ <span>Revêtements de sols</span>
199
+ </li>
200
+ </ul>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Gallery Section -->
207
+ <section id="realisations" class="py-16 bg-white">
208
+ <div class="container mx-auto px-4">
209
+ <div class="text-center mb-12">
210
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nos Réalisations</h2>
211
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez quelques-uns de nos projets récents.</p>
212
+ </div>
213
+
214
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
215
+ <!-- Project 1 -->
216
+ <div class="before-after rounded-lg overflow-hidden shadow-lg relative group">
217
+ <img src="https://images.unsplash.com/photo-1600585152915-d208bec867a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1452&q=80" alt="Rénovation complète" class="w-full h-64 object-cover">
218
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
219
+ <div class="text-white text-center p-4">
220
+ <h3 class="text-xl font-bold mb-2">Rénovation complète</h3>
221
+ <p class="text-sm">Paris 15ème - 2023</p>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Project 2 -->
227
+ <div class="before-after rounded-lg overflow-hidden shadow-lg relative group">
228
+ <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Peinture extérieure" class="w-full h-64 object-cover">
229
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
230
+ <div class="text-white text-center p-4">
231
+ <h3 class="text-xl font-bold mb-2">Peinture extérieure</h3>
232
+ <p class="text-sm">Maison individuelle - 2022</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Project 3 -->
238
+ <div class="before-after rounded-lg overflow-hidden shadow-lg relative group">
239
+ <img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Toiture neuve" class="w-full h-64 object-cover">
240
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
241
+ <div class="text-white text-center p-4">
242
+ <h3 class="text-xl font-bold mb-2">Toiture neuve</h3>
243
+ <p class="text-sm">Pavillon - 2023</p>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Project 4 -->
249
+ <div class="before-after rounded-lg overflow-hidden shadow-lg relative group">
250
+ <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Rénovation intérieure" class="w-full h-64 object-cover">
251
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
252
+ <div class="text-white text-center p-4">
253
+ <h3 class="text-xl font-bold mb-2">Rénovation intérieure</h3>
254
+ <p class="text-sm">Appartement - 2023</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Project 5 -->
260
+ <div class="before-after rounded-lg overflow-hidden shadow-lg relative group">
261
+ <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Peinture intérieure" class="w-full h-64 object-cover">
262
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
263
+ <div class="text-white text-center p-4">
264
+ <h3 class="text-xl font-bold mb-2">Peinture intérieure</h3>
265
+ <p class="text-sm">Bureau - 2022</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Project 6 -->
271
+ <div class="before-after rounded-lg overflow-hidden shadow-lg relative group">
272
+ <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Rénovation complète" class="w-full h-64 object-cover">
273
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
274
+ <div class="text-white text-center p-4">
275
+ <h3 class="text-xl font-bold mb-2">Rénovation complète</h3>
276
+ <p class="text-sm">Maison de campagne - 2021</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="text-center mt-12">
283
+ <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center">
284
+ <i class="fas fa-envelope mr-2"></i> Voir plus de réalisations
285
+ </a>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Testimonials Section -->
291
+ <section id="avis" class="py-16 bg-gray-100">
292
+ <div class="container mx-auto px-4">
293
+ <div class="text-center mb-12">
294
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Témoignages clients</h2>
295
+ <p class="text-gray-600 max-w-2xl mx-auto">Ce que nos clients disent de notre travail.</p>
296
+ </div>
297
+
298
+ <div class="grid md:grid-cols-3 gap-8">
299
+ <!-- Testimonial 1 -->
300
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
301
+ <div class="flex items-center mb-4">
302
+ <div class="text-amber-500 mr-3">
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ <i class="fas fa-star"></i>
306
+ <i class="fas fa-star"></i>
307
+ <i class="fas fa-star"></i>
308
+ </div>
309
+ </div>
310
+ <p class="text-gray-600 mb-4">"Excellent travail de peinture intérieure. L'équipe a été très professionnelle, propre et respectueuse des délais. Je recommande vivement!"</p>
311
+ <div class="flex items-center">
312
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex items-center justify-center mr-3">
313
+ <i class="fas fa-user text-gray-500"></i>
314
+ </div>
315
+ <div>
316
+ <h4 class="font-bold text-gray-800">Marie D.</h4>
317
+ <p class="text-sm text-gray-500">Paris 16ème</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Testimonial 2 -->
323
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
324
+ <div class="flex items-center mb-4">
325
+ <div class="text-amber-500 mr-3">
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ </div>
332
+ </div>
333
+ <p class="text-gray-600 mb-4">"Rénovation complète de notre appartement réalisée dans les temps et avec un résultat impeccable. Très satisfait du suivi et de la qualité du travail."</p>
334
+ <div class="flex items-center">
335
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex items-center justify-center mr-3">
336
+ <i class="fas fa-user text-gray-500"></i>
337
+ </div>
338
+ <div>
339
+ <h4 class="font-bold text-gray-800">Pierre L.</h4>
340
+ <p class="text-sm text-gray-500">Boulogne-Billancourt</p>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Testimonial 3 -->
346
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
347
+ <div class="flex items-center mb-4">
348
+ <div class="text-amber-500 mr-3">
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ <i class="fas fa-star"></i>
353
+ <i class="fas fa-star"></i>
354
+ </div>
355
+ </div>
356
+ <p class="text-gray-600 mb-4">"Réfection complète de notre toiture après un dégât des eaux. Travail soigné, équipe sympathique et compétente. Devis respecté à l'euro près."</p>
357
+ <div class="flex items-center">
358
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex items-center justify-center mr-3">
359
+ <i class="fas fa-user text-gray-500"></i>
360
+ </div>
361
+ <div>
362
+ <h4 class="font-bold text-gray-800">Sophie R.</h4>
363
+ <p class="text-sm text-gray-500">Montreuil</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Contact Section -->
372
+ <section id="contact" class="py-16 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <div class="text-center mb-12">
375
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Contactez-nous</h2>
376
+ <p class="text-gray-600 max-w-2xl mx-auto">Demandez un devis gratuit ou posez-nous vos questions.</p>
377
+ </div>
378
+
379
+ <div class="flex flex-col md:flex-row gap-8">
380
+ <div class="md:w-1/2">
381
+ <form class="space-y-6">
382
+ <div>
383
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label>
384
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
385
+ </div>
386
+
387
+ <div>
388
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
389
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
390
+ </div>
391
+
392
+ <div>
393
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Téléphone</label>
394
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
395
+ </div>
396
+
397
+ <div>
398
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service demandé</label>
399
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
400
+ <option value="">Sélectionnez un service</option>
401
+ <option value="peinture">Peinture intérieure/extérieure</option>
402
+ <option value="toiture">Toiture & Couverture</option>
403
+ <option value="renovation">Rénovation complète</option>
404
+ <option value="autre">Autre demande</option>
405
+ </select>
406
+ </div>
407
+
408
+ <div>
409
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
410
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
411
+ </div>
412
+
413
+ <button type="submit" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 w-full">
414
+ Envoyer la demande
415
+ </button>
416
+ </form>
417
+ </div>
418
+
419
+ <div class="md:w-1/2 bg-gray-100 p-8 rounded-lg">
420
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Nos coordonnées</h3>
421
+
422
+ <div class="space-y-6">
423
+ <div class="flex items-start">
424
+ <div class="text-amber-500 mr-4 mt-1">
425
+ <i class="fas fa-map-marker-alt text-xl"></i>
426
+ </div>
427
+ <div>
428
+ <h4 class="font-bold text-gray-800">Adresse</h4>
429
+ <p class="text-gray-600">123 Rue des Artisans<br>75000 Paris, France</p>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="flex items-start">
434
+ <div class="text-amber-500 mr-4 mt-1">
435
+ <i class="fas fa-phone-alt text-xl"></i>
436
+ </div>
437
+ <div>
438
+ <h4 class="font-bold text-gray-800">Téléphone</h4>
439
+ <p class="text-gray-600">01 23 45 67 89</p>
440
+ <p class="text-gray-600">06 12 34 56 78</p>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="flex items-start">
445
+ <div class="text-amber-500 mr-4 mt-1">
446
+ <i class="fas fa-envelope text-xl"></i>
447
+ </div>
448
+ <div>
449
+ <h4 class="font-bold text-gray-800">Email</h4>
450
+ <p class="text-gray-600">[email protected]</p>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="flex items-start">
455
+ <div class="text-amber-500 mr-4 mt-1">
456
+ <i class="fas fa-clock text-xl"></i>
457
+ </div>
458
+ <div>
459
+ <h4 class="font-bold text-gray-800">Horaires</h4>
460
+ <p class="text-gray-600">Lundi - Vendredi: 8h - 18h</p>
461
+ <p class="text-gray-600">Samedi: 9h - 12h</p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="mt-8">
467
+ <h4 class="font-bold text-gray-800 mb-4">Suivez-nous</h4>
468
+ <div class="flex space-x-4">
469
+ <a href="#" class="text-gray-600 hover:text-amber-500">
470
+ <i class="fab fa-facebook-f text-xl"></i>
471
+ </a>
472
+ <a href="#" class="text-gray-600 hover:text-amber-500">
473
+ <i class="fab fa-instagram text-xl"></i>
474
+ </a>
475
+ <a href="#" class="text-gray-600 hover:text-amber-500">
476
+ <i class="fab fa-pinterest-p text-xl"></i>
477
+ </a>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Map Section -->
486
+ <div class="h-96 w-full">
487
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937595!2d2.292292615509614!3d48.858370079287475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sTour%20Eiffel!5e0!3m2!1sfr!2sfr!4v1623258139536!5m2!1sfr!2sfr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
488
+ </div>
489
+
490
+ <!-- Footer -->
491
+ <footer class="bg-gray-800 text-white py-12">
492
+ <div class="container mx-auto px-4">
493
+ <div class="grid md:grid-cols-4 gap-8">
494
+ <div>
495
+ <h3 class="text-xl font-bold mb-4 flex items-center">
496
+ <i class="fas fa-paint-roller text-amber-500 mr-2"></i>
497
+ ARTISAN<span class="text-amber-500">PRO</span>
498
+ </h3>
499
+ <p class="text-gray-400">Entreprise artisanale spécialisée en peinture, toiture et rénovation complète pour particuliers et professionnels.</p>
500
+ </div>
501
+
502
+ <div>
503
+ <h4 class="text-lg font-bold mb-4">Services</h4>
504
+ <ul class="space-y-2">
505
+ <li><a href="#" class="text-gray-400 hover:text-amber-500">Peinture intérieure</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-amber-500">Peinture extérieure</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-amber-500">Toiture & Couverture</a></li>
508
+ <li><a href="#" class="text-gray-400 hover:text-amber-500">Rénovation complète</a></li>
509
+ </ul>
510
+ </div>
511
+
512
+ <div>
513
+ <h4 class="text-lg font-bold mb-4">Liens utiles</h4>
514
+ <ul class="space-y-2">
515
+ <li><a href="#accueil" class="text-gray-400 hover:text-amber-500">Accueil</a></li>
516
+ <li><a href="#services" class="text-gray-400 hover:text-amber-500">Services</a></li>
517
+ <li><a href="#realisations" class="text-gray-400 hover:text-amber-500">Réalisations</a></li>
518
+ <li><a href="#contact" class="text-gray-400 hover:text-amber-500">Contact</a></li>
519
+ </ul>
520
+ </div>
521
+
522
+ <div>
523
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
524
+ <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir nos actualités et promotions.</p>
525
+ <form class="flex">
526
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
527
+ <button type="submit" class="bg-amber-500 hover:bg-amber-600 px-4 rounded-r-lg">
528
+ <i class="fas fa-paper-plane"></i>
529
+ </button>
530
+ </form>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
535
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 ArtisanPro. Tous droits réservés.</p>
536
+ <div class="flex space-x-6">
537
+ <a href="#" class="text-gray-400 hover:text-amber-500 text-sm">Mentions légales</a>
538
+ <a href="#" class="text-gray-400 hover:text-amber-500 text-sm">Politique de confidentialité</a>
539
+ <a href="#" class="text-gray-400 hover:text-amber-500 text-sm">CGV</a>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </footer>
544
+
545
+ <!-- Back to Top Button -->
546
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-500 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
547
+ <i class="fas fa-arrow-up"></i>
548
+ </button>
549
+
550
+ <script>
551
+ // Mobile menu toggle
552
+ const menuBtn = document.getElementById('menu-btn');
553
+ const mobileMenu = document.getElementById('mobile-menu');
554
+
555
+ menuBtn.addEventListener('click', () => {
556
+ mobileMenu.classList.toggle('hidden');
557
+ });
558
+
559
+ // Back to top button
560
+ const backToTopBtn = document.getElementById('back-to-top');
561
+
562
+ window.addEventListener('scroll', () => {
563
+ if (window.pageYOffset > 300) {
564
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
565
+ backToTopBtn.classList.add('opacity-100', 'visible');
566
+ } else {
567
+ backToTopBtn.classList.remove('opacity-100', 'visible');
568
+ backToTopBtn.classList.add('opacity-0', 'invisible');
569
+ }
570
+ });
571
+
572
+ backToTopBtn.addEventListener('click', () => {
573
+ window.scrollTo({
574
+ top: 0,
575
+ behavior: 'smooth'
576
+ });
577
+ });
578
+
579
+ // Smooth scrolling for anchor links
580
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
581
+ anchor.addEventListener('click', function(e) {
582
+ e.preventDefault();
583
+
584
+ const targetId = this.getAttribute('href');
585
+ if (targetId === '#') return;
586
+
587
+ const targetElement = document.querySelector(targetId);
588
+ if (targetElement) {
589
+ window.scrollTo({
590
+ top: targetElement.offsetTop - 80,
591
+ behavior: 'smooth'
592
+ });
593
+
594
+ // Close mobile menu if open
595
+ if (!mobileMenu.classList.contains('hidden')) {
596
+ mobileMenu.classList.add('hidden');
597
+ }
598
+ }
599
+ });
600
+ });
601
+ </script>
602
+ <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=Bourdin/peintre" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
603
+ </html>