Hugging Face's logo

Spaces:
108HTZ
/
locus-niger
Running

App Files Community
108HTZ commited on
Commit
a5771ce
·
verified ·
1 Parent(s): 44fba41

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +373 -359
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LOIc Noyer | Électricité Haut de Gamme - Aménagements Électriques</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
  <script>
@@ -11,23 +11,21 @@
11
  theme: {
12
  extend: {
13
  colors: {
14
- 'luxe-gold': '#c5a880',
15
- 'luxe-black': '#1a1a1a',
16
- 'luxe-gray': '#e8e8e8',
17
- 'luxe-blue': '#003366',
18
  },
19
  fontFamily: {
20
- 'sans': ['"Helvetica Neue"', 'Arial', 'sans-serif'],
21
- 'serif': ['"Playfair Display"', 'serif'],
22
- 'mono': ['"Courier New"', 'monospace'],
23
  },
24
  animation: {
25
- 'fade-in': 'fadeIn 1.5s ease-in-out',
26
  },
27
  keyframes: {
28
  fadeIn: {
29
- '0%': { opacity: '0' },
30
- '100%': { opacity: '1' },
31
  }
32
  }
33
  }
@@ -35,71 +33,65 @@
35
  }
36
  </script>
37
  <style>
38
- @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&display=swap');
39
-
40
- .hero-gradient {
41
- background: linear-gradient(135deg, rgba(26,26,26,0.9) 0%, rgba(0,51,102,0.7) 100%);
42
- }
43
-
44
- .service-card:hover .service-icon {
45
- transform: rotateY(180deg);
46
- }
47
-
48
- .service-icon {
49
- transition: transform 0.8s;
50
- transform-style: preserve-3d;
51
  }
52
 
53
- .gallery-grid {
54
- display: grid;
55
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
56
- grid-auto-rows: 250px;
57
- grid-gap: 20px;
58
- grid-auto-flow: dense;
59
  }
60
 
61
- .gallery-item:nth-child(3n) {
62
- grid-column: span 2;
63
  }
64
 
65
- .gallery-item:nth-child(5n) {
66
- grid-row: span 2;
 
 
 
 
 
 
 
67
  }
68
 
69
- .testimonial-card {
70
- box-shadow: 0 20px 30px -15px rgba(0,0,0,0.3);
71
  }
72
 
73
- .contact-input {
74
- border-bottom: 1px solid #c5a880;
75
- transition: all 0.3s;
76
  }
77
 
78
- .contact-input:focus {
79
- border-bottom: 2px solid #003366;
 
 
80
  }
81
  </style>
82
  </head>
83
- <body class="bg-luxe-gray text-luxe-black font-sans">
84
  <!-- Navigation -->
85
- <nav class="fixed w-full z-50 bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm">
86
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
  <div class="flex justify-between h-20 items-center">
88
  <div class="flex-shrink-0 flex items-center">
89
- <span class="text-2xl font-serif text-luxe-blue tracking-wide">LOIc NOYER</span>
90
- <span class="ml-2 text-xs text-luxe-gold uppercase">Électricité d'exception</span>
91
  </div>
92
  <div class="hidden md:block">
93
  <div class="ml-10 flex items-baseline space-x-8">
94
- <a href="#accueil" class="px-3 py-2 text-sm font-medium hover:text-luxe-gold transition-colors">ACCUEIL</a>
95
- <a href="#services" class="px-3 py-2 text-sm font-medium hover:text-luxe-gold transition-colors">SERVICES</a>
96
- <a href="#realisations" class="px-3 py-2 text-sm font-medium hover:text-luxe-gold transition-colors">RÉALISATIONS</a>
97
- <a href="#apropos" class="px-3 py-2 text-sm font-medium hover:text-luxe-gold transition-colors">À PROPOS</a>
98
- <a href="#contact" class="px-3 py-2 text-sm font-medium hover:text-luxe-gold transition-colors">CONTACT</a>
99
  </div>
100
  </div>
101
  <div class="md:hidden">
102
- <button class="mobile-menu-button p-2 rounded-md text-luxe-blue">
103
  <i class="fas fa-bars text-xl"></i>
104
  </button>
105
  </div>
@@ -108,266 +100,292 @@
108
  </nav>
109
 
110
  <!-- Mobile Menu -->
111
- <div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-white bg-opacity-95 backdrop-filter backdrop-blur-sm">
112
  <div class="flex flex-col items-center justify-center h-full">
113
- <button class="absolute top-6 right-6 p-2 text-luxe-blue">
114
  <i class="fas fa-times text-2xl"></i>
115
  </button>
116
- <a href="#accueil" class="block px-3 py-4 text-2xl font-serif text-luxe-blue hover:text-luxe-gold transition-colors">ACCUEIL</a>
117
- <a href="#services" class="block px-3 py-4 text-2xl font-serif text-luxe-blue hover:text-luxe-gold transition-colors">SERVICES</a>
118
- <a href="#realisations" class="block px-3 py-4 text-2xl font-serif text-luxe-blue hover:text-luxe-gold transition-colors">RÉALISATIONS</a>
119
- <a href="#apropos" class="block px-3 py-4 text-2xl font-serif text-luxe-blue hover:text-luxe-gold transition-colors">À PROPOS</a>
120
- <a href="#contact" class="block px-3 py-4 text-2xl font-serif text-luxe-blue hover:text-luxe-gold transition-colors">CONTACT</a>
121
  </div>
122
  </div>
123
 
124
  <!-- Hero Section -->
125
- <section id="accueil" class="relative h-screen flex items-center justify-center bg-luxe-black overflow-hidden">
126
- <div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('https://images.unsplash.com/photo-1558002038-1057e3b9e7d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
127
 
128
- <div class="hero-gradient absolute inset-0"></div>
129
 
130
  <div class="relative z-10 text-center px-4 max-w-4xl mx-auto animate-fade-in">
131
- <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-white tracking-wide">
132
- <span class="block">AMÉNAGEMENTS</span>
133
- <span class="block text-luxe-gold">ÉLECTRIQUES HAUT DE GAMME</span>
134
  </h1>
135
- <p class="text-xl md:text-2xl mb-8 font-light text-white max-w-2xl mx-auto">
136
- Solutions électriques sur mesure pour résidences et espaces d'exception
137
  </p>
138
- <div class="flex justify-center space-x-4">
139
- <a href="#contact" class="inline-block px-8 py-3 bg-luxe-gold text-luxe-black hover:bg-white hover:text-luxe-blue transition-all duration-300 font-serif tracking-wider">
140
- NOUS CONTACTER
141
  </a>
142
- <a href="#services" class="inline-block px-8 py-3 border-2 border-white text-white hover:border-luxe-gold hover:text-luxe-gold transition-all duration-300 font-serif tracking-wider">
143
  NOS SERVICES
144
  </a>
145
  </div>
146
  </div>
147
-
148
- <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
149
- <a href="#services" class="text-white hover:text-luxe-gold">
150
- <i class="fas fa-chevron-down text-2xl"></i>
151
- </a>
152
- </div>
153
  </section>
154
 
155
  <!-- Services Section -->
156
- <section id="services" class="py-20 bg-white">
157
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
158
- <div class="text-center mb-16">
159
- <h2 class="text-3xl md:text-4xl font-serif font-bold text-luxe-blue mb-4">NOS SERVICES</h2>
160
- <div class="w-24 h-1 bg-luxe-gold mx-auto mb-6"></div>
161
- <p class="max-w-3xl mx-auto text-lg text-gray-600">
162
- Des solutions électriques complètes pour des aménagements d'exception
163
  </p>
164
  </div>
165
 
166
- <div class="grid md:grid-cols-3 gap-8">
167
  <!-- Service 1 -->
168
- <div class="service-card bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
169
- <div class="service-icon w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-luxe-blue text-white text-3xl">
170
  <i class="fas fa-home"></i>
171
  </div>
172
- <h3 class="text-xl font-serif text-center text-luxe-blue mb-3">ÉLECTRICITÉ RÉSIDENTIELLE</h3>
173
  <p class="text-sm text-gray-600 text-center mb-4">
174
- Installation et rénovation complète des systèmes électriques pour maisons et appartements haut de gamme
175
  </p>
176
  <ul class="text-xs space-y-2 text-gray-600">
177
  <li class="flex items-center">
178
- <i class="fas fa-check text-luxe-gold mr-2"></i> Tableaux électriques sur mesure
179
  </li>
180
  <li class="flex items-center">
181
- <i class="fas fa-check text-luxe-gold mr-2"></i> Éclairage architectural
182
  </li>
183
  <li class="flex items-center">
184
- <i class="fas fa-check text-luxe-gold mr-2"></i> Automatisation domotique
185
  </li>
186
  <li class="flex items-center">
187
- <i class="fas fa-check text-luxe-gold mr-2"></i> Sécurité électrique
188
  </li>
189
  </ul>
190
  </div>
191
 
192
  <!-- Service 2 -->
193
- <div class="service-card bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
194
- <div class="service-icon w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-luxe-gold text-luxe-black text-3xl">
195
- <i class="fas fa-building"></i>
196
  </div>
197
- <h3 class="text-xl font-serif text-center text-luxe-blue mb-3">AMÉNAGEMENTS COMMERCIAUX</h3>
198
  <p class="text-sm text-gray-600 text-center mb-4">
199
- Solutions électriques pour boutiques, restaurants et espaces professionnels d'exception
200
  </p>
201
  <ul class="text-xs space-y-2 text-gray-600">
202
  <li class="flex items-center">
203
- <i class="fas fa-check text-luxe-blue mr-2"></i> Éclairage scénographique
204
  </li>
205
  <li class="flex items-center">
206
- <i class="fas fa-check text-luxe-blue mr-2"></i> Systèmes d'éclairage LED
207
  </li>
208
  <li class="flex items-center">
209
- <i class="fas fa-check text-luxe-blue mr-2"></i> Gestion énergétique
210
  </li>
211
  <li class="flex items-center">
212
- <i class="fas fa-check text-luxe-blue mr-2"></i> Conformité aux normes
213
  </li>
214
  </ul>
215
  </div>
216
 
217
  <!-- Service 3 -->
218
- <div class="service-card bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
219
- <div class="service-icon w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-luxe-blue text-white text-3xl">
220
- <i class="fas fa-lightbulb"></i>
221
  </div>
222
- <h3 class="text-xl font-serif text-center text-luxe-blue mb-3">SOLUTIONS SUR MESURE</h3>
223
  <p class="text-sm text-gray-600 text-center mb-4">
224
- Création d'installations électriques uniques pour projets architecturaux spéciaux
225
  </p>
226
  <ul class="text-xs space-y-2 text-gray-600">
227
  <li class="flex items-center">
228
- <i class="fas fa-check text-luxe-gold mr-2"></i> Éclairage artistique
229
  </li>
230
  <li class="flex items-center">
231
- <i class="fas fa-check text-luxe-gold mr-2"></i> Intégration invisible
232
  </li>
233
  <li class="flex items-center">
234
- <i class="fas fa-check text-luxe-gold mr-2"></i> Matériaux premium
235
  </li>
236
  <li class="flex items-center">
237
- <i class="fas fa-check text-luxe-gold mr-2"></i> Collaboration avec designers
238
  </li>
239
  </ul>
240
  </div>
241
- </div>
242
- </div>
243
- </section>
244
-
245
- <!-- Realisations Section -->
246
- <section id="realisations" class="py-20 bg-luxe-gray">
247
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
248
- <div class="text-center mb-16">
249
- <h2 class="text-3xl md:text-4xl font-serif font-bold text-luxe-blue mb-4">NOS RÉALISATIONS</h2>
250
- <div class="w-24 h-1 bg-luxe-gold mx-auto mb-6"></div>
251
- <p class="max-w-3xl mx-auto text-lg text-gray-600">
252
- Découvrez nos dernières installations électriques haut de gamme
253
- </p>
254
- </div>
255
-
256
- <div class="gallery-grid">
257
- <!-- Photo 1 -->
258
- <div class="gallery-item relative overflow-hidden group">
259
- <img src="https://images.unsplash.com/photo-1583845112208-973a0a8d60a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
260
- alt="Installation électrique résidentielle"
261
- class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
262
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
263
- <div class="absolute bottom-0 left-0 p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
264
- <h3 class="text-white font-serif text-xl mb-1">Villa contemporaine</h3>
265
- <p class="text-luxe-gold text-sm">Installation électrique complète</p>
266
- </div>
267
- </div>
268
 
269
- <!-- Photo 2 -->
270
- <div class="gallery-item relative overflow-hidden group">
271
- <img src="https://images.unsplash.com/photo-1558002038-1057e3b9e7d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
272
- alt="Éclairage architectural"
273
- class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
274
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
275
- <div class="absolute bottom-0 left-0 p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
276
- <h3 class="text-white font-serif text-xl mb-1">Éclairage scénique</h3>
277
- <p class="text-luxe-gold text-sm">Boutique de luxe</p>
278
- </div>
279
- </div>
280
-
281
- <!-- Photo 3 -->
282
- <div class="gallery-item relative overflow-hidden group">
283
- <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2032&q=80"
284
- alt="Tableau électrique design"
285
- class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
286
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
287
- <div class="absolute bottom-0 left-0 p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
288
- <h3 class="text-white font-serif text-xl mb-1">Tableau électrique sur mesure</h3>
289
- <p class="text-luxe-gold text-sm">Intégration invisible</p>
290
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  </div>
292
 
293
- <!-- Photo 4 -->
294
- <div class="gallery-item relative overflow-hidden group">
295
- <img src="https://images.unsplash.com/photo-1513519245088-0e12902e5a38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
296
- alt="Installation domotique"
297
- class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
298
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
299
- <div class="absolute bottom-0 left-0 p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
300
- <h3 class="text-white font-serif text-xl mb-1">Système domotique</h3>
301
- <p class="text-luxe-gold text-sm">Contrôle centralisé</p>
302
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  </div>
304
 
305
- <!-- Photo 5 -->
306
- <div class="gallery-item relative overflow-hidden group">
307
- <img src="https://images.unsplash.com/photo-1556740734-9f9ca6f370d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
308
- alt="Éclairage extérieur"
309
- class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
310
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
311
- <div class="absolute bottom-0 left-0 p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
312
- <h3 class="text-white font-serif text-xl mb-1">Éclairage paysager</h3>
313
- <p class="text-luxe-gold text-sm">Jardin d'exception</p>
314
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  </div>
316
  </div>
317
-
318
- <div class="text-center mt-16">
319
- <a href="#" class="inline-flex items-center px-6 py-3 border-2 border-luxe-blue text-luxe-blue hover:bg-luxe-blue hover:text-white transition-all duration-300 font-serif tracking-wider">
320
- <span>VOIR TOUTES NOS RÉALISATIONS</span>
321
- <i class="fas fa-long-arrow-alt-right ml-3"></i>
322
- </a>
323
- </div>
324
  </div>
325
  </section>
326
 
327
- <!-- About Section -->
328
- <section id="apropos" class="py-20 bg-white">
329
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
330
  <div class="grid md:grid-cols-2 gap-12 items-center">
331
  <div>
332
- <h2 class="text-3xl md:text-4xl font-serif font-bold text-luxe-blue mb-6">LOIc NOYER</h2>
333
- <div class="w-24 h-1 bg-luxe-gold mb-6"></div>
334
- <h3 class="text-xl font-serif text-luxe-gold mb-4">Électricien spécialisé en aménagements haut de gamme</h3>
335
- <p class="text-sm text-gray-600 mb-6">
336
- Fort de 15 ans d'expérience dans les installations électriques d'exception, LOIc Noyer allie savoir-faire technique et sensibilité esthétique pour des réalisations uniques.
337
- </p>
338
- <p class="text-sm text-gray-600 mb-6">
339
- Notre approche : comprendre l'essence de chaque espace pour y intégrer des solutions électriques invisibles, performantes et élégantes.
340
- </p>
341
- <div class="flex flex-wrap gap-4 mb-8">
342
- <div class="bg-luxe-blue text-white px-4 py-2 text-xs font-serif tracking-widest">
343
- <span>QUALIBAT RGE</span>
 
 
344
  </div>
345
- <div class="bg-luxe-gold text-luxe-black px-4 py-2 text-xs font-serif tracking-widest">
346
- <span>15 ANS D'EXPÉRIENCE</span>
 
 
 
 
 
 
 
 
 
347
  </div>
348
- <div class="bg-luxe-blue text-white px-4 py-2 text-xs font-serif tracking-widest">
349
- <span>MATÉRIAUX PREMIUM</span>
 
 
 
 
 
 
 
 
 
350
  </div>
351
  </div>
352
- <a href="#contact" class="inline-block px-8 py-3 bg-luxe-gold text-luxe-black hover:bg-luxe-blue hover:text-white transition-all duration-300 font-serif tracking-wider">
353
- NOUS CONTACTER
354
- </a>
355
  </div>
356
 
357
- <div class="relative">
358
- <div class="relative pb-[120%] bg-luxe-gray">
359
- <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
360
- </div>
361
- <div class="absolute -bottom-6 -right-6 w-2/3 h-2/3 border-2 border-luxe-gold bg-white p-4 shadow-lg">
362
- <div class="h-full flex items-center justify-center bg-luxe-gray">
363
- <div class="text-center p-6">
364
- <div class="w-20 h-20 mx-auto rounded-full bg-luxe-blue flex items-center justify-center mb-4">
365
- <i class="fas fa-award text-3xl text-white"></i>
366
- </div>
367
- <h4 class="text-lg font-serif text-luxe-blue mb-2">CERTIFICATION</h4>
368
- <p class="text-xs text-gray-600">
369
- Qualité et sécurité garanties par nos certifications professionnelles
370
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
371
  </div>
372
  </div>
373
  </div>
@@ -376,78 +394,69 @@
376
  </div>
377
  </section>
378
 
379
- <!-- Testimonials Section -->
380
- <section class="py-20 bg-luxe-blue text-white">
381
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
382
- <div class="text-center mb-16">
383
- <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4">TÉMOIGNAGES</h2>
384
- <div class="w-24 h-1 bg-luxe-gold mx-auto mb-6"></div>
385
- <p class="max-w-3xl mx-auto text-lg opacity-90">
386
- Ce que nos clients disent de notre travail
 
 
387
  </p>
388
  </div>
389
 
390
  <div class="grid md:grid-cols-3 gap-8">
391
- <!-- Testimonial 1 -->
392
- <div class="testimonial-card bg-white text-luxe-black p-8 rounded">
393
- <div class="flex items-center mb-4">
394
- <div class="w-12 h-12 rounded-full bg-luxe-gray bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/women/43.jpg');"></div>
395
- <div>
396
- <h4 class="font-serif text-luxe-blue">Sophie D.</h4>
397
- <p class="text-xs text-luxe-gold">Propriétaire, Villa à Saint-Tropez</p>
398
- </div>
399
  </div>
400
- <p class="text-sm text-gray-600 italic">
401
- "LOIc a transformé notre maison avec une installation électrique invisible et parfaitement intégrée. Son attention aux détails et son sens esthétique sont remarquables."
 
402
  </p>
403
- <div class="mt-4 text-luxe-gold">
404
- <i class="fas fa-star"></i>
405
- <i class="fas fa-star"></i>
406
- <i class="fas fa-star"></i>
407
- <i class="fas fa-star"></i>
408
- <i class="fas fa-star"></i>
409
- </div>
410
  </div>
411
 
412
- <!-- Testimonial 2 -->
413
- <div class="testimonial-card bg-white text-luxe-black p-8 rounded">
414
- <div class="flex items-center mb-4">
415
- <div class="w-12 h-12 rounded-full bg-luxe-gray bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div>
416
- <div>
417
- <h4 class="font-serif text-luxe-blue">Pierre L.</h4>
418
- <p class="text-xs text-luxe-gold">Architecte d'intérieur, Paris</p>
419
- </div>
420
  </div>
421
- <p class="text-sm text-gray-600 italic">
422
- "Je collabore régulièrement avec LOIc pour mes projets haut de gamme. Sa capacité à intégrer des solutions électriques complexes dans des espaces design est exceptionnelle."
 
423
  </p>
424
- <div class="mt-4 text-luxe-gold">
425
- <i class="fas fa-star"></i>
426
- <i class="fas fa-star"></i>
427
- <i class="fas fa-star"></i>
428
- <i class="fas fa-star"></i>
429
- <i class="fas fa-star"></i>
430
- </div>
431
  </div>
432
 
433
- <!-- Testimonial 3 -->
434
- <div class="testimonial-card bg-white text-luxe-black p-8 rounded">
435
- <div class="flex items-center mb-4">
436
- <div class="w-12 h-12 rounded-full bg-luxe-gray bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/women/65.jpg');"></div>
437
- <div>
438
- <h4 class="font-serif text-luxe-blue">Élodie M.</h4>
439
- <p class="text-xs text-luxe-gold">Directrice, Boutique de luxe</p>
440
- </div>
441
  </div>
442
- <p class="text-sm text-gray-600 italic">
443
- "L'éclairage scénique réalisé par LOIc pour notre boutique a totalement transformé l'expérience client. Professionnalisme et créativité au rendez-vous."
 
444
  </p>
445
- <div class="mt-4 text-luxe-gold">
446
- <i class="fas fa-star"></i>
447
- <i class="fas fa-star"></i>
448
- <i class="fas fa-star"></i>
449
- <i class="fas fa-star"></i>
450
- <i class="fas fa-star"></i>
 
 
 
 
 
 
451
  </div>
452
  </div>
453
  </div>
@@ -455,97 +464,94 @@
455
  </section>
456
 
457
  <!-- Contact Section -->
458
- <section id="contact" class="py-20 bg-luxe-gray">
459
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
460
  <div class="grid md:grid-cols-2 gap-12">
461
  <div>
462
- <h2 class="text-3xl md:text-4xl font-serif font-bold text-luxe-blue mb-6">NOUS CONTACTER</h2>
463
- <div class="w-24 h-1 bg-luxe-gold mb-6"></div>
464
- <p class="text-sm text-gray-600 mb-8">
465
- Pour toute demande de devis ou information sur nos services, n'hésitez pas à nous contacter.
466
  </p>
467
 
468
  <div class="space-y-6">
469
  <div class="flex items-start">
470
- <div class="text-luxe-blue mr-4 mt-1">
471
  <i class="fas fa-map-marker-alt"></i>
472
  </div>
473
  <div>
474
- <h4 class="text-luxe-blue font-serif mb-1">ADRESSE</h4>
475
- <p class="text-sm text-gray-600">12 Avenue des Électriciens<br>75008 Paris, France</p>
476
  </div>
477
  </div>
478
 
479
  <div class="flex items-start">
480
- <div class="text-luxe-blue mr-4 mt-1">
481
- <i class="fas fa-phone"></i>
482
  </div>
483
  <div>
484
- <h4 class="text-luxe-blue font-serif mb-1">TÉLÉPHONE</h4>
485
- <p class="text-sm text-gray-600">+33 6 12 34 56 78</p>
486
  </div>
487
  </div>
488
 
489
  <div class="flex items-start">
490
- <div class="text-luxe-blue mr-4 mt-1">
491
  <i class="fas fa-envelope"></i>
492
  </div>
493
  <div>
494
- <h4 class="text-luxe-blue font-serif mb-1">EMAIL</h4>
495
- <p class="text-sm text-gray-600">contact@loicnoyer-electricite.com</p>
496
  </div>
497
  </div>
498
 
499
  <div class="flex items-start">
500
- <div class="text-luxe-blue mr-4 mt-1">
501
  <i class="fas fa-clock"></i>
502
  </div>
503
  <div>
504
- <h4 class="text-luxe-blue font-serif mb-1">HORAIRES</h4>
505
- <p class="text-sm text-gray-600">Lundi - Vendredi : 8h - 19h<br>Samedi : 9h - 13h</p>
506
  </div>
507
  </div>
508
  </div>
509
 
510
- <div class="mt-8 flex space-x-4">
511
- <a href="#" class="w-10 h-10 rounded-full bg-luxe-blue text-white flex items-center justify-center hover:bg-luxe-gold hover:text-luxe-black transition-colors">
512
- <i class="fab fa-facebook-f"></i>
513
- </a>
514
- <a href="#" class="w-10 h-10 rounded-full bg-luxe-blue text-white flex items-center justify-center hover:bg-luxe-gold hover:text-luxe-black transition-colors">
515
- <i class="fab fa-instagram"></i>
516
- </a>
517
- <a href="#" class="w-10 h-10 rounded-full bg-luxe-blue text-white flex items-center justify-center hover:bg-luxe-gold hover:text-luxe-black transition-colors">
518
- <i class="fab fa-linkedin-in"></i>
519
- </a>
520
  </div>
521
  </div>
522
 
523
- <div class="bg-white p-8 shadow-lg">
524
- <h3 class="text-xl font-serif text-luxe-blue mb-6">DEMANDE DE DEVIS</h3>
525
  <form class="space-y-4">
526
  <div>
527
- <input type="text" placeholder="Nom complet" class="w-full contact-input py-2 px-1 text-gray-700 placeholder-gray-400 focus:outline-none">
528
  </div>
529
  <div>
530
- <input type="email" placeholder="Email" class="w-full contact-input py-2 px-1 text-gray-700 placeholder-gray-400 focus:outline-none">
531
  </div>
532
  <div>
533
- <input type="tel" placeholder="Téléphone" class="w-full contact-input py-2 px-1 text-gray-700 placeholder-gray-400 focus:outline-none">
534
  </div>
535
  <div>
536
- <select class="w-full contact-input py-2 px-1 text-gray-700 appearance-none focus:outline-none">
537
- <option>Type de projet</option>
538
- <option>Résidentiel</option>
539
- <option>Commercial</option>
540
- <option>Sur mesure</option>
541
- <option>Autre</option>
 
 
542
  </select>
543
  </div>
544
  <div>
545
- <textarea rows="4" placeholder="Décrivez votre projet" class="w-full contact-input py-2 px-1 text-gray-700 placeholder-gray-400 focus:outline-none"></textarea>
546
  </div>
547
  <div>
548
- <button type="submit" class="w-full bg-luxe-gold text-luxe-black py-3 px-6 font-serif tracking-widest hover:bg-luxe-blue hover:text-white transition-colors duration-300">
549
  ENVOYER LA DEMANDE
550
  </button>
551
  </div>
@@ -555,65 +561,73 @@
555
  </div>
556
  </section>
557
 
 
 
 
 
 
 
 
 
 
 
 
 
558
  <!-- Footer -->
559
- <footer class="bg-luxe-black text-white py-12">
560
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
561
- <div class="grid md:grid-cols-4 gap-8">
562
  <div>
563
- <h3 class="text-xl font-serif text-luxe-gold mb-4">LOIc NOYER</h3>
564
- <p class="text-sm text-gray-400 mb-4">
565
- Électricien spécialisé en aménagements électriques haut de gamme pour particuliers et professionnels.
566
- </p>
567
- <p class="text-xs text-gray-500">
568
- © 2023 LOIc Noyer Électricité. Tous droits réservés.
569
  </p>
 
 
 
 
 
 
 
 
 
 
 
570
  </div>
571
 
572
  <div>
573
- <h4 class="font-serif text-luxe-gold mb-4">LIENS UTILES</h4>
574
  <ul class="space-y-2">
575
- <li><a href="#accueil" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Accueil</a></li>
576
- <li><a href="#services" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Services</a></li>
577
- <li><a href="#realisations" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Réalisations</a></li>
578
- <li><a href="#apropos" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">À propos</a></li>
579
- <li><a href="#contact" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Contact</a></li>
580
  </ul>
581
  </div>
582
 
583
  <div>
584
- <h4 class="font-serif text-luxe-gold mb-4">SERVICES</h4>
585
- <ul class="space-y-2">
586
- <li><a href="#" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Électricité résidentielle</a></li>
587
- <li><a href="#" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Aménagements commerciaux</a></li>
588
- <li><a href="#" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Solutions sur mesure</a></li>
589
- <li><a href="#" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Domotique</a></li>
590
- <li><a href="#" class="text-sm text-gray-400 hover:text-luxe-gold transition-colors">Éclairage design</a></li>
 
 
 
 
 
 
 
591
  </ul>
592
  </div>
593
-
594
- <div>
595
- <h4 class="font-serif text-luxe-gold mb-4">NEWSLETTER</h4>
596
- <p class="text-sm text-gray-400 mb-4">
597
- Abonnez-vous pour recevoir nos actualités et conseils.
598
- </p>
599
- <form class="flex">
600
- <input type="email" placeholder="Votre email" class="flex-grow bg-luxe-black border border-gray-700 text-white px-4 py-2 focus:outline-none focus:border-luxe-gold">
601
- <button type="submit" class="bg-luxe-gold text-luxe-black px-4 py-2 hover:bg-luxe-blue hover:text-white transition-colors">
602
- <i class="fas fa-paper-plane"></i>
603
- </button>
604
- </form>
605
- </div>
606
  </div>
607
 
608
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
609
- <div class="text-xs text-gray-500 mb-4 md:mb-0">
610
- <a href="#" class="hover:text-gray-400 transition-colors">Mentions légales</a> |
611
- <a href="#" class="hover:text-gray-400 transition-colors">Politique de confidentialité</a> |
612
- <a href="#" class="hover:text-gray-400 transition-colors">CGV</a>
613
- </div>
614
- <div class="text-xs text-gray-500">
615
- Site réalisé avec <i class="fas fa-heart text-luxe-red mx-1"></i> par LOIc Noyer Électricité
616
- </div>
617
  </div>
618
  </div>
619
  </footer>
@@ -653,7 +667,7 @@
653
  });
654
 
655
  // Scroll reveal animation
656
- const scrollElements = document.querySelectorAll('.service-card, .gallery-item, .testimonial-card');
657
 
658
  const elementInView = (el) => {
659
  const elementTop = el.getBoundingClientRect().top;
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Loïc Noyer | Électricité Générale - Toulouse</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
  <script>
 
11
  theme: {
12
  extend: {
13
  colors: {
14
+ 'electric-blue': '#0066cc',
15
+ 'safety-orange': '#ff6600',
16
+ 'professional-gray': '#333333',
17
+ 'light-bg': '#f8f9fa',
18
  },
19
  fontFamily: {
20
+ 'sans': ['"Segoe UI"', 'Roboto', 'sans-serif'],
 
 
21
  },
22
  animation: {
23
+ 'fade-in': 'fadeIn 1s ease-out',
24
  },
25
  keyframes: {
26
  fadeIn: {
27
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
28
+ '100%': { opacity: '1', transform: 'translateY(0)' },
29
  }
30
  }
31
  }
 
33
  }
34
  </script>
35
  <style>
36
+ .hero-overlay {
37
+ background: linear-gradient(135deg, rgba(0,102,204,0.9) 0%, rgba(0,102,204,0.7) 100%);
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
+ .service-card:hover {
41
+ transform: translateY(-10px);
42
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 
 
 
43
  }
44
 
45
+ .nav-link {
46
+ position: relative;
47
  }
48
 
49
+ .nav-link:after {
50
+ content: '';
51
+ position: absolute;
52
+ width: 0;
53
+ height: 2px;
54
+ bottom: 0;
55
+ left: 0;
56
+ background-color: #ff6600;
57
+ transition: width 0.3s;
58
  }
59
 
60
+ .nav-link:hover:after {
61
+ width: 100%;
62
  }
63
 
64
+ .emergency-badge {
65
+ animation: pulse 2s infinite;
 
66
  }
67
 
68
+ @keyframes pulse {
69
+ 0% { transform: scale(1); }
70
+ 50% { transform: scale(1.05); }
71
+ 100% { transform: scale(1); }
72
  }
73
  </style>
74
  </head>
75
+ <body class="bg-light-bg text-professional-gray font-sans">
76
  <!-- Navigation -->
77
+ <nav class="fixed w-full z-50 bg-white shadow-md">
78
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
79
  <div class="flex justify-between h-20 items-center">
80
  <div class="flex-shrink-0 flex items-center">
81
+ <span class="text-xl font-bold text-electric-blue">LOÏC NOYER</span>
82
+ <span class="ml-2 text-xs text-safety-orange uppercase tracking-widest">Électricité Générale</span>
83
  </div>
84
  <div class="hidden md:block">
85
  <div class="ml-10 flex items-baseline space-x-8">
86
+ <a href="#accueil" class="nav-link px-3 py-2 text-sm font-medium">ACCUEIL</a>
87
+ <a href="#services" class="nav-link px-3 py-2 text-sm font-medium">SERVICES</a>
88
+ <a href="#normes" class="nav-link px-3 py-2 text-sm font-medium">NORMES</a>
89
+ <a href="#urgence" class="nav-link px-3 py-2 text-sm font-medium">URGENCES</a>
90
+ <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium">CONTACT</a>
91
  </div>
92
  </div>
93
  <div class="md:hidden">
94
+ <button class="mobile-menu-button p-2 rounded-md text-electric-blue">
95
  <i class="fas fa-bars text-xl"></i>
96
  </button>
97
  </div>
 
100
  </nav>
101
 
102
  <!-- Mobile Menu -->
103
+ <div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-white">
104
  <div class="flex flex-col items-center justify-center h-full">
105
+ <button class="absolute top-6 right-6 p-2 text-electric-blue">
106
  <i class="fas fa-times text-2xl"></i>
107
  </button>
108
+ <a href="#accueil" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">ACCUEIL</a>
109
+ <a href="#services" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">SERVICES</a>
110
+ <a href="#normes" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">NORMES</a>
111
+ <a href="#urgence" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">URGENCES</a>
112
+ <a href="#contact" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">CONTACT</a>
113
  </div>
114
  </div>
115
 
116
  <!-- Hero Section -->
117
+ <section id="accueil" class="relative pt-32 pb-20 md:pt-40 md:pb-28 flex items-center justify-center bg-electric-blue overflow-hidden">
118
+ <div class="absolute inset-0 bg-cover bg-center opacity-10" style="background-image: url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div>
119
 
120
+ <div class="hero-overlay absolute inset-0"></div>
121
 
122
  <div class="relative z-10 text-center px-4 max-w-4xl mx-auto animate-fade-in">
123
+ <h1 class="text-3xl md:text-4xl font-bold mb-6 text-white">
124
+ <span class="block">ÉLECTRICITÉ GÉNÉRALE & SÉCURITÉ ÉLECTRIQUE</span>
125
+ <span class="block text-safety-orange">À TOULOUSE ET SA RÉGION</span>
126
  </h1>
127
+ <p class="text-lg mb-8 font-light text-white max-w-2xl mx-auto">
128
+ Professionnel qualifié pour tous vos travaux d'électricité, rénovation et mise en sécurité
129
  </p>
130
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
131
+ <a href="#contact" class="inline-block px-6 py-3 bg-safety-orange text-white hover:bg-white hover:text-electric-blue transition-all duration-300 font-medium">
132
+ <i class="fas fa-phone-alt mr-2"></i> 06 26 16 27 25
133
  </a>
134
+ <a href="#services" class="inline-block px-6 py-3 border-2 border-white text-white hover:border-safety-orange hover:text-safety-orange transition-all duration-300 font-medium">
135
  NOS SERVICES
136
  </a>
137
  </div>
138
  </div>
 
 
 
 
 
 
139
  </section>
140
 
141
  <!-- Services Section -->
142
+ <section id="services" class="py-16 bg-white">
143
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
144
+ <div class="text-center mb-12">
145
+ <h2 class="text-2xl md:text-3xl font-bold text-electric-blue mb-4">NOS SERVICES PROFESSIONNELS</h2>
146
+ <div class="w-20 h-1 bg-safety-orange mx-auto mb-6"></div>
147
+ <p class="max-w-3xl mx-auto text-gray-600">
148
+ Des solutions électriques complètes pour particuliers et professionnels
149
  </p>
150
  </div>
151
 
152
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
153
  <!-- Service 1 -->
154
+ <div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
155
+ <div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-electric-blue text-white text-2xl">
156
  <i class="fas fa-home"></i>
157
  </div>
158
+ <h3 class="text-xl font-bold text-center text-electric-blue mb-3">RÉNOVATION ÉLECTRIQUE</h3>
159
  <p class="text-sm text-gray-600 text-center mb-4">
160
+ Remise aux normes complète de votre installation électrique
161
  </p>
162
  <ul class="text-xs space-y-2 text-gray-600">
163
  <li class="flex items-center">
164
+ <i class="fas fa-check text-safety-orange mr-2"></i> Remplacement tableau électrique
165
  </li>
166
  <li class="flex items-center">
167
+ <i class="fas fa-check text-safety-orange mr-2"></i> Mise en sécurité complète
168
  </li>
169
  <li class="flex items-center">
170
+ <i class="fas fa-check text-safety-orange mr-2"></i> Rénovation partielle ou totale
171
  </li>
172
  <li class="flex items-center">
173
+ <i class="fas fa-check text-safety-orange mr-2"></i> Diagnostic préalable
174
  </li>
175
  </ul>
176
  </div>
177
 
178
  <!-- Service 2 -->
179
+ <div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
180
+ <div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
181
+ <i class="fas fa-bolt"></i>
182
  </div>
183
+ <h3 class="text-xl font-bold text-center text-electric-blue mb-3">MISE EN SÉCURITÉ</h3>
184
  <p class="text-sm text-gray-600 text-center mb-4">
185
+ Protection des personnes et des biens contre les risques électriques
186
  </p>
187
  <ul class="text-xs space-y-2 text-gray-600">
188
  <li class="flex items-center">
189
+ <i class="fas fa-check text-electric-blue mr-2"></i> Disjoncteur 30mA
190
  </li>
191
  <li class="flex items-center">
192
+ <i class="fas fa-check text-electric-blue mr-2"></i> GTL aux normes
193
  </li>
194
  <li class="flex items-center">
195
+ <i class="fas fa-check text-electric-blue mr-2"></i> Protection différentielle
196
  </li>
197
  <li class="flex items-center">
198
+ <i class="fas fa-check text-electric-blue mr-2"></i> Sécurité des circuits
199
  </li>
200
  </ul>
201
  </div>
202
 
203
  <!-- Service 3 -->
204
+ <div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
205
+ <div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-electric-blue text-white text-2xl">
206
+ <i class="fas fa-tools"></i>
207
  </div>
208
+ <h3 class="text-xl font-bold text-center text-electric-blue mb-3">DÉPANNAGE</h3>
209
  <p class="text-sm text-gray-600 text-center mb-4">
210
+ Intervention rapide pour tous vos problèmes électriques
211
  </p>
212
  <ul class="text-xs space-y-2 text-gray-600">
213
  <li class="flex items-center">
214
+ <i class="fas fa-check text-safety-orange mr-2"></i> Panne de courant
215
  </li>
216
  <li class="flex items-center">
217
+ <i class="fas fa-check text-safety-orange mr-2"></i> Disjoncteur qui saute
218
  </li>
219
  <li class="flex items-center">
220
+ <i class="fas fa-check text-safety-orange mr-2"></i> Problème d'éclairage
221
  </li>
222
  <li class="flex items-center">
223
+ <i class="fas fa-check text-safety-orange mr-2"></i> Prises défectueuses
224
  </li>
225
  </ul>
226
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
 
228
+ <!-- Service 4 -->
229
+ <div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
230
+ <div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
231
+ <i class="fas fa-file-alt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  </div>
233
+ <h3 class="text-xl font-bold text-center text-electric-blue mb-3">DIAGNOSTICS</h3>
234
+ <p class="text-sm text-gray-600 text-center mb-4">
235
+ Évaluation complète de votre installation électrique
236
+ </p>
237
+ <ul class="text-xs space-y-2 text-gray-600">
238
+ <li class="flex items-center">
239
+ <i class="fas fa-check text-electric-blue mr-2"></i> Diagnostic Loi ALUR
240
+ </li>
241
+ <li class="fas fa-check text-electric-blue mr-2"></i> État de l'installation
242
+ </li>
243
+ <li class="flex items-center">
244
+ <i class="fas fa-check text-electric-blue mr-2"></i> Identification risques
245
+ </li>
246
+ <li class="flex items-center">
247
+ <i class="fas fa-check text-electric-blue mr-2"></i> Préconisations
248
+ </li>
249
+ </ul>
250
  </div>
251
 
252
+ <!-- Service 5 -->
253
+ <div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
254
+ <div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-electric-blue text-white text-2xl">
255
+ <i class="fas fa-plug"></i>
 
 
 
 
 
256
  </div>
257
+ <h3 class="text-xl font-bold text-center text-electric-blue mb-3">APPAREILLAGE</h3>
258
+ <p class="text-sm text-gray-600 text-center mb-4">
259
+ Installation et remplacement de tous vos équipements électriques
260
+ </p>
261
+ <ul class="text-xs space-y-2 text-gray-600">
262
+ <li class="flex items-center">
263
+ <i class="fas fa-check text-safety-orange mr-2"></i> Prises et interrupteurs
264
+ </li>
265
+ <li class="flex items-center">
266
+ <i class="fas fa-check text-safety-orange mr-2"></i> Va-et-vient, télérupteurs
267
+ </li>
268
+ <li class="flex items-center">
269
+ <i class="fas fa-check text-safety-orange mr-2"></i> Détecteurs de mouvement
270
+ </li>
271
+ <li class="flex items-center">
272
+ <i class="fas fa-check text-safety-orange mr-2"></i> Domotique de base
273
+ </li>
274
+ </ul>
275
  </div>
276
 
277
+ <!-- Service 6 -->
278
+ <div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
279
+ <div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
280
+ <i class="fas fa-building"></i>
 
 
 
 
 
281
  </div>
282
+ <h3 class="text-xl font-bold text-center text-electric-blue mb-3">NEUF & RÉNOVATION</h3>
283
+ <p class="text-sm text-gray-600 text-center mb-4">
284
+ Installation électrique complète pour logement neuf ou existant
285
+ </p>
286
+ <ul class="text-xs space-y-2 text-gray-600">
287
+ <li class="flex items-center">
288
+ <i class="fas fa-check text-electric-blue mr-2"></i> Tableau électrique neuf
289
+ </li>
290
+ <li class="flex items-center">
291
+ <i class="fas fa-check text-electric-blue mr-2"></i> Câblage complet
292
+ </li>
293
+ <li class="flex items-center">
294
+ <i class="fas fa-check text-electric-blue mr-2"></i> Circuits spécialisés
295
+ </li>
296
+ <li class="flex items-center">
297
+ <i class="fas fa-check text-electric-blue mr-2"></i> Conformité NF C 16-600
298
+ </li>
299
+ </ul>
300
  </div>
301
  </div>
 
 
 
 
 
 
 
302
  </div>
303
  </section>
304
 
305
+ <!-- Normes Section -->
306
+ <section id="normes" class="py-16 bg-gray-50">
307
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
308
  <div class="grid md:grid-cols-2 gap-12 items-center">
309
  <div>
310
+ <h2 class="text-2xl md:text-3xl font-bold text-electric-blue mb-6">CONFORMITÉ AUX NORMES</h2>
311
+ <div class="w-20 h-1 bg-safety-orange mb-6"></div>
312
+
313
+ <div class="space-y-6">
314
+ <div class="flex items-start">
315
+ <div class="text-electric-blue text-xl mr-4 mt-1">
316
+ <i class="fas fa-certificate"></i>
317
+ </div>
318
+ <div>
319
+ <h3 class="text-lg font-bold text-electric-blue mb-2">NF C 16-600</h3>
320
+ <p class="text-sm text-gray-600">
321
+ Norme française régissant les installations électriques des logements. Nous garantissons une installation 100% conforme pour votre sécurité.
322
+ </p>
323
+ </div>
324
  </div>
325
+
326
+ <div class="flex items-start">
327
+ <div class="text-safety-orange text-xl mr-4 mt-1">
328
+ <i class="fas fa-gavel"></i>
329
+ </div>
330
+ <div>
331
+ <h3 class="text-lg font-bold text-electric-blue mb-2">LOI ALUR</h3>
332
+ <p class="text-sm text-gray-600">
333
+ Diagnostic électrique obligatoire pour les locations. Nous réalisons ce diagnostic avec professionnalisme et fournissons un rapport détaillé.
334
+ </p>
335
+ </div>
336
  </div>
337
+
338
+ <div class="flex items-start">
339
+ <div class="text-electric-blue text-xl mr-4 mt-1">
340
+ <i class="fas fa-shield-alt"></i>
341
+ </div>
342
+ <div>
343
+ <h3 class="text-lg font-bold text-electric-blue mb-2">SÉCURITÉ 30MA</h3>
344
+ <p class="text-sm text-gray-600">
345
+ Protection différentielle 30mA obligatoire pour protéger les personnes contre les risques d'électrocution. Nous vérifions et installons ces dispositifs.
346
+ </p>
347
+ </div>
348
  </div>
349
  </div>
 
 
 
350
  </div>
351
 
352
+ <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
353
+ <h3 class="text-xl font-bold text-electric-blue mb-6">POURQUOI CHOISIR UN PROFESSIONNEL ?</h3>
354
+ <div class="space-y-4">
355
+ <div class="flex items-start">
356
+ <div class="text-safety-orange mr-3 mt-1">
357
+ <i class="fas fa-check-circle"></i>
358
+ </div>
359
+ <div>
360
+ <h4 class="font-medium text-electric-blue mb-1">GARANTIE DE SÉCURITÉ</h4>
361
+ <p class="text-sm text-gray-600">Une installation conforme aux normes réduit les risques d'incendie et d'électrocution</p>
362
+ </div>
363
+ </div>
364
+ <div class="flex items-start">
365
+ <div class="text-safety-orange mr-3 mt-1">
366
+ <i class="fas fa-check-circle"></i>
367
+ </div>
368
+ <div>
369
+ <h4 class="font-medium text-electric-blue mb-1">VALORISATION DU BIEN</h4>
370
+ <p class="text-sm text-gray-600">Une installation aux normes augmente la valeur de votre propriété</p>
371
+ </div>
372
+ </div>
373
+ <div class="flex items-start">
374
+ <div class="text-safety-orange mr-3 mt-1">
375
+ <i class="fas fa-check-circle"></i>
376
+ </div>
377
+ <div>
378
+ <h4 class="font-medium text-electric-blue mb-1">CONFORMITÉ LÉGALE</h4>
379
+ <p class="text-sm text-gray-600">Obligatoire pour la vente ou location d'un logement</p>
380
+ </div>
381
+ </div>
382
+ <div class="flex items-start">
383
+ <div class="text-safety-orange mr-3 mt-1">
384
+ <i class="fas fa-check-circle"></i>
385
+ </div>
386
+ <div>
387
+ <h4 class="font-medium text-electric-blue mb-1">ÉCONOMIE D'ÉNERGIE</h4>
388
+ <p class="text-sm text-gray-600">Une installation moderne et optimisée réduit votre consommation</p>
389
  </div>
390
  </div>
391
  </div>
 
394
  </div>
395
  </section>
396
 
397
+ <!-- Urgence Section -->
398
+ <section id="urgence" class="py-16 bg-electric-blue text-white">
399
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
400
+ <div class="text-center mb-12">
401
+ <div class="inline-block emergency-badge bg-safety-orange text-white px-6 py-3 rounded-full mb-6">
402
+ <i class="fas fa-exclamation-triangle mr-2"></i> SERVICE D'URGENCE
403
+ </div>
404
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">DÉPANNAGE ÉLECTRIQUE RAPIDE</h2>
405
+ <p class="max-w-3xl mx-auto opacity-90">
406
+ Disponible pour intervenir rapidement sur Toulouse et sa région en cas de problème électrique urgent
407
  </p>
408
  </div>
409
 
410
  <div class="grid md:grid-cols-3 gap-8">
411
+ <!-- Urgence 1 -->
412
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
413
+ <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
414
+ <i class="fas fa-power-off"></i>
 
 
 
 
415
  </div>
416
+ <h3 class="text-xl font-bold text-electric-blue mb-3">PERTE DE COURANT</h3>
417
+ <p class="text-sm text-gray-600 mb-4">
418
+ Plus d'électricité dans tout ou partie de votre logement ?
419
  </p>
420
+ <a href="#contact" class="inline-block px-4 py-2 bg-electric-blue text-white text-sm rounded hover:bg-safety-orange transition-colors">
421
+ <i class="fas fa-phone-alt mr-2"></i> Appeler maintenant
422
+ </a>
 
 
 
 
423
  </div>
424
 
425
+ <!-- Urgence 2 -->
426
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
427
+ <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
428
+ <i class="fas fa-fire-extinguisher"></i>
 
 
 
 
429
  </div>
430
+ <h3 class="text-xl font-bold text-electric-blue mb-3">RISQUE D'INCENDIE</h3>
431
+ <p class="text-sm text-gray-600 mb-4">
432
+ Odeur de brûlé, étincelles ou appareil qui chauffe anormalement ?
433
  </p>
434
+ <a href="#contact" class="inline-block px-4 py-2 bg-electric-blue text-white text-sm rounded hover:bg-safety-orange transition-colors">
435
+ <i class="fas fa-phone-alt mr-2"></i> Urgence absolue
436
+ </a>
 
 
 
 
437
  </div>
438
 
439
+ <!-- Urgence 3 -->
440
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
441
+ <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
442
+ <i class="fas fa-bolt"></i>
 
 
 
 
443
  </div>
444
+ <h3 class="text-xl font-bold text-electric-blue mb-3">DISJONCTEUR DÉCLENCHÉ</h3>
445
+ <p class="text-sm text-gray-600 mb-4">
446
+ Impossible de remettre le courant ? Disjoncteur qui saute en permanence ?
447
  </p>
448
+ <a href="#contact" class="inline-block px-4 py-2 bg-electric-blue text-white text-sm rounded hover:bg-safety-orange transition-colors">
449
+ <i class="fas fa-phone-alt mr-2"></i> Intervention rapide
450
+ </a>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="mt-12 text-center">
455
+ <div class="inline-flex items-center bg-white text-electric-blue px-8 py-4 rounded-lg shadow-md">
456
+ <i class="fas fa-phone-alt text-2xl mr-4"></i>
457
+ <div class="text-left">
458
+ <p class="text-xs uppercase tracking-wider">Appel 24/7 en cas d'urgence</p>
459
+ <p class="text-xl font-bold">06 26 16 27 25</p>
460
  </div>
461
  </div>
462
  </div>
 
464
  </section>
465
 
466
  <!-- Contact Section -->
467
+ <section id="contact" class="py-16 bg-white">
468
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
469
  <div class="grid md:grid-cols-2 gap-12">
470
  <div>
471
+ <h2 class="text-2xl md:text-3xl font-bold text-electric-blue mb-6">CONTACTEZ-NOUS</h2>
472
+ <div class="w-20 h-1 bg-safety-orange mb-6"></div>
473
+ <p class="text-gray-600 mb-8">
474
+ Pour toute demande de devis, intervention ou renseignement, n'hésitez pas à nous contacter.
475
  </p>
476
 
477
  <div class="space-y-6">
478
  <div class="flex items-start">
479
+ <div class="text-safety-orange mr-4 mt-1">
480
  <i class="fas fa-map-marker-alt"></i>
481
  </div>
482
  <div>
483
+ <h4 class="font-bold text-electric-blue mb-1">ADRESSE</h4>
484
+ <p class="text-sm text-gray-600">14 Chemin du Château de l'Hers<br>31500 Toulouse</p>
485
  </div>
486
  </div>
487
 
488
  <div class="flex items-start">
489
+ <div class="text-safety-orange mr-4 mt-1">
490
+ <i class="fas fa-phone-alt"></i>
491
  </div>
492
  <div>
493
+ <h4 class="font-bold text-electric-blue mb-1">TÉLÉPHONE</h4>
494
+ <p class="text-sm text-gray-600">06 26 16 27 25</p>
495
  </div>
496
  </div>
497
 
498
  <div class="flex items-start">
499
+ <div class="text-safety-orange mr-4 mt-1">
500
  <i class="fas fa-envelope"></i>
501
  </div>
502
  <div>
503
+ <h4 class="font-bold text-electric-blue mb-1">EMAIL</h4>
504
+ <p class="text-sm text-gray-600">loicnoyer@gmail.com</p>
505
  </div>
506
  </div>
507
 
508
  <div class="flex items-start">
509
+ <div class="text-safety-orange mr-4 mt-1">
510
  <i class="fas fa-clock"></i>
511
  </div>
512
  <div>
513
+ <h4 class="font-bold text-electric-blue mb-1">HORAIRES</h4>
514
+ <p class="text-sm text-gray-600">Lundi - Vendredi : 8h - 19h<br>Samedi : 9h - 12h<br>Urgences : 24h/24</p>
515
  </div>
516
  </div>
517
  </div>
518
 
519
+ <div class="mt-8">
520
+ <h4 class="font-bold text-electric-blue mb-3">ZONE D'INTERVENTION</h4>
521
+ <p class="text-sm text-gray-600">
522
+ Toulouse et sa région dans un rayon de 30km. Déplacements possibles au-delà sur devis.
523
+ </p>
 
 
 
 
 
524
  </div>
525
  </div>
526
 
527
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm border border-gray-200">
528
+ <h3 class="text-xl font-bold text-electric-blue mb-6">DEMANDE DE DEVIS</h3>
529
  <form class="space-y-4">
530
  <div>
531
+ <input type="text" placeholder="Votre nom" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
532
  </div>
533
  <div>
534
+ <input type="email" placeholder="Votre email" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
535
  </div>
536
  <div>
537
+ <input type="tel" placeholder="Votre téléphone" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
538
  </div>
539
  <div>
540
+ <select class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
541
+ <option>Type de prestation</option>
542
+ <option>Rénovation électrique</option>
543
+ <option>Mise en sécurité</option>
544
+ <option>Remplacement tableau</option>
545
+ <option>Diagnostic électrique</option>
546
+ <option>Dépannage</option>
547
+ <option>Autre demande</option>
548
  </select>
549
  </div>
550
  <div>
551
+ <textarea rows="4" placeholder="Décrivez votre projet ou problème" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent"></textarea>
552
  </div>
553
  <div>
554
+ <button type="submit" class="w-full bg-electric-blue text-white py-3 px-6 rounded hover:bg-safety-orange transition-colors font-medium">
555
  ENVOYER LA DEMANDE
556
  </button>
557
  </div>
 
561
  </div>
562
  </section>
563
 
564
+ <!-- Map Section -->
565
+ <div class="h-96 bg-gray-200">
566
+ <iframe
567
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.183317396493!2d1.4538153153648004!3d43.60489017912296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12aebb6fec8b7a6b%3A0x1c8f5a3b1b5b1b5b!2s14%20Chemin%20du%20Ch%C3%A2teau%20de%20l&#39;Hers%2C%2031500%20Toulouse!5e0!3m2!1sfr!2sfr!4v1623680000000!5m2!1sfr!2sfr"
568
+ width="100%"
569
+ height="100%"
570
+ style="border:0;"
571
+ allowfullscreen=""
572
+ loading="lazy">
573
+ </iframe>
574
+ </div>
575
+
576
  <!-- Footer -->
577
+ <footer class="bg-professional-gray text-white py-12">
578
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
579
+ <div class="grid md:grid-cols-3 gap-8">
580
  <div>
581
+ <h3 class="text-xl font-bold text-safety-orange mb-4">LOÏC NOYER ÉLECTRICITÉ</h3>
582
+ <p class="text-sm text-gray-300 mb-4">
583
+ Électricien général à Toulouse, spécialisé dans les travaux de rénovation, mise en sécurité et dépannage électrique.
 
 
 
584
  </p>
585
+ <div class="flex space-x-4">
586
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 text-white flex items-center justify-center hover:bg-safety-orange transition-colors">
587
+ <i class="fab fa-facebook-f"></i>
588
+ </a>
589
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 text-white flex items-center justify-center hover:bg-safety-orange transition-colors">
590
+ <i class="fab fa-instagram"></i>
591
+ </a>
592
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 text-white flex items-center justify-center hover:bg-safety-orange transition-colors">
593
+ <i class="fab fa-linkedin-in"></i>
594
+ </a>
595
+ </div>
596
  </div>
597
 
598
  <div>
599
+ <h4 class="font-bold text-safety-orange mb-4">LIENS UTILES</h4>
600
  <ul class="space-y-2">
601
+ <li><a href="#accueil" class="text-sm text-gray-300 hover:text-white transition-colors">Accueil</a></li>
602
+ <li><a href="#services" class="text-sm text-gray-300 hover:text-white transition-colors">Services</a></li>
603
+ <li><a href="#normes" class="text-sm text-gray-300 hover:text-white transition-colors">Normes électriques</a></li>
604
+ <li><a href="#urgence" class="text-sm text-gray-300 hover:text-white transition-colors">Dépannage d'urgence</a></li>
605
+ <li><a href="#contact" class="text-sm text-gray-300 hover:text-white transition-colors">Contact</a></li>
606
  </ul>
607
  </div>
608
 
609
  <div>
610
+ <h4 class="font-bold text-safety-orange mb-4">INFORMATIONS</h4>
611
+ <ul class="space-y-2 text-sm text-gray-300">
612
+ <li class="flex items-start">
613
+ <i class="fas fa-certificate text-safety-orange mr-2 mt-1"></i>
614
+ <span>Électricien qualifié - Certifié NF C 16-600</span>
615
+ </li>
616
+ <li class="flex items-start">
617
+ <i class="fas fa-shield-alt text-safety-orange mr-2 mt-1"></i>
618
+ <span>Assuré RC Pro - Garantie décennale</span>
619
+ </li>
620
+ <li class="flex items-start">
621
+ <i class="fas fa-euro-sign text-safety-orange mr-2 mt-1"></i>
622
+ <span>Devis gratuit - Travaux soignés</span>
623
+ </li>
624
  </ul>
625
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
626
  </div>
627
 
628
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-sm text-gray-500">
629
+ <p>© 2023 Loïc Noyer Électricité Générale - Tous droits réservés</p>
630
+ <p class="mt-2">SIRET : [Votre numéro SIRET] - Artisan indépendant</p>
 
 
 
 
 
 
631
  </div>
632
  </div>
633
  </footer>
 
667
  });
668
 
669
  // Scroll reveal animation
670
+ const scrollElements = document.querySelectorAll('.service-card');
671
 
672
  const elementInView = (el) => {
673
  const elementTop = el.getBoundingClientRect().top;
prompts.txt CHANGED
@@ -1,3 +1,5 @@
1
  site style Mathematic Studio nommé Locus Niger site de Laurent Hiriart motion designer
2
  Locus Niger site de motion graphisme
3
- site amenagement electrique LOIc noyer site professionnel service présentation professionnelle photos du domaine page de presentation model de site haut de gamme
 
 
 
1
  site style Mathematic Studio nommé Locus Niger site de Laurent Hiriart motion designer
2
  Locus Niger site de motion graphisme
3
+ site amenagement electrique LOIc noyer site professionnel service présentation professionnelle photos du domaine page de presentation model de site haut de gamme
4
+ site pour Loïc Noyer électricité proffessionnelle amenagement electrique
5
+ Loïc Noyer Electricité Generale travaux de revovation mise en securité electrique Loi ALUR NF C16-600 diagnostic et dépannage rapide remplacement de tableau électrique ou logement neuf et logement existant intervention partiel pour disjoncteur 30MA,apareillage et circuit à risque loicnoyer@gmail.com tel 0626162725 adresse 14 chemin du chateau de l'hers 31 500 Toulouse