Hugging Face's logo

Spaces:
flen-crypto
/
anycoder-863dbc88
Running

App Files Community
flen-crypto commited on
Commit
fb2c7f1
·
verified ·
1 Parent(s): de97ed8

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +565 -19
index.html CHANGED
@@ -1,19 +1,565 @@
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>Music Creation App - Collaborative Music Production</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
12
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
+ }
14
+ .gradient-text {
15
+ background: linear-gradient(45deg, #6366f1, #8b5cf6);
16
+ -webkit-background-clip: text;
17
+ -webkit-text-fill-color: transparent;
18
+ background-clip: text;
19
+ }
20
+ .card-hover {
21
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
22
+ }
23
+ .card-hover:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 20px 40px rgba(99, 102, 241, 0.1);
26
+ }
27
+ .waveform {
28
+ background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
29
+ height: 4px;
30
+ border-radius: 2px;
31
+ margin: 2px 0;
32
+ }
33
+ .feature-icon {
34
+ background: linear-gradient(135deg, #6366f1, #8b5cf6);
35
+ width: 60px;
36
+ height: 60px;
37
+ border-radius: 12px;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="text-white">
45
+ <!-- Header Navigation -->
46
+ <header class="fixed top-0 w-full bg-black bg-opacity-50 backdrop-blur-md z-50 border-b border-gray-800">
47
+ <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
48
+ <div class="flex items-center space-x-2">
49
+ <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-lg flex items-center justify-center">
50
+ <i class="fas fa-music text-white text-sm"></i>
51
+ </div>
52
+ <span class="text-xl font-bold">MusicFlow</span>
53
+ <span class="text-xs bg-blue-600 px-2 py-1 rounded text-white ml-2">Built with anycoder</span>
54
+ </div>
55
+
56
+ <div class="hidden md:flex items-center space-x-8">
57
+ <a href="#features" class="hover:text-purple-400 transition-colors">Features</a>
58
+ <a href="#pricing" class="hover:text-purple-400 transition-colors">Pricing</a>
59
+ <a href="#collaboration" class="hover:text-purple-400 transition-colors">Collaboration</a>
60
+ <a href="#ai" class="hover:text-purple-400 transition-colors">AI Tools</a>
61
+ </div>
62
+
63
+ <div class="flex items-center space-x-4">
64
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition-colors">Sign Up</button>
65
+ <button class="border border-gray-600 hover:border-gray-500 px-4 py-2 rounded-lg transition-colors">Log In</button>
66
+ </div>
67
+ </nav>
68
+ </header>
69
+
70
+ <!-- Hero Section -->
71
+ <section class="pt-24 pb-16 px-6">
72
+ <div class="container mx-auto text-center">
73
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 gradient-text">
74
+ Create Music Anywhere<br>with Anyone
75
+ </h1>
76
+ <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
77
+ The ultimate collaborative music production platform with AI-powered tools, cloud sync, and blockchain monetization.
78
+ </p>
79
+
80
+ <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
81
+ <button class="bg-purple-600 hover:bg-purple-700 px-8 py-3 rounded-lg text-lg font-semibold transition-colors">
82
+ Start Creating Free
83
+ </button>
84
+ <button class="border border-gray-600 hover:border-gray-500 px-8 py-3 rounded-lg text-lg transition-colors">
85
+ Watch Demo
86
+ </button>
87
+ </div>
88
+
89
+ <!-- Feature Preview Cards -->
90
+ <div class="grid md:grid-cols-3 gap-6 mt-16">
91
+ <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl card-hover border border-gray-800">
92
+ <div class="feature-icon mb-4">
93
+ <i class="fas fa-layer-group text-white text-xl"></i>
94
+ </div>
95
+ <h3 class="text-xl font-semibold mb-2">Multi-Track Sequencing</h3>
96
+ <p class="text-gray-400">Professional 16+ track editing with step sequencer and pattern modes.</p>
97
+ </div>
98
+
99
+ <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl card-hover border border-gray-800">
100
+ <div class="feature-icon mb-4">
101
+ <i class="fas fa-robot text-white text-xl"></i>
102
+ </div>
103
+ <h3 class="text-xl font-semibold mb-2">AI Composition</h3>
104
+ <p class="text-gray-400">Generate melodies, beats, and get mixing suggestions with AI.</p>
105
+ </div>
106
+
107
+ <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl card-hover border border-gray-800">
108
+ <div class="feature-icon mb-4">
109
+ <i class="fas fa-users text-white text-xl"></i>
110
+ </div>
111
+ <h3 class="text-xl font-semibold mb-2">Real-Time Collaboration</h3>
112
+ <p class="text-gray-400">Work together with live sync, chat, and version control.</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- Features Section -->
119
+ <section id="features" class="py-16 px-6">
120
+ <div class="container mx-auto">
121
+ <div class="text-center mb-12">
122
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Powerful Features for Music Creators</h2>
123
+ <p class="text-xl text-gray-300">Everything you need to produce, collaborate, and monetize your music.</p>
124
+ </div>
125
+
126
+ <!-- Feature Grid -->
127
+ <div class="grid lg:grid-cols-2 gap-8 mb-16">
128
+ <!-- Multi-Track Sequencing -->
129
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
130
+ <div class="flex items-start space-x-4 mb-6">
131
+ <div class="feature-icon flex-shrink-0">
132
+ <i class="fas fa-wave-square text-white text-xl"></i>
133
+ </div>
134
+ <div>
135
+ <h3 class="text-2xl font-bold mb-3">Multi-Track Beat Sequencing</h3>
136
+ <p class="text-gray-300 mb-4">Professional-grade sequencing with 16+ tracks, step sequencer, and pattern modes.</p>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="space-y-3">
141
+ <div class="flex items-center space-x-3">
142
+ <i class="fas fa-check text-green-400"></i>
143
+ <span>16+ simultaneous audio/MIDI tracks</span>
144
+ </div>
145
+ <div class="flex items-center space-x-3">
146
+ <i class="fas fa-check text-green-400"></i>
147
+ <span>Drum grid sequencer with velocity control</span>
148
+ </div>
149
+ <div class="flex items-center space-x-3">
150
+ <i class="fas fa-check text-green-400"></i>
151
+ <span>Loop clips and linear arrangement</span>
152
+ </div>
153
+ <div class="flex items-center space-x-3">
154
+ <i class="fas fa-check text-green-400"></i>
155
+ <span>Track controls with mute/solo/volume</span>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Mock Timeline -->
160
+ <div class="mt-6 bg-gray-800 p-4 rounded-lg">
161
+ <div class="flex items-center space-x-2 mb-2">
162
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
163
+ <span class="text-sm text-gray-400">Record</span>
164
+ </div>
165
+ <div class="flex items-center space-x-2 mb-2">
166
+ <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
167
+ <span class="text-sm text-gray-400">Drums</span>
168
+ </div>
169
+ <div class="flex items-center space-x-2 mb-2">
170
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
171
+ <span class="text-sm text-gray-400">Bass</span>
172
+ </div>
173
+ <div class="waveform"></div>
174
+ <div class="waveform" style="width: 80%;"></div>
175
+ <div class="waveform" style="width: 60%;"></div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Loop Browser -->
180
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
181
+ <div class="flex items-start space-x-4 mb-6">
182
+ <div class="feature-icon flex-shrink-0">
183
+ <i class="fas fa-search text-white text-xl"></i>
184
+ </div>
185
+ <div>
186
+ <h3 class="text-2xl font-bold mb-3">Loop Browser & Sound Library</h3>
187
+ <p class="text-gray-300 mb-4">Thousands of royalty-free loops, samples, and instruments at your fingertips.</p>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="space-y-3">
192
+ <div class="flex items-center space-x-3">
193
+ <i class="fas fa-check text-green-400"></i>
194
+ <span>Search and filter by genre, BPM, key</span>
195
+ </div>
196
+ <div class="flex items-center space-x-3">
197
+ <i class="fas fa-check text-green-400"></i>
198
+ <span>Real-time preview with tempo sync</span>
199
+ </div>
200
+ <div class="flex items-center space-x-3">
201
+ <i class="fas fa-check text-green-400"></i>
202
+ <span>Drag-and-drop to timeline</span>
203
+ </div>
204
+ <div class="flex items-center space-x-3">
205
+ <i class="fas fa-check text-green-400"></i>
206
+ <span>Expandable library with sound packs</span>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Mock Loop Browser -->
211
+ <div class="mt-6 bg-gray-800 p-4 rounded-lg">
212
+ <div class="grid grid-cols-3 gap-2">
213
+ <div class="bg-purple-600 p-2 rounded text-center text-xs">Drum Loop</div>
214
+ <div class="bg-blue-600 p-2 rounded text-center text-xs">Bass Line</div>
215
+ <div class="bg-green-600 p-2 rounded text-center text-xs">Melody</div>
216
+ <div class="bg-yellow-600 p-2 rounded text-center text-xs">FX</div>
217
+ <div class="bg-red-600 p-2 rounded text-center text-xs">Vocal</div>
218
+ <div class="bg-indigo-600 p-2 rounded text-center text-xs">Synth</div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Additional Features Row -->
225
+ <div class="grid lg:grid-cols-2 gap-8">
226
+ <!-- AI Composition -->
227
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
228
+ <div class="flex items-start space-x-4 mb-6">
229
+ <div class="feature-icon flex-shrink-0">
230
+ <i class="fas fa-brain text-white text-xl"></i>
231
+ </div>
232
+ <div>
233
+ <h3 class="text-2xl font-bold mb-3">AI-Powered Composition</h3>
234
+ <p class="text-gray-300 mb-4">Break through writer's block with intelligent music generation.</p>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="space-y-3">
239
+ <div class="flex items-center space-x-3">
240
+ <i class="fas fa-check text-green-400"></i>
241
+ <span>Generate melodies and beats</span>
242
+ </div>
243
+ <div class="flex items-center space-x-3">
244
+ <i class="fas fa-check text-green-400"></i>
245
+ <span>Context-aware suggestions</span>
246
+ </div>
247
+ <div class="flex items-center space-x-3">
248
+ <i class="fas fa-check text-green-400"></i>
249
+ <span>Auto-mix helper</span>
250
+ </div>
251
+ <div class="flex items-center space-x-3">
252
+ <i class="fas fa-check text-green-400"></i>
253
+ <span>Editable AI output</span>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- AI Mock Interface -->
258
+ <div class="mt-6 bg-gray-800 p-4 rounded-lg">
259
+ <div class="flex items-center justify-between mb-4">
260
+ <span class="text-sm text-gray-400">Genre:</span>
261
+ <select class="bg-gray-700 text-white px-2 py-1 rounded text-sm">
262
+ <option>Hip Hop</option>
263
+ <option>EDM</option>
264
+ <option>Lofi</option>
265
+ </select>
266
+ </div>
267
+ <div class="flex items-center justify-between mb-4">
268
+ <span class="text-sm text-gray-400">Mood:</span>
269
+ <select class="bg-gray-700 text-white px-2 py-1 rounded text-sm">
270
+ <option>Chill</option>
271
+ <option>Energetic</option>
272
+ <option>Dark</option>
273
+ </select>
274
+ </div>
275
+ <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded text-sm font-semibold">
276
+ Generate Idea
277
+ </button>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Collaboration Tools -->
282
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
283
+ <div class="flex items-start space-x-4 mb-6">
284
+ <div class="feature-icon flex-shrink-0">
285
+ <i class="fas fa-users-cog text-white text-xl"></i>
286
+ </div>
287
+ <div>
288
+ <h3 class="text-2xl font-bold mb-3">Real-Time Collaboration</h3>
289
+ <p class="text-gray-300 mb-4">Work together with live sync, chat, and version control.</p>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="space-y-3">
294
+ <div class="flex items-center space-x-3">
295
+ <i class="fas fa-check text-green-400"></i>
296
+ <span>Live edit synchronization</span>
297
+ </div>
298
+ <div class="flex items-center space-x-3">
299
+ <i class="fas fa-check text-green-400"></i>
300
+ <span>Built-in chat and comments</span>
301
+ </div>
302
+ <div class="flex items-center space-x-3">
303
+ <i class="fas fa-check text-green-400"></i>
304
+ <span>Version history and forks</span>
305
+ </div>
306
+ <div class="flex items-center space-x-3">
307
+ <i class="fas fa-check text-green-400"></i>
308
+ <span>Shared playback</span>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Collaboration Mock -->
313
+ <div class="mt-6 bg-gray-800 p-4 rounded-lg">
314
+ <div class="space-y-2">
315
+ <div class="flex items-center space-x-2">
316
+ <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-xs">A</div>
317
+ <span class="text-sm text-gray-300">Added drum pattern</span>
318
+ </div>
319
+ <div class="flex items-center space-x-2">
320
+ <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-xs">B</div>
321
+ <span class="text-sm text-gray-300">Adjusted bass volume</span>
322
+ </div>
323
+ <div class="flex items-center space-x-2">
324
+ <div class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center text-xs">C</div>
325
+ <span class="text-sm text-gray-300">Added melody idea</span>
326
+ </div>
327
+ </div>
328
+ <div class="mt-4 bg-gray-700 p-2 rounded text-sm">
329
+ <span class="text-blue-400">User A:</span> How about we add a filter sweep here?
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- Pricing Section -->
338
+ <section id="pricing" class="py-16 px-6">
339
+ <div class="container mx-auto">
340
+ <div class="text-center mb-12">
341
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Simple, Transparent Pricing</h2>
342
+ <p class="text-xl text-gray-300">Choose the plan that fits your creative needs.</p>
343
+ </div>
344
+
345
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
346
+ <!-- Free Plan -->
347
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 card-hover">
348
+ <h3 class="text-2xl font-bold mb-2">Free</h3>
349
+ <div class="text-4xl font-bold mb-4">$0<span class="text-lg text-gray-400">/month</span></div>
350
+ <p class="text-gray-300 mb-6">Perfect for getting started with music creation.</p>
351
+
352
+ <ul class="space-y-3 mb-8">
353
+ <li class="flex items-center space-x-3">
354
+ <i class="fas fa-check text-green-400"></i>
355
+ <span>8 tracks per project</span>
356
+ </li>
357
+ <li class="flex items-center space-x-3">
358
+ <i class="fas fa-check text-green-400"></i>
359
+ <span>Basic loop library</span>
360
+ </li>
361
+ <li class="flex items-center space-x-3">
362
+ <i class="fas fa-check text-green-400"></i>
363
+ <span>Cloud save (5 projects)</span>
364
+ </li>
365
+ <li class="flex items-center space-x-3">
366
+ <i class="fas fa-check text-green-400"></i>
367
+ <span>Basic effects</span>
368
+ </li>
369
+ <li class="flex items-center space-x-3">
370
+ <i class="fas fa-check text-green-400"></i>
371
+ <span>Export to MP3</span>
372
+ </li>
373
+ </ul>
374
+
375
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-semibold transition-colors">
376
+ Get Started Free
377
+ </button>
378
+ </div>
379
+
380
+ <!-- Pro Plan -->
381
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border-2 border-purple-500 card-hover relative">
382
+ <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
383
+ <span class="bg-purple-500 text-white px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span>
384
+ </div>
385
+ <h3 class="text-2xl font-bold mb-2">Pro</h3>
386
+ <div class="text-4xl font-bold mb-4">$19<span class="text-lg text-gray-400">/month</span></div>
387
+ <p class="text-gray-300 mb-6">For serious producers and collaborators.</p>
388
+
389
+ <ul class="space-y-3 mb-8">
390
+ <li class="flex items-center space-x-3">
391
+ <i class="fas fa-check text-green-400"></i>
392
+ <span>Unlimited tracks</span>
393
+ </li>
394
+ <li class="flex items-center space-x-3">
395
+ <i class="fas fa-check text-green-400"></i>
396
+ <span>Full sound library</span>
397
+ </li>
398
+ <li class="flex items-center space-x-3">
399
+ <i class="fas fa-check text-green-400"></i>
400
+ <span>Unlimited cloud projects</span>
401
+ </li>
402
+ <li class="flex items-center space-x-3">
403
+ <i class="fas fa-check text-green-400"></i>
404
+ <span>Advanced effects</span>
405
+ </li>
406
+ <li class="flex items-center space-x-3">
407
+ <i class="fas fa-check text-green-400"></i>
408
+ <span>Real-time collaboration</span>
409
+ </li>
410
+ <li class="flex items-center space-x-3">
411
+ <i class="fas fa-check text-green-400"></i>
412
+ <span>AI composition tools</span>
413
+ </li>
414
+ <li class="flex items-center space-x-3">
415
+ <i class="fas fa-check text-green-400"></i>
416
+ <span>WAV/MP3 export</span>
417
+ </li>
418
+ </ul>
419
+
420
+ <button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-semibold transition-colors">
421
+ Go Pro Now
422
+ </button>
423
+ </div>
424
+
425
+ <!-- Studio Plan -->
426
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 card-hover">
427
+ <h3 class="text-2xl font-bold mb-2">Studio</h3>
428
+ <div class="text-4xl font-bold mb-4">$49<span class="text-lg text-gray-400">/month</span></div>
429
+ <p class="text-gray-300 mb-6">For professional studios and teams.</p>
430
+
431
+ <ul class="space-y-3 mb-8">
432
+ <li class="flex items-center space-x-3">
433
+ <i class="fas fa-check text-green-400"></i>
434
+ <span>Everything in Pro</span>
435
+ </li>
436
+ <li class="flex items-center space-x-3">
437
+ <i class="fas fa-check text-green-400"></i>
438
+ <span>Team collaboration (5 seats)</span>
439
+ </li>
440
+ <li class="flex items-center space-x-3">
441
+ <i class="fas fa-check text-green-400"></i>
442
+ <span>Priority support</span>
443
+ </li>
444
+ <li class="flex items-center space-x-3">
445
+ <i class="fas fa-check text-green-400"></i>
446
+ <span>Custom branding</span>
447
+ </li>
448
+ <li class="flex items-center space-x-3">
449
+ <i class="fas fa-check text-green-400"></i>
450
+ <span>Advanced analytics</span>
451
+ </li>
452
+ <li class="flex items-center space-x-3">
453
+ <i class="fas fa-check text-green-400"></i>
454
+ <span>Blockchain royalties</span>
455
+ </li>
456
+ </ul>
457
+
458
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-semibold transition-colors">
459
+ Contact Sales
460
+ </button>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </section>
465
+
466
+ <!-- Footer -->
467
+ <footer class="py-12 px-6 border-t border-gray-800">
468
+ <div class="container mx-auto">
469
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
470
+ <div>
471
+ <div class="flex items-center space-x-2 mb-4">
472
+ <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-lg flex items-center justify-center">
473
+ <i class="fas fa-music text-white text-sm"></i>
474
+ </div>
475
+ <span class="text-xl font-bold">MusicFlow</span>
476
+ </div>
477
+ <p class="text-gray-400 mb-4">The future of collaborative music production.</p>
478
+ <div class="flex space-x-4">
479
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
480
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
481
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
482
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
483
+ </div>
484
+ </div>
485
+
486
+ <div>
487
+ <h4 class="text-lg font-semibold mb-4">Product</h4>
488
+ <ul class="space-y-2">
489
+ <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li>
490
+ <li><a href="#pricing" class="text-gray-400 hover:text-white">Pricing</a></li>
491
+ <li><a href="#" class="text-gray-400 hover:text-white">Download</a></li>
492
+ <li><a href="#" class="text-gray-400 hover:text-white">Updates</a></li>
493
+ </ul>
494
+ </div>
495
+
496
+ <div>
497
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
498
+ <ul class="space-y-2">
499
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
500
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
502
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
503
+ </ul>
504
+ </div>
505
+
506
+ <div>
507
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
508
+ <ul class="space-y-2">
509
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
510
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
511
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
513
+ </ul>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
518
+ <p class="text-gray-400 text-sm">© 2023 MusicFlow. All rights reserved.</p>
519
+ <div class="flex space-x-6 mt-4 md:mt-0">
520
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
521
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
522
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </footer>
527
+
528
+ <script>
529
+ // Smooth scrolling for navigation links
530
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
531
+ anchor.addEventListener('click', function (e) {
532
+ e.preventDefault();
533
+ const target = document.querySelector(this.getAttribute('href'));
534
+ if (target) {
535
+ target.scrollIntoView({
536
+ behavior: 'smooth',
537
+ block: 'start'
538
+ });
539
+ }
540
+ });
541
+ });
542
+
543
+ // Add scroll effect to header
544
+ window.addEventListener('scroll', function() {
545
+ const header = document.querySelector('header');
546
+ if (window.scrollY > 100) {
547
+ header.classList.add('bg-opacity-90');
548
+ } else {
549
+ header.classList.remove('bg-opacity-90');
550
+ }
551
+ });
552
+
553
+ // Add hover effects to feature cards
554
+ document.querySelectorAll('.card-hover').forEach(card => {
555
+ card.addEventListener('mouseenter', function() {
556
+ this.style.transform = 'translateY(-5px)';
557
+ });
558
+
559
+ card.addEventListener('mouseleave', function() {
560
+ this.style.transform = 'translateY(0)';
561
+ });
562
+ });
563
+ </script>
564
+ </body>
565
+ </html>