Hugging Face's logo

Spaces:
buzz9564
/
undefined
Running

App Files Community
buzz9564 commited on
Commit
bae3c40
·
verified ·
1 Parent(s): ce16172

finish

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. demo.html +124 -0
  3. index.html +591 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
demo.html ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI Avatar Demo - SyncMyCareer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+ .gradient-text {
17
+ background: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
18
+ -webkit-background-clip: text;
19
+ background-clip: text;
20
+ color: transparent;
21
+ }
22
+ .video-container {
23
+ position: relative;
24
+ padding-bottom: 56.25%;
25
+ height: 0;
26
+ overflow: hidden;
27
+ }
28
+ .video-container iframe,
29
+ .video-container object,
30
+ .video-container embed {
31
+ position: absolute;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50">
40
+ <!-- Navigation -->
41
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
42
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43
+ <div class="flex justify-between h-16">
44
+ <div class="flex items-center">
45
+ <div class="flex-shrink-0 flex items-center">
46
+ <i data-feather="video" class="text-indigo-600 h-6 w-6"></i>
47
+ <span class="ml-2 text-xl font-bold gradient-text">LipSyncCareerBoost Pro</span>
48
+ </div>
49
+ </div>
50
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
51
+ <a href="index.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
52
+ <a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Features</a>
53
+ <a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">How It Works</a>
54
+ <a href="index.html#pricing" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
55
+ </div>
56
+ <div class="flex items-center">
57
+ <a href="index.html#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</a>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Demo Section -->
64
+ <section class="pt-32 pb-20">
65
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66
+ <div class="text-center mb-12">
67
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl">
68
+ <span class="block gradient-text">AI Avatar Demo</span>
69
+ </h1>
70
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
71
+ Experience our realistic lip sync technology in action
72
+ </p>
73
+ </div>
74
+
75
+ <div class="video-container bg-gray-200 rounded-xl shadow-xl overflow-hidden">
76
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
77
+ </div>
78
+
79
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
80
+ <div class="bg-white p-6 rounded-lg shadow-md">
81
+ <div class="flex items-center mb-4">
82
+ <div class="bg-indigo-100 p-3 rounded-full">
83
+ <i data-feather="user" class="text-indigo-600 h-6 w-6"></i>
84
+ </div>
85
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Custom Avatars</h3>
86
+ </div>
87
+ <p class="text-gray-500">Choose from 50+ professional avatars or upload your photo.</p>
88
+ </div>
89
+
90
+ <div class="bg-white p-6 rounded-lg shadow-md">
91
+ <div class="flex items-center mb-4">
92
+ <div class="bg-indigo-100 p-3 rounded-full">
93
+ <i data-feather="mic" class="text-indigo-600 h-6 w-6"></i>
94
+ </div>
95
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Perfect Sync</h3>
96
+ </div>
97
+ <p class="text-gray-500">Our AI matches lip movements precisely to your voice.</p>
98
+ </div>
99
+
100
+ <div class="bg-white p-6 rounded-lg shadow-md">
101
+ <div class="flex items-center mb-4">
102
+ <div class="bg-indigo-100 p-3 rounded-full">
103
+ <i data-feather="download" class="text-indigo-600 h-6 w-6"></i>
104
+ </div>
105
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Instant Results</h3>
106
+ </div>
107
+ <p class="text-gray-500">Get HD video in minutes, ready for any platform.</p>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="mt-16 text-center">
112
+ <a href="index.html#pricing" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
113
+ Start Your Free Trial
114
+ <i data-feather="arrow-right" class="ml-2 h-5 w-5"></i>
115
+ </a>
116
+ </div>
117
+ </div>
118
+ </section>
119
+
120
+ <script>
121
+ feather.replace();
122
+ </script>
123
+ </body>
124
+ </html>
index.html CHANGED
@@ -1,19 +1,592 @@
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>SyncMyCareer - AI Avatar Lip Sync</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+ .hero-gradient {
24
+ background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(236,72,153,0.1) 100%);
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-50">
29
+ <!-- Vanta.js Background -->
30
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
31
+
32
+ <!-- Navigation -->
33
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16">
36
+ <div class="flex items-center">
37
+ <div class="flex-shrink-0 flex items-center">
38
+ <i data-feather="video" class="text-indigo-600 h-6 w-6"></i>
39
+ <span class="ml-2 text-xl font-bold gradient-text">LipSyncCareerBoost Pro</span>
40
+ </div>
41
+ </div>
42
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
43
+ <a href="index.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
44
+ <a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Features</a>
45
+ <a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">How It Works</a>
46
+ <a href="demo.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Demo</a>
47
+ <a href="index.html#pricing" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
48
+ </div>
49
+ <div class="flex items-center">
50
+ <a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</a>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="pt-32 pb-20 hero-gradient">
58
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
60
+ <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
61
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
62
+ <span class="block">AI-Powered</span>
63
+ <span class="block gradient-text">Lip Sync Avatars</span>
64
+ </h1>
65
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
66
+ Transform your job search with personalized AI avatar videos that speak for you. Perfect resumes and cover letters come to life!
67
+ </p>
68
+ <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
69
+ <div class="flex flex-col sm:flex-row gap-4">
70
+ <a href="#demo" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-8">
71
+ Watch Demo
72
+ </a>
73
+ <a href="#pricing" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-8">
74
+ Pricing Plans
75
+ </a>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
80
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md overflow-hidden">
81
+ <div class="aspect-w-16 aspect-h-9 bg-indigo-50 rounded-lg overflow-hidden">
82
+ <img src="http://static.photos/technology/1024x576/42" alt="AI Avatar Demo" class="object-cover w-full h-full">
83
+ <div class="absolute inset-0 bg-indigo-600 opacity-20"></div>
84
+ <div class="absolute inset-0 flex items-center justify-center">
85
+ <button class="bg-white rounded-full p-4 shadow-lg transform hover:scale-110 transition duration-300">
86
+ <i data-feather="play" class="text-indigo-600 h-8 w-8"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Features Section -->
97
+ <section id="features" class="py-20 bg-white">
98
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
+ <div class="text-center">
100
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
101
+ Stand Out From The Crowd
102
+ </h2>
103
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
104
+ Our AI-powered lip sync technology brings your professional persona to life
105
+ </p>
106
+ </div>
107
+
108
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
109
+ <!-- Feature 1 -->
110
+ <div class="pt-6">
111
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
112
+ <div class="-mt-6">
113
+ <div>
114
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
115
+ <i data-feather="user" class="h-6 w-6 text-white"></i>
116
+ </span>
117
+ </div>
118
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Custom Avatars</h3>
119
+ <p class="mt-5 text-base text-gray-500">
120
+ Choose from dozens of professional avatars or upload your own photo for a personalized touch.
121
+ </p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Feature 2 -->
127
+ <div class="pt-6">
128
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
129
+ <div class="-mt-6">
130
+ <div>
131
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
132
+ <i data-feather="mic" class="h-6 w-6 text-white"></i>
133
+ </span>
134
+ </div>
135
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Voice Synthesis</h3>
136
+ <p class="mt-5 text-base text-gray-500">
137
+ Use our AI voices or record your own - we'll sync it perfectly with your avatar's lips.
138
+ </p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Feature 3 -->
144
+ <div class="pt-6">
145
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
146
+ <div class="-mt-6">
147
+ <div>
148
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
149
+ <i data-feather="eye" class="h-6 w-6 text-white"></i>
150
+ </span>
151
+ </div>
152
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Expressive Faces</h3>
153
+ <p class="mt-5 text-base text-gray-500">
154
+ Our avatars show natural expressions and emotions to convey your professionalism.
155
+ </p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- How It Works -->
164
+ <section id="how-it-works" class="py-20 bg-gray-50">
165
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
166
+ <div class="lg:text-center">
167
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
168
+ Create Your AI Avatar in Minutes
169
+ </h2>
170
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
171
+ Easy 3-step process to make your perfect job application video
172
+ </p>
173
+ </div>
174
+
175
+ <div class="mt-16">
176
+ <div class="relative">
177
+ <div class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-indigo-200"></div>
178
+
179
+ <!-- Step 1 -->
180
+ <div class="relative mb-16 md:flex md:items-center md:group">
181
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white md:mr-6 md:ml-0 md:absolute md:left-1/2 md:-translate-x-1/2">
182
+ <span class="text-xl font-bold">1</span>
183
+ </div>
184
+ <div class="mt-6 md:mt-0 md:w-5/12 md:pr-10 md:mr-auto">
185
+ <h3 class="text-xl font-semibold text-gray-900">Upload Your Script</h3>
186
+ <p class="mt-3 text-base text-gray-500">
187
+ Paste your cover letter or resume text, or type a custom message for your avatar to deliver.
188
+ </p>
189
+ </div>
190
+ <div class="hidden md:block md:w-5/12"></div>
191
+ </div>
192
+
193
+ <!-- Step 2 -->
194
+ <div class="relative mb-16 md:flex md:items-center md:flex-row-reverse md:group">
195
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white md:ml-6 md:mr-0 md:absolute md:left-1/2 md:-translate-x-1/2">
196
+ <span class="text-xl font-bold">2</span>
197
+ </div>
198
+ <div class="mt-6 md:mt-0 md:w-5/12 md:pl-10 md:ml-auto">
199
+ <h3 class="text-xl font-semibold text-gray-900">Customize Your Avatar</h3>
200
+ <p class="mt-3 text-base text-gray-500">
201
+ Select from professional avatars or upload your photo. Choose voice, language, and style.
202
+ </p>
203
+ </div>
204
+ <div class="hidden md:block md:w-5/12"></div>
205
+ </div>
206
+
207
+ <!-- Step 3 -->
208
+ <div class="relative md:flex md:items-center md:group">
209
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white md:mr-6 md:ml-0 md:absolute md:left-1/2 md:-translate-x-1/2">
210
+ <span class="text-xl font-bold">3</span>
211
+ </div>
212
+ <div class="mt-6 md:mt-0 md:w-5/12 md:pr-10 md:mr-auto">
213
+ <h3 class="text-xl font-semibold text-gray-900">Download & Share</h3>
214
+ <p class="mt-3 text-base text-gray-500">
215
+ Get your HD video file instantly. Share via link or download to include in applications.
216
+ </p>
217
+ </div>
218
+ <div class="hidden md:block md:w-5/12"></div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- Demo Section -->
226
+ <section id="demo" class="py-20 bg-indigo-600 text-white">
227
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
228
+ <div class="lg:flex lg:items-center lg:justify-between">
229
+ <div class="lg:w-1/2">
230
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
231
+ See It In Action
232
+ </h2>
233
+ <p class="mt-4 text-lg">
234
+ Watch how our AI avatar delivers a professional self-introduction for a job application.
235
+ </p>
236
+ <div class="mt-8">
237
+ <a href="#pricing" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-8">
238
+ Get Your Own Avatar
239
+ </a>
240
+ </div>
241
+ </div>
242
+ <div class="mt-12 lg:mt-0 lg:w-1/2">
243
+ <div class="aspect-w-16 aspect-h-9 bg-indigo-700 rounded-lg overflow-hidden shadow-xl">
244
+ <img src="http://static.photos/office/1024x576/73" alt="AI Avatar Demo" class="object-cover w-full h-full">
245
+ <div class="absolute inset-0 flex items-center justify-center">
246
+ <button class="bg-white rounded-full p-4 shadow-lg transform hover:scale-110 transition duration-300">
247
+ <i data-feather="play" class="text-indigo-600 h-8 w-8"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Pricing Section -->
257
+ <section id="pricing" class="py-20 bg-white">
258
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
259
+ <div class="text-center">
260
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
261
+ Simple, Transparent Pricing
262
+ </h2>
263
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
264
+ Choose the plan that fits your job search needs
265
+ </p>
266
+ </div>
267
+
268
+ <div class="mt-16 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
269
+ <!-- Basic Plan -->
270
+ <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col">
271
+ <div class="flex-1">
272
+ <h3 class="text-xl font-semibold text-gray-900">Starter</h3>
273
+ <p class="mt-4 flex items-baseline text-gray-900">
274
+ <span class="text-5xl font-extrabold tracking-tight">$9</span>
275
+ <span class="ml-1 text-xl font-semibold">/month</span>
276
+ </p>
277
+ <p class="mt-6 text-gray-500">Perfect for light job searching</p>
278
+
279
+ <ul class="mt-8 space-y-5">
280
+ <li class="flex items-start">
281
+ <div class="flex-shrink-0">
282
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
283
+ </div>
284
+ <p class="ml-3 text-base text-gray-500">5 avatar videos per month</p>
285
+ </li>
286
+ <li class="flex items-start">
287
+ <div class="flex-shrink-0">
288
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
289
+ </div>
290
+ <p class="ml-3 text-base text-gray-500">Basic avatar selection</p>
291
+ </li>
292
+ <li class="flex items-start">
293
+ <div class="flex-shrink-0">
294
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
295
+ </div>
296
+ <p class="ml-3 text-base text-gray-500">AI voice synthesis</p>
297
+ </li>
298
+ <li class="flex items-start">
299
+ <div class="flex-shrink-0">
300
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
301
+ </div>
302
+ <p class="ml-3 text-base text-gray-500">720p video quality</p>
303
+ </li>
304
+ </ul>
305
+ </div>
306
+ <a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100">
307
+ Start Free Trial
308
+ </a>
309
+ </div>
310
+
311
+ <!-- Pro Plan -->
312
+ <div class="relative p-8 bg-white border-2 border-indigo-500 rounded-2xl shadow-sm flex flex-col">
313
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white px-4 py-1 rounded-full text-sm font-semibold">
314
+ Most Popular
315
+ </div>
316
+ <div class="flex-1">
317
+ <h3 class="text-xl font-semibold text-gray-900">Professional</h3>
318
+ <p class="mt-4 flex items-baseline text-gray-900">
319
+ <span class="text-5xl font-extrabold tracking-tight">$29</span>
320
+ <span class="ml-1 text-xl font-semibold">/month</span>
321
+ </p>
322
+ <p class="mt-6 text-gray-500">For serious job seekers</p>
323
+
324
+ <ul class="mt-8 space-y-5">
325
+ <li class="flex items-start">
326
+ <div class="flex-shrink-0">
327
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
328
+ </div>
329
+ <p class="ml-3 text-base text-gray-500">20 avatar videos per month</p>
330
+ </li>
331
+ <li class="flex items-start">
332
+ <div class="flex-shrink-0">
333
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
334
+ </div>
335
+ <p class="ml-3 text-base text-gray-500">Premium avatar selection</p>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <div class="flex-shrink-0">
339
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
340
+ </div>
341
+ <p class="ml-3 text-base text-gray-500">Custom photo upload</p>
342
+ </li>
343
+ <li class="flex items-start">
344
+ <div class="flex-shrink-0">
345
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
346
+ </div>
347
+ <p class="ml-3 text-base text-gray-500">Record your own voice</p>
348
+ </li>
349
+ <li class="flex items-start">
350
+ <div class="flex-shrink-0">
351
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
352
+ </div>
353
+ <p class="ml-3 text-base text-gray-500">1080p HD video quality</p>
354
+ </li>
355
+ </ul>
356
+ </div>
357
+ <a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium text-white bg-indigo-600 hover:bg-indigo-700">
358
+ Start Free Trial
359
+ </a>
360
+ </div>
361
+
362
+ <!-- Enterprise Plan -->
363
+ <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col">
364
+ <div class="flex-1">
365
+ <h3 class="text-xl font-semibold text-gray-900">Enterprise</h3>
366
+ <p class="mt-4 flex items-baseline text-gray-900">
367
+ <span class="text-5xl font-extrabold tracking-tight">$99</span>
368
+ <span class="ml-1 text-xl font-semibold">/month</span>
369
+ </p>
370
+ <p class="mt-6 text-gray-500">For recruiters & agencies</p>
371
+
372
+ <ul class="mt-8 space-y-5">
373
+ <li class="flex items-start">
374
+ <div class="flex-shrink-0">
375
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
376
+ </div>
377
+ <p class="ml-3 text-base text-gray-500">Unlimited avatar videos</p>
378
+ </li>
379
+ <li class="flex items-start">
380
+ <div class="flex-shrink-0">
381
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
382
+ </div>
383
+ <p class="ml-3 text-base text-gray-500">All premium features</p>
384
+ </li>
385
+ <li class="flex items-start">
386
+ <div class="flex-shrink-0">
387
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
388
+ </div>
389
+ <p class="ml-3 text-base text-gray-500">Custom branding</p>
390
+ </li>
391
+ <li class="flex items-start">
392
+ <div class="flex-shrink-0">
393
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
394
+ </div>
395
+ <p class="ml-3 text-base text-gray-500">Team collaboration</p>
396
+ </li>
397
+ <li class="flex items-start">
398
+ <div class="flex-shrink-0">
399
+ <i data-feather="check" class="h-5 w-5 text-indigo-500"></i>
400
+ </div>
401
+ <p class="ml-3 text-base text-gray-500">Priority support</p>
402
+ </li>
403
+ </ul>
404
+ </div>
405
+ <a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100">
406
+ Contact Sales
407
+ </a>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- Testimonials -->
414
+ <section class="py-20 bg-gray-50">
415
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
416
+ <div class="text-center">
417
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
418
+ Success Stories
419
+ </h2>
420
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
421
+ Hear from professionals who landed jobs with our AI avatars
422
+ </p>
423
+ </div>
424
+
425
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
426
+ <!-- Testimonial 1 -->
427
+ <div class="bg-white p-8 rounded-xl shadow-md">
428
+ <div class="flex items-center">
429
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah J.">
430
+ <div class="ml-4">
431
+ <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4>
432
+ <p class="text-indigo-600">UX Designer</p>
433
+ </div>
434
+ </div>
435
+ <div class="mt-6">
436
+ <p class="text-gray-500 italic">
437
+ "I got 3x more interview requests after adding an AI avatar video to my applications. Recruiters loved the personal touch!"
438
+ </p>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Testimonial 2 -->
443
+ <div class="bg-white p-8 rounded-xl shadow-md">
444
+ <div class="flex items-center">
445
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael T.">
446
+ <div class="ml-4">
447
+ <h4 class="text-lg font-medium text-gray-900">Michael T.</h4>
448
+ <p class="text-indigo-600">Marketing Manager</p>
449
+ </div>
450
+ </div>
451
+ <div class="mt-6">
452
+ <p class="text-gray-500 italic">
453
+ "The hiring manager told me my avatar video was the most creative application they'd ever seen. Got the job offer the same week!"
454
+ </p>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Testimonial 3 -->
459
+ <div class="bg-white p-8 rounded-xl shadow-md">
460
+ <div class="flex items-center">
461
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Priya K.">
462
+ <div class="ml-4">
463
+ <h4 class="text-lg font-medium text-gray-900">Priya K.</h4>
464
+ <p class="text-indigo-600">Software Engineer</p>
465
+ </div>
466
+ </div>
467
+ <div class="mt-6">
468
+ <p class="text-gray-500 italic">
469
+ "As an introvert, I struggle with interviews. The avatar helped showcase my skills confidently before meeting in person."
470
+ </p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </section>
476
+
477
+ <!-- CTA Section -->
478
+ <section id="contact" class="py-20 bg-indigo-700 text-white">
479
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
480
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
481
+ Ready to Transform Your Job Search?
482
+ </h2>
483
+ <p class="mt-4 max-w-2xl text-xl mx-auto">
484
+ Start your free 7-day trial today. No credit card required.
485
+ </p>
486
+ <div class="mt-8">
487
+ <form class="max-w-md mx-auto">
488
+ <div class="flex flex-col sm:flex-row gap-4">
489
+ <input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
490
+ <button type="submit" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50">
491
+ Get Started
492
+ </button>
493
+ </div>
494
+ </form>
495
+ </div>
496
+ <p class="mt-4 text-sm">
497
+ By signing up, you agree to our <a href="#" class="font-medium text-white underline">Terms of Service</a> and <a href="#" class="font-medium text-white underline">Privacy Policy</a>.
498
+ </p>
499
+ </div>
500
+ </section>
501
+
502
+ <!-- Footer -->
503
+ <footer class="bg-gray-900 text-white pt-16 pb-12">
504
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
505
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
506
+ <div>
507
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
508
+ <ul class="mt-4 space-y-4">
509
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
510
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
511
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
512
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li>
513
+ </ul>
514
+ </div>
515
+ <div>
516
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
517
+ <ul class="mt-4 space-y-4">
518
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
519
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
520
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
521
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
522
+ </ul>
523
+ </div>
524
+ <div>
525
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
526
+ <ul class="mt-4 space-y-4">
527
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
528
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
529
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
530
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li>
531
+ </ul>
532
+ </div>
533
+ <div>
534
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
535
+ <ul class="mt-4 space-y-4">
536
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
537
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
538
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
539
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li>
540
+ </ul>
541
+ </div>
542
+ </div>
543
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
544
+ <div class="flex items-center">
545
+ <i data-feather="video" class="text-indigo-400 h-6 w-6"></i>
546
+ <span class="ml-2 text-xl font-bold gradient-text">SyncMyCareer</span>
547
+ </div>
548
+ <p class="mt-4 md:mt-0 text-base text-gray-400">
549
+ &copy; 2023 SyncMyCareer. All rights reserved.
550
+ </p>
551
+ <div class="mt-4 md:mt-0 flex space-x-6">
552
+ <a href="#" class="text-gray-400 hover:text-white">
553
+ <i data-feather="twitter" class="h-6 w-6"></i>
554
+ </a>
555
+ <a href="#" class="text-gray-400 hover:text-white">
556
+ <i data-feather="linkedin" class="h-6 w-6"></i>
557
+ </a>
558
+ <a href="#" class="text-gray-400 hover:text-white">
559
+ <i data-feather="facebook" class="h-6 w-6"></i>
560
+ </a>
561
+ <a href="#" class="text-gray-400 hover:text-white">
562
+ <i data-feather="instagram" class="h-6 w-6"></i>
563
+ </a>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </footer>
568
+
569
+ <!-- Scripts -->
570
+ <script>
571
+ // Initialize Vanta.js background
572
+ VANTA.NET({
573
+ el: "#vanta-bg",
574
+ mouseControls: true,
575
+ touchControls: true,
576
+ gyroControls: false,
577
+ minHeight: 200.00,
578
+ minWidth: 200.00,
579
+ scale: 1.00,
580
+ scaleMobile: 1.00,
581
+ color: 0x6366f1,
582
+ backgroundColor: 0xf8fafc,
583
+ points: 12.00,
584
+ maxDistance: 22.00,
585
+ spacing: 16.00
586
+ });
587
+ </script>
588
+ <script>
589
+ feather.replace();
590
+ </script>
591
+ </body>
592
  </html>