Hugging Face's logo

Spaces:
nahsteoner
/
nahstudio
Running

App Files Community
nahsteoner commited on
Commit
f325927
·
verified ·
1 Parent(s): 650ca46

rajouter une ombre légère sur les textes pour les rendre plus visite. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +517 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nahstudio
3
- emoji: 📚
4
- colorFrom: indigo
5
- colorTo: red
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: nahstudio
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,517 @@
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>Nahstudio.ch - Mastering, Mixage & Services Audio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for smooth scrolling and audio player */
11
+ html {
12
+ scroll-behavior: smooth;
13
+ }
14
+ .audio-player {
15
+ background: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%);
16
+ border-radius: 12px;
17
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
18
+ }
19
+ .service-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 15px 30px rgba(0,0,0,0.2);
22
+ }
23
+ .nav-link.active {
24
+ color: #2dd4bf;
25
+ border-bottom: 2px solid #2dd4bf;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-blue-50 text-gray-800 font-sans">
30
+ <!-- Header with Logo -->
31
+ <header class="sticky top-0 z-50 bg-white shadow-lg">
32
+ <div class="container mx-auto px-4 py-6 flex flex-col items-center">
33
+ <div class="mb-4">
34
+ <h1 class="text-3xl font-bold text-teal-400">NAHSTUDIO</h1>
35
+ </div>
36
+
37
+ <!-- Navigation -->
38
+ <nav class="w-full">
39
+ <ul class="flex justify-center space-x-8">
40
+ <li><a href="#intro" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Introduction</a></li>
41
+ <li><a href="#services" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Services Audio</a></li>
42
+ <li><a href="#portfolio" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Portfolio</a></li>
43
+ <li><a href="#contact" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Contact</a></li>
44
+ </ul>
45
+ </nav>
46
+ </div>
47
+ </header>
48
+
49
+ <!-- Hero Section -->
50
+ <section class="relative h-screen flex items-center justify-center bg-gradient-to-b from-blue-100 to-teal-100">
51
+ <div class="absolute inset-0 opacity-20 bg-black">
52
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-70"></div>
53
+ </div>
54
+ <div class="container mx-auto px-4 z-10 text-center">
55
+ <h2 class="text-5xl md:text-7xl font-bold mb-6 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_40%)]">NAHSTUDIO.CH</h2>
56
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 [text-shadow:_0_2px_4px_rgb(0_0_0_/_30%)]">Excellence en Mastering, Mixage et Production Audio Professionnelle</p>
57
+ <a href="#intro" class="bg-teal-500 hover:bg-teal-600 text-gray-900 font-bold py-3 px-8 rounded-full transition duration-300 inline-flex items-center">
58
+ Découvrir <i class="fas fa-arrow-down ml-2"></i>
59
+ </a>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Introduction Section -->
64
+ <section id="intro" class="py-20 bg-amber-100">
65
+ <div class="container mx-auto px-4">
66
+ <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">INTRODUCTION</h2>
67
+ <div class="flex flex-col lg:flex-row items-center gap-12">
68
+ <div class="lg:w-1/2">
69
+ <div class="rounded-xl overflow-hidden shadow-2xl">
70
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
71
+ alt="Studio Nahstudio" class="w-full h-auto object-cover brightness-75">
72
+ </div>
73
+ </div>
74
+ <div class="lg:w-1/2">
75
+ <h3 class="text-3xl font-bold mb-6">Bienvenue chez Nahstudio</h3>
76
+ <p class="text-lg mb-4">Fondé en 2023, Nahstudio est un studio audio professionnel spécialisé dans le mastering, le mixage et la production sonore de haute qualité.</p>
77
+ <p class="text-lg mb-4">Notre approche allie expertise technique et sensibilité artistique pour donner vie à vos projets musicaux. Nous travaillons avec des artistes de tous genres, des labels indépendants aux grandes productions.</p>
78
+ <p class="text-lg mb-6">Basé en Suisse, notre studio est équipé des dernières technologies et d'un équipement haut de gamme pour garantir des résultats exceptionnels.</p>
79
+ <div class="flex flex-wrap gap-4">
80
+ <div class="flex items-center">
81
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
82
+ <span>Matériel professionnel</span>
83
+ </div>
84
+ <div class="flex items-center">
85
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
86
+ <span>Expérience confirmée</span>
87
+ </div>
88
+ <div class="flex items-center">
89
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
90
+ <span>Approche personnalisée</span>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </section>
97
+
98
+ <!-- Services Section -->
99
+ <section id="services" class="py-20 bg-amber-50">
100
+ <div class="container mx-auto px-4">
101
+ <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">SERVICES AUDIO</h2>
102
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
103
+ <!-- Mastering -->
104
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
105
+ <div class="text-teal-500 mb-4">
106
+ <i class="fas fa-sliders-h text-4xl"></i>
107
+ </div>
108
+ <h3 class="text-2xl font-bold mb-4">Mastering</h3>
109
+ <p class="mb-4">Finalisation professionnelle de vos pistes pour une diffusion optimale sur toutes les plateformes (streaming, vinyl, CD).</p>
110
+ <ul class="space-y-2 mb-6">
111
+ <li class="flex items-start">
112
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
113
+ <span>Équilibre spectral précis</span>
114
+ </li>
115
+ <li class="flex items-start">
116
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
117
+ <span>Optimisation du volume</span>
118
+ </li>
119
+ <li class="flex items-start">
120
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
121
+ <span>Correction des problèmes</span>
122
+ </li>
123
+ </ul>
124
+ <div class="text-yellow-500 font-medium">À partir de CHF 50.- / piste</div>
125
+ </div>
126
+
127
+ <!-- Mixage -->
128
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300">
129
+ <div class="text-yellow-500 mb-4">
130
+ <i class="fas fa-wave-square text-4xl"></i>
131
+ </div>
132
+ <h3 class="text-2xl font-bold mb-4">Mixage</h3>
133
+ <p class="mb-4">Harmonisation et équilibrage de vos pistes pour un rendu professionnel et cohérent.</p>
134
+ <ul class="space-y-2 mb-6">
135
+ <li class="flex items-start">
136
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
137
+ <span>Équilibre des instruments</span>
138
+ </li>
139
+ <li class="flex items-start">
140
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
141
+ <span>Traitement dynamique</span>
142
+ </li>
143
+ <li class="flex items-start">
144
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
145
+ <span>Spatialisation 3D</span>
146
+ </li>
147
+ </ul>
148
+ <div class="text-yellow-500 font-medium">À partir de CHF 80.- / piste</div>
149
+ </div>
150
+
151
+ <!-- Création audio -->
152
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300">
153
+ <div class="text-yellow-500 mb-4">
154
+ <i class="fas fa-music text-4xl"></i>
155
+ </div>
156
+ <h3 class="text-2xl font-bold mb-4">Création Audio</h3>
157
+ <p class="mb-4">Composition et production musicale sur mesure pour vos projets.</p>
158
+ <ul class="space-y-2 mb-6">
159
+ <li class="flex items-start">
160
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
161
+ <span>Composition originale</span>
162
+ </li>
163
+ <li class="flex items-start">
164
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
165
+ <span>Sound design</span>
166
+ </li>
167
+ <li class="flex items-start">
168
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
169
+ <span>Jingles et identités sonores</span>
170
+ </li>
171
+ </ul>
172
+ <div class="text-yellow-500 font-medium">Sur devis</div>
173
+ </div>
174
+
175
+ <!-- Traitement audio -->
176
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300">
177
+ <div class="text-yellow-500 mb-4">
178
+ <i class="fas fa-microphone-alt text-4xl"></i>
179
+ </div>
180
+ <h3 class="text-2xl font-bold mb-4">Traitement Audio</h3>
181
+ <p class="mb-4">Amélioration et restauration de vos enregistrements.</p>
182
+ <ul class="space-y-2 mb-6">
183
+ <li class="flex items-start">
184
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
185
+ <span>Nettoyage de pistes</span>
186
+ </li>
187
+ <li class="flex items-start">
188
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
189
+ <span>Correction de problèmes</span>
190
+ </li>
191
+ <li class="flex items-start">
192
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
193
+ <span>Optimisation vocale</span>
194
+ </li>
195
+ </ul>
196
+ <div class="text-yellow-500 font-medium">À partir de CHF 40.- / heure</div>
197
+ </div>
198
+
199
+ <!-- Cours -->
200
+ <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300">
201
+ <div class="text-yellow-500 mb-4">
202
+ <i class="fas fa-chalkboard-teacher text-4xl"></i>
203
+ </div>
204
+ <h3 class="text-2xl font-bold mb-4">Cours Audio</h3>
205
+ <p class="mb-4">Formation personnalisée en production musicale et techniques audio.</p>
206
+ <ul class="space-y-2 mb-6">
207
+ <li class="flex items-start">
208
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
209
+ <span>DAW (Ableton, Logic, Pro Tools)</span>
210
+ </li>
211
+ <li class="flex items-start">
212
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
213
+ <span>Systèmes modulaires</span>
214
+ </li>
215
+ <li class="flex items-start">
216
+ <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
217
+ <span>Hardware analogique</span>
218
+ </li>
219
+ </ul>
220
+ <div class="text-yellow-500 font-medium">CHF 80.- / heure</div>
221
+ </div>
222
+
223
+ <!-- Custom Service -->
224
+ <div class="service-card bg-amber-800 rounded-xl p-8 shadow-lg transition duration-300 border-2 border-dashed border-orange-600 flex flex-col items-center justify-center">
225
+ <div class="text-yellow-500 mb-4">
226
+ <i class="fas fa-lightbulb text-4xl"></i>
227
+ </div>
228
+ <h3 class="text-2xl font-bold mb-4 text-center">Service Personnalisé</h3>
229
+ <p class="mb-6 text-center">Vous avez un projet spécifique? Parlons-en et créons une solution sur mesure.</p>
230
+ <a href="#contact" class="bg-teal-400 hover:bg-teal-500 text-gray-900 font-bold py-2 px-6 rounded-full transition duration-300">
231
+ Nous contacter
232
+ </a>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Portfolio Section -->
239
+ <section id="portfolio" class="py-20 bg-amber-100">
240
+ <div class="container mx-auto px-4">
241
+ <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">PORTFOLIO</h2>
242
+
243
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
244
+ <!-- Audio Player 1 -->
245
+ <div class="audio-player p-6">
246
+ <h3 class="text-xl font-bold mb-4 text-yellow-500">Projet 1 - Mastering</h3>
247
+ <div class="mb-4">
248
+ <div class="flex justify-between text-sm mb-1">
249
+ <span>0:00</span>
250
+ <span>3:45</span>
251
+ </div>
252
+ <div class="w-full bg-gray-700 rounded-full h-2">
253
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 30%"></div>
254
+ </div>
255
+ </div>
256
+ <div class="flex justify-between items-center">
257
+ <button class="text-yellow-500 hover:text-yellow-400 text-2xl">
258
+ <i class="fas fa-step-backward"></i>
259
+ </button>
260
+ <button class="text-yellow-500 hover:text-yellow-400 text-4xl">
261
+ <i class="fas fa-play"></i>
262
+ </button>
263
+ <button class="text-yellow-500 hover:text-yellow-400 text-2xl">
264
+ <i class="fas fa-step-forward"></i>
265
+ </button>
266
+ </div>
267
+ <div class="mt-6">
268
+ <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Audio Player 2 -->
273
+ <div class="audio-player p-6">
274
+ <h3 class="text-xl font-bold mb-4 text-yellow-500">Projet 2 - Mixage</h3>
275
+ <div class="mb-4">
276
+ <div class="flex justify-between text-sm mb-1">
277
+ <span>0:00</span>
278
+ <span>4:22</span>
279
+ </div>
280
+ <div class="w-full bg-gray-700 rounded-full h-2">
281
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
282
+ </div>
283
+ </div>
284
+ <div class="flex justify-between items-center">
285
+ <button class="text-yellow-500 hover:text-yellow-400 text-2xl">
286
+ <i class="fas fa-step-backward"></i>
287
+ </button>
288
+ <button class="text-yellow-500 hover:text-yellow-400 text-4xl">
289
+ <i class="fas fa-play"></i>
290
+ </button>
291
+ <button class="text-yellow-500 hover:text-yellow-400 text-2xl">
292
+ <i class="fas fa-step-forward"></i>
293
+ </button>
294
+ </div>
295
+ <div class="mt-6">
296
+ <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1095455338&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Video Portfolio -->
302
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
303
+ <div>
304
+ <h3 class="text-2xl font-bold mb-6 text-center">Démonstration YouTube</h3>
305
+ <div class="aspect-w-16 aspect-h-9">
306
+ <iframe class="w-full h-64 md:h-80 rounded-lg shadow-xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
307
+ </div>
308
+ </div>
309
+ <div>
310
+ <h3 class="text-2xl font-bold mb-6 text-center">Témoignage Client</h3>
311
+ <div class="aspect-w-16 aspect-h-9">
312
+ <iframe class="w-full h-64 md:h-80 rounded-lg shadow-xl" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Contact Section -->
320
+ <section id="contact" class="py-20 bg-amber-50">
321
+ <div class="container mx-auto px-4">
322
+ <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">CONTACT</h2>
323
+
324
+ <div class="flex flex-col lg:flex-row gap-12">
325
+ <div class="lg:w-1/2">
326
+ <h3 class="text-2xl font-bold mb-6">Envoyez-nous un message</h3>
327
+ <form id="contactForm" class="space-y-6">
328
+ <div>
329
+ <label for="name" class="block mb-2 font-medium">Votre nom</label>
330
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
331
+ </div>
332
+ <div>
333
+ <label for="email" class="block mb-2 font-medium">Votre email</label>
334
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
335
+ </div>
336
+ <div>
337
+ <label for="service" class="block mb-2 font-medium">Service concerné</label>
338
+ <select id="service" name="service" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
339
+ <option value="">Sélectionnez un service</option>
340
+ <option value="mastering">Mastering</option>
341
+ <option value="mixing">Mixage</option>
342
+ <option value="creation">Création audio</option>
343
+ <option value="treatment">Traitement audio</option>
344
+ <option value="courses">Cours</option>
345
+ <option value="other">Autre</option>
346
+ </select>
347
+ </div>
348
+ <div>
349
+ <label for="message" class="block mb-2 font-medium">Votre message</label>
350
+ <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
351
+ </div>
352
+ <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg transition duration-300">
353
+ Envoyer le message <i class="fas fa-paper-plane ml-2"></i>
354
+ </button>
355
+ </form>
356
+ </div>
357
+
358
+ <div class="lg:w-1/2">
359
+ <h3 class="text-2xl font-bold mb-6">Nos coordonnées</h3>
360
+ <div class="space-y-6">
361
+ <div class="flex items-start">
362
+ <div class="text-yellow-500 mr-4 mt-1">
363
+ <i class="fas fa-map-marker-alt text-2xl"></i>
364
+ </div>
365
+ <div>
366
+ <h4 class="font-bold text-lg mb-1">Adresse</h4>
367
+ <p>Rue du Studio 42<br>1000 Lausanne, Suisse</p>
368
+ </div>
369
+ </div>
370
+ <div class="flex items-start">
371
+ <div class="text-yellow-500 mr-4 mt-1">
372
+ <i class="fas fa-envelope text-2xl"></i>
373
+ </div>
374
+ <div>
375
+ <h4 class="font-bold text-lg mb-1">Email</h4>
376
+ <p>contact@nahstudio.ch</p>
377
+ </div>
378
+ </div>
379
+ <div class="flex items-start">
380
+ <div class="text-yellow-500 mr-4 mt-1">
381
+ <i class="fas fa-phone-alt text-2xl"></i>
382
+ </div>
383
+ <div>
384
+ <h4 class="font-bold text-lg mb-1">Téléphone</h4>
385
+ <p>+41 79 123 45 67</p>
386
+ </div>
387
+ </div>
388
+ <div class="flex items-start">
389
+ <div class="text-yellow-500 mr-4 mt-1">
390
+ <i class="fas fa-clock text-2xl"></i>
391
+ </div>
392
+ <div>
393
+ <h4 class="font-bold text-lg mb-1">Horaires</h4>
394
+ <p>Lundi - Vendredi: 10h - 18h<br>Samedi: Sur rendez-vous</p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="mt-12">
400
+ <h4 class="text-xl font-bold mb-4">Suivez-nous</h4>
401
+ <div class="flex space-x-4">
402
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl">
403
+ <i class="fab fa-instagram"></i>
404
+ </a>
405
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl">
406
+ <i class="fab fa-facebook"></i>
407
+ </a>
408
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl">
409
+ <i class="fab fa-soundcloud"></i>
410
+ </a>
411
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl">
412
+ <i class="fab fa-youtube"></i>
413
+ </a>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </section>
420
+
421
+ <!-- Footer -->
422
+ <footer class="bg-teal-100 py-12">
423
+ <div class="container mx-auto px-4">
424
+ <div class="flex flex-col md:flex-row justify-between items-center">
425
+ <div class="mb-6 md:mb-0">
426
+ <div class="flex items-center">
427
+ <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
428
+ <i class="fas fa-headphones text-xl text-gray-900"></i>
429
+ </div>
430
+ <h2 class="text-2xl font-bold text-teal-500">NAHSTUDIO</h2>
431
+ </div>
432
+ <p class="mt-2 text-gray-400">Excellence audio depuis 2023</p>
433
+ </div>
434
+ <div class="text-center md:text-right">
435
+ <p class="text-gray-400 mb-2">© 2023 Nahstudio.ch. Tous droits réservés.</p>
436
+ <div class="flex justify-center md:justify-end space-x-4">
437
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">Mentions légales</a>
438
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">Politique de confidentialité</a>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </footer>
444
+
445
+ <script>
446
+ // Smooth scroll for navigation links
447
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
448
+ anchor.addEventListener('click', function (e) {
449
+ e.preventDefault();
450
+
451
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
452
+ behavior: 'smooth'
453
+ });
454
+
455
+ // Update active nav link
456
+ document.querySelectorAll('.nav-link').forEach(link => {
457
+ link.classList.remove('active');
458
+ });
459
+ this.classList.add('active');
460
+ });
461
+ });
462
+
463
+ // Form submission
464
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
465
+ e.preventDefault();
466
+
467
+ // Get form values
468
+ const name = document.getElementById('name').value;
469
+ const email = document.getElementById('email').value;
470
+ const service = document.getElementById('service').value;
471
+ const message = document.getElementById('message').value;
472
+
473
+ // Here you would normally send the data to a server
474
+ // For demo purposes, we'll just show an alert
475
+ alert(`Merci ${name} pour votre message concernant ${service}! Nous vous répondrons à ${email} dès que possible.`);
476
+
477
+ // Reset form
478
+ this.reset();
479
+ });
480
+
481
+ // Update active nav link on scroll
482
+ window.addEventListener('scroll', function() {
483
+ const sections = document.querySelectorAll('section');
484
+ let current = '';
485
+
486
+ sections.forEach(section => {
487
+ const sectionTop = section.offsetTop;
488
+ const sectionHeight = section.clientHeight;
489
+ if (pageYOffset >= (sectionTop - 300)) {
490
+ current = section.getAttribute('id');
491
+ }
492
+ });
493
+
494
+ document.querySelectorAll('.nav-link').forEach(link => {
495
+ link.classList.remove('active');
496
+ if (link.getAttribute('href') === `#${current}`) {
497
+ link.classList.add('active');
498
+ }
499
+ });
500
+ });
501
+
502
+ // Simple audio player functionality
503
+ document.querySelectorAll('.audio-player button.fa-play').forEach(button => {
504
+ button.addEventListener('click', function() {
505
+ const icon = this.querySelector('i');
506
+ if (icon.classList.contains('fa-play')) {
507
+ icon.classList.remove('fa-play');
508
+ icon.classList.add('fa-pause');
509
+ } else {
510
+ icon.classList.remove('fa-pause');
511
+ icon.classList.add('fa-play');
512
+ }
513
+ });
514
+ });
515
+ </script>
516
+ <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=nahsteoner/nahstudio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
517
+ </html>