Hugging Face's logo

Spaces:
John5643
/
myspace
Running

App Files Community
John5643 commited on
Commit
ce3d65b
·
verified ·
1 Parent(s): aea008c

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +599 -43
index.html CHANGED
@@ -1,46 +1,602 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
31
- @media screen and (max-width: 640px) {
32
- .arrow {
33
- display: none;
34
- }
35
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </style>
37
- </head>
38
- <body>
39
- <h1>
40
- <span>I'm ready to work,</span><br />
41
- Ask me anything.
42
- </h1>
43
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
44
- <script></script>
45
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=John5643/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
46
- </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>VoxAI - Voice AI Solutions Agency</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
19
+ }
20
+
21
+ .voice-wave {
22
+ position: relative;
23
+ height: 50px;
24
+ width: 100%;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .voice-wave::before {
29
+ content: "";
30
+ position: absolute;
31
+ height: 100%;
32
+ width: 100%;
33
+ background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 500 50" xmlns="http://www.w3.org/2000/svg"><path d="M0,25 C150,50 350,0 500,25 L500,50 L0,50 Z" fill="rgba(255,255,255,0.1)"></path></svg>');
34
+ background-size: cover;
35
+ animation: wave 8s linear infinite;
36
+ }
37
+
38
+ @keyframes wave {
39
+ 0% { background-position-x: 0; }
40
+ 100% { background-position-x: 500px; }
41
+ }
42
+
43
+ .voice-recording {
44
+ animation: pulse 2s infinite;
45
+ }
46
+
47
+ @keyframes pulse {
48
+ 0% { transform: scale(1); }
49
+ 50% { transform: scale(1.05); }
50
+ 100% { transform: scale(1); }
51
+ }
52
+
53
+ .feature-card:hover {
54
+ transform: translateY(-10px);
55
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
56
+ }
57
+
58
+ .feature-card {
59
+ transition: all 0.3s ease;
60
+ }
61
  </style>
62
+ </head>
63
+ <body class="bg-gray-50">
64
+ <!-- Navigation -->
65
+ <nav class="fixed w-full bg-white shadow-md z-50">
66
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
67
+ <div class="flex justify-between h-16">
68
+ <div class="flex items-center">
69
+ <div class="flex-shrink-0 flex items-center">
70
+ <i class="fas fa-microphone-alt text-purple-600 text-2xl mr-2"></i>
71
+ <span class="text-xl font-bold text-gray-900">Vox<span class="text-purple-600">AI</span></span>
72
+ </div>
73
+ </div>
74
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
75
+ <a href="#home" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
76
+ <a href="#services" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Services</a>
77
+ <a href="#solutions" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Solutions</a>
78
+ <a href="#demo" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Demo</a>
79
+ <a href="#contact" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a>
80
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
81
+ Get Started
82
+ </button>
83
+ </div>
84
+ <div class="-mr-2 flex items-center md:hidden">
85
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
86
+ <span class="sr-only">Open main menu</span>
87
+ <i class="fas fa-bars"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Mobile menu -->
94
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
95
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
96
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Home</a>
97
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Services</a>
98
+ <a href="#solutions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Solutions</a>
99
+ <a href="#demo" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Demo</a>
100
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Contact</a>
101
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium mt-2 transition duration-300">
102
+ Get Started
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </nav>
107
+
108
+ <!-- Hero Section -->
109
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="md:flex md:items-center md:justify-between">
112
+ <div class="md:w-1/2 mb-10 md:mb-0">
113
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
114
+ Revolutionize Your Business with <span class="text-yellow-300">Voice AI</span>
115
+ </h1>
116
+ <p class="text-lg md:text-xl mb-8 opacity-90">
117
+ We build custom voice AI solutions that enhance customer experience, automate processes, and drive growth for your business.
118
+ </p>
119
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
120
+ <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-lg transition duration-300">
121
+ Request Demo
122
+ </button>
123
+ <button class="border-2 border-white text-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-lg font-semibold text-lg transition duration-300">
124
+ Learn More
125
+ </button>
126
+ </div>
127
+ </div>
128
+ <div class="md:w-1/2 relative">
129
+ <div class="bg-white rounded-2xl shadow-2xl p-6 relative z-10">
130
+ <div class="flex items-center mb-4">
131
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
132
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
133
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
134
+ </div>
135
+ <div class="voice-wave mb-6"></div>
136
+ <div class="text-center">
137
+ <div class="voice-recording inline-flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
138
+ <i class="fas fa-microphone text-purple-600 text-2xl"></i>
139
+ </div>
140
+ <p class="text-gray-700 mb-4">"Hello! How can I help you today?"</p>
141
+ <div class="flex justify-center space-x-2">
142
+ <div class="w-2 h-6 bg-purple-300 rounded-full animate-bounce" style="animation-delay: 0.1s;"></div>
143
+ <div class="w-2 h-8 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
144
+ <div class="w-2 h-10 bg-purple-500 rounded-full animate-bounce" style="animation-delay: 0.3s;"></div>
145
+ <div class="w-2 h-8 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 0.4s;"></div>
146
+ <div class="w-2 h-6 bg-purple-300 rounded-full animate-bounce" style="animation-delay: 0.5s;"></div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-yellow-300 rounded-full opacity-20"></div>
151
+ <div class="absolute -top-6 -right-6 w-40 h-40 bg-purple-300 rounded-full opacity-20"></div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Clients Section -->
158
+ <section class="py-12 bg-gray-100">
159
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
160
+ <h2 class="text-center text-gray-500 text-sm font-semibold uppercase tracking-wide mb-8">
161
+ Trusted by innovative companies worldwide
162
+ </h2>
163
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center">
164
+ <div class="flex justify-center">
165
+ <img src="https://via.placeholder.com/150x60?text=TechCorp" alt="TechCorp" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
166
+ </div>
167
+ <div class="flex justify-center">
168
+ <img src="https://via.placeholder.com/150x60?text=VoiceNet" alt="VoiceNet" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
169
+ </div>
170
+ <div class="flex justify-center">
171
+ <img src="https://via.placeholder.com/150x60?text=GlobalBank" alt="GlobalBank" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
172
+ </div>
173
+ <div class="flex justify-center">
174
+ <img src="https://via.placeholder.com/150x60?text=SmartHome" alt="SmartHome" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
175
+ </div>
176
+ <div class="flex justify-center col-span-2 md:col-span-1">
177
+ <img src="https://via.placeholder.com/150x60?text=HealthCare+" alt="HealthCare+" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Services Section -->
184
+ <section id="services" class="py-16 bg-white">
185
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
186
+ <div class="text-center mb-16">
187
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
188
+ Our <span class="text-purple-600">Voice AI</span> Services
189
+ </h2>
190
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
191
+ We offer comprehensive voice AI solutions tailored to your business needs, from conversational interfaces to voice analytics.
192
+ </p>
193
+ </div>
194
+
195
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
196
+ <!-- Service 1 -->
197
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100">
198
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
199
+ <i class="fas fa-robot text-purple-600 text-2xl"></i>
200
+ </div>
201
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Voice Assistants</h3>
202
+ <p class="text-gray-600 mb-4">
203
+ Custom voice assistants that understand natural language and provide personalized responses to your customers.
204
+ </p>
205
+ <ul class="space-y-2 text-gray-600">
206
+ <li class="flex items-start">
207
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
208
+ <span>24/7 customer support</span>
209
+ </li>
210
+ <li class="flex items-start">
211
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
212
+ <span>Multi-language support</span>
213
+ </li>
214
+ <li class="flex items-start">
215
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
216
+ <span>Seamless integration</span>
217
+ </li>
218
+ </ul>
219
+ </div>
220
+
221
+ <!-- Service 2 -->
222
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100">
223
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
224
+ <i class="fas fa-headset text-blue-600 text-2xl"></i>
225
+ </div>
226
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Voice Analytics</h3>
227
+ <p class="text-gray-600 mb-4">
228
+ Advanced analytics to extract insights from customer interactions and improve your business strategies.
229
+ </p>
230
+ <ul class="space-y-2 text-gray-600">
231
+ <li class="flex items-start">
232
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
233
+ <span>Sentiment analysis</span>
234
+ </li>
235
+ <li class="flex items-start">
236
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
237
+ <span>Trend identification</span>
238
+ </li>
239
+ <li class="flex items-start">
240
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
241
+ <span>Real-time monitoring</span>
242
+ </li>
243
+ </ul>
244
+ </div>
245
+
246
+ <!-- Service 3 -->
247
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100">
248
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6">
249
+ <i class="fas fa-microphone-alt text-green-600 text-2xl"></i>
250
+ </div>
251
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Voice Biometrics</h3>
252
+ <p class="text-gray-600 mb-4">
253
+ Secure authentication solutions using unique voice characteristics for fraud prevention and identity verification.
254
+ </p>
255
+ <ul class="space-y-2 text-gray-600">
256
+ <li class="flex items-start">
257
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
258
+ <span>Speaker identification</span>
259
+ </li>
260
+ <li class="flex items-start">
261
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
262
+ <span>Fraud detection</span>
263
+ </li>
264
+ <li class="flex items-start">
265
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
266
+ <span>Passwordless authentication</span>
267
+ </li>
268
+ </ul>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Solutions Section -->
275
+ <section id="solutions" class="py-16 bg-gray-50">
276
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
277
+ <div class="text-center mb-16">
278
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
279
+ Industry-Specific <span class="text-purple-600">Solutions</span>
280
+ </h2>
281
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
282
+ We develop voice AI solutions customized for your industry's unique challenges and opportunities.
283
+ </p>
284
+ </div>
285
+
286
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
287
+ <!-- Solution 1 -->
288
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
289
+ <div class="md:flex">
290
+ <div class="md:flex-shrink-0 md:w-1/3 bg-purple-100 flex items-center justify-center p-6">
291
+ <i class="fas fa-hospital-alt text-purple-600 text-5xl"></i>
292
+ </div>
293
+ <div class="p-8 md:w-2/3">
294
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Healthcare</h3>
295
+ <p class="text-gray-600 mb-4">
296
+ Voice-enabled patient engagement, medical transcription, and virtual health assistants.
297
+ </p>
298
+ <div class="flex flex-wrap gap-2">
299
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Appointment Scheduling</span>
300
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Medical Dictation</span>
301
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Patient Education</span>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Solution 2 -->
308
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
309
+ <div class="md:flex">
310
+ <div class="md:flex-shrink-0 md:w-1/3 bg-blue-100 flex items-center justify-center p-6">
311
+ <i class="fas fa-university text-blue-600 text-5xl"></i>
312
+ </div>
313
+ <div class="p-8 md:w-2/3">
314
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Banking & Finance</h3>
315
+ <p class="text-gray-600 mb-4">
316
+ Secure voice banking, fraud detection, and personalized financial advice through voice interfaces.
317
+ </p>
318
+ <div class="flex flex-wrap gap-2">
319
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Voice Authentication</span>
320
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Account Management</span>
321
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Fraud Prevention</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Solution 3 -->
328
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
329
+ <div class="md:flex">
330
+ <div class="md:flex-shrink-0 md:w-1/3 bg-green-100 flex items-center justify-center p-6">
331
+ <i class="fas fa-shopping-cart text-green-600 text-5xl"></i>
332
+ </div>
333
+ <div class="p-8 md:w-2/3">
334
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Retail & E-commerce</h3>
335
+ <p class="text-gray-600 mb-4">
336
+ Voice shopping assistants, product recommendations, and voice-enabled customer support.
337
+ </p>
338
+ <div class="flex flex-wrap gap-2">
339
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Voice Search</span>
340
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Order Tracking</span>
341
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Personalized Offers</span>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Solution 4 -->
348
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
349
+ <div class="md:flex">
350
+ <div class="md:flex-shrink-0 md:w-1/3 bg-yellow-100 flex items-center justify-center p-6">
351
+ <i class="fas fa-home text-yellow-600 text-5xl"></i>
352
+ </div>
353
+ <div class="p-8 md:w-2/3">
354
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Smart Home</h3>
355
+ <p class="text-gray-600 mb-4">
356
+ Custom voice control solutions for smart home devices and IoT ecosystems.
357
+ </p>
358
+ <div class="flex flex-wrap gap-2">
359
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Device Control</span>
360
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Routine Automation</span>
361
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Energy Management</span>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Demo Section -->
371
+ <section id="demo" class="py-16 gradient-bg text-white">
372
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
373
+ <div class="md:flex md:items-center">
374
+ <div class="md:w-1/2 mb-10 md:mb-0">
375
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
376
+ Experience Our <span class="text-yellow-300">Voice AI</span> in Action
377
+ </h2>
378
+ <p class="text-lg opacity-90 mb-8">
379
+ Try our interactive demo to see how voice AI can transform your customer interactions and business operations.
380
+ </p>
381
+ <div class="space-y-4">
382
+ <div class="flex items-start">
383
+ <i class="fas fa-check-circle text-yellow-300 mt-1 mr-3 text-xl"></i>
384
+ <div>
385
+ <h4 class="font-semibold">Natural Conversations</h4>
386
+ <p class="text-sm opacity-80">Our AI understands context and maintains natural dialogue flow.</p>
387
+ </div>
388
+ </div>
389
+ <div class="flex items-start">
390
+ <i class="fas fa-check-circle text-yellow-300 mt-1 mr-3 text-xl"></i>
391
+ <div>
392
+ <h4 class="font-semibold">Multi-language Support</h4>
393
+ <p class="text-sm opacity-80">Communicate with customers in their preferred language.</p>
394
+ </div>
395
+ </div>
396
+ <div class="flex items-start">
397
+ <i class="fas fa-check-circle text-yellow-300 mt-1 mr-3 text-xl"></i>
398
+ <div>
399
+ <h4 class="font-semibold">Seamless Integration</h4>
400
+ <p class="text-sm opacity-80">Easy to integrate with your existing systems and platforms.</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ <div class="md:w-1/2">
406
+ <div class="bg-white rounded-2xl shadow-2xl p-6 text-gray-800">
407
+ <div class="flex items-center mb-4">
408
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
409
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
410
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
411
+ </div>
412
+ <div class="bg-gray-100 rounded-lg p-4 mb-4">
413
+ <div class="flex items-start mb-3">
414
+ <div class="bg-purple-100 rounded-full w-8 h-8 flex items-center justify-center mr-3">
415
+ <i class="fas fa-robot text-purple-600"></i>
416
+ </div>
417
+ <div class="bg-white rounded-lg p-3 shadow-sm max-w-xs">
418
+ <p>Hello! I'm your AI assistant. How can I help you today?</p>
419
+ </div>
420
+ </div>
421
+ <div class="flex items-start justify-end">
422
+ <div class="bg-white rounded-lg p-3 shadow-sm max-w-xs">
423
+ <p>What services do you offer?</p>
424
+ </div>
425
+ <div class="bg-blue-100 rounded-full w-8 h-8 flex items-center justify-center ml-3">
426
+ <i class="fas fa-user text-blue-600"></i>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <div class="relative">
431
+ <input type="text" placeholder="Type your message..." class="w-full border border-gray-300 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-purple-500">
432
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center">
433
+ <i class="fas fa-paper-plane"></i>
434
+ </button>
435
+ </div>
436
+ <div class="mt-4 flex justify-center">
437
+ <button class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full">
438
+ <i class="fas fa-microphone mr-2"></i>
439
+ Start Voice Interaction
440
+ </button>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </section>
447
+
448
+ <!-- Testimonials -->
449
+ <section class="py-16 bg-white">
450
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
451
+ <div class="text-center mb-16">
452
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
453
+ What Our <span class="text-purple-600">Clients</span> Say
454
+ </h2>
455
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
456
+ Don't just take our word for it. Here's what our clients have to say about our voice AI solutions.
457
+ </p>
458
+ </div>
459
+
460
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
461
+ <!-- Testimonial 1 -->
462
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100">
463
+ <div class="flex items-center mb-4">
464
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
465
+ <i class="fas fa-user text-purple-600 text-xl"></i>
466
+ </div>
467
+ <div>
468
+ <h4 class="font-bold text-gray-900">Sarah Johnson</h4>
469
+ <p class="text-sm text-gray-600">CTO, TechCorp</p>
470
+ </div>
471
+ </div>
472
+ <p class="text-gray-600 mb-4">
473
+ "VoxAI transformed our customer support with their voice assistant. Response times improved by 70% and customer satisfaction scores skyrocketed."
474
+ </p>
475
+ <div class="flex text-yellow-400">
476
+ <i class="fas fa-star"></i>
477
+ <i class="fas fa-star"></i>
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ <i class="fas fa-star"></i>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Testimonial 2 -->
485
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100">
486
+ <div class="flex items-center mb-4">
487
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
488
+ <i class="fas fa-user text-blue-600 text-xl"></i>
489
+ </div>
490
+ <div>
491
+ <h4 class="font-bold text-gray-900">Michael Chen</h4>
492
+ <p class="text-sm text-gray-600">Director, GlobalBank</p>
493
+ </div>
494
+ </div>
495
+ <p class="text-gray-600 mb-4">
496
+ "The voice biometrics solution from VoxAI has significantly reduced fraud in our banking operations while improving customer experience."
497
+ </p>
498
+ <div class="flex text-yellow-400">
499
+ <i class="fas fa-star"></i>
500
+ <i class="fas fa-star"></i>
501
+ <i class="fas fa-star"></i>
502
+ <i class="fas fa-star"></i>
503
+ <i class="fas fa-star"></i>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Testimonial 3 -->
508
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100">
509
+ <div class="flex items-center mb-4">
510
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
511
+ <i class="fas fa-user text-green-600 text-xl"></i>
512
+ </div>
513
+ <div>
514
+ <h4 class="font-bold text-gray-900">David Rodriguez</h4>
515
+ <p class="text-sm text-gray-600">CEO, SmartHome Inc.</p>
516
+ </div>
517
+ </div>
518
+ <p class="text-gray-600 mb-4">
519
+ "Integrating VoxAI's voice control into our smart home devices was seamless. Our users love the natural language capabilities and accuracy."
520
+ </p>
521
+ <div class="flex text-yellow-400">
522
+ <i class="fas fa-star"></i>
523
+ <i class="fas fa-star"></i>
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ <i class="fas fa-star-half-alt"></i>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </section>
532
+
533
+ <!-- CTA Section -->
534
+ <section class="py-16 bg-purple-900 text-white">
535
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
536
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
537
+ Ready to Transform Your Business with <span class="text-yellow-300">Voice AI</span>?
538
+ </h2>
539
+ <p class="text-lg opacity-90 mb-8 max-w-3xl mx-auto">
540
+ Schedule a free consultation with our experts to discover how our voice AI solutions can drive growth and efficiency for your organization.
541
+ </p>
542
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
543
+ <button class="bg-yellow-400 hover:bg-yellow-500 text-purple-900 px-8 py-4 rounded-lg font-bold text-lg transition duration-300">
544
+ Get Started Now
545
+ </button>
546
+ <button class="border-2 border-white hover:bg-white hover:text-purple-900 px-8 py-4 rounded-lg font-bold text-lg transition duration-300">
547
+ Contact Sales
548
+ </button>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- Contact Section -->
554
+ <section id="contact" class="py-16 bg-white">
555
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
556
+ <div class="md:flex md:items-center md:space-x-12">
557
+ <div class="md:w-1/2 mb-10 md:mb-0">
558
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
559
+ Get in <span class="text-purple-600">Touch</span>
560
+ </h2>
561
+ <p class="text-lg text-gray-600 mb-8">
562
+ Have questions about our voice AI solutions? Our team is here to help you find the perfect solution for your business needs.
563
+ </p>
564
+ <div class="space-y-6">
565
+ <div class="flex items-start">
566
+ <div class="bg-purple-100 rounded-lg p-3 mr-4">
567
+ <i class="fas fa-map-marker-alt text-purple-600 text-xl"></i>
568
+ </div>
569
+ <div>
570
+ <h4 class="font-bold text-gray-900 mb-1">Our Office</h4>
571
+ <p class="text-gray-600">123 AI Boulevard, Tech Park<br>San Francisco, CA 94107</p>
572
+ </div>
573
+ </div>
574
+ <div class="flex items-start">
575
+ <div class="bg-blue-100 rounded-lg p-3 mr-4">
576
+ <i class="fas fa-envelope text-blue-600 text-xl"></i>
577
+ </div>
578
+ <div>
579
+ <h4 class="font-bold text-gray-900 mb-1">Email Us</h4>
580
+ <p class="text-gray-600">info@voxai.com<br>sales@voxai.com</p>
581
+ </div>
582
+ </div>
583
+ <div class="flex items-start">
584
+ <div class="bg-green-100 rounded-lg p-3 mr-4">
585
+ <i class="fas fa-phone-alt text-green-600 text-xl"></i>
586
+ </div>
587
+ <div>
588
+ <h4 class="font-bold text-gray-900 mb-1">Call Us</h4>
589
+ <p class="text-gray-600">+1 (555) 123-4567<br>Mon-Fri, 9am-5pm PST</p>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ <div class="md:w-1/2">
595
+ <div class="bg-gray-50 rounded-xl shadow-lg p-8">
596
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
597
+ <form>
598
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
599
+ <div>
600
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
601
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-
602
+ </html>