Hugging Face's logo

Spaces:
EllenBeta
/
test
Runtime error

App Files Community
EllenBeta commited on
Commit
f16d3b2
·
verified ·
1 Parent(s): 9cb1dc6

Create home.html

Browse files
Files changed (1) hide show
  1. home.html +757 -0
home.html ADDED
@@ -0,0 +1,757 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>VoxAI Pro | AI-Powered Voice Synthesis</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* Base Styles */
10
+ :root {
11
+ --primary: #4361ee;
12
+ --primary-dark: #3a0ca3;
13
+ --accent: #7209b7;
14
+ --light: #f8f9fa;
15
+ --dark: #212529;
16
+ --gray: #6c757d;
17
+ --light-gray: #e9ecef;
18
+ --gradient: linear-gradient(135deg, #4361ee 0%, #3a0ca3 50%, #7209b7 100%);
19
+ --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
20
+ --transition: all 0.3s ease;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ html {
31
+ scroll-behavior: smooth;
32
+ }
33
+
34
+ body {
35
+ background-color: var(--light);
36
+ color: var(--dark);
37
+ line-height: 1.6;
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ .container {
42
+ width: 100%;
43
+ max-width: 1200px;
44
+ margin: 0 auto;
45
+ padding: 0 20px;
46
+ }
47
+
48
+ section {
49
+ padding: 80px 0;
50
+ }
51
+
52
+ h1, h2, h3, h4 {
53
+ line-height: 1.2;
54
+ margin-bottom: 1rem;
55
+ }
56
+
57
+ h1 {
58
+ font-size: 3.5rem;
59
+ font-weight: 700;
60
+ }
61
+
62
+ h2 {
63
+ font-size: 2.5rem;
64
+ font-weight: 600;
65
+ }
66
+
67
+ h3 {
68
+ font-size: 1.8rem;
69
+ font-weight: 600;
70
+ }
71
+
72
+ p {
73
+ margin-bottom: 1.5rem;
74
+ font-size: 1.1rem;
75
+ }
76
+
77
+ .btn {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ padding: 16px 32px;
82
+ background: var(--gradient);
83
+ color: white;
84
+ border: none;
85
+ border-radius: 50px;
86
+ font-size: 1.1rem;
87
+ font-weight: 600;
88
+ cursor: pointer;
89
+ transition: var(--transition);
90
+ text-decoration: none;
91
+ box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
92
+ }
93
+
94
+ .btn:hover {
95
+ transform: translateY(-3px);
96
+ box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4);
97
+ }
98
+
99
+ .btn i {
100
+ margin-right: 10px;
101
+ }
102
+
103
+ /* Header Styles */
104
+ header {
105
+ background: white;
106
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
107
+ position: fixed;
108
+ width: 100%;
109
+ top: 0;
110
+ z-index: 1000;
111
+ }
112
+
113
+ .navbar {
114
+ display: flex;
115
+ justify-content: space-between;
116
+ align-items: center;
117
+ padding: 20px 0;
118
+ }
119
+
120
+ .logo {
121
+ display: flex;
122
+ align-items: center;
123
+ font-size: 1.8rem;
124
+ font-weight: 700;
125
+ color: var(--primary);
126
+ text-decoration: none;
127
+ }
128
+
129
+ .logo i {
130
+ margin-right: 10px;
131
+ font-size: 2rem;
132
+ }
133
+
134
+ .nav-links {
135
+ display: flex;
136
+ list-style: none;
137
+ }
138
+
139
+ .nav-links li {
140
+ margin-left: 30px;
141
+ }
142
+
143
+ .nav-links a {
144
+ text-decoration: none;
145
+ color: var(--dark);
146
+ font-weight: 500;
147
+ transition: var(--transition);
148
+ }
149
+
150
+ .nav-links a:hover {
151
+ color: var(--primary);
152
+ }
153
+
154
+ .mobile-menu-btn {
155
+ display: none;
156
+ background: none;
157
+ border: none;
158
+ font-size: 1.5rem;
159
+ color: var(--dark);
160
+ cursor: pointer;
161
+ }
162
+
163
+ /* Hero Section */
164
+ .hero {
165
+ padding-top: 150px;
166
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
167
+ position: relative;
168
+ overflow: hidden;
169
+ }
170
+
171
+ .hero-content {
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: space-between;
175
+ }
176
+
177
+ .hero-text {
178
+ flex: 1;
179
+ padding-right: 40px;
180
+ }
181
+
182
+ .hero-text h1 {
183
+ margin-bottom: 1.5rem;
184
+ background: var(--gradient);
185
+ -webkit-background-clip: text;
186
+ -webkit-text-fill-color: transparent;
187
+ }
188
+
189
+ .hero-text p {
190
+ font-size: 1.2rem;
191
+ color: var(--gray);
192
+ margin-bottom: 2rem;
193
+ }
194
+
195
+ .hero-image {
196
+ flex: 1;
197
+ text-align: center;
198
+ }
199
+
200
+ .hero-image img {
201
+ max-width: 100%;
202
+ border-radius: 10px;
203
+ box-shadow: var(--card-shadow);
204
+ }
205
+
206
+ /* Features Section */
207
+ .features {
208
+ background: white;
209
+ }
210
+
211
+ .section-header {
212
+ text-align: center;
213
+ margin-bottom: 60px;
214
+ }
215
+
216
+ .section-header h2 {
217
+ color: var(--dark);
218
+ margin-bottom: 1rem;
219
+ }
220
+
221
+ .section-header p {
222
+ color: var(--gray);
223
+ max-width: 700px;
224
+ margin: 0 auto;
225
+ }
226
+
227
+ .features-grid {
228
+ display: grid;
229
+ grid-template-columns: repeat(3, 1fr);
230
+ gap: 30px;
231
+ }
232
+
233
+ .feature-card {
234
+ background: white;
235
+ border-radius: 12px;
236
+ padding: 30px;
237
+ box-shadow: var(--card-shadow);
238
+ transition: var(--transition);
239
+ text-align: center;
240
+ }
241
+
242
+ .feature-card:hover {
243
+ transform: translateY(-10px);
244
+ }
245
+
246
+ .feature-icon {
247
+ width: 80px;
248
+ height: 80px;
249
+ background: var(--gradient);
250
+ border-radius: 50%;
251
+ display: flex;
252
+ align-items: center;
253
+ justify-content: center;
254
+ margin: 0 auto 20px;
255
+ }
256
+
257
+ .feature-icon i {
258
+ font-size: 2rem;
259
+ color: white;
260
+ }
261
+
262
+ .feature-card h3 {
263
+ margin-bottom: 15px;
264
+ }
265
+
266
+ /* How It Works Section */
267
+ .how-it-works {
268
+ background: var(--light-gray);
269
+ }
270
+
271
+ .steps {
272
+ display: flex;
273
+ justify-content: space-between;
274
+ margin-top: 50px;
275
+ position: relative;
276
+ }
277
+
278
+ .steps::before {
279
+ content: '';
280
+ position: absolute;
281
+ top: 40px;
282
+ left: 10%;
283
+ right: 10%;
284
+ height: 3px;
285
+ background: var(--primary);
286
+ z-index: 1;
287
+ }
288
+
289
+ .step {
290
+ text-align: center;
291
+ position: relative;
292
+ z-index: 2;
293
+ flex: 1;
294
+ padding: 0 20px;
295
+ }
296
+
297
+ .step-number {
298
+ width: 80px;
299
+ height: 80px;
300
+ background: white;
301
+ border: 3px solid var(--primary);
302
+ border-radius: 50%;
303
+ display: flex;
304
+ align-items: center;
305
+ justify-content: center;
306
+ margin: 0 auto 20px;
307
+ font-size: 1.8rem;
308
+ font-weight: 700;
309
+ color: var(--primary);
310
+ }
311
+
312
+ .step h3 {
313
+ margin-bottom: 15px;
314
+ }
315
+
316
+ /* CTA Section */
317
+ .cta {
318
+ background: var(--gradient);
319
+ color: white;
320
+ text-align: center;
321
+ padding: 100px 0;
322
+ }
323
+
324
+ .cta h2 {
325
+ margin-bottom: 1.5rem;
326
+ }
327
+
328
+ .cta p {
329
+ max-width: 700px;
330
+ margin: 0 auto 2rem;
331
+ font-size: 1.2rem;
332
+ }
333
+
334
+ .cta .btn {
335
+ background: white;
336
+ color: var(--primary);
337
+ }
338
+
339
+ .cta .btn:hover {
340
+ background: var(--light-gray);
341
+ }
342
+
343
+ /* Footer */
344
+ footer {
345
+ background: var(--dark);
346
+ color: white;
347
+ padding: 60px 0 30px;
348
+ }
349
+
350
+ .footer-content {
351
+ display: flex;
352
+ justify-content: space-between;
353
+ margin-bottom: 40px;
354
+ }
355
+
356
+ .footer-logo {
357
+ flex: 1;
358
+ }
359
+
360
+ .footer-logo .logo {
361
+ margin-bottom: 20px;
362
+ color: white;
363
+ }
364
+
365
+ .footer-links {
366
+ flex: 2;
367
+ display: flex;
368
+ justify-content: space-around;
369
+ }
370
+
371
+ .footer-links h4 {
372
+ margin-bottom: 20px;
373
+ font-size: 1.2rem;
374
+ }
375
+
376
+ .footer-links ul {
377
+ list-style: none;
378
+ }
379
+
380
+ .footer-links li {
381
+ margin-bottom: 10px;
382
+ }
383
+
384
+ .footer-links a {
385
+ color: var(--light-gray);
386
+ text-decoration: none;
387
+ transition: var(--transition);
388
+ }
389
+
390
+ .footer-links a:hover {
391
+ color: white;
392
+ }
393
+
394
+ .social-links {
395
+ display: flex;
396
+ margin-top: 20px;
397
+ }
398
+
399
+ .social-links a {
400
+ display: flex;
401
+ align-items: center;
402
+ justify-content: center;
403
+ width: 40px;
404
+ height: 40px;
405
+ background: rgba(255, 255, 255, 0.1);
406
+ border-radius: 50%;
407
+ margin-right: 10px;
408
+ color: white;
409
+ text-decoration: none;
410
+ transition: var(--transition);
411
+ }
412
+
413
+ .social-links a:hover {
414
+ background: var(--primary);
415
+ transform: translateY(-3px);
416
+ }
417
+
418
+ .copyright {
419
+ text-align: center;
420
+ padding-top: 30px;
421
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
422
+ color: var(--light-gray);
423
+ font-size: 0.9rem;
424
+ }
425
+
426
+ /* Responsive Styles */
427
+ @media (max-width: 992px) {
428
+ h1 {
429
+ font-size: 2.8rem;
430
+ }
431
+
432
+ h2 {
433
+ font-size: 2.2rem;
434
+ }
435
+
436
+ .features-grid {
437
+ grid-template-columns: repeat(2, 1fr);
438
+ }
439
+
440
+ .steps::before {
441
+ display: none;
442
+ }
443
+
444
+ .steps {
445
+ flex-direction: column;
446
+ }
447
+
448
+ .step {
449
+ margin-bottom: 40px;
450
+ }
451
+ }
452
+
453
+ @media (max-width: 768px) {
454
+ .navbar {
455
+ padding: 15px 0;
456
+ }
457
+
458
+ .nav-links {
459
+ display: none;
460
+ position: absolute;
461
+ top: 70px;
462
+ left: 0;
463
+ width: 100%;
464
+ background: white;
465
+ flex-direction: column;
466
+ padding: 20px;
467
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
468
+ }
469
+
470
+ .nav-links.active {
471
+ display: flex;
472
+ }
473
+
474
+ .nav-links li {
475
+ margin: 10px 0;
476
+ }
477
+
478
+ .mobile-menu-btn {
479
+ display: block;
480
+ }
481
+
482
+ .hero-content {
483
+ flex-direction: column;
484
+ }
485
+
486
+ .hero-text {
487
+ padding-right: 0;
488
+ margin-bottom: 40px;
489
+ text-align: center;
490
+ }
491
+
492
+ .footer-content {
493
+ flex-direction: column;
494
+ }
495
+
496
+ .footer-links {
497
+ margin-top: 30px;
498
+ flex-direction: column;
499
+ }
500
+
501
+ .footer-links > div {
502
+ margin-bottom: 30px;
503
+ }
504
+ }
505
+
506
+ @media (max-width: 576px) {
507
+ h1 {
508
+ font-size: 2.2rem;
509
+ }
510
+
511
+ h2 {
512
+ font-size: 1.8rem;
513
+ }
514
+
515
+ section {
516
+ padding: 60px 0;
517
+ }
518
+
519
+ .features-grid {
520
+ grid-template-columns: 1fr;
521
+ }
522
+
523
+ .hero {
524
+ padding-top: 120px;
525
+ }
526
+ }
527
+ </style>
528
+ </head>
529
+ <body>
530
+ <!-- Header -->
531
+ <header>
532
+ <div class="container">
533
+ <nav class="navbar">
534
+ <a href="#" class="logo">
535
+ <i class="fas fa-microphone-alt"></i>
536
+ VoxAI Pro
537
+ </a>
538
+ <ul class="nav-links">
539
+ <li><a href="#features">Features</a></li>
540
+ <li><a href="#how-it-works">How It Works</a></li>
541
+ <li><a href="#cta">Get Started</a></li>
542
+ </ul>
543
+ <button class="mobile-menu-btn">
544
+ <i class="fas fa-bars"></i>
545
+ </button>
546
+ </nav>
547
+ </div>
548
+ </header>
549
+
550
+ <!-- Hero Section -->
551
+ <section class="hero">
552
+ <div class="container">
553
+ <div class="hero-content">
554
+ <div class="hero-text">
555
+ <h1>Transform Text into Natural Sounding Speech with AI</h1>
556
+ <p>VoxAI Pro uses advanced artificial intelligence to create realistic voice clones from any text input. Generate professional voiceovers, audiobooks, and more in seconds.</p>
557
+ <a href="#cta" class="btn">
558
+ <i class="fas fa-magic"></i> Generate Voice Now
559
+ </a>
560
+ </div>
561
+ <div class="hero-image">
562
+ <img src="https://images.unsplash.com/photo-1589256469067-ea99122bbdc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="VoxAI Pro Interface">
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </section>
567
+
568
+ <!-- Features Section -->
569
+ <section class="features" id="features">
570
+ <div class="container">
571
+ <div class="section-header">
572
+ <h2>Powerful AI Voice Features</h2>
573
+ <p>Experience the next generation of text-to-speech technology with our advanced AI capabilities</p>
574
+ </div>
575
+ <div class="features-grid">
576
+ <div class="feature-card">
577
+ <div class="feature-icon">
578
+ <i class="fas fa-robot"></i>
579
+ </div>
580
+ <h3>AI-Powered Synthesis</h3>
581
+ <p>Our advanced neural networks create natural, human-like voices that capture emotion and intonation.</p>
582
+ </div>
583
+ <div class="feature-card">
584
+ <div class="feature-icon">
585
+ <i class="fas fa-user-friends"></i>
586
+ </div>
587
+ <h3>Voice Cloning</h3>
588
+ <p>Upload a short voice sample and our AI will clone the voice for your text-to-speech generation.</p>
589
+ </div>
590
+ <div class="feature-card">
591
+ <div class="feature-icon">
592
+ <i class="fas fa-language"></i>
593
+ </div>
594
+ <h3>Multiple Languages</h3>
595
+ <p>Generate speech in dozens of languages with authentic accents and pronunciation.</p>
596
+ </div>
597
+ <div class="feature-card">
598
+ <div class="feature-icon">
599
+ <i class="fas fa-sliders-h"></i>
600
+ </div>
601
+ <h3>Customizable Voices</h3>
602
+ <p>Adjust pitch, speed, and tone to create the perfect voice for your specific needs.</p>
603
+ </div>
604
+ <div class="feature-card">
605
+ <div class="feature-icon">
606
+ <i class="fas fa-bolt"></i>
607
+ </div>
608
+ <h3>Real-Time Processing</h3>
609
+ <p>Get your audio files in seconds with our optimized processing pipeline.</p>
610
+ </div>
611
+ <div class="feature-card">
612
+ <div class="feature-icon">
613
+ <i class="fas fa-shield-alt"></i>
614
+ </div>
615
+ <h3>Secure & Private</h3>
616
+ <p>Your data and voice samples are encrypted and never shared with third parties.</p>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </section>
621
+
622
+ <!-- How It Works Section -->
623
+ <section class="how-it-works" id="how-it-works">
624
+ <div class="container">
625
+ <div class="section-header">
626
+ <h2>How VoxAI Pro Works</h2>
627
+ <p>Transform text to speech in just three simple steps</p>
628
+ </div>
629
+ <div class="steps">
630
+ <div class="step">
631
+ <div class="step-number">1</div>
632
+ <h3>Enter Your Text</h3>
633
+ <p>Type or paste the text you want to convert into natural-sounding speech.</p>
634
+ </div>
635
+ <div class="step">
636
+ <div class="step-number">2</div>
637
+ <h3>Upload Voice Sample</h3>
638
+ <p>Provide a short audio sample of the voice you want to clone (optional).</p>
639
+ </div>
640
+ <div class="step">
641
+ <div class="step-number">3</div>
642
+ <h3>Generate & Download</h3>
643
+ <p>Click generate and download your high-quality audio file in seconds.</p>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </section>
648
+
649
+ <!-- CTA Section -->
650
+ <section class="cta" id="cta">
651
+ <div class="container">
652
+ <h2>Ready to Transform Your Text into Speech?</h2>
653
+ <p>Join thousands of users who are already creating professional voiceovers with VoxAI Pro. No credit card required to get started.</p>
654
+ <a href="#" class="btn" id="generateBtn">
655
+ <i class="fas fa-magic"></i> Generate Voice Now
656
+ </a>
657
+ </div>
658
+ </section>
659
+
660
+ <!-- Footer -->
661
+ <footer>
662
+ <div class="container">
663
+ <div class="footer-content">
664
+ <div class="footer-logo">
665
+ <a href="#" class="logo">
666
+ <i class="fas fa-microphone-alt"></i>
667
+ VoxAI Pro
668
+ </a>
669
+ <p>Transforming text into natural sounding speech with cutting-edge AI technology.</p>
670
+ <div class="social-links">
671
+ <a href="#"><i class="fab fa-twitter"></i></a>
672
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
673
+ <a href="#"><i class="fab fa-instagram"></i></a>
674
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
675
+ </div>
676
+ </div>
677
+ <div class="footer-links">
678
+ <div>
679
+ <h4>Product</h4>
680
+ <ul>
681
+ <li><a href="#">Features</a></li>
682
+ <li><a href="#">Pricing</a></li>
683
+ <li><a href="#">Use Cases</a></li>
684
+ <li><a href="#">API</a></li>
685
+ </ul>
686
+ </div>
687
+ <div>
688
+ <h4>Company</h4>
689
+ <ul>
690
+ <li><a href="#">About Us</a></li>
691
+ <li><a href="#">Careers</a></li>
692
+ <li><a href="#">Blog</a></li>
693
+ <li><a href="#">Contact</a></li>
694
+ </ul>
695
+ </div>
696
+ <div>
697
+ <h4>Support</h4>
698
+ <ul>
699
+ <li><a href="#">Help Center</a></li>
700
+ <li><a href="#">Documentation</a></li>
701
+ <li><a href="#">Privacy Policy</a></li>
702
+ <li><a href="#">Terms of Service</a></li>
703
+ </ul>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ <div class="copyright">
708
+ <p>&copy; 2023 VoxAI Pro. All rights reserved.</p>
709
+ </div>
710
+ </div>
711
+ </footer>
712
+
713
+ <script>
714
+ // Mobile menu toggle
715
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
716
+ const navLinks = document.querySelector('.nav-links');
717
+
718
+ mobileMenuBtn.addEventListener('click', () => {
719
+ navLinks.classList.toggle('active');
720
+ });
721
+
722
+ // Close mobile menu when clicking on a link
723
+ const navItems = document.querySelectorAll('.nav-links a');
724
+ navItems.forEach(item => {
725
+ item.addEventListener('click', () => {
726
+ navLinks.classList.remove('active');
727
+ });
728
+ });
729
+
730
+ // Smooth scrolling for anchor links
731
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
732
+ anchor.addEventListener('click', function(e) {
733
+ e.preventDefault();
734
+
735
+ const targetId = this.getAttribute('href');
736
+ if(targetId === '#') return;
737
+
738
+ const targetElement = document.querySelector(targetId);
739
+ if(targetElement) {
740
+ window.scrollTo({
741
+ top: targetElement.offsetTop - 80,
742
+ behavior: 'smooth'
743
+ });
744
+ }
745
+ });
746
+ });
747
+
748
+ // CTA button click handler
749
+ document.getElementById('generateBtn').addEventListener('click', function(e) {
750
+ e.preventDefault();
751
+ window.location.href = "https://api.bots.business/v2/bots/2781222/web-app/sign-in";
752
+ // In a real implementation, this would redirect to your actual app
753
+ // window.location.href = 'your-app-url.html';
754
+ });
755
+ </script>
756
+ </body>
757
+ </html>