Hugging Face's logo

Spaces:
cando881
/
unbox
Running

App Files Community
cando881 commited on
Commit
300e5fb
·
verified ·
1 Parent(s): a405695

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +590 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Unbox
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: pink
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: unbox
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
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,590 @@
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>Coastal Audiophile | Luxury Audio Equipment & Listening Experiences</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, rgba(2,0,36,0.8) 0%, rgba(9,9,121,0.7) 35%, rgba(0,212,255,0.6) 100%);
12
+ }
13
+ .equipment-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .listening-room {
18
+ background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
19
+ background-size: cover;
20
+ background-position: center;
21
+ background-attachment: fixed;
22
+ }
23
+ .overlay {
24
+ background-color: rgba(0, 0, 0, 0.6);
25
+ }
26
+ .wave-divider {
27
+ position: absolute;
28
+ bottom: 0;
29
+ left: 0;
30
+ width: 100%;
31
+ overflow: hidden;
32
+ line-height: 0;
33
+ }
34
+ .wave-divider svg {
35
+ position: relative;
36
+ display: block;
37
+ width: calc(100% + 1.3px);
38
+ height: 150px;
39
+ }
40
+ .wave-divider .shape-fill {
41
+ fill: #FFFFFF;
42
+ }
43
+ .brand-logo {
44
+ filter: grayscale(100%) brightness(0.5);
45
+ transition: all 0.3s ease;
46
+ }
47
+ .brand-logo:hover {
48
+ filter: none;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="font-sans antialiased text-gray-800">
53
+ <!-- Navigation -->
54
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56
+ <div class="flex justify-between h-16">
57
+ <div class="flex items-center">
58
+ <div class="flex-shrink-0 flex items-center">
59
+ <i class="fas fa-headphones text-blue-600 text-2xl mr-2"></i>
60
+ <span class="text-xl font-bold text-blue-600">Coastal Audiophile</span>
61
+ </div>
62
+ </div>
63
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
64
+ <a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 text-sm font-medium">Home</a>
65
+ <a href="#equipment" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Equipment</a>
66
+ <a href="#experience" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Listening Experience</a>
67
+ <a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">About Us</a>
68
+ <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
69
+ </div>
70
+ <div class="flex items-center">
71
+ <button class="md:hidden text-gray-700 hover:text-blue-600">
72
+ <i class="fas fa-bars text-xl"></i>
73
+ </button>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </nav>
78
+
79
+ <!-- Hero Section -->
80
+ <section id="home" class="relative hero-gradient h-screen flex items-center justify-center text-white">
81
+ <div class="absolute inset-0 bg-black opacity-40"></div>
82
+ <div class="relative z-10 text-center px-4">
83
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Elevate Your Listening Experience</h1>
84
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Exclusive access to demo models from top brands at unbeatable prices, paired with our legendary beachside villa listening room.</p>
85
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
86
+ <a href="#equipment" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Shop Equipment</a>
87
+ <a href="#experience" class="bg-transparent hover:bg-white hover:text-blue-600 text-white font-bold py-3 px-8 border-2 border-white rounded-full transition duration-300">Book Listening Session</a>
88
+ </div>
89
+ </div>
90
+ <div class="wave-divider">
91
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
92
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
93
+ </svg>
94
+ </div>
95
+ </section>
96
+
97
+ <!-- Featured Brands -->
98
+ <section class="py-16 bg-gray-50">
99
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
100
+ <h2 class="text-3xl font-bold text-center mb-12">Trusted by the World's Finest Audio Brands</h2>
101
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
102
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Bowers_%26_Wilkins_logo.svg/1200px-Bowers_%26_Wilkins_logo.svg.png" alt="Bowers & Wilkins" class="h-12 brand-logo mx-auto">
103
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/McIntosh_Laboratory_Logo.svg/1200px-McIntosh_Laboratory_Logo.svg.png" alt="McIntosh" class="h-12 brand-logo mx-auto">
104
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Sennheiser_logo_black.svg/1200px-Sennheiser_logo_black.svg.png" alt="Sennheiser" class="h-12 brand-logo mx-auto">
105
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Sony_Music_logo.svg/1200px-Sony_Music_logo.svg.png" alt="Sony" class="h-12 brand-logo mx-auto">
106
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Focal_logo.svg/1200px-Focal_logo.svg.png" alt="Focal" class="h-12 brand-logo mx-auto">
107
+ </div>
108
+ </div>
109
+ </section>
110
+
111
+ <!-- Equipment Section -->
112
+ <section id="equipment" class="py-20 bg-white">
113
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="text-center mb-16">
115
+ <h2 class="text-3xl font-bold mb-4">Our Exclusive Inventory</h2>
116
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Carefully curated demo models and open-box items from the world's finest audio manufacturers, offered at prices that can't be matched.</p>
117
+ </div>
118
+
119
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
120
+ <!-- Equipment Card 1 -->
121
+ <div class="bg-white rounded-xl shadow-md overflow-hidden equipment-card transition duration-300">
122
+ <div class="h-64 bg-gray-200 flex items-center justify-center">
123
+ <i class="fas fa-headphones text-6xl text-gray-400"></i>
124
+ </div>
125
+ <div class="p-6">
126
+ <div class="flex justify-between items-start">
127
+ <div>
128
+ <h3 class="text-xl font-bold">Bowers & Wilkins 800 D4</h3>
129
+ <p class="text-gray-600">Signature Diamond Series</p>
130
+ </div>
131
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Demo Model</span>
132
+ </div>
133
+ <div class="mt-4">
134
+ <p class="text-gray-700">Our flagship floorstanding loudspeaker, delivering breathtaking clarity and depth that must be heard to be believed.</p>
135
+ </div>
136
+ <div class="mt-6 flex justify-between items-center">
137
+ <div>
138
+ <span class="text-gray-500 line-through text-sm">$36,000</span>
139
+ <span class="text-2xl font-bold text-blue-600 ml-2">$28,750</span>
140
+ </div>
141
+ <button class="text-blue-600 hover:text-blue-800 font-medium">View Details</button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Equipment Card 2 -->
147
+ <div class="bg-white rounded-xl shadow-md overflow-hidden equipment-card transition duration-300">
148
+ <div class="h-64 bg-gray-200 flex items-center justify-center">
149
+ <i class="fas fa-volume-up text-6xl text-gray-400"></i>
150
+ </div>
151
+ <div class="p-6">
152
+ <div class="flex justify-between items-start">
153
+ <div>
154
+ <h3 class="text-xl font-bold">McIntosh MC462</h3>
155
+ <p class="text-gray-600">Solid State Amplifier</p>
156
+ </div>
157
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Open Box</span>
158
+ </div>
159
+ <div class="mt-4">
160
+ <p class="text-gray-700">450 Watts per channel of pure McIntosh power with Autoformer technology for perfect speaker matching.</p>
161
+ </div>
162
+ <div class="mt-6 flex justify-between items-center">
163
+ <div>
164
+ <span class="text-gray-500 line-through text-sm">$11,000</span>
165
+ <span class="text-2xl font-bold text-blue-600 ml-2">$8,999</span>
166
+ </div>
167
+ <button class="text-blue-600 hover:text-blue-800 font-medium">View Details</button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Equipment Card 3 -->
173
+ <div class="bg-white rounded-xl shadow-md overflow-hidden equipment-card transition duration-300">
174
+ <div class="h-64 bg-gray-200 flex items-center justify-center">
175
+ <i class="fas fa-music text-6xl text-gray-400"></i>
176
+ </div>
177
+ <div class="p-6">
178
+ <div class="flex justify-between items-start">
179
+ <div>
180
+ <h3 class="text-xl font-bold">dCS Bartók</h3>
181
+ <p class="text-gray-600">Apex DAC/Headphone Amp</p>
182
+ </div>
183
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Demo Model</span>
184
+ </div>
185
+ <div class="mt-4">
186
+ <p class="text-gray-700">Reference-class DAC with integrated headphone amplifier featuring the latest Ring DAC APEX technology.</p>
187
+ </div>
188
+ <div class="mt-6 flex justify-between items-center">
189
+ <div>
190
+ <span class="text-gray-500 line-through text-sm">$18,500</span>
191
+ <span class="text-2xl font-bold text-blue-600 ml-2">$14,250</span>
192
+ </div>
193
+ <button class="text-blue-600 hover:text-blue-800 font-medium">View Details</button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="text-center mt-12">
200
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
201
+ View Full Inventory
202
+ <i class="fas fa-arrow-right ml-2"></i>
203
+ </a>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Listening Experience Section -->
209
+ <section id="experience" class="listening-room py-20 relative">
210
+ <div class="overlay absolute inset-0"></div>
211
+ <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
213
+ <div class="mb-12 lg:mb-0">
214
+ <h2 class="text-3xl font-bold text-white mb-6">The Ultimate Listening Experience</h2>
215
+ <p class="text-xl text-gray-200 mb-8">Our beachside villa listening room is acoustically perfected to showcase the full potential of high-end audio equipment. Experience your favorite music like never before.</p>
216
+
217
+ <div class="space-y-6">
218
+ <div class="flex">
219
+ <div class="flex-shrink-0">
220
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
221
+ <i class="fas fa-wave-square"></i>
222
+ </div>
223
+ </div>
224
+ <div class="ml-4">
225
+ <h3 class="text-lg font-medium text-white">Acoustic Perfection</h3>
226
+ <p class="mt-2 text-gray-200">Room designed by world-renowned acousticians with custom treatments and ideal speaker placement.</p>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="flex">
231
+ <div class="flex-shrink-0">
232
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
233
+ <i class="fas fa-sliders-h"></i>
234
+ </div>
235
+ </div>
236
+ <div class="ml-4">
237
+ <h3 class="text-lg font-medium text-white">Multiple Systems</h3>
238
+ <p class="mt-2 text-gray-200">Compare different high-end systems to find your perfect sound signature.</p>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="flex">
243
+ <div class="flex-shrink-0">
244
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
245
+ <i class="fas fa-umbrella-beach"></i>
246
+ </div>
247
+ </div>
248
+ <div class="ml-4">
249
+ <h3 class="text-lg font-medium text-white">Beachside Setting</h3>
250
+ <p class="mt-2 text-gray-200">Relax in our luxurious Malibu villa with ocean views and curated refreshments.</p>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
257
+ <div class="p-8">
258
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Book Your Private Session</h3>
259
+ <form>
260
+ <div class="mb-6">
261
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
262
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
263
+ </div>
264
+ <div class="mb-6">
265
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
266
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
267
+ </div>
268
+ <div class="mb-6">
269
+ <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Preferred Date</label>
270
+ <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
271
+ </div>
272
+ <div class="mb-6">
273
+ <label for="system" class="block text-sm font-medium text-gray-700 mb-1">System Preference</label>
274
+ <select id="system" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
275
+ <option>Full Range Speakers</option>
276
+ <option>Bookshelf System</option>
277
+ <option>Headphone Station</option>
278
+ <option>Surround Sound</option>
279
+ <option>Let Us Choose</option>
280
+ </select>
281
+ </div>
282
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Reserve Now</button>
283
+ </form>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Testimonials -->
291
+ <section class="py-20 bg-gray-50">
292
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
293
+ <div class="text-center mb-16">
294
+ <h2 class="text-3xl font-bold mb-4">What Our Clients Say</h2>
295
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it - hear from audiophiles who've experienced the Coastal difference.</p>
296
+ </div>
297
+
298
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
299
+ <!-- Testimonial 1 -->
300
+ <div class="bg-white p-8 rounded-xl shadow-md">
301
+ <div class="flex items-center mb-4">
302
+ <div class="flex-shrink-0">
303
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="James Wilson">
304
+ </div>
305
+ <div class="ml-4">
306
+ <h4 class="text-lg font-medium">James Wilson</h4>
307
+ <p class="text-gray-600">Recording Engineer</p>
308
+ </div>
309
+ </div>
310
+ <p class="text-gray-700 italic">"The listening room at Coastal Audiophile is unlike anything I've experienced. The combination of world-class equipment in an acoustically perfect space with ocean views is simply magical. I heard details in familiar recordings I never knew existed."</p>
311
+ <div class="mt-4 flex text-yellow-400">
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Testimonial 2 -->
321
+ <div class="bg-white p-8 rounded-xl shadow-md">
322
+ <div class="flex items-center mb-4">
323
+ <div class="flex-shrink-0">
324
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen">
325
+ </div>
326
+ <div class="ml-4">
327
+ <h4 class="text-lg font-medium">Sarah Chen</h4>
328
+ <p class="text-gray-600">Music Producer</p>
329
+ </div>
330
+ </div>
331
+ <p class="text-gray-700 italic">"I was skeptical about buying demo equipment until I discovered Coastal. Their prices on open-box McIntosh gear were unbeatable, and the equipment was in pristine condition. The personal attention and after-sale support have been exceptional."</p>
332
+ <div class="mt-4 flex text-yellow-400">
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Testimonial 3 -->
342
+ <div class="bg-white p-8 rounded-xl shadow-md">
343
+ <div class="flex items-center mb-4">
344
+ <div class="flex-shrink-0">
345
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael Rodriguez">
346
+ </div>
347
+ <div class="ml-4">
348
+ <h4 class="text-lg font-medium">Michael Rodriguez</h4>
349
+ <p class="text-gray-600">Jazz Enthusiast</p>
350
+ </div>
351
+ </div>
352
+ <p class="text-gray-700 italic">"As someone who's visited high-end audio shops worldwide, Coastal stands apart. Their unique access to manufacturer demo models means prices that are 20-30% below retail for essentially new equipment. The beachside villa experience is worth the trip alone."</p>
353
+ <div class="mt-4 flex text-yellow-400">
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star-half-alt"></i>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- About Us -->
366
+ <section id="about" class="py-20 bg-white">
367
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
368
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
369
+ <div class="mb-12 lg:mb-0">
370
+ <img src="https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our listening room" class="rounded-xl shadow-xl w-full">
371
+ </div>
372
+ <div>
373
+ <h2 class="text-3xl font-bold mb-6">Our Story</h2>
374
+ <p class="text-lg text-gray-700 mb-6">Founded by audio engineers with decades of experience in high-end audio manufacturing, Coastal Audiophile was born from a simple idea: make world-class audio equipment accessible to true enthusiasts without compromising on quality or experience.</p>
375
+ <p class="text-lg text-gray-700 mb-6">Our unique relationships with manufacturers give us exclusive access to demo models, trade show equipment, and carefully inspected open-box items that we can offer at significant discounts while maintaining full warranties.</p>
376
+ <p class="text-lg text-gray-700 mb-8">The beachside villa listening room was designed to be the ultimate environment for evaluating equipment and enjoying music. Every acoustic detail has been considered, from room dimensions to specialized treatments, creating a neutral canvas that reveals the true character of any system.</p>
377
+ <a href="#contact" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
378
+ Get in Touch
379
+ <i class="fas fa-arrow-right ml-2"></i>
380
+ </a>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Contact Section -->
387
+ <section id="contact" class="py-20 bg-gray-50">
388
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
389
+ <div class="text-center mb-16">
390
+ <h2 class="text-3xl font-bold mb-4">Contact Us</h2>
391
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Have questions about our equipment or want to book a listening session? Reach out to our team.</p>
392
+ </div>
393
+
394
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16">
395
+ <div class="mb-12 lg:mb-0">
396
+ <div class="bg-white p-8 rounded-xl shadow-md">
397
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
398
+ <form>
399
+ <div class="mb-6">
400
+ <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
401
+ <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
402
+ </div>
403
+ <div class="mb-6">
404
+ <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
405
+ <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
406
+ </div>
407
+ <div class="mb-6">
408
+ <label for="contact-subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
409
+ <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
410
+ </div>
411
+ <div class="mb-6">
412
+ <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
413
+ <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
414
+ </div>
415
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Send Message</button>
416
+ </form>
417
+ </div>
418
+ </div>
419
+
420
+ <div>
421
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
422
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Visit Us</h3>
423
+ <div class="space-y-6">
424
+ <div class="flex">
425
+ <div class="flex-shrink-0">
426
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
427
+ <i class="fas fa-map-marker-alt"></i>
428
+ </div>
429
+ </div>
430
+ <div class="ml-4">
431
+ <h3 class="text-lg font-medium">Location</h3>
432
+ <p class="mt-2 text-gray-700">2345 Pacific Coast Highway<br>Malibu, CA 90265</p>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="flex">
437
+ <div class="flex-shrink-0">
438
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
439
+ <i class="fas fa-clock"></i>
440
+ </div>
441
+ </div>
442
+ <div class="ml-4">
443
+ <h3 class="text-lg font-medium">Hours</h3>
444
+ <p class="mt-2 text-gray-700">By appointment only<br>Tuesday - Sunday: 10am - 6pm</p>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="flex">
449
+ <div class="flex-shrink-0">
450
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
451
+ <i class="fas fa-phone-alt"></i>
452
+ </div>
453
+ </div>
454
+ <div class="ml-4">
455
+ <h3 class="text-lg font-medium">Contact</h3>
456
+ <p class="mt-2 text-gray-700">(310) 555-1212<br>info@coastalaudiophile.com</p>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="mt-8">
462
+ <h4 class="text-lg font-medium mb-4">Follow Us</h4>
463
+ <div class="flex space-x-4">
464
+ <a href="#" class="text-gray-600 hover:text-blue-600">
465
+ <i class="fab fa-facebook-f text-xl"></i>
466
+ </a>
467
+ <a href="#" class="text-gray-600 hover:text-blue-600">
468
+ <i class="fab fa-instagram text-xl"></i>
469
+ </a>
470
+ <a href="#" class="text-gray-600 hover:text-blue-600">
471
+ <i class="fab fa-twitter text-xl"></i>
472
+ </a>
473
+ <a href="#" class="text-gray-600 hover:text-blue-600">
474
+ <i class="fab fa-youtube text-xl"></i>
475
+ </a>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- Newsletter -->
485
+ <section class="py-16 bg-blue-600 text-white">
486
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
487
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
488
+ <div class="mb-8 lg:mb-0">
489
+ <h3 class="text-2xl font-bold mb-2">Join Our Audiophile Community</h3>
490
+ <p class="text-blue-100">Get exclusive access to new inventory arrivals, special pricing, and invitations to private listening events.</p>
491
+ </div>
492
+ <div>
493
+ <form class="flex">
494
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-md focus:outline-none text-gray-900">
495
+ <button type="submit" class="bg-blue-800 hover:bg-blue-900 px-6 py-3 rounded-r-md font-medium transition duration-300">Subscribe</button>
496
+ </form>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </section>
501
+
502
+ <!-- Footer -->
503
+ <footer class="bg-gray-900 text-white py-12">
504
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
505
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
506
+ <div>
507
+ <h3 class="text-lg font-semibold mb-4">Coastal Audiophile</h3>
508
+ <p class="text-gray-400">Elevating the audio experience through exceptional equipment, unbeatable prices, and our legendary beachside listening room.</p>
509
+ </div>
510
+ <div>
511
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
512
+ <ul class="space-y-2">
513
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
514
+ <li><a href="#equipment" class="text-gray-400 hover:text-white transition duration-300">Equipment</a></li>
515
+ <li><a href="#experience" class="text-gray-400 hover:text-white transition duration-300">Listening Experience</a></li>
516
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
517
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
518
+ </ul>
519
+ </div>
520
+ <div>
521
+ <h3 class="text-lg font-semibold mb-4">Equipment Brands</h3>
522
+ <ul class="space-y-2">
523
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Bowers & Wilkins</a></li>
524
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">McIntosh</a></li>
525
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sennheiser</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">dCS</a></li>
527
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Focal</a></li>
528
+ </ul>
529
+ </div>
530
+ <div>
531
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
532
+ <ul class="space-y-2">
533
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li>
534
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a></li>
535
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Shipping Policy</a></li>
536
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Returns & Warranty</a></li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
541
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Coastal Audiophile. All rights reserved.</p>
542
+ <div class="flex space-x-6">
543
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
544
+ <i class="fab fa-facebook-f"></i>
545
+ </a>
546
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
547
+ <i class="fab fa-instagram"></i>
548
+ </a>
549
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
550
+ <i class="fab fa-twitter"></i>
551
+ </a>
552
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
553
+ <i class="fab fa-youtube"></i>
554
+ </a>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </footer>
559
+
560
+ <script>
561
+ // Simple JavaScript for mobile menu toggle (would need to be expanded for full functionality)
562
+ document.addEventListener('DOMContentLoaded', function() {
563
+ const mobileMenuButton = document.querySelector('.md\\:hidden button');
564
+ const mobileMenu = document.querySelector('.md\\:hidden + div');
565
+
566
+ mobileMenuButton.addEventListener('click', function() {
567
+ // This would need to be expanded to actually show/hide a mobile menu
568
+ console.log('Mobile menu button clicked');
569
+ });
570
+
571
+ // Smooth scrolling for anchor links
572
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
573
+ anchor.addEventListener('click', function (e) {
574
+ e.preventDefault();
575
+
576
+ const targetId = this.getAttribute('href');
577
+ const targetElement = document.querySelector(targetId);
578
+
579
+ if (targetElement) {
580
+ window.scrollTo({
581
+ top: targetElement.offsetTop - 80,
582
+ behavior: 'smooth'
583
+ });
584
+ }
585
+ });
586
+ });
587
+ });
588
+ </script>
589
+ <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=cando881/unbox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
590
+ </html>