Hugging Face's logo

Spaces:
fazgpt
/
anycoder-7620162d
Running

App Files Community
fazgpt commited on
Commit
1d9f3fc
·
verified ·
1 Parent(s): a0a1c1f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +890 -19
index.html CHANGED
@@ -1,19 +1,890 @@
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>Modern Landing Page</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-color: #667eea;
11
+ --secondary-color: #764ba2;
12
+ --accent-color: #f093fb;
13
+ --dark-color: #2d3748;
14
+ --light-color: #f7fafc;
15
+ --text-color: #4a5568;
16
+ --white: #ffffff;
17
+ --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
18
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
19
+ --transition: all 0.3s ease;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30
+ line-height: 1.6;
31
+ color: var(--text-color);
32
+ overflow-x: hidden;
33
+ }
34
+
35
+ /* Header Styles */
36
+ header {
37
+ position: fixed;
38
+ top: 0;
39
+ width: 100%;
40
+ background: rgba(255, 255, 255, 0.95);
41
+ backdrop-filter: blur(10px);
42
+ box-shadow: var(--shadow);
43
+ z-index: 1000;
44
+ transition: var(--transition);
45
+ }
46
+
47
+ .container {
48
+ max-width: 1200px;
49
+ margin: 0 auto;
50
+ padding: 0 20px;
51
+ }
52
+
53
+ .header-content {
54
+ display: flex;
55
+ justify-content: space-between;
56
+ align-items: center;
57
+ padding: 1rem 0;
58
+ }
59
+
60
+ .logo {
61
+ font-size: 1.5rem;
62
+ font-weight: 700;
63
+ color: var(--primary-color);
64
+ text-decoration: none;
65
+ }
66
+
67
+ .nav-links {
68
+ display: flex;
69
+ list-style: none;
70
+ }
71
+
72
+ .nav-links li {
73
+ margin-left: 2rem;
74
+ }
75
+
76
+ .nav-links a {
77
+ text-decoration: none;
78
+ color: var(--dark-color);
79
+ font-weight: 500;
80
+ transition: var(--transition);
81
+ position: relative;
82
+ }
83
+
84
+ .nav-links a:hover {
85
+ color: var(--primary-color);
86
+ }
87
+
88
+ .nav-links a::after {
89
+ content: '';
90
+ position: absolute;
91
+ bottom: -5px;
92
+ left: 0;
93
+ width: 0;
94
+ height: 2px;
95
+ background: var(--primary-color);
96
+ transition: var(--transition);
97
+ }
98
+
99
+ .nav-links a:hover::after {
100
+ width: 100%;
101
+ }
102
+
103
+ .mobile-menu {
104
+ display: none;
105
+ font-size: 1.5rem;
106
+ cursor: pointer;
107
+ }
108
+
109
+ /* Hero Section */
110
+ .hero {
111
+ height: 100vh;
112
+ background: var(--gradient);
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ text-align: center;
117
+ color: var(--white);
118
+ padding: 0 20px;
119
+ position: relative;
120
+ overflow: hidden;
121
+ }
122
+
123
+ .hero::before {
124
+ content: '';
125
+ position: absolute;
126
+ top: 0;
127
+ left: 0;
128
+ width: 100%;
129
+ height: 100%;
130
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,117.3C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
131
+ background-size: cover;
132
+ }
133
+
134
+ .hero-content {
135
+ position: relative;
136
+ z-index: 1;
137
+ max-width: 800px;
138
+ }
139
+
140
+ .hero h1 {
141
+ font-size: 4rem;
142
+ margin-bottom: 1rem;
143
+ animation: fadeInUp 1s ease;
144
+ }
145
+
146
+ .hero p {
147
+ font-size: 1.5rem;
148
+ margin-bottom: 2rem;
149
+ animation: fadeInUp 1s ease 0.2s;
150
+ opacity: 0.9;
151
+ }
152
+
153
+ .btn-group {
154
+ display: flex;
155
+ justify-content: center;
156
+ gap: 1rem;
157
+ animation: fadeInUp 1s ease 0.4s;
158
+ }
159
+
160
+ .btn {
161
+ padding: 1rem 2rem;
162
+ border-radius: 50px;
163
+ text-decoration: none;
164
+ font-weight: 600;
165
+ transition: var(--transition);
166
+ display: inline-flex;
167
+ align-items: center;
168
+ gap: 0.5rem;
169
+ }
170
+
171
+ .btn-primary {
172
+ background: var(--white);
173
+ color: var(--primary-color);
174
+ }
175
+
176
+ .btn-primary:hover {
177
+ transform: translateY(-3px);
178
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
179
+ }
180
+
181
+ .btn-secondary {
182
+ background: transparent;
183
+ color: var(--white);
184
+ border: 2px solid var(--white);
185
+ }
186
+
187
+ .btn-secondary:hover {
188
+ background: var(--white);
189
+ color: var(--primary-color);
190
+ }
191
+
192
+ /* Features Section */
193
+ .features {
194
+ padding: 5rem 0;
195
+ background: var(--light-color);
196
+ }
197
+
198
+ .section-title {
199
+ text-align: center;
200
+ margin-bottom: 4rem;
201
+ }
202
+
203
+ .section-title h2 {
204
+ font-size: 2.5rem;
205
+ color: var(--dark-color);
206
+ margin-bottom: 1rem;
207
+ }
208
+
209
+ .section-title p {
210
+ font-size: 1.1rem;
211
+ color: var(--text-color);
212
+ max-width: 600px;
213
+ margin: 0 auto;
214
+ }
215
+
216
+ .features-grid {
217
+ display: grid;
218
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
219
+ gap: 2rem;
220
+ max-width: 1200px;
221
+ margin: 0 auto;
222
+ }
223
+
224
+ .feature-card {
225
+ background: var(--white);
226
+ padding: 2rem;
227
+ border-radius: 15px;
228
+ box-shadow: var(--shadow);
229
+ transition: var(--transition);
230
+ text-align: center;
231
+ }
232
+
233
+ .feature-card:hover {
234
+ transform: translateY(-10px);
235
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
236
+ }
237
+
238
+ .feature-icon {
239
+ font-size: 3rem;
240
+ color: var(--primary-color);
241
+ margin-bottom: 1rem;
242
+ }
243
+
244
+ .feature-card h3 {
245
+ font-size: 1.5rem;
246
+ margin-bottom: 1rem;
247
+ color: var(--dark-color);
248
+ }
249
+
250
+ .feature-card p {
251
+ color: var(--text-color);
252
+ }
253
+
254
+ /* About Section */
255
+ .about {
256
+ padding: 5rem 0;
257
+ background: var(--white);
258
+ }
259
+
260
+ .about-content {
261
+ display: grid;
262
+ grid-template-columns: 1fr 1fr;
263
+ gap: 4rem;
264
+ align-items: center;
265
+ max-width: 1200px;
266
+ margin: 0 auto;
267
+ }
268
+
269
+ .about-text h2 {
270
+ font-size: 2.5rem;
271
+ color: var(--dark-color);
272
+ margin-bottom: 1.5rem;
273
+ }
274
+
275
+ .about-text p {
276
+ font-size: 1.1rem;
277
+ line-height: 1.8;
278
+ margin-bottom: 1.5rem;
279
+ color: var(--text-color);
280
+ }
281
+
282
+ .about-image {
283
+ position: relative;
284
+ border-radius: 15px;
285
+ overflow: hidden;
286
+ box-shadow: var(--shadow);
287
+ }
288
+
289
+ .about-image img {
290
+ width: 100%;
291
+ height: auto;
292
+ display: block;
293
+ transition: var(--transition);
294
+ }
295
+
296
+ .about-image:hover img {
297
+ transform: scale(1.05);
298
+ }
299
+
300
+ /* Testimonials Section */
301
+ .testimonials {
302
+ padding: 5rem 0;
303
+ background: var(--light-color);
304
+ }
305
+
306
+ .testimonials-grid {
307
+ display: grid;
308
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
309
+ gap: 2rem;
310
+ max-width: 1200px;
311
+ margin: 0 auto;
312
+ }
313
+
314
+ .testimonial-card {
315
+ background: var(--white);
316
+ padding: 2rem;
317
+ border-radius: 15px;
318
+ box-shadow: var(--shadow);
319
+ position: relative;
320
+ }
321
+
322
+ .testimonial-card::before {
323
+ content: '"';
324
+ position: absolute;
325
+ top: 1rem;
326
+ left: 1rem;
327
+ font-size: 4rem;
328
+ color: var(--accent-color);
329
+ opacity: 0.2;
330
+ }
331
+
332
+ .testimonial-card p {
333
+ font-size: 1.1rem;
334
+ line-height: 1.8;
335
+ margin-bottom: 1.5rem;
336
+ position: relative;
337
+ z-index: 1;
338
+ }
339
+
340
+ .testimonial-author {
341
+ display: flex;
342
+ align-items: center;
343
+ gap: 1rem;
344
+ }
345
+
346
+ .author-avatar {
347
+ width: 50px;
348
+ height: 50px;
349
+ border-radius: 50%;
350
+ overflow: hidden;
351
+ }
352
+
353
+ .author-info h4 {
354
+ font-size: 1.1rem;
355
+ color: var(--dark-color);
356
+ }
357
+
358
+ .author-info p {
359
+ font-size: 0.9rem;
360
+ color: var(--text-color);
361
+ }
362
+
363
+ /* CTA Section */
364
+ .cta {
365
+ padding: 5rem 0;
366
+ background: var(--gradient);
367
+ text-align: center;
368
+ color: var(--white);
369
+ }
370
+
371
+ .cta-content {
372
+ max-width: 800px;
373
+ margin: 0 auto;
374
+ }
375
+
376
+ .cta h2 {
377
+ font-size: 2.5rem;
378
+ margin-bottom: 1rem;
379
+ }
380
+
381
+ .cta p {
382
+ font-size: 1.2rem;
383
+ margin-bottom: 2rem;
384
+ opacity: 0.9;
385
+ }
386
+
387
+ /* Footer */
388
+ footer {
389
+ background: var(--dark-color);
390
+ color: var(--light-color);
391
+ padding: 3rem 0;
392
+ }
393
+
394
+ .footer-content {
395
+ display: grid;
396
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
397
+ gap: 2rem;
398
+ max-width: 1200px;
399
+ margin: 0 auto;
400
+ padding: 0 20px;
401
+ }
402
+
403
+ .footer-section h3 {
404
+ font-size: 1.2rem;
405
+ margin-bottom: 1rem;
406
+ }
407
+
408
+ .footer-section ul {
409
+ list-style: none;
410
+ }
411
+
412
+ .footer-section ul li {
413
+ margin-bottom: 0.5rem;
414
+ }
415
+
416
+ .footer-section ul li a {
417
+ color: var(--light-color);
418
+ text-decoration: none;
419
+ opacity: 0.8;
420
+ transition: var(--transition);
421
+ }
422
+
423
+ .footer-section ul li a:hover {
424
+ opacity: 1;
425
+ }
426
+
427
+ .social-links {
428
+ display: flex;
429
+ gap: 1rem;
430
+ margin-top: 1rem;
431
+ }
432
+
433
+ .social-links a {
434
+ width: 40px;
435
+ height: 40px;
436
+ border-radius: 50%;
437
+ background: rgba(255, 255, 255, 0.1);
438
+ display: flex;
439
+ align-items: center;
440
+ justify-content: center;
441
+ color: var(--white);
442
+ text-decoration: none;
443
+ transition: var(--transition);
444
+ }
445
+
446
+ .social-links a:hover {
447
+ background: var(--primary-color);
448
+ transform: translateY(-3px);
449
+ }
450
+
451
+ .copyright {
452
+ text-align: center;
453
+ padding: 2rem 0;
454
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
455
+ margin-top: 2rem;
456
+ }
457
+
458
+ /* Animations */
459
+ @keyframes fadeInUp {
460
+ from {
461
+ opacity: 0;
462
+ transform: translateY(30px);
463
+ }
464
+ to {
465
+ opacity: 1;
466
+ transform: translateY(0);
467
+ }
468
+ }
469
+
470
+ @keyframes float {
471
+ 0% {
472
+ transform: translateY(0);
473
+ }
474
+ 50% {
475
+ transform: translateY(-20px);
476
+ }
477
+ 100% {
478
+ transform: translateY(0);
479
+ }
480
+ }
481
+
482
+ /* Responsive Design */
483
+ @media (max-width: 768px) {
484
+ .nav-links {
485
+ display: none;
486
+ }
487
+
488
+ .mobile-menu {
489
+ display: block;
490
+ }
491
+
492
+ .hero h1 {
493
+ font-size: 2.5rem;
494
+ }
495
+
496
+ .hero p {
497
+ font-size: 1.2rem;
498
+ }
499
+
500
+ .about-content {
501
+ grid-template-columns: 1fr;
502
+ }
503
+
504
+ .header-content {
505
+ padding: 1rem;
506
+ }
507
+
508
+ .nav-links {
509
+ position: absolute;
510
+ top: 100%;
511
+ left: 0;
512
+ width: 100%;
513
+ background: var(--white);
514
+ flex-direction: column;
515
+ padding: 2rem;
516
+ box-shadow: var(--shadow);
517
+ }
518
+
519
+ .nav-links li {
520
+ margin: 1rem 0;
521
+ }
522
+
523
+ .mobile-menu.active + .nav-links {
524
+ display: flex;
525
+ }
526
+ }
527
+
528
+ /* Scroll to top button */
529
+ .scroll-top {
530
+ position: fixed;
531
+ bottom: 2rem;
532
+ right: 2rem;
533
+ width: 50px;
534
+ height: 50px;
535
+ background: var(--primary-color);
536
+ color: var(--white);
537
+ border: none;
538
+ border-radius: 50%;
539
+ cursor: pointer;
540
+ display: flex;
541
+ align-items: center;
542
+ justify-content: center;
543
+ opacity: 0;
544
+ transition: var(--transition);
545
+ z-index: 999;
546
+ }
547
+
548
+ .scroll-top.show {
549
+ opacity: 1;
550
+ }
551
+
552
+ .scroll-top:hover {
553
+ background: var(--secondary-color);
554
+ transform: translateY(-3px);
555
+ }
556
+ </style>
557
+ </head>
558
+ <body>
559
+ <!-- Header -->
560
+ <header>
561
+ <div class="container">
562
+ <div class="header-content">
563
+ <a href="#" class="logo">Built with anycoder</a>
564
+ <nav>
565
+ <div class="mobile-menu">
566
+ <i class="fas fa-bars"></i>
567
+ </div>
568
+ <ul class="nav-links">
569
+ <li><a href="#home">Home</a></li>
570
+ <li><a href="#features">Features</a></li>
571
+ <li><a href="#about">About</a></li>
572
+ <li><a href="#testimonials">Testimonials</a></li>
573
+ <li><a href="#cta">Contact</a></li>
574
+ </ul>
575
+ </nav>
576
+ </div>
577
+ </div>
578
+ </header>
579
+
580
+ <!-- Hero Section -->
581
+ <section class="hero" id="home">
582
+ <div class="hero-content">
583
+ <h1>Discover the Future of Innovation</h1>
584
+ <p>Experience cutting-edge technology that transforms your digital journey with seamless integration and exceptional performance.</p>
585
+ <div class="btn-group">
586
+ <a href="#cta" class="btn btn-primary">
587
+ <i class="fas fa-rocket"></i>
588
+ Get Started
589
+ </a>
590
+ <a href="#features" class="btn btn-secondary">
591
+ <i class="fas fa-play"></i>
592
+ Watch Demo
593
+ </a>
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ <!-- Features Section -->
599
+ <section class="features" id="features">
600
+ <div class="container">
601
+ <div class="section-title">
602
+ <h2>Powerful Features</h2>
603
+ <p>Everything you need to build amazing digital experiences</p>
604
+ </div>
605
+ <div class="features-grid">
606
+ <div class="feature-card">
607
+ <div class="feature-icon">
608
+ <i class="fas fa-bolt"></i>
609
+ </div>
610
+ <h3>Lightning Fast</h3>
611
+ <p>Experience blazing fast performance with optimized code and efficient algorithms that deliver results in milliseconds.</p>
612
+ </div>
613
+ <div class="feature-card">
614
+ <div class="feature-icon">
615
+ <i class="fas fa-shield-alt"></i>
616
+ </div>
617
+ <h3>Secure & Reliable</h3>
618
+ <p>Built with security in mind, our platform ensures your data is protected with enterprise-grade encryption and protocols.</p>
619
+ </div>
620
+ <div class="feature-card">
621
+ <div class="feature-icon">
622
+ <i class="fas fa-palette"></i>
623
+ </div>
624
+ <h3>Beautiful Design</h3>
625
+ <p>Crafted with modern UI/UX principles, our designs are not just beautiful but also intuitive and user-friendly.</p>
626
+ </div>
627
+ <div class="feature-card">
628
+ <div class="feature-icon">
629
+ <i class="fas fa-mobile-alt"></i>
630
+ </div>
631
+ <h3>Mobile First</h3>
632
+ <p>Responsive design that looks perfect on any device, from smartphones to desktops, ensuring optimal user experience.</p>
633
+ </div>
634
+ <div class="feature-card">
635
+ <div class="feature-icon">
636
+ <i class="fas fa-cogs"></i>
637
+ </div>
638
+ <h3>Customizable</h3>
639
+ <p> Tailor the platform to your needs with extensive customization options and flexible configurations.</p>
640
+ </div>
641
+ <div class="feature-card">
642
+ <div class="feature-icon">
643
+ <i class="fas fa-headset"></i>
644
+ </div>
645
+ <h3>24/7 Support</h3>
646
+ <p>Our dedicated support team is always ready to help you with any questions or issues you might encounter.</p>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </section>
651
+
652
+ <!-- About Section -->
653
+ <section class="about" id="about">
654
+ <div class="container">
655
+ <div class="about-content">
656
+ <div class="about-text">
657
+ <h2>About Our Platform</h2>
658
+ <p>We are a team of passionate developers and designers committed to creating innovative solutions that push the boundaries of what's possible. Our platform combines cutting-edge technology with user-centric design to deliver exceptional digital experiences.</p>
659
+ <p>With years of experience in the industry, we understand the challenges businesses face and have developed a comprehensive solution that addresses those needs. Whether you're a startup or an enterprise, our platform scales with your requirements.</p>
660
+ </div>
661
+ <div class="about-image">
662
+ <img src="https://picsum.photos/seed/tech/600/400" alt="Technology">
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </section>
667
+
668
+ <!-- Testimonials Section -->
669
+ <section class="testimonials" id="testimonials">
670
+ <div class="container">
671
+ <div class="section-title">
672
+ <h2>What Our Users Say</h2>
673
+ <p>Hear from satisfied customers who have transformed their businesses</p>
674
+ </div>
675
+ <div class="testimonials-grid">
676
+ <div class="testimonial-card">
677
+ <p>"This platform has completely revolutionized how we operate. The speed and reliability are unmatched in the industry."</p>
678
+ <div class="testimonial-author">
679
+ <div class="author-avatar">
680
+ <img src="https://picsum.photos/seed/user1/50/50" alt="User">
681
+ </div>
682
+ <div class="author-info">
683
+ <h4>Sarah Johnson</h4>
684
+ <p>CEO, TechCorp</p>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ <div class="testimonial-card">
689
+ <p>"The level of customization and support we received was exceptional. This is definitely the best investment we've made this year."</p>
690
+ <div class="testimonial-author">
691
+ <div class="author-avatar">
692
+ <img src="https://picsum.photos/seed/user2/50/50" alt="User">
693
+ </div>
694
+ <div class="author-info">
695
+ <h4>Michael Chen</h4>
696
+ <p>CTO, Innovate Labs</p>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ <div class="testimonial-card">
701
+ <p>"From implementation to daily use, everything has been smooth and intuitive. The team's dedication to excellence is evident."</p>
702
+ <div class="testimonial-author">
703
+ <div class="author-avatar">
704
+ <img src="https://picsum.photos/seed/user3/50/50" alt="User">
705
+ </div>
706
+ <div class="author-info">
707
+ <h4>Emily Rodriguez</h4>
708
+ <p>Founder, Startup Hub</p>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ </section>
715
+
716
+ <!-- CTA Section -->
717
+ <section class="cta" id="cta">
718
+ <div class="container">
719
+ <div class="cta-content">
720
+ <h2>Ready to Transform Your Business?</h2>
721
+ <p>Join thousands of satisfied customers who have already made the switch. Start your free trial today and experience the difference.</p>
722
+ <div class="btn-group">
723
+ <a href="#" class="btn btn-primary">
724
+ <i class="fas fa-download"></i>
725
+ Start Free Trial
726
+ </a>
727
+ <a href="#" class="btn btn-secondary">
728
+ <i class="fas fa-calendar"></i>
729
+ Schedule Demo
730
+ </a>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </section>
735
+
736
+ <!-- Footer -->
737
+ <footer>
738
+ <div class="container">
739
+ <div class="footer-content">
740
+ <div class="footer-section">
741
+ <h3>About Us</h3>
742
+ <p>We create innovative digital solutions that empower businesses to reach their full potential.</p>
743
+ </div>
744
+ <div class="footer-section">
745
+ <h3>Quick Links</h3>
746
+ <ul>
747
+ <li><a href="#home">Home</a></li>
748
+ <li><a href="#features">Features</a></li>
749
+ <li><a href="#about">About</a></li>
750
+ <li><a href="#testimonials">Testimonials</a></li>
751
+ </ul>
752
+ </div>
753
+ <div class="footer-section">
754
+ <h3>Contact</h3>
755
+ <ul>
756
+ <li><a href="#">support@example.com</a></li>
757
+ <li><a href="#">+1 (555) 123-4567</a></li>
758
+ <li><a href="#">123 Business St</a></li>
759
+ </ul>
760
+ </div>
761
+ <div class="footer-section">
762
+ <h3>Follow Us</h3>
763
+ <div class="social-links">
764
+ <a href="#"><i class="fab fa-twitter"></i></a>
765
+ <a href="#"><i class="fab fa-facebook"></i></a>
766
+ <a href="#"><i class="fab fa-instagram"></i></a>
767
+ <a href="#"><i class="fab fa-linkedin"></i></a>
768
+ </div>
769
+ </div>
770
+ </div>
771
+ <div class="copyright">
772
+ <p>&copy; 2023 Your Company. All rights reserved.</p>
773
+ </div>
774
+ </div>
775
+ </footer>
776
+
777
+ <!-- Scroll to Top Button -->
778
+ <button class="scroll-top">
779
+ <i class="fas fa-arrow-up"></i>
780
+ </button>
781
+
782
+ <script>
783
+ // Mobile menu toggle
784
+ const mobileMenu = document.querySelector('.mobile-menu');
785
+ const navLinks = document.querySelector('.nav-links');
786
+
787
+ mobileMenu.addEventListener('click', () => {
788
+ mobileMenu.classList.toggle('active');
789
+ navLinks.classList.toggle('active');
790
+ });
791
+
792
+ // Smooth scrolling for navigation links
793
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
794
+ anchor.addEventListener('click', function (e) {
795
+ e.preventDefault();
796
+ const target = document.querySelector(this.getAttribute('href'));
797
+ if (target) {
798
+ target.scrollIntoView({
799
+ behavior: 'smooth',
800
+ block: 'start'
801
+ });
802
+ // Close mobile menu if open
803
+ mobileMenu.classList.remove('active');
804
+ navLinks.classList.remove('active');
805
+ }
806
+ });
807
+ });
808
+
809
+ // Scroll to top button
810
+ const scrollTopBtn = document.querySelector('.scroll-top');
811
+
812
+ window.addEventListener('scroll', () => {
813
+ if (window.pageYOffset > 300) {
814
+ scrollTopBtn.classList.add('show');
815
+ } else {
816
+ scrollTopBtn.classList.remove('show');
817
+ }
818
+ });
819
+
820
+ scrollTopBtn.addEventListener('click', () => {
821
+ window.scrollTo({
822
+ top: 0,
823
+ behavior: 'smooth'
824
+ });
825
+ });
826
+
827
+ // Add animation on scroll
828
+ const observerOptions = {
829
+ threshold: 0.1,
830
+ rootMargin: '0px 0px -50px 0px'
831
+ };
832
+
833
+ const observer = new IntersectionObserver((entries) => {
834
+ entries.forEach(entry => {
835
+ if (entry.isIntersecting) {
836
+ entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
837
+ }
838
+ });
839
+ }, observerOptions);
840
+
841
+ // Observe all feature cards and testimonial cards
842
+ document.querySelectorAll('.feature-card, .testimonial-card').forEach(el => {
843
+ observer.observe(el);
844
+ });
845
+
846
+ // Add hover effect to cards
847
+ document.querySelectorAll('.feature-card, .testimonial-card').forEach(card => {
848
+ card.addEventListener('mouseenter', () => {
849
+ card.style.transform = 'translateY(-10px)';
850
+ });
851
+ card.addEventListener('mouseleave', () => {
852
+ card.style.transform = 'translateY(0)';
853
+ });
854
+ });
855
+
856
+ // Animate numbers on scroll (if you had numbers to animate)
857
+ // This is a placeholder for potential number animations
858
+ function animateValue(id, start, end, duration) {
859
+ const obj = document.getElementById(id);
860
+ if (!obj) return;
861
+
862
+ let startTimestamp = null;
863
+ const step = (timestamp) => {
864
+ if (!startTimestamp) startTimestamp = timestamp;
865
+ const progress = Math.min((timestamp - startTimestamp) / duration, 1);
866
+ obj.innerHTML = Math.floor(progress * (end - start) + start);
867
+ if (progress < 1) {
868
+ window.requestAnimationFrame(step);
869
+ }
870
+ };
871
+ window.requestAnimationFrame(step);
872
+ }
873
+
874
+ // Initialize animations when elements are in view
875
+ const animateOnScroll = (entries, observer) => {
876
+ entries.forEach(entry => {
877
+ if (entry.isIntersecting) {
878
+ // You can add number animations here
879
+ observer.unobserve(entry.target);
880
+ }
881
+ });
882
+ };
883
+
884
+ const statsObserver = new IntersectionObserver(animateOnScroll, observerOptions);
885
+ document.querySelectorAll('.feature-card').forEach(el => {
886
+ statsObserver.observe(el);
887
+ });
888
+ </script>
889
+ </body>
890
+ </html>