Hugging Face's logo

Spaces:
steake
/
accessconcept2
Running

App Files Community
steake commited on
Commit
ac01bd8
Β·
verified Β·
1 Parent(s): 4803084

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +540 -533
index.html CHANGED
@@ -3,32 +3,53 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Access - Your AI-Powered Guide to Everything IRL</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
 
9
  :root {
10
- --primary: #6e45e2;
11
- --secondary: #88d3ce;
12
- --accent: #ff7e5f;
13
- --dark: #121212;
14
- --darker: #0a0a0a;
15
- --light: #f8f9fa;
16
- --gray: #2d2d2d;
17
- --light-gray: #3d3d3d;
18
- --font-main: 'Segoe UI', Roboto, -apple-system, sans-serif;
19
  }
20
 
 
21
  * {
22
  margin: 0;
23
  padding: 0;
24
  box-sizing: border-box;
25
  }
26
 
 
 
 
 
 
 
27
  body {
28
  font-family: var(--font-main);
29
- background-color: var(--dark);
30
- color: var(--light);
31
- line-height: 1.6;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
 
34
  a {
@@ -43,15 +64,64 @@
43
  padding: 0 20px;
44
  }
45
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  /* Header */
47
  header {
48
- background-color: rgba(18, 18, 18, 0.9);
49
- backdrop-filter: blur(10px);
50
  position: fixed;
 
51
  width: 100%;
52
- z-index: 1000;
 
 
 
 
 
 
 
53
  padding: 20px 0;
54
- border-bottom: 1px solid var(--gray);
55
  }
56
 
57
  .header-container {
@@ -61,434 +131,272 @@
61
  }
62
 
63
  .logo {
64
- font-size: 24px;
65
  font-weight: 700;
66
- background: linear-gradient(90deg, var(--primary), var(--secondary));
67
- -webkit-background-clip: text;
68
- background-clip: text;
69
- color: transparent;
70
  }
71
 
72
  nav ul {
73
  display: flex;
74
  list-style: none;
75
- }
76
-
77
- nav ul li {
78
- margin-left: 30px;
79
  }
80
 
81
  nav ul li a {
 
 
82
  font-weight: 500;
83
  transition: color 0.3s;
84
  }
85
 
86
  nav ul li a:hover {
87
- color: var(--secondary);
88
  }
89
 
90
  .mobile-menu-btn {
91
  display: none;
92
  background: none;
93
  border: none;
94
- color: var(--light);
95
  font-size: 24px;
96
  cursor: pointer;
97
  }
98
 
99
- .cta-button {
100
- display: inline-block;
101
- padding: 12px 24px;
102
- border-radius: 30px;
103
- font-weight: 600;
104
- transition: all 0.3s;
105
- text-align: center;
106
- }
107
-
108
- .primary-button {
109
- background: linear-gradient(90deg, var(--primary), var(--secondary));
110
- color: white;
111
- }
112
-
113
- .primary-button:hover {
114
- transform: translateY(-2px);
115
- box-shadow: 0 10px 20px rgba(110, 69, 226, 0.3);
116
- }
117
-
118
- .secondary-button {
119
- border: 2px solid var(--primary);
120
- color: var(--primary);
121
- }
122
-
123
- .secondary-button:hover {
124
- background-color: var(--primary);
125
- color: white;
126
- }
127
-
128
- /* Hero Section */
129
- .hero {
130
- padding: 180px 0 100px;
131
- background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
132
  position: relative;
133
  overflow: hidden;
134
  }
135
 
136
- .hero::before {
137
- content: '';
138
- position: absolute;
139
- top: -50%;
140
- left: -50%;
141
- width: 200%;
142
- height: 200%;
143
- background: radial-gradient(circle, rgba(110, 69, 226, 0.1) 0%, transparent 70%);
144
- z-index: 0;
145
  }
146
 
147
  .hero-content {
148
- position: relative;
149
- z-index: 1;
150
- max-width: 600px;
 
 
 
 
151
  }
152
 
153
  .hero h1 {
154
- font-size: 48px;
155
- font-weight: 800;
156
  margin-bottom: 20px;
157
- line-height: 1.2;
158
- background: linear-gradient(90deg, var(--light), var(--secondary));
159
- -webkit-background-clip: text;
160
- background-clip: text;
161
- color: transparent;
162
  }
163
 
164
- .hero p {
165
- font-size: 18px;
166
- margin-bottom: 30px;
167
- color: rgba(255, 255, 255, 0.8);
168
  }
169
 
170
- .hero-buttons {
171
- display: flex;
172
- gap: 15px;
173
- }
174
-
175
- .hero-image {
176
- position: absolute;
177
- right: 0;
178
- top: 50%;
179
- transform: translateY(-50%);
180
- width: 50%;
181
- max-width: 600px;
182
- z-index: 0;
183
- }
184
-
185
- .hero-image img {
186
- width: 100%;
187
- height: auto;
188
- border-radius: 20px;
189
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
190
  }
191
 
192
- /* Problem Solution Section */
193
- .problem-solution {
194
- padding: 100px 0;
195
- background-color: var(--darker);
 
 
 
196
  }
197
 
198
- .section-header {
199
- text-align: center;
200
- margin-bottom: 60px;
 
 
201
  }
202
 
203
- .section-header h2 {
204
- font-size: 36px;
205
- margin-bottom: 15px;
206
- background: linear-gradient(90deg, var(--primary), var(--secondary));
207
- -webkit-background-clip: text;
208
- background-clip: text;
209
- color: transparent;
210
  }
211
 
212
- .section-header p {
 
213
  max-width: 700px;
214
- margin: 0 auto;
215
- color: rgba(255, 255, 255, 0.7);
 
216
  }
217
 
218
- .ps-container {
 
 
219
  display: flex;
220
  align-items: center;
221
- gap: 50px;
222
  }
223
 
224
- .ps-content {
225
- flex: 1;
 
226
  }
227
 
228
- .ps-content h3 {
229
- font-size: 28px;
230
- margin-bottom: 20px;
231
  }
232
 
233
- .ps-content p {
234
- margin-bottom: 20px;
235
- color: rgba(255, 255, 255, 0.7);
236
  }
237
 
238
- .ps-image {
239
- flex: 1;
240
- position: relative;
 
 
241
  }
242
 
243
- .ps-image img {
244
- width: 100%;
245
- border-radius: 15px;
246
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
247
  }
248
 
249
- /* Features Section */
250
- .features {
251
- padding: 100px 0;
252
- background-color: var(--dark);
253
  }
254
 
255
- .features-grid {
256
- display: grid;
257
- grid-template-columns: repeat(3, 1fr);
258
- gap: 30px;
259
- margin-top: 50px;
 
260
  }
261
 
262
- .feature-card {
 
263
  background-color: var(--gray);
264
- border-radius: 15px;
265
- padding: 30px;
266
- transition: transform 0.3s, box-shadow 0.3s;
267
- border: 1px solid var(--light-gray);
268
- }
269
-
270
- .feature-card:hover {
271
- transform: translateY(-10px);
272
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
273
- border-color: var(--primary);
274
- }
275
-
276
- .feature-icon {
277
- font-size: 40px;
278
- margin-bottom: 20px;
279
- color: var(--secondary);
280
- }
281
-
282
- .feature-card h3 {
283
- font-size: 22px;
284
- margin-bottom: 15px;
285
- }
286
-
287
- .feature-card p {
288
- color: rgba(255, 255, 255, 0.7);
289
- }
290
-
291
- /* How It Works */
292
- .how-it-works {
293
- padding: 100px 0;
294
- background-color: var(--darker);
295
- }
296
-
297
- .steps {
298
- display: flex;
299
- justify-content: space-between;
300
- margin-top: 50px;
301
- position: relative;
302
- }
303
-
304
- .step {
305
  text-align: center;
306
- flex: 1;
307
- position: relative;
308
- z-index: 1;
309
- }
310
-
311
- .step-number {
312
- width: 60px;
313
- height: 60px;
314
- border-radius: 50%;
315
- background: linear-gradient(135deg, var(--primary), var(--secondary));
316
  display: flex;
317
  align-items: center;
318
  justify-content: center;
319
- margin: 0 auto 20px;
320
- font-size: 24px;
321
- font-weight: 700;
322
- }
323
-
324
- .step h3 {
325
- margin-bottom: 15px;
326
- font-size: 20px;
327
  }
328
 
329
- .step p {
330
- max-width: 250px;
331
- margin: 0 auto;
332
- color: rgba(255, 255, 255, 0.7);
 
333
  }
334
 
335
- .steps::before {
336
- content: '';
337
- position: absolute;
338
- top: 30px;
339
- left: 10%;
340
- width: 80%;
341
- height: 3px;
342
- background: linear-gradient(90deg, var(--primary), var(--secondary));
343
- z-index: 0;
344
- }
345
-
346
- /* Creator Teaser */
347
- .creator-teaser {
348
- padding: 100px 0;
349
- background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
350
- text-align: center;
351
  }
352
 
353
- .creator-teaser h2 {
354
- font-size: 36px;
355
- margin-bottom: 20px;
356
- background: linear-gradient(90deg, var(--primary), var(--accent));
357
- -webkit-background-clip: text;
358
- background-clip: text;
359
- color: transparent;
360
  }
361
 
362
- .creator-teaser p {
363
- max-width: 700px;
364
- margin: 0 auto 30px;
365
- color: rgba(255, 255, 255, 0.7);
 
 
 
 
 
 
366
  }
367
 
368
- /* Final CTA */
369
- .final-cta {
370
- padding: 100px 0;
371
- text-align: center;
372
- background-color: var(--dark);
 
 
 
 
 
 
 
373
  }
374
 
375
- .final-cta h2 {
376
- font-size: 36px;
377
- margin-bottom: 20px;
378
- background: linear-gradient(90deg, var(--light), var(--secondary));
379
- -webkit-background-clip: text;
380
- background-clip: text;
381
- color: transparent;
382
  }
383
 
384
- .final-cta p {
385
- max-width: 600px;
386
- margin: 0 auto 30px;
387
- color: rgba(255, 255, 255, 0.7);
388
  }
389
 
390
  /* Footer */
391
  footer {
392
- background-color: var(--darker);
393
- padding: 60px 0 30px;
394
- border-top: 1px solid var(--gray);
395
- }
396
-
397
- .footer-content {
398
  display: flex;
399
- justify-content: space-between;
400
- margin-bottom: 40px;
401
- }
402
-
403
- .footer-column {
404
- flex: 1;
405
- padding: 0 20px;
406
- }
407
-
408
- .footer-column h3 {
409
- font-size: 18px;
410
- margin-bottom: 20px;
411
- color: var(--secondary);
412
- }
413
-
414
- .footer-column ul {
415
- list-style: none;
416
- }
417
-
418
- .footer-column ul li {
419
- margin-bottom: 10px;
420
- }
421
-
422
- .footer-column ul li a {
423
- color: rgba(255, 255, 255, 0.6);
424
- transition: color 0.3s;
425
- }
426
-
427
- .footer-column ul li a:hover {
428
- color: var(--secondary);
429
  }
430
 
431
- .social-links {
432
- display: flex;
433
- gap: 15px;
 
434
  }
435
 
436
- .social-links a {
437
- width: 40px;
438
- height: 40px;
439
- border-radius: 50%;
440
- background-color: var(--gray);
441
- display: flex;
442
- align-items: center;
443
- justify-content: center;
444
- transition: all 0.3s;
445
  }
446
 
447
- .social-links a:hover {
448
- background-color: var(--primary);
449
- transform: translateY(-3px);
450
  }
451
 
452
- .copyright {
453
- text-align: center;
454
- padding-top: 30px;
455
- border-top: 1px solid var(--gray);
456
- color: rgba(255, 255, 255, 0.4);
457
- font-size: 14px;
458
  }
459
 
460
  /* Mobile Styles */
461
  @media (max-width: 992px) {
462
- .hero h1 {
463
- font-size: 36px;
464
- }
465
-
466
- .hero-image {
467
- position: relative;
468
- width: 100%;
469
- margin-top: 50px;
470
- transform: none;
471
  }
472
 
473
- .ps-container {
474
- flex-direction: column;
475
- }
476
-
477
- .features-grid {
478
- grid-template-columns: repeat(2, 1fr);
479
- }
480
-
481
- .steps {
482
- flex-direction: column;
483
- gap: 50px;
484
- }
485
-
486
- .steps::before {
487
- display: none;
488
- }
489
-
490
- .step {
491
- margin-bottom: 30px;
492
  }
493
  }
494
 
@@ -501,51 +409,102 @@
501
  display: block;
502
  }
503
 
504
- .hero {
505
- padding: 150px 0 80px;
506
- text-align: center;
 
 
507
  }
 
508
 
509
- .hero-content {
510
- max-width: 100%;
 
 
 
 
511
  }
512
 
513
- .hero-buttons {
514
- justify-content: center;
515
  }
516
 
517
- .section-header h2 {
518
- font-size: 28px;
 
519
  }
520
 
521
- .features-grid {
522
- grid-template-columns: 1fr;
 
 
 
523
  }
 
524
 
525
- .footer-content {
526
- flex-direction: column;
527
- gap: 30px;
528
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
529
  }
530
  </style>
531
  </head>
532
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
533
  <!-- Header -->
534
- <header>
535
  <div class="container header-container">
536
  <a href="#" class="logo">ACCESS</a>
537
  <nav>
538
  <ul>
539
- <li><a href="#features">Features</a></li>
540
- <li><a href="#creators">For Creators</a></li>
541
  <li><a href="#about">About</a></li>
542
- <li><a href="#pricing">Pricing</a></li>
543
  </ul>
544
  </nav>
545
- <div class="hero-buttons">
546
- <a href="#" class="cta-button secondary-button">Login</a>
547
- <a href="#" class="cta-button primary-button">Sign Up</a>
548
- </div>
549
  <button class="mobile-menu-btn">
550
  <i class="fas fa-bars"></i>
551
  </button>
@@ -553,198 +512,219 @@
553
  </header>
554
 
555
  <!-- Hero Section -->
556
- <section class="hero">
557
- <div class="container">
558
- <div class="hero-content">
559
- <h1>Stop Searching, Start Experiencing</h1>
560
- <p>Access aggregates events from everywhere, learns what you love, and connects you with friends – all in one place. Discover concerts, festivals, pop-ups, and more, personalized for you.</p>
561
- <div class="hero-buttons">
562
- <a href="#" class="cta-button primary-button">Sign Up Free</a>
563
- <a href="#" class="cta-button secondary-button">Get the App</a>
564
- </div>
565
- </div>
566
- <div class="hero-image">
567
- <img src="https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Concert crowd enjoying live music">
568
- </div>
569
  </div>
 
 
 
570
  </section>
571
 
572
- <!-- Problem Solution Section -->
573
- <section class="problem-solution" id="features">
574
- <div class="container">
575
- <div class="section-header">
576
- <h2>Tired of Endless Scrolling?</h2>
577
- <p>Discovery is broken. Access cuts through the chaos, bringing everything IRL into a single, intelligent feed powered by AI.</p>
578
- </div>
579
- <div class="ps-container">
580
- <div class="ps-content">
581
- <h3>Event Discovery, Simplified</h3>
582
- <p>Juggling countless apps, social feeds, and email blasts to find events? We've been there too. That's why we built Access to solve this exact problem.</p>
583
- <p>Our platform aggregates events from all major sources, applies intelligent filtering based on your preferences, and presents you with only the most relevant options.</p>
584
- <a href="#" class="cta-button primary-button">See How It Works</a>
585
- </div>
586
- <div class="ps-image">
587
- <img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Music festival with colorful lights">
588
- </div>
589
  </div>
590
  </div>
591
- </section>
592
 
593
- <!-- Features Section -->
594
- <section class="features">
595
  <div class="container">
596
- <div class="section-header">
597
- <h2>Features Designed For Your Next Adventure</h2>
598
- <p>Everything you need to discover, plan, and enjoy the best live experiences</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
599
  </div>
600
- <div class="features-grid">
601
- <div class="feature-card">
602
- <div class="feature-icon">
603
- <i class="fas fa-robot"></i>
604
- </div>
605
- <h3>AI-Powered Discovery</h3>
606
- <p>Events tailored to your unique taste in music, location, and what's trending. The more you use Access, the smarter it gets.</p>
607
- </div>
608
- <div class="feature-card">
609
- <div class="feature-icon">
610
- <i class="fas fa-calendar-alt"></i>
611
- </div>
612
- <h3>All Events, One Place</h3>
613
- <p>Concerts, festivals, pop-ups, parties & more οΏ½οΏ½ aggregated from top sources so you never miss out on what's happening.</p>
614
- </div>
615
- <div class="feature-card">
616
- <div class="feature-icon">
617
- <i class="fas fa-users"></i>
618
- </div>
619
- <h3>Plan With Friends</h3>
620
- <p>Easily share events, coordinate plans, and even split costs seamlessly. See which events your friends are interested in.</p>
621
- </div>
622
- <div class="feature-card">
623
- <div class="feature-icon">
624
- <i class="fas fa-bell"></i>
625
- </div>
626
- <h3>Smart Notifications</h3>
627
- <p>Get alerts when your favorite artists announce shows near you or when events you might like are about to sell out.</p>
628
- </div>
629
- <div class="feature-card">
630
- <div class="feature-icon">
631
- <i class="fas fa-wallet"></i>
632
- </div>
633
- <h3>Crypto Payments</h3>
634
- <p>Buy tickets using traditional methods or select stablecoins like USDC for fast, global transactions with lower fees.</p>
635
- </div>
636
- <div class="feature-card">
637
- <div class="feature-icon">
638
- <i class="fas fa-star"></i>
639
- </div>
640
- <h3>Exclusive Access</h3>
641
- <p>Premium members get early ticket access, VIP experiences, and special perks from our partner venues and artists.</p>
642
- </div>
643
  </div>
644
  </div>
645
  </section>
646
 
647
- <!-- How It Works -->
648
- <section class="how-it-works">
649
- <div class="container">
650
- <div class="section-header">
651
- <h2>How Access Works</h2>
652
- <p>Getting started is simple. Here's how you can begin discovering amazing events today</p>
 
 
 
 
 
 
653
  </div>
654
- <div class="steps">
655
- <div class="step">
656
- <div class="step-number">1</div>
657
- <h3>Sync Your Music</h3>
658
- <p>Connect your Spotify or Apple Music to instantly personalize your recommendations based on your listening habits.</p>
659
- </div>
660
- <div class="step">
661
- <div class="step-number">2</div>
662
- <h3>Discover Events</h3>
663
- <p>Browse personalized recommendations or explore by category, location, or date. Save events you're interested in.</p>
664
- </div>
665
- <div class="step">
666
- <div class="step-number">3</div>
667
- <h3>Connect & Go</h3>
668
- <p>Invite friends, coordinate plans, purchase tickets, and get ready for an unforgettable experience.</p>
669
- </div>
670
  </div>
671
  </div>
672
  </section>
673
 
674
- <!-- Creator Teaser -->
675
- <section class="creator-teaser" id="creators">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
676
  <div class="container">
677
- <h2>Calling All Creators</h2>
678
- <p>Access provides artists, venues, and brands powerful tools to understand their audience, share updates, and offer exclusive experiences.</p>
679
- <a href="#" class="cta-button primary-button">Learn About Creator Tools</a>
 
 
 
 
680
  </div>
681
  </section>
682
 
683
- <!-- Final CTA -->
684
- <section class="final-cta">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
685
  <div class="container">
686
- <h2>Ready to Unlock Your City's Best Experiences?</h2>
687
- <p>Join thousands of others who are discovering amazing events with Access every day.</p>
688
- <a href="#" class="cta-button primary-button">Sign Up Free</a>
 
 
 
 
 
 
 
689
  </div>
690
  </section>
691
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
692
  <!-- Footer -->
693
  <footer>
694
  <div class="container">
695
- <div class="footer-content">
696
- <div class="footer-column">
697
- <h3>Access</h3>
698
- <p>The AI-powered platform for discovering, planning, and purchasing IRL entertainment.</p>
699
- <div class="social-links">
700
- <a href="#"><i class="fab fa-twitter"></i></a>
701
- <a href="#"><i class="fab fa-instagram"></i></a>
702
- <a href="#"><i class="fab fa-facebook-f"></i></a>
703
- <a href="#"><i class="fab fa-tiktok"></i></a>
704
- </div>
705
- </div>
706
- <div class="footer-column">
707
- <h3>Explore</h3>
708
- <ul>
709
- <li><a href="#">Features</a></li>
710
- <li><a href="#">For Creators</a></li>
711
- <li><a href="#">Pricing</a></li>
712
- <li><a href="#">About Us</a></li>
713
- </ul>
714
- </div>
715
- <div class="footer-column">
716
- <h3>Support</h3>
717
- <ul>
718
- <li><a href="#">Help Center</a></li>
719
- <li><a href="#">Contact Us</a></li>
720
- <li><a href="#">Privacy Policy</a></li>
721
- <li><a href="#">Terms of Service</a></li>
722
- </ul>
723
- </div>
724
- <div class="footer-column">
725
- <h3>Download</h3>
726
- <ul>
727
- <li><a href="#"><i class="fab fa-apple"></i> App Store</a></li>
728
- <li><a href="#"><i class="fab fa-google-play"></i> Google Play</a></li>
729
- </ul>
730
- </div>
731
- </div>
732
- <div class="copyright">
733
- <p>&copy; 2023 Access Technologies. All rights reserved.</p>
734
- </div>
735
  </div>
736
  </footer>
737
 
738
  <script>
739
- // Mobile menu toggle
740
  const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
741
  const nav = document.querySelector('nav ul');
742
-
743
  mobileMenuBtn.addEventListener('click', () => {
744
  nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
745
  });
746
 
747
- // Smooth scrolling for anchor links
 
 
 
 
 
 
 
 
 
 
 
748
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
749
  anchor.addEventListener('click', function(e) {
750
  e.preventDefault();
@@ -754,8 +734,7 @@
754
 
755
  const targetElement = document.querySelector(targetId);
756
  if (targetElement) {
757
- window.scrollTo({
758
- top: targetElement.offsetTop - 80,
759
  behavior: 'smooth'
760
  });
761
 
@@ -767,34 +746,62 @@
767
  });
768
  });
769
 
770
- // Header scroll effect
771
  window.addEventListener('scroll', () => {
772
- const header = document.querySelector('header');
773
  if (window.scrollY > 50) {
774
- header.style.backgroundColor = 'rgba(10, 10, 10, 0.95)';
775
  } else {
776
- header.style.backgroundColor = 'rgba(18, 18, 18, 0.9)';
777
  }
778
  });
779
 
780
- // Animation for feature cards on scroll
781
- const featureCards = document.querySelectorAll('.feature-card');
782
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
783
  const observer = new IntersectionObserver((entries) => {
784
  entries.forEach(entry => {
785
  if (entry.isIntersecting) {
786
- entry.target.style.opacity = '1';
787
- entry.target.style.transform = 'translateY(0)';
788
  }
789
  });
790
  }, { threshold: 0.1 });
791
 
792
- featureCards.forEach(card => {
793
- card.style.opacity = '0';
794
- card.style.transform = 'translateY(20px)';
795
- card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
796
- observer.observe(card);
797
  });
798
  </script>
799
- <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
800
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ACCESS - Get On The Inside</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
+ /* Root Variables */
10
  :root {
11
+ --black: #000000;
12
+ --white: #ffffff;
13
+ --yellow: #FFE300;
14
+ --blue: #0038FF;
15
+ --orange: #FF5100;
16
+ --gray: #F4F4F4;
17
+ --font-main: 'Bebas Neue', sans-serif;
18
+ --font-secondary: 'Montserrat', sans-serif;
 
19
  }
20
 
21
+ /* Base Styles */
22
  * {
23
  margin: 0;
24
  padding: 0;
25
  box-sizing: border-box;
26
  }
27
 
28
+ html {
29
+ scroll-behavior: smooth;
30
+ scroll-snap-type: y mandatory;
31
+ overflow-y: scroll;
32
+ }
33
+
34
  body {
35
  font-family: var(--font-main);
36
+ color: var(--white);
37
+ background-color: var(--black);
38
+ overflow-x: hidden;
39
+ height: 100vh;
40
+ scroll-snap-type: y mandatory;
41
+ overscroll-behavior-y: contain;
42
+ }
43
+
44
+ h1, h2, h3 {
45
+ font-weight: 400;
46
+ line-height: 0.9;
47
+ letter-spacing: 0.5px;
48
+ }
49
+
50
+ p {
51
+ font-family: var(--font-secondary);
52
+ font-weight: 400;
53
  }
54
 
55
  a {
 
64
  padding: 0 20px;
65
  }
66
 
67
+ /* Brand Banner */
68
+ .brand-banner {
69
+ width: 100%;
70
+ height: 60px;
71
+ background-color: var(--black);
72
+ position: relative;
73
+ overflow: hidden;
74
+ z-index: 10;
75
+ }
76
+
77
+ .banner-wrapper {
78
+ display: flex;
79
+ height: 100%;
80
+ align-items: center;
81
+ }
82
+
83
+ .banner-text {
84
+ display: flex;
85
+ align-items: center;
86
+ white-space: nowrap;
87
+ height: 100%;
88
+ animation: slide 20s linear infinite;
89
+ }
90
+
91
+ .banner-item {
92
+ font-size: 24px;
93
+ font-weight: 700;
94
+ color: var(--white);
95
+ margin: 0 25px;
96
+ display: flex;
97
+ align-items: center;
98
+ }
99
+
100
+ .banner-star {
101
+ margin: 0 5px;
102
+ font-size: 18px;
103
+ }
104
+
105
+ @keyframes slide {
106
+ 0% { transform: translateX(0); }
107
+ 100% { transform: translateX(-50%); }
108
+ }
109
+
110
  /* Header */
111
  header {
 
 
112
  position: fixed;
113
+ top: 60px;
114
  width: 100%;
115
+ padding: 30px 0;
116
+ z-index: 100;
117
+ background-color: transparent;
118
+ transition: all 0.3s ease;
119
+ }
120
+
121
+ header.scrolled {
122
+ background-color: var(--black);
123
  padding: 20px 0;
124
+ top: 0;
125
  }
126
 
127
  .header-container {
 
131
  }
132
 
133
  .logo {
134
+ font-size: 36px;
135
  font-weight: 700;
136
+ color: var(--white);
 
 
 
137
  }
138
 
139
  nav ul {
140
  display: flex;
141
  list-style: none;
142
+ gap: 30px;
 
 
 
143
  }
144
 
145
  nav ul li a {
146
+ font-family: var(--font-secondary);
147
+ font-size: 16px;
148
  font-weight: 500;
149
  transition: color 0.3s;
150
  }
151
 
152
  nav ul li a:hover {
153
+ color: var(--yellow);
154
  }
155
 
156
  .mobile-menu-btn {
157
  display: none;
158
  background: none;
159
  border: none;
160
+ color: var(--white);
161
  font-size: 24px;
162
  cursor: pointer;
163
  }
164
 
165
+ /* Page Sections */
166
+ .section {
167
+ width: 100%;
168
+ height: 100vh;
169
+ scroll-snap-align: start;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  position: relative;
171
  overflow: hidden;
172
  }
173
 
174
+ /* Hero Section */
175
+ .hero {
176
+ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)),
177
+ url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center;
178
+ background-size: cover;
 
 
 
 
179
  }
180
 
181
  .hero-content {
182
+ text-align: center;
183
+ position: absolute;
184
+ top: 50%;
185
+ left: 50%;
186
+ transform: translate(-50%, -50%);
187
+ width: 100%;
188
+ padding: 0 20px;
189
  }
190
 
191
  .hero h1 {
192
+ font-size: 120px;
193
+ line-height: 0.9;
194
  margin-bottom: 20px;
195
+ text-transform: uppercase;
 
 
 
 
196
  }
197
 
198
+ .hero h1 span {
199
+ display: block;
 
 
200
  }
201
 
202
+ .hero h2 {
203
+ font-family: var(--font-secondary);
204
+ font-size: 24px;
205
+ font-weight: 400;
206
+ text-transform: uppercase;
207
+ letter-spacing: 5px;
208
+ margin-bottom: 40px;
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  }
210
 
211
+ /* Value Proposition Section */
212
+ .value-prop {
213
+ background-color: var(--black);
214
+ text-align: center;
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
  }
219
 
220
+ .value-prop h2 {
221
+ font-size: 120px;
222
+ line-height: 0.9;
223
+ margin-bottom: 40px;
224
+ text-transform: uppercase;
225
  }
226
 
227
+ .value-prop h2 span {
228
+ display: block;
 
 
 
 
 
229
  }
230
 
231
+ .value-prop p {
232
+ font-size: 18px;
233
  max-width: 700px;
234
+ margin: 0 auto 40px;
235
+ line-height: 1.6;
236
+ text-transform: uppercase;
237
  }
238
 
239
+ /* Features Sections */
240
+ .feature-section {
241
+ text-align: center;
242
  display: flex;
243
  align-items: center;
244
+ justify-content: center;
245
  }
246
 
247
+ .feature-section.discover {
248
+ background-color: var(--yellow);
249
+ color: var(--black);
250
  }
251
 
252
+ .feature-section.ultimate-fan {
253
+ background-color: var(--blue);
254
+ color: var(--white);
255
  }
256
 
257
+ .feature-section.experience {
258
+ background-color: var(--orange);
259
+ color: var(--white);
260
  }
261
 
262
+ .feature-section h2 {
263
+ font-size: 120px;
264
+ line-height: 0.9;
265
+ margin-bottom: 60px;
266
+ text-transform: uppercase;
267
  }
268
 
269
+ .feature-section h2 span {
270
+ display: block;
 
 
271
  }
272
 
273
+ .feature-mockup {
274
+ max-width: 300px;
275
+ margin: 0 auto;
276
+ position: relative;
277
  }
278
 
279
+ .feature-mockup img {
280
+ width: 100%;
281
+ height: auto;
282
+ display: block;
283
+ border-radius: 30px;
284
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
285
  }
286
 
287
+ /* Waitlist Section */
288
+ .waitlist {
289
  background-color: var(--gray);
290
+ color: var(--black);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  text-align: center;
 
 
 
 
 
 
 
 
 
 
292
  display: flex;
293
  align-items: center;
294
  justify-content: center;
 
 
 
 
 
 
 
 
295
  }
296
 
297
+ .waitlist h2 {
298
+ font-size: 120px;
299
+ line-height: 0.9;
300
+ margin-bottom: 40px;
301
+ text-transform: uppercase;
302
  }
303
 
304
+ .waitlist h2 span {
305
+ display: block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
306
  }
307
 
308
+ .waitlist-form {
309
+ max-width: 500px;
310
+ margin: 0 auto;
311
+ position: relative;
 
 
 
312
  }
313
 
314
+ .waitlist-form input {
315
+ width: 100%;
316
+ padding: 20px 30px;
317
+ border: 2px solid var(--black);
318
+ border-radius: 50px;
319
+ font-family: var(--font-secondary);
320
+ font-size: 16px;
321
+ background-color: transparent;
322
+ color: var(--black);
323
+ outline: none;
324
  }
325
 
326
+ .waitlist-form button {
327
+ position: absolute;
328
+ right: 5px;
329
+ top: 5px;
330
+ width: 50px;
331
+ height: 50px;
332
+ border-radius: 50%;
333
+ background-color: var(--black);
334
+ color: var(--white);
335
+ border: none;
336
+ cursor: pointer;
337
+ transition: all 0.3s;
338
  }
339
 
340
+ .waitlist-form button:hover {
341
+ background-color: var(--orange);
 
 
 
 
 
342
  }
343
 
344
+ .waitlist p {
345
+ font-size: 16px;
346
+ margin-top: 20px;
347
+ text-transform: uppercase;
348
  }
349
 
350
  /* Footer */
351
  footer {
352
+ height: 100vh;
353
+ background-color: var(--black);
354
+ text-align: center;
 
 
 
355
  display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ scroll-snap-align: start;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  }
360
 
361
+ .footer-logo {
362
+ font-size: 72px;
363
+ font-weight: 700;
364
+ margin-bottom: 40px;
365
  }
366
 
367
+ /* Scroll Down Indicator */
368
+ .scroll-indicator {
369
+ position: absolute;
370
+ bottom: 40px;
371
+ left: 50%;
372
+ transform: translateX(-50%);
373
+ animation: bounce 2s infinite;
374
+ cursor: pointer;
375
+ z-index: 10;
376
  }
377
 
378
+ .scroll-indicator i {
379
+ font-size: 24px;
380
+ color: var(--white);
381
  }
382
 
383
+ @keyframes bounce {
384
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
385
+ 40% {transform: translateY(-20px) translateX(-50%);}
386
+ 60% {transform: translateY(-10px) translateX(-50%);}
 
 
387
  }
388
 
389
  /* Mobile Styles */
390
  @media (max-width: 992px) {
391
+ .hero h1,
392
+ .value-prop h2,
393
+ .feature-section h2,
394
+ .waitlist h2 {
395
+ font-size: 80px;
 
 
 
 
396
  }
397
 
398
+ .hero h2 {
399
+ font-size: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
400
  }
401
  }
402
 
 
409
  display: block;
410
  }
411
 
412
+ .hero h1,
413
+ .value-prop h2,
414
+ .feature-section h2,
415
+ .waitlist h2 {
416
+ font-size: 60px;
417
  }
418
+ }
419
 
420
+ @media (max-width: 576px) {
421
+ .hero h1,
422
+ .value-prop h2,
423
+ .feature-section h2,
424
+ .waitlist h2 {
425
+ font-size: 48px;
426
  }
427
 
428
+ .feature-mockup {
429
+ max-width: 250px;
430
  }
431
 
432
+ .waitlist-form input {
433
+ padding: 15px 20px;
434
+ font-size: 14px;
435
  }
436
 
437
+ .waitlist-form button {
438
+ width: 40px;
439
+ height: 40px;
440
+ top: 6px;
441
+ right: 6px;
442
  }
443
+ }
444
 
445
+ /* Animations */
446
+ @keyframes fadeIn {
447
+ from { opacity: 0; transform: translateY(20px); }
448
+ to { opacity: 1; transform: translateY(0); }
449
+ }
450
+
451
+ .animate {
452
+ animation: fadeIn 1s ease forwards;
453
+ }
454
+
455
+ .delay-1 {
456
+ animation-delay: 0.2s;
457
+ }
458
+
459
+ .delay-2 {
460
+ animation-delay: 0.4s;
461
+ }
462
+
463
+ .delay-3 {
464
+ animation-delay: 0.6s;
465
+ }
466
+
467
+ /* Font Face */
468
+ @font-face {
469
+ font-family: 'Bebas Neue';
470
+ src: url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
471
+ font-display: swap;
472
+ }
473
+
474
+ @font-face {
475
+ font-family: 'Montserrat';
476
+ src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
477
+ font-display: swap;
478
  }
479
  </style>
480
  </head>
481
  <body>
482
+ <!-- Brand Banner -->
483
+ <div class="brand-banner">
484
+ <div class="banner-wrapper">
485
+ <div class="banner-text">
486
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
487
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
488
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
489
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
490
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
491
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
492
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
493
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
  <!-- Header -->
499
+ <header id="header">
500
  <div class="container header-container">
501
  <a href="#" class="logo">ACCESS</a>
502
  <nav>
503
  <ul>
 
 
504
  <li><a href="#about">About</a></li>
505
+ <li><a href="#contact">Contact</a></li>
506
  </ul>
507
  </nav>
 
 
 
 
508
  <button class="mobile-menu-btn">
509
  <i class="fas fa-bars"></i>
510
  </button>
 
512
  </header>
513
 
514
  <!-- Hero Section -->
515
+ <section class="section hero" id="hero">
516
+ <div class="hero-content">
517
+ <h1 class="animate">
518
+ <span>GIGS</span>
519
+ <span>PARTIES</span>
520
+ <span>EVENTS</span>
521
+ </h1>
522
+ <h2 class="animate delay-1">GET ON / THE INSIDE</h2>
 
 
 
 
 
523
  </div>
524
+ <a href="#value-prop" class="scroll-indicator">
525
+ <i class="fas fa-chevron-down"></i>
526
+ </a>
527
  </section>
528
 
529
+ <!-- Brand Banner Separator -->
530
+ <div class="brand-banner">
531
+ <div class="banner-wrapper">
532
+ <div class="banner-text">
533
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
534
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
535
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
536
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
537
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
538
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
539
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
540
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
 
 
 
 
 
541
  </div>
542
  </div>
543
+ </div>
544
 
545
+ <!-- Value Proposition Section -->
546
+ <section class="section value-prop" id="value-prop">
547
  <div class="container">
548
+ <h2 class="animate">
549
+ <span>IN OUR</span>
550
+ <span>WORLD</span>
551
+ <span>EVERYONE</span>
552
+ <span>GOES OUT</span>
553
+ <span>AND NO</span>
554
+ <span>ONE</span>
555
+ <span>MISSES</span>
556
+ <span>OUT</span>
557
+ </h2>
558
+ <p class="animate delay-1">Get on the inside</p>
559
+ <p class="animate delay-1">Coming soon to the App Store.</p>
560
+ <p class="animate delay-2">Instantly get access to the most hyped events around you</p>
561
+ </div>
562
+ </section>
563
+
564
+ <!-- Brand Banner Separator -->
565
+ <div class="brand-banner">
566
+ <div class="banner-wrapper">
567
+ <div class="banner-text">
568
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
569
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
570
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
571
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
572
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
573
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
574
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
575
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
576
  </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Discover Feature Section -->
581
+ <section class="section feature-section discover" id="discover">
582
+ <div class="container">
583
+ <h2 class="animate">
584
+ <span>DISCOVER</span>
585
+ <span>THE IRL</span>
586
+ </h2>
587
+ <div class="feature-mockup animate delay-1">
588
+ <img src="https://via.placeholder.com/300x600/FFE300/000000?text=DISCOVER+SCREEN" alt="ACCESS App Discover Screen">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
589
  </div>
590
  </div>
591
  </section>
592
 
593
+ <!-- Brand Banner Separator -->
594
+ <div class="brand-banner">
595
+ <div class="banner-wrapper">
596
+ <div class="banner-text">
597
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
598
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
599
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
600
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
601
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
602
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
603
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
604
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
605
  </div>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Ultimate Fan Feature Section -->
610
+ <section class="section feature-section ultimate-fan" id="ultimate-fan">
611
+ <div class="container">
612
+ <h2 class="animate">
613
+ <span>BECOME</span>
614
+ <span>THE</span>
615
+ <span>ULTIMATE FAN</span>
616
+ </h2>
617
+ <div class="feature-mockup animate delay-1">
618
+ <img src="https://via.placeholder.com/300x600/0038FF/FFFFFF?text=ARTIST+PROFILE" alt="ACCESS App Artist Profile">
 
 
 
619
  </div>
620
  </div>
621
  </section>
622
 
623
+ <!-- Brand Banner Separator -->
624
+ <div class="brand-banner">
625
+ <div class="banner-wrapper">
626
+ <div class="banner-text">
627
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
628
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
629
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
630
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
631
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
632
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
633
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
634
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- Experience Feature Section -->
640
+ <section class="section feature-section experience" id="experience">
641
  <div class="container">
642
+ <h2 class="animate">
643
+ <span>EXPERIENCE</span>
644
+ <span>IT ALL</span>
645
+ </h2>
646
+ <div class="feature-mockup animate delay-1">
647
+ <img src="https://via.placeholder.com/300x600/FF5100/FFFFFF?text=EVENT+VIEW" alt="ACCESS App Event View">
648
+ </div>
649
  </div>
650
  </section>
651
 
652
+ <!-- Brand Banner Separator -->
653
+ <div class="brand-banner">
654
+ <div class="banner-wrapper">
655
+ <div class="banner-text">
656
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
657
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
658
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
659
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
660
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
661
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
662
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
663
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Waitlist Section -->
669
+ <section class="section waitlist" id="waitlist">
670
  <div class="container">
671
+ <h2 class="animate">
672
+ <span>JOIN THE</span>
673
+ <span>WAITLIST</span>
674
+ </h2>
675
+ <form class="waitlist-form animate delay-1" id="waitlistForm">
676
+ <input type="email" placeholder="Enter email address" required>
677
+ <button type="submit">β†’</button>
678
+ </form>
679
+ <p class="animate delay-2">Launching soon in all major cities.</p>
680
+ <p class="animate delay-2">Get on the inside.</p>
681
  </div>
682
  </section>
683
 
684
+ <!-- Brand Banner Separator -->
685
+ <div class="brand-banner">
686
+ <div class="banner-wrapper">
687
+ <div class="banner-text">
688
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
689
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
690
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
691
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
692
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
693
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
694
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
695
+ <div class="banner-item">ACCESS<span class="banner-star">β˜…</span></div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
  <!-- Footer -->
701
  <footer>
702
  <div class="container">
703
+ <div class="footer-logo animate">ACCESS</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
704
  </div>
705
  </footer>
706
 
707
  <script>
708
+ // Mobile Menu Toggle
709
  const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
710
  const nav = document.querySelector('nav ul');
711
+
712
  mobileMenuBtn.addEventListener('click', () => {
713
  nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
714
  });
715
 
716
+ // Infinite scrolling for banners
717
+ const banners = document.querySelectorAll('.banner-text');
718
+
719
+ banners.forEach(banner => {
720
+ // Duplicate the content to make the loop seamless
721
+ banner.innerHTML += banner.innerHTML;
722
+
723
+ // Adjust speed to match updated content width
724
+ banner.style.animationDuration = '20s';
725
+ });
726
+
727
+ // Smooth Scrolling for Anchor Links
728
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
729
  anchor.addEventListener('click', function(e) {
730
  e.preventDefault();
 
734
 
735
  const targetElement = document.querySelector(targetId);
736
  if (targetElement) {
737
+ targetElement.scrollIntoView({
 
738
  behavior: 'smooth'
739
  });
740
 
 
746
  });
747
  });
748
 
749
+ // Header Scroll Effect
750
  window.addEventListener('scroll', () => {
751
+ const header = document.getElementById('header');
752
  if (window.scrollY > 50) {
753
+ header.classList.add('scrolled');
754
  } else {
755
+ header.classList.remove('scrolled');
756
  }
757
  });
758
 
759
+ // Waitlist Form Submission
760
+ const waitlistForm = document.getElementById('waitlistForm');
761
+ if (waitlistForm) {
762
+ waitlistForm.addEventListener('submit', function(e) {
763
+ e.preventDefault();
764
+
765
+ const emailInput = this.querySelector('input[type="email"]');
766
+ const submitButton = this.querySelector('button[type="submit"]');
767
+
768
+ if (!emailInput.checkValidity()) {
769
+ alert('Please enter a valid email address');
770
+ return;
771
+ }
772
+
773
+ // Disable button during submission
774
+ submitButton.disabled = true;
775
+ submitButton.innerHTML = '...';
776
+
777
+ // Simulate form submission (in a real app, this would be an AJAX call)
778
+ setTimeout(() => {
779
+ submitButton.innerHTML = 'βœ“';
780
+ submitButton.style.backgroundColor = '#00FF00';
781
+
782
+ setTimeout(() => {
783
+ alert('Thanks! You\'ve been added to the waitlist.');
784
+ waitlistForm.reset();
785
+ submitButton.innerHTML = 'β†’';
786
+ submitButton.style.backgroundColor = '';
787
+ submitButton.disabled = false;
788
+ }, 500);
789
+ }, 1000);
790
+ });
791
+ }
792
+
793
+ // Intersection Observer for Animations
794
  const observer = new IntersectionObserver((entries) => {
795
  entries.forEach(entry => {
796
  if (entry.isIntersecting) {
797
+ entry.target.classList.add('animate');
 
798
  }
799
  });
800
  }, { threshold: 0.1 });
801
 
802
+ document.querySelectorAll('.animate').forEach(element => {
803
+ observer.observe(element);
 
 
 
804
  });
805
  </script>
806
+ </body>
807
  </html>