Hugging Face's logo

Spaces:
aashishjha
/
kamen-website
Running

App Files Community
aashishjha commited on
Commit
b9d5ebc
·
verified ·
1 Parent(s): 4929d17

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +502 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kamen Website
3
- emoji: 👁
4
  colorFrom: pink
5
- colorTo: green
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: kamen-website
3
+ emoji: 🐳
4
  colorFrom: pink
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,502 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kamen Entertainments | Premium Music Studio</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ color: #1e293b;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
20
+ }
21
+
22
+ .audio-player {
23
+ background: rgba(255, 255, 255, 0.1);
24
+ backdrop-filter: blur(10px);
25
+ border: 1px solid rgba(255, 255, 255, 0.2);
26
+ }
27
+
28
+ .audio-wave {
29
+ height: 40px;
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ width: 100%;
34
+ }
35
+
36
+ .audio-wave div {
37
+ height: 100%;
38
+ width: 3px;
39
+ background: #3b82f6;
40
+ border-radius: 5px;
41
+ animation: wave 1.5s infinite ease-in-out;
42
+ }
43
+
44
+ @keyframes wave {
45
+ 0%, 100% {
46
+ transform: scaleY(0.3);
47
+ }
48
+ 50% {
49
+ transform: scaleY(1);
50
+ }
51
+ }
52
+
53
+ .audio-wave div:nth-child(1) { animation-delay: 0.1s; }
54
+ .audio-wave div:nth-child(2) { animation-delay: 0.2s; }
55
+ .audio-wave div:nth-child(3) { animation-delay: 0.3s; }
56
+ .audio-wave div:nth-child(4) { animation-delay: 0.4s; }
57
+ .audio-wave div:nth-child(5) { animation-delay: 0.5s; }
58
+ .audio-wave div:nth-child(6) { animation-delay: 0.6s; }
59
+ .audio-wave div:nth-child(7) { animation-delay: 0.7s; }
60
+ .audio-wave div:nth-child(8) { animation-delay: 0.8s; }
61
+
62
+ .portfolio-item {
63
+ transition: all 0.3s ease;
64
+ }
65
+
66
+ .portfolio-item:hover {
67
+ transform: translateY(-5px);
68
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
69
+ }
70
+
71
+ .nav-link {
72
+ position: relative;
73
+ }
74
+
75
+ .nav-link::after {
76
+ content: '';
77
+ position: absolute;
78
+ width: 0;
79
+ height: 2px;
80
+ bottom: -2px;
81
+ left: 0;
82
+ background-color: #3b82f6;
83
+ transition: width 0.3s ease;
84
+ }
85
+
86
+ .nav-link:hover::after {
87
+ width: 100%;
88
+ }
89
+
90
+ .progress-bar {
91
+ height: 4px;
92
+ background-color: #e2e8f0;
93
+ border-radius: 2px;
94
+ }
95
+
96
+ .progress-fill {
97
+ height: 100%;
98
+ background-color: #3b82f6;
99
+ border-radius: 2px;
100
+ width: 0%;
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <!-- Navigation -->
106
+ <nav class="bg-white shadow-sm fixed w-full z-10">
107
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
108
+ <div class="flex justify-between h-16">
109
+ <div class="flex items-center">
110
+ <div class="flex-shrink-0 flex items-center">
111
+ <span class="text-2xl font-bold text-blue-800">KAMEN</span>
112
+ <span class="text-2xl font-light text-blue-500">ENTERTAINMENTS</span>
113
+ </div>
114
+ </div>
115
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
116
+ <a href="#home" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a>
117
+ <a href="#services" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a>
118
+ <a href="#portfolio" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Portfolio</a>
119
+ <a href="#studio" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Studio</a>
120
+ <a href="#team" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Team</a>
121
+ <a href="#contact" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
122
+ </div>
123
+ <div class="-mr-2 flex items-center md:hidden">
124
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-800 hover:text-blue-600 focus:outline-none">
125
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
126
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
127
+ </svg>
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Mobile menu -->
134
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
135
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
136
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Home</a>
137
+ <a href="#services" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Services</a>
138
+ <a href="#portfolio" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Portfolio</a>
139
+ <a href="#studio" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Studio</a>
140
+ <a href="#team" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Team</a>
141
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Contact</a>
142
+ </div>
143
+ </div>
144
+ </nav>
145
+
146
+ <!-- Hero Section -->
147
+ <section id="home" class="gradient-bg text-white pt-24 pb-20 md:pt-32 md:pb-28">
148
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
149
+ <div class="md:flex md:items-center md:justify-between">
150
+ <div class="md:w-1/2 mb-10 md:mb-0">
151
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Crafting Exceptional <span class="text-blue-200">Sound Experiences</span></h1>
152
+ <p class="text-lg md:text-xl text-blue-100 mb-8">Kamen Entertainments delivers premium audio production, mixing, mastering, and sound design services for artists and creators worldwide.</p>
153
+ <div class="flex space-x-4">
154
+ <a href="#contact" class="bg-white text-blue-800 hover:bg-blue-100 px-6 py-3 rounded-full font-medium transition duration-300">Get Started</a>
155
+ <a href="#portfolio" class="border-2 border-white text-white hover:bg-white hover:text-blue-800 px-6 py-3 rounded-full font-medium transition duration-300">Our Work</a>
156
+ </div>
157
+ </div>
158
+ <div class="md:w-1/2 relative">
159
+ <div class="relative">
160
+ <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" alt="Music Studio" class="rounded-xl shadow-2xl w-full h-auto">
161
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-64">
162
+ <div class="flex items-center mb-2">
163
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
164
+ <i class="fas fa-headphones text-blue-600"></i>
165
+ </div>
166
+ <div>
167
+ <p class="text-xs text-blue-500">Currently Working On</p>
168
+ <p class="text-sm font-medium text-blue-900">New Album Mix</p>
169
+ </div>
170
+ </div>
171
+ <div class="progress-bar">
172
+ <div class="progress-fill" style="width: 65%;"></div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Services Section -->
182
+ <section id="services" class="py-20 bg-white">
183
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
184
+ <div class="text-center mb-16">
185
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our <span class="text-blue-600">Services</span></h2>
186
+ <p class="text-lg text-blue-800 max-w-3xl mx-auto">We offer a comprehensive range of audio production services tailored to meet your creative needs.</p>
187
+ </div>
188
+
189
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
190
+ <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
191
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
192
+ <i class="fas fa-microphone text-blue-600 text-2xl"></i>
193
+ </div>
194
+ <h3 class="text-xl font-bold text-blue-900 mb-3">Recording</h3>
195
+ <p class="text-blue-800">Professional recording sessions in our state-of-the-art studio with premium equipment and acoustics.</p>
196
+ </div>
197
+
198
+ <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
199
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
200
+ <i class="fas fa-sliders-h text-blue-600 text-2xl"></i>
201
+ </div>
202
+ <h3 class="text-xl font-bold text-blue-900 mb-3">Mixing</h3>
203
+ <p class="text-blue-800">Expert audio mixing to balance and enhance all elements of your track for optimal sound quality.</p>
204
+ </div>
205
+
206
+ <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
207
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
208
+ <i class="fas fa-volume-up text-blue-600 text-2xl"></i>
209
+ </div>
210
+ <h3 class="text-xl font-bold text-blue-900 mb-3">Mastering</h3>
211
+ <p class="text-blue-800">Final polish for your tracks ensuring they sound perfect on all playback systems and platforms.</p>
212
+ </div>
213
+
214
+ <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
215
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
216
+ <i class="fas fa-music text-blue-600 text-2xl"></i>
217
+ </div>
218
+ <h3 class="text-xl font-bold text-blue-900 mb-3">Sound Design</h3>
219
+ <p class="text-blue-800">Custom sound effects and audio elements for films, games, and multimedia projects.</p>
220
+ </div>
221
+
222
+ <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
223
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
224
+ <i class="fas fa-film text-blue-600 text-2xl"></i>
225
+ </div>
226
+ <h3 class="text-xl font-bold text-blue-900 mb-3">Audio Post-Production</h3>
227
+ <p class="text-blue-800">Complete audio post-production services for film, TV, and video content.</p>
228
+ </div>
229
+
230
+ <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
231
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
232
+ <i class="fas fa-podcast text-blue-600 text-2xl"></i>
233
+ </div>
234
+ <h3 class="text-xl font-bold text-blue-900 mb-3">Podcast Production</h3>
235
+ <p class="text-blue-800">Full-service podcast production including recording, editing, mixing, and publishing.</p>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Portfolio Section -->
242
+ <section id="portfolio" class="py-20 bg-blue-50">
243
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
244
+ <div class="text-center mb-16">
245
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our <span class="text-blue-600">Portfolio</span></h2>
246
+ <p class="text-lg text-blue-800 max-w-3xl mx-auto">Explore our recent projects and hear the difference professional audio production makes.</p>
247
+ </div>
248
+
249
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
250
+ <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md">
251
+ <div class="relative">
252
+ <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Music Production" class="w-full h-64 object-cover">
253
+ <div class="absolute inset-0 bg-blue-900 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
254
+ <button class="bg-white text-blue-800 rounded-full w-16 h-16 flex items-center justify-center">
255
+ <i class="fas fa-play text-2xl"></i>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ <div class="p-6">
260
+ <h3 class="text-xl font-bold text-blue-900 mb-2">Electronic Dance Album</h3>
261
+ <p class="text-blue-800 mb-4">Full production, mixing and mastering for an upcoming EDM artist.</p>
262
+
263
+ <!-- Audio Player -->
264
+ <div class="audio-player rounded-lg p-4 mb-4">
265
+ <div class="flex items-center justify-between mb-3">
266
+ <div>
267
+ <p class="text-sm font-medium text-white">Before Mixing</p>
268
+ <p class="text-xs text-blue-200">Demo Version</p>
269
+ </div>
270
+ <button class="text-white hover:text-blue-200">
271
+ <i class="fas fa-play"></i>
272
+ </button>
273
+ </div>
274
+ <div class="audio-wave mb-2">
275
+ <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
276
+ </div>
277
+ <div class="flex justify-between text-xs text-blue-200">
278
+ <span>0:45</span>
279
+ <span>3:22</span>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="audio-player rounded-lg p-4 bg-blue-800">
284
+ <div class="flex items-center justify-between mb-3">
285
+ <div>
286
+ <p class="text-sm font-medium text-white">After Mixing</p>
287
+ <p class="text-xs text-blue-200">Final Master</p>
288
+ </div>
289
+ <button class="text-white hover:text-blue-200">
290
+ <i class="fas fa-play"></i>
291
+ </button>
292
+ </div>
293
+ <div class="audio-wave mb-2">
294
+ <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
295
+ </div>
296
+ <div class="flex justify-between text-xs text-blue-200">
297
+ <span>0:45</span>
298
+ <span>3:22</span>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md">
305
+ <div class="relative">
306
+ <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hip Hop Recording" class="w-full h-64 object-cover">
307
+ <div class="absolute inset-0 bg-blue-900 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
308
+ <button class="bg-white text-blue-800 rounded-full w-16 h-16 flex items-center justify-center">
309
+ <i class="fas fa-play text-2xl"></i>
310
+ </button>
311
+ </div>
312
+ </div>
313
+ <div class="p-6">
314
+ <h3 class="text-xl font-bold text-blue-900 mb-2">Hip Hop Single</h3>
315
+ <p class="text-blue-800 mb-4">Recording and mixing for an independent hip hop artist's latest single.</p>
316
+
317
+ <!-- Audio Player -->
318
+ <div class="audio-player rounded-lg p-4 mb-4">
319
+ <div class="flex items-center justify-between mb-3">
320
+ <div>
321
+ <p class="text-sm font-medium text-white">Before Mixing</p>
322
+ <p class="text-xs text-blue-200">Demo Version</p>
323
+ </div>
324
+ <button class="text-white hover:text-blue-200">
325
+ <i class="fas fa-play"></i>
326
+ </button>
327
+ </div>
328
+ <div class="audio-wave mb-2">
329
+ <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
330
+ </div>
331
+ <div class="flex justify-between text-xs text-blue-200">
332
+ <span>0:45</span>
333
+ <span>3:22</span>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="audio-player rounded-lg p-4 bg-blue-800">
338
+ <div class="flex items-center justify-between mb-3">
339
+ <div>
340
+ <p class="text-sm font-medium text-white">After Mixing</p>
341
+ <p class="text-xs text-blue-200">Final Master</p>
342
+ </div>
343
+ <button class="text-white hover:text-blue-200">
344
+ <i class="fas fa-play"></i>
345
+ </button>
346
+ </div>
347
+ <div class="audio-wave mb-2">
348
+ <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
349
+ </div>
350
+ <div class="flex justify-between text-xs text-blue-200">
351
+ <span>0:45</span>
352
+ <span>3:22</span>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="text-center">
360
+ <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 rounded-full font-medium transition duration-300">View All Projects</a>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Studio Section -->
366
+ <section id="studio" class="py-20 bg-white">
367
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
368
+ <div class="text-center mb-16">
369
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our <span class="text-blue-600">Studio</span></h2>
370
+ <p class="text-lg text-blue-800 max-w-3xl mx-auto">A creative sanctuary equipped with the finest tools for audio production.</p>
371
+ </div>
372
+
373
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
374
+ <div>
375
+ <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Studio Control Room" class="rounded-xl shadow-xl w-full">
376
+ </div>
377
+ <div>
378
+ <h3 class="text-2xl font-bold text-blue-900 mb-6">World-Class Facilities</h3>
379
+ <p class="text-blue-800 mb-6">Our studio features acoustically treated rooms, high-end analog and digital equipment, and a comfortable creative environment designed to bring out the best in your music.</p>
380
+
381
+ <div class="grid grid-cols-2 gap-6 mb-8">
382
+ <div class="flex items-start">
383
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
384
+ <i class="fas fa-volume-off text-blue-600"></i>
385
+ </div>
386
+ <div>
387
+ <h4 class="font-bold text-blue-900 mb-1">Sound Isolation</h4>
388
+ <p class="text-sm text-blue-800">Premium acoustic treatment for optimal sound.</p>
389
+ </div>
390
+ </div>
391
+ <div class="flex items-start">
392
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
393
+ <i class="fas fa-microphone-alt text-blue-600"></i>
394
+ </div>
395
+ <div>
396
+ <h4 class="font-bold text-blue-900 mb-1">Premium Mics</h4>
397
+ <p class="text-sm text-blue-800">Selection of industry-standard microphones.</p>
398
+ </div>
399
+ </div>
400
+ <div class="flex items-start">
401
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
402
+ <i class="fas fa-sliders-h text-blue-600"></i>
403
+ </div>
404
+ <div>
405
+ <h4 class="font-bold text-blue-900 mb-1">Analog Gear</h4>
406
+ <p class="text-sm text-blue-800">Vintage and modern outboard equipment.</p>
407
+ </div>
408
+ </div>
409
+ <div class="flex items-start">
410
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
411
+ <i class="fas fa-headphones text-blue-600"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-bold text-blue-900 mb-1">Monitoring</h4>
415
+ <p class="text-sm text-blue-800">High-end studio monitors for accurate playback.</p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition duration-300">Book Studio Time</a>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <!-- Team Section -->
427
+ <section id="team" class="py-20 bg-blue-50">
428
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
429
+ <div class="text-center mb-16">
430
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Meet The <span class="text-blue-600">Team</span></h2>
431
+ <p class="text-lg text-blue-800 max-w-3xl mx-auto">Our team of experienced audio professionals is dedicated to bringing your vision to life.</p>
432
+ </div>
433
+
434
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
435
+ <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6">
436
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100">
437
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Kamen" class="w-full h-full object-cover">
438
+ </div>
439
+ <h3 class="text-xl font-bold text-blue-900 mb-1">Alex Kamen</h3>
440
+ <p class="text-blue-600 mb-4">Founder & Lead Engineer</p>
441
+ <p class="text-blue-800 text-sm">With over 15 years in the industry, Alex brings technical expertise and creative vision to every project.</p>
442
+ <div class="flex justify-center space-x-3 mt-4">
443
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
444
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
445
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6">
450
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100">
451
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Miller" class="w-full h-full object-cover">
452
+ </div>
453
+ <h3 class="text-xl font-bold text-blue-900 mb-1">Sarah Miller</h3>
454
+ <p class="text-blue-600 mb-4">Mixing Engineer</p>
455
+ <p class="text-blue-800 text-sm">Specializing in modern pop and electronic music, Sarah has a keen ear for detail and balance.</p>
456
+ <div class="flex justify-center space-x-3 mt-4">
457
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
458
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
459
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6">
464
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100">
465
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="James Wilson" class="w-full h-full object-cover">
466
+ </div>
467
+ <h3 class="text-xl font-bold text-blue-900 mb-1">James Wilson</h3>
468
+ <p class="text-blue-600 mb-4">Mastering Engineer</p>
469
+ <p class="text-blue-800 text-sm">James ensures your music sounds its best across all platforms with his precise mastering techniques.</p>
470
+ <div class="flex justify-center space-x-3 mt-4">
471
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
472
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
473
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6">
478
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100">
479
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-full h-full object-cover">
480
+ </div>
481
+ <h3 class="text-xl font-bold text-blue-900 mb-1">Emma Rodriguez</h3>
482
+ <p class="text-blue-600 mb-4">Producer & Composer</p>
483
+ <p class="text-blue-800 text-sm">Emma brings musical expertise to help develop your sound and create compelling arrangements.</p>
484
+ <div class="flex justify-center space-x-3 mt-4">
485
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
486
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
487
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </section>
493
+
494
+ <!-- Testimonials Section -->
495
+ <section class="py-20 bg-white">
496
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
497
+ <div class="text-center mb-16">
498
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Client <span class="text-blue-600">Testimonials</span></h2>
499
+ <p class="text-lg text-blue-800 max-w-3xl mx-auto">Hear what artists and creators say about working with Kamen Entertainments.</p>
500
+ </div>
501
+
502
+ </html>