Hugging Face's logo

Spaces:
gaur3009
/
connectsquare
Running

App Files Community
gaur3009 commited on
Commit
6cf737e
·
verified ·
1 Parent(s): ca9b2c3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +961 -19
index.html CHANGED
@@ -1,19 +1,961 @@
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>SoulSync AI - Stay Connected Emotionally</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary: #8a4fff;
12
+ --primary-dark: #6c2bff;
13
+ --secondary: #ff6b8b;
14
+ --dark: #2a2a4a;
15
+ --light: #f8f9ff;
16
+ --gray: #e0e0f0;
17
+ --success: #4caf50;
18
+ --warning: #ff9800;
19
+ --error: #f44336;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Poppins', sans-serif;
30
+ background: linear-gradient(135deg, #f8f9ff 0%, #e6e9ff 100%);
31
+ color: var(--dark);
32
+ line-height: 1.6;
33
+ }
34
+
35
+ .container {
36
+ width: 100%;
37
+ max-width: 1200px;
38
+ margin: 0 auto;
39
+ padding: 0 20px;
40
+ }
41
+
42
+ /* Header Styles */
43
+ header {
44
+ background-color: white;
45
+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
46
+ position: sticky;
47
+ top: 0;
48
+ z-index: 100;
49
+ }
50
+
51
+ .navbar {
52
+ display: flex;
53
+ justify-content: space-between;
54
+ align-items: center;
55
+ padding: 20px 0;
56
+ }
57
+
58
+ .logo {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ font-size: 24px;
63
+ font-weight: 700;
64
+ color: var(--primary);
65
+ font-family: 'Playfair Display', serif;
66
+ }
67
+
68
+ .logo i {
69
+ color: var(--secondary);
70
+ }
71
+
72
+ .nav-links {
73
+ display: flex;
74
+ gap: 30px;
75
+ }
76
+
77
+ .nav-links a {
78
+ text-decoration: none;
79
+ color: var(--dark);
80
+ font-weight: 500;
81
+ transition: color 0.3s;
82
+ }
83
+
84
+ .nav-links a:hover {
85
+ color: var(--primary);
86
+ }
87
+
88
+ .auth-buttons {
89
+ display: flex;
90
+ gap: 15px;
91
+ }
92
+
93
+ .btn {
94
+ padding: 10px 20px;
95
+ border-radius: 30px;
96
+ font-weight: 500;
97
+ cursor: pointer;
98
+ transition: all 0.3s ease;
99
+ border: none;
100
+ font-size: 16px;
101
+ }
102
+
103
+ .btn-primary {
104
+ background-color: var(--primary);
105
+ color: white;
106
+ }
107
+
108
+ .btn-primary:hover {
109
+ background-color: var(--primary-dark);
110
+ transform: translateY(-2px);
111
+ box-shadow: 0 5px 15px rgba(138, 79, 255, 0.3);
112
+ }
113
+
114
+ .btn-secondary {
115
+ background-color: white;
116
+ color: var(--primary);
117
+ border: 2px solid var(--primary);
118
+ }
119
+
120
+ .btn-secondary:hover {
121
+ background-color: var(--primary);
122
+ color: white;
123
+ }
124
+
125
+ /* Hero Section */
126
+ .hero {
127
+ padding: 80px 0;
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 50px;
131
+ }
132
+
133
+ .hero-content {
134
+ flex: 1;
135
+ }
136
+
137
+ .hero h1 {
138
+ font-size: 3.5rem;
139
+ font-weight: 700;
140
+ line-height: 1.2;
141
+ margin-bottom: 20px;
142
+ font-family: 'Playfair Display', serif;
143
+ color: var(--dark);
144
+ }
145
+
146
+ .hero h1 span {
147
+ color: var(--primary);
148
+ }
149
+
150
+ .hero p {
151
+ font-size: 1.2rem;
152
+ margin-bottom: 30px;
153
+ color: #555;
154
+ }
155
+
156
+ .hero-image {
157
+ flex: 1;
158
+ display: flex;
159
+ justify-content: center;
160
+ }
161
+
162
+ .hero-image img {
163
+ max-width: 100%;
164
+ border-radius: 20px;
165
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
166
+ }
167
+
168
+ /* Features Section */
169
+ .section {
170
+ padding: 80px 0;
171
+ }
172
+
173
+ .section-title {
174
+ text-align: center;
175
+ margin-bottom: 60px;
176
+ }
177
+
178
+ .section-title h2 {
179
+ font-size: 2.5rem;
180
+ font-weight: 700;
181
+ margin-bottom: 15px;
182
+ font-family: 'Playfair Display', serif;
183
+ color: var(--dark);
184
+ }
185
+
186
+ .section-title p {
187
+ font-size: 1.2rem;
188
+ color: #666;
189
+ max-width: 700px;
190
+ margin: 0 auto;
191
+ }
192
+
193
+ .features-grid {
194
+ display: grid;
195
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
196
+ gap: 30px;
197
+ }
198
+
199
+ .feature-card {
200
+ background: white;
201
+ border-radius: 20px;
202
+ padding: 30px;
203
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
204
+ transition: transform 0.3s, box-shadow 0.3s;
205
+ }
206
+
207
+ .feature-card:hover {
208
+ transform: translateY(-10px);
209
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
210
+ }
211
+
212
+ .feature-icon {
213
+ width: 70px;
214
+ height: 70px;
215
+ border-radius: 50%;
216
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ margin-bottom: 20px;
221
+ }
222
+
223
+ .feature-icon i {
224
+ font-size: 30px;
225
+ color: white;
226
+ }
227
+
228
+ .feature-card h3 {
229
+ font-size: 1.5rem;
230
+ margin-bottom: 15px;
231
+ color: var(--dark);
232
+ }
233
+
234
+ /* How It Works */
235
+ .how-it-works {
236
+ background-color: white;
237
+ }
238
+
239
+ .steps-container {
240
+ display: flex;
241
+ justify-content: space-between;
242
+ flex-wrap: wrap;
243
+ gap: 20px;
244
+ }
245
+
246
+ .step {
247
+ flex: 1;
248
+ min-width: 250px;
249
+ text-align: center;
250
+ padding: 30px;
251
+ position: relative;
252
+ }
253
+
254
+ .step-number {
255
+ width: 50px;
256
+ height: 50px;
257
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
258
+ color: white;
259
+ border-radius: 50%;
260
+ display: flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+ font-size: 1.5rem;
264
+ font-weight: 700;
265
+ margin: 0 auto 20px;
266
+ }
267
+
268
+ .step h3 {
269
+ font-size: 1.5rem;
270
+ margin-bottom: 15px;
271
+ }
272
+
273
+ /* Use Cases */
274
+ .use-cases {
275
+ background: linear-gradient(135deg, var(--dark) 0%, #1a1a35 100%);
276
+ color: white;
277
+ }
278
+
279
+ .use-cases .section-title h2 {
280
+ color: white;
281
+ }
282
+
283
+ .use-cases .section-title p {
284
+ color: #ccc;
285
+ }
286
+
287
+ .case-grid {
288
+ display: grid;
289
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
290
+ gap: 30px;
291
+ }
292
+
293
+ .case-card {
294
+ background: rgba(255, 255, 255, 0.1);
295
+ border-radius: 20px;
296
+ padding: 30px;
297
+ backdrop-filter: blur(10px);
298
+ border: 1px solid rgba(255, 255, 255, 0.1);
299
+ transition: transform 0.3s;
300
+ }
301
+
302
+ .case-card:hover {
303
+ transform: translateY(-10px);
304
+ background: rgba(255, 255, 255, 0.15);
305
+ }
306
+
307
+ .case-card i {
308
+ font-size: 2.5rem;
309
+ color: var(--secondary);
310
+ margin-bottom: 20px;
311
+ }
312
+
313
+ .case-card h3 {
314
+ font-size: 1.5rem;
315
+ margin-bottom: 15px;
316
+ }
317
+
318
+ /* Testimonials */
319
+ .testimonials-grid {
320
+ display: grid;
321
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
322
+ gap: 30px;
323
+ }
324
+
325
+ .testimonial {
326
+ background: white;
327
+ border-radius: 20px;
328
+ padding: 30px;
329
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
330
+ }
331
+
332
+ .testimonial-header {
333
+ display: flex;
334
+ align-items: center;
335
+ gap: 15px;
336
+ margin-bottom: 20px;
337
+ }
338
+
339
+ .avatar {
340
+ width: 60px;
341
+ height: 60px;
342
+ border-radius: 50%;
343
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
344
+ display: flex;
345
+ align-items: center;
346
+ justify-content: center;
347
+ color: white;
348
+ font-weight: bold;
349
+ font-size: 1.5rem;
350
+ }
351
+
352
+ .testimonial-info h3 {
353
+ font-size: 1.2rem;
354
+ margin-bottom: 5px;
355
+ }
356
+
357
+ .testimonial-info p {
358
+ color: #777;
359
+ font-size: 0.9rem;
360
+ }
361
+
362
+ .rating {
363
+ color: #ffc107;
364
+ margin: 10px 0;
365
+ }
366
+
367
+ /* Pricing */
368
+ .pricing-grid {
369
+ display: grid;
370
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
371
+ gap: 30px;
372
+ }
373
+
374
+ .pricing-card {
375
+ background: white;
376
+ border-radius: 20px;
377
+ padding: 40px 30px;
378
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
379
+ text-align: center;
380
+ position: relative;
381
+ border: 2px solid var(--gray);
382
+ transition: all 0.3s;
383
+ }
384
+
385
+ .pricing-card.popular {
386
+ border-color: var(--primary);
387
+ transform: scale(1.05);
388
+ box-shadow: 0 15px 40px rgba(138, 79, 255, 0.2);
389
+ }
390
+
391
+ .popular-tag {
392
+ position: absolute;
393
+ top: -15px;
394
+ left: 50%;
395
+ transform: translateX(-50%);
396
+ background: var(--primary);
397
+ color: white;
398
+ padding: 5px 15px;
399
+ border-radius: 20px;
400
+ font-size: 0.9rem;
401
+ font-weight: 500;
402
+ }
403
+
404
+ .pricing-card h3 {
405
+ font-size: 1.8rem;
406
+ margin-bottom: 15px;
407
+ color: var(--dark);
408
+ }
409
+
410
+ .price {
411
+ font-size: 3rem;
412
+ font-weight: 700;
413
+ margin-bottom: 20px;
414
+ color: var(--primary);
415
+ }
416
+
417
+ .price span {
418
+ font-size: 1rem;
419
+ color: #777;
420
+ }
421
+
422
+ .pricing-features {
423
+ list-style: none;
424
+ margin-bottom: 30px;
425
+ }
426
+
427
+ .pricing-features li {
428
+ padding: 10px 0;
429
+ border-bottom: 1px solid var(--gray);
430
+ }
431
+
432
+ /* Demo Section */
433
+ .demo-section {
434
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
435
+ color: white;
436
+ text-align: center;
437
+ padding: 100px 0;
438
+ border-radius: 0 0 40px 40px;
439
+ }
440
+
441
+ .demo-section h2 {
442
+ font-size: 2.5rem;
443
+ margin-bottom: 20px;
444
+ font-family: 'Playfair Display', serif;
445
+ }
446
+
447
+ .demo-section p {
448
+ font-size: 1.2rem;
449
+ max-width: 700px;
450
+ margin: 0 auto 30px;
451
+ }
452
+
453
+ .demo-btn {
454
+ background: white;
455
+ color: var(--primary);
456
+ font-weight: 600;
457
+ padding: 15px 40px;
458
+ font-size: 1.1rem;
459
+ }
460
+
461
+ .demo-btn:hover {
462
+ transform: translateY(-5px);
463
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
464
+ }
465
+
466
+ /* Footer */
467
+ footer {
468
+ background: var(--dark);
469
+ color: white;
470
+ padding: 60px 0 30px;
471
+ }
472
+
473
+ .footer-grid {
474
+ display: grid;
475
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
476
+ gap: 40px;
477
+ margin-bottom: 40px;
478
+ }
479
+
480
+ .footer-col h3 {
481
+ font-size: 1.5rem;
482
+ margin-bottom: 20px;
483
+ position: relative;
484
+ padding-bottom: 10px;
485
+ }
486
+
487
+ .footer-col h3:after {
488
+ content: '';
489
+ position: absolute;
490
+ left: 0;
491
+ bottom: 0;
492
+ width: 50px;
493
+ height: 3px;
494
+ background: var(--primary);
495
+ }
496
+
497
+ .footer-links {
498
+ list-style: none;
499
+ }
500
+
501
+ .footer-links li {
502
+ margin-bottom: 10px;
503
+ }
504
+
505
+ .footer-links a {
506
+ color: #ccc;
507
+ text-decoration: none;
508
+ transition: color 0.3s;
509
+ }
510
+
511
+ .footer-links a:hover {
512
+ color: var(--primary);
513
+ }
514
+
515
+ .social-links {
516
+ display: flex;
517
+ gap: 15px;
518
+ margin-top: 20px;
519
+ }
520
+
521
+ .social-links a {
522
+ width: 40px;
523
+ height: 40px;
524
+ border-radius: 50%;
525
+ background: rgba(255, 255, 255, 0.1);
526
+ display: flex;
527
+ align-items: center;
528
+ justify-content: center;
529
+ color: white;
530
+ transition: all 0.3s;
531
+ }
532
+
533
+ .social-links a:hover {
534
+ background: var(--primary);
535
+ transform: translateY(-5px);
536
+ }
537
+
538
+ .copyright {
539
+ text-align: center;
540
+ padding-top: 30px;
541
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
542
+ color: #aaa;
543
+ font-size: 0.9rem;
544
+ }
545
+
546
+ /* Responsive Design */
547
+ @media (max-width: 992px) {
548
+ .hero {
549
+ flex-direction: column;
550
+ text-align: center;
551
+ }
552
+
553
+ .hero-content {
554
+ margin-bottom: 40px;
555
+ }
556
+
557
+ .navbar {
558
+ flex-direction: column;
559
+ gap: 20px;
560
+ }
561
+
562
+ .nav-links {
563
+ gap: 15px;
564
+ flex-wrap: wrap;
565
+ justify-content: center;
566
+ }
567
+ }
568
+
569
+ @media (max-width: 768px) {
570
+ .hero h1 {
571
+ font-size: 2.5rem;
572
+ }
573
+
574
+ .section-title h2 {
575
+ font-size: 2rem;
576
+ }
577
+
578
+ .demo-section h2 {
579
+ font-size: 2rem;
580
+ }
581
+ }
582
+ </style>
583
+ </head>
584
+ <body>
585
+ <!-- Header -->
586
+ <header>
587
+ <div class="container">
588
+ <div class="navbar">
589
+ <div class="logo">
590
+ <i class="fas fa-heart"></i>
591
+ <span>SoulSync AI</span>
592
+ </div>
593
+ <div class="nav-links">
594
+ <a href="#features">Features</a>
595
+ <a href="#how-it-works">How It Works</a>
596
+ <a href="#use-cases">Use Cases</a>
597
+ <a href="#pricing">Pricing</a>
598
+ <a href="#testimonials">Testimonials</a>
599
+ </div>
600
+ <div class="auth-buttons">
601
+ <button class="btn btn-secondary">Log In</button>
602
+ <button class="btn btn-primary">Get Started</button>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </header>
607
+
608
+ <!-- Hero Section -->
609
+ <section class="hero">
610
+ <div class="container">
611
+ <div class="hero-content">
612
+ <h1>Stay Emotionally Connected with Your Partner, <span>Always</span></h1>
613
+ <p>SoulSync AI creates a personalized AI companion that mirrors your partner's personality, voice, and communication style. Bridge the distance and stay connected like never before.</p>
614
+ <div class="hero-buttons">
615
+ <button class="btn btn-primary">Start Free Trial</button>
616
+ <button class="btn btn-secondary">See Demo</button>
617
+ </div>
618
+ </div>
619
+ <div class="hero-image">
620
+ <img src="https://images.unsplash.com/photo-1569003339405-ea396a5a8a90?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Couple using SoulSync AI">
621
+ </div>
622
+ </div>
623
+ </section>
624
+
625
+ <!-- Features Section -->
626
+ <section id="features" class="section">
627
+ <div class="container">
628
+ <div class="section-title">
629
+ <h2>Emotional Connection Technology</h2>
630
+ <p>Powered by advanced AI that understands and replicates the unique connection between partners</p>
631
+ </div>
632
+ <div class="features-grid">
633
+ <div class="feature-card">
634
+ <div class="feature-icon">
635
+ <i class="fas fa-heart"></i>
636
+ </div>
637
+ <h3>Emotional Presence</h3>
638
+ <p>Experience the emotional comfort of your partner's presence anytime, anywhere. Our AI captures the essence of your connection.</p>
639
+ </div>
640
+ <div class="feature-card">
641
+ <div class="feature-icon">
642
+ <i class="fas fa-microphone"></i>
643
+ </div>
644
+ <h3>Voice Cloning</h3>
645
+ <p>Hear your partner's voice with our realistic voice cloning technology. Authentic conversations that feel real.</p>
646
+ </div>
647
+ <div class="feature-card">
648
+ <div class="feature-icon">
649
+ <i class="fas fa-brain"></i>
650
+ </div>
651
+ <h3>Personality Mirroring</h3>
652
+ <p>AI learns and replicates your partner's unique communication style, humor, and emotional patterns.</p>
653
+ </div>
654
+ <div class="feature-card">
655
+ <div class="feature-icon">
656
+ <i class="fas fa-shield-alt"></i>
657
+ </div>
658
+ <h3>Privacy First</h3>
659
+ <p>Military-grade encryption and strict consent protocols ensure your data remains completely private.</p>
660
+ </div>
661
+ <div class="feature-card">
662
+ <div class="feature-icon">
663
+ <i class="fas fa-sync-alt"></i>
664
+ </div>
665
+ <h3>Two-Way Connection</h3>
666
+ <p>Both partners create their AI counterparts for a mutual connection experience that strengthens relationships.</p>
667
+ </div>
668
+ <div class="feature-card">
669
+ <div class="feature-icon">
670
+ <i class="fas fa-toggle-on"></i>
671
+ </div>
672
+ <h3>Consent Controls</h3>
673
+ <p>Complete control over what your AI can say and share. Set boundaries that both partners agree on.</p>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </section>
678
+
679
+ <!-- How It Works -->
680
+ <section id="how-it-works" class="section how-it-works">
681
+ <div class="container">
682
+ <div class="section-title">
683
+ <h2>How SoulSync Works</h2>
684
+ <p>A seamless process to create your partner's AI companion with complete transparency and consent</p>
685
+ </div>
686
+ <div class="steps-container">
687
+ <div class="step">
688
+ <div class="step-number">1</div>
689
+ <h3>Consent & Setup</h3>
690
+ <p>Both partners agree to create their AI versions and set privacy boundaries.</p>
691
+ </div>
692
+ <div class="step">
693
+ <div class="step-number">2</div>
694
+ <h3>Personalize</h3>
695
+ <p>Upload conversations, voice notes, videos, and memories to train your AI.</p>
696
+ </div>
697
+ <div class="step">
698
+ <div class="step-number">3</div>
699
+ <h3>AI Training</h3>
700
+ <p>Our technology creates a unique personality profile that mirrors your partner.</p>
701
+ </div>
702
+ <div class="step">
703
+ <div class="step-number">4</div>
704
+ <h3>Connect</h3>
705
+ <p>Start interacting with your partner's AI through chat, voice, or video.</p>
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </section>
710
+
711
+ <!-- Use Cases -->
712
+ <section id="use-cases" class="section use-cases">
713
+ <div class="container">
714
+ <div class="section-title">
715
+ <h2>For Couples Who Need Connection</h2>
716
+ <p>SoulSync helps maintain emotional bonds in challenging circumstances</p>
717
+ </div>
718
+ <div class="case-grid">
719
+ <div class="case-card">
720
+ <i class="fas fa-globe-americas"></i>
721
+ <h3>Long-Distance Relationships</h3>
722
+ <p>Bridge time zones and distance with constant emotional presence. Feel connected even when miles apart.</p>
723
+ </div>
724
+ <div class="case-card">
725
+ <i class="fas fa-user-clock"></i>
726
+ <h3>Busy Professionals</h3>
727
+ <p>Maintain your connection during demanding work schedules. Never miss an important moment.</p>
728
+ </div>
729
+ <div class="case-card">
730
+ <i class="fas fa-shield-alt"></i>
731
+ <h3>Military Families</h3>
732
+ <p>Stay connected during deployments. Our secure platform works even in low-bandwidth situations.</p>
733
+ </div>
734
+ <div class="case-card">
735
+ <i class="fas fa-heartbeat"></i>
736
+ <h3>Therapeutic Support</h3>
737
+ <p>Used alongside counseling to maintain connection during challenging relationship phases.</p>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </section>
742
+
743
+ <!-- Testimonials -->
744
+ <section id="testimonials" class="section">
745
+ <div class="container">
746
+ <div class="section-title">
747
+ <h2>Real Relationships, Real Results</h2>
748
+ <p>Couples who have strengthened their connection with SoulSync</p>
749
+ </div>
750
+ <div class="testimonials-grid">
751
+ <div class="testimonial">
752
+ <div class="testimonial-header">
753
+ <div class="avatar">MJ</div>
754
+ <div class="testimonial-info">
755
+ <h3>Michael & Jessica</h3>
756
+ <p>Long-distance for 2 years</p>
757
+ </div>
758
+ </div>
759
+ <div class="rating">
760
+ <i class="fas fa-star"></i>
761
+ <i class="fas fa-star"></i>
762
+ <i class="fas fa-star"></i>
763
+ <i class="fas fa-star"></i>
764
+ <i class="fas fa-star"></i>
765
+ </div>
766
+ <p>"With our 8-hour time difference, SoulSync has been a game-changer. Hearing Jessica's voice when I wake up makes the distance disappear. It's incredible how the AI captures her humor perfectly."</p>
767
+ </div>
768
+ <div class="testimonial">
769
+ <div class="testimonial-header">
770
+ <div class="avatar">DS</div>
771
+ <div class="testimonial-info">
772
+ <h3>David & Sarah</h3>
773
+ <p>Military family</p>
774
+ </div>
775
+ </div>
776
+ <div class="rating">
777
+ <i class="fas fa-star"></i>
778
+ <i class="fas fa-star"></i>
779
+ <i class="fas fa-star"></i>
780
+ <i class="fas fa-star"></i>
781
+ <i class="fas fa-star"></i>
782
+ </div>
783
+ <p>"During David's deployment, SoulSync helped our kids feel connected to their dad. The voice cloning is so realistic, it brings tears to my eyes. It's helped us maintain our emotional bond."</p>
784
+ </div>
785
+ <div class="testimonial">
786
+ <div class="testimonial-header">
787
+ <div class="avatar">AT</div>
788
+ <div class="testimonial-info">
789
+ <h3>Alex & Taylor</h3>
790
+ <p>Shift workers</p>
791
+ </div>
792
+ </div>
793
+ <div class="rating">
794
+ <i class="fas fa-star"></i>
795
+ <i class="fas fa-star"></i>
796
+ <i class="fas fa-star"></i>
797
+ <i class="fas fa-star"></i>
798
+ <i class="fas fa-star-half-alt"></i>
799
+ </div>
800
+ <p>"With opposite work schedules, we barely saw each other. SoulSync helped us stay connected throughout the day. The AI even reminds me of things Taylor would say, which helps avoid misunderstandings."</p>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </section>
805
+
806
+ <!-- Pricing -->
807
+ <section id="pricing" class="section">
808
+ <div class="container">
809
+ <div class="section-title">
810
+ <h2>Simple, Transparent Pricing</h2>
811
+ <p>Choose the plan that works for your relationship needs</p>
812
+ </div>
813
+ <div class="pricing-grid">
814
+ <div class="pricing-card">
815
+ <h3>Basic</h3>
816
+ <div class="price">$19<span>/month</span></div>
817
+ <ul class="pricing-features">
818
+ <li>Text-based AI companion</li>
819
+ <li>Personality mirroring</li>
820
+ <li>100 message credits/month</li>
821
+ <li>Basic privacy controls</li>
822
+ <li>Email support</li>
823
+ </ul>
824
+ <button class="btn btn-secondary">Get Started</button>
825
+ </div>
826
+ <div class="pricing-card popular">
827
+ <div class="popular-tag">Most Popular</div>
828
+ <h3>Premium</h3>
829
+ <div class="price">$39<span>/month</span></div>
830
+ <ul class="pricing-features">
831
+ <li>Voice cloning & conversations</li>
832
+ <li>Advanced personality mirroring</li>
833
+ <li>Unlimited messages</li>
834
+ <li>Video avatar generation</li>
835
+ <li>Advanced privacy controls</li>
836
+ <li>Priority support</li>
837
+ </ul>
838
+ <button class="btn btn-primary">Get Started</button>
839
+ </div>
840
+ <div class="pricing-card">
841
+ <h3>Couples Plan</h3>
842
+ <div class="price">$59<span>/month</span></div>
843
+ <ul class="pricing-features">
844
+ <li>Two Premium accounts</li>
845
+ <li>Relationship insights dashboard</li>
846
+ <li>Shared memory bank</li>
847
+ <li>Date night suggestions</li>
848
+ <li>Anniversary reminders</li>
849
+ <li>24/7 premium support</li>
850
+ </ul>
851
+ <button class="btn btn-secondary">Get Started</button>
852
+ </div>
853
+ </div>
854
+ </div>
855
+ </section>
856
+
857
+ <!-- Demo Section -->
858
+ <section class="demo-section">
859
+ <div class="container">
860
+ <h2>Experience the SoulSync Difference</h2>
861
+ <p>See how our AI companion can strengthen your relationship and maintain emotional connection</p>
862
+ <button class="btn demo-btn">Try Free Demo</button>
863
+ </div>
864
+ </section>
865
+
866
+ <!-- Footer -->
867
+ <footer>
868
+ <div class="container">
869
+ <div class="footer-grid">
870
+ <div class="footer-col">
871
+ <div class="logo">
872
+ <i class="fas fa-heart"></i>
873
+ <span>SoulSync AI</span>
874
+ </div>
875
+ <p>Helping couples maintain emotional connections through ethical AI technology.</p>
876
+ <div class="social-links">
877
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
878
+ <a href="#"><i class="fab fa-twitter"></i></a>
879
+ <a href="#"><i class="fab fa-instagram"></i></a>
880
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
881
+ </div>
882
+ </div>
883
+ <div class="footer-col">
884
+ <h3>Product</h3>
885
+ <ul class="footer-links">
886
+ <li><a href="#">Features</a></li>
887
+ <li><a href="#">How It Works</a></li>
888
+ <li><a href="#">Use Cases</a></li>
889
+ <li><a href="#">Pricing</a></li>
890
+ <li><a href="#">Demo</a></li>
891
+ </ul>
892
+ </div>
893
+ <div class="footer-col">
894
+ <h3>Resources</h3>
895
+ <ul class="footer-links">
896
+ <li><a href="#">Blog</a></li>
897
+ <li><a href="#">Relationship Tips</a></li>
898
+ <li><a href="#">Privacy Policy</a></li>
899
+ <li><a href="#">Ethical Guidelines</a></li>
900
+ <li><a href="#">Research</a></li>
901
+ </ul>
902
+ </div>
903
+ <div class="footer-col">
904
+ <h3>Company</h3>
905
+ <ul class="footer-links">
906
+ <li><a href="#">About Us</a></li>
907
+ <li><a href="#">Careers</a></li>
908
+ <li><a href="#">Contact</a></li>
909
+ <li><a href="#">Partners</a></li>
910
+ <li><a href="#">Press</a></li>
911
+ </ul>
912
+ </div>
913
+ </div>
914
+ <div class="copyright">
915
+ <p>&copy; 2023 SoulSync AI. All rights reserved. Designed with ❤️ for stronger relationships.</p>
916
+ </div>
917
+ </div>
918
+ </footer>
919
+
920
+ <script>
921
+ // Smooth scrolling for navigation links
922
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
923
+ anchor.addEventListener('click', function (e) {
924
+ e.preventDefault();
925
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
926
+ behavior: 'smooth'
927
+ });
928
+ });
929
+ });
930
+
931
+ // Simple animation for feature cards
932
+ const featureCards = document.querySelectorAll('.feature-card');
933
+
934
+ const observer = new IntersectionObserver((entries) => {
935
+ entries.forEach(entry => {
936
+ if (entry.isIntersecting) {
937
+ entry.target.style.opacity = 1;
938
+ entry.target.style.transform = 'translateY(0)';
939
+ }
940
+ });
941
+ }, { threshold: 0.1 });
942
+
943
+ featureCards.forEach(card => {
944
+ card.style.opacity = 0;
945
+ card.style.transform = 'translateY(20px)';
946
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
947
+ observer.observe(card);
948
+ });
949
+
950
+ // Demo button animation
951
+ const demoBtn = document.querySelector('.demo-btn');
952
+ demoBtn.addEventListener('mouseenter', () => {
953
+ demoBtn.style.transform = 'translateY(-5px)';
954
+ });
955
+
956
+ demoBtn.addEventListener('mouseleave', () => {
957
+ demoBtn.style.transform = 'translateY(0)';
958
+ });
959
+ </script>
960
+ </body>
961
+ </html>