Hugging Face's logo

Spaces:
John5643
/
myspace
Running

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

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +463 -342
index.html CHANGED
@@ -58,6 +58,30 @@
58
  .feature-card {
59
  transition: all 0.3s ease;
60
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  </style>
62
  </head>
63
  <body class="bg-gray-50">
@@ -72,11 +96,11 @@
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>
@@ -93,11 +117,11 @@
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>
@@ -108,73 +132,56 @@
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>
@@ -184,88 +191,70 @@
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>
@@ -274,94 +263,73 @@
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>
@@ -370,75 +338,40 @@
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>
@@ -448,31 +381,26 @@
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>
@@ -482,48 +410,44 @@
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>
@@ -533,18 +457,14 @@
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>
@@ -553,50 +473,251 @@
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>
 
58
  .feature-card {
59
  transition: all 0.3s ease;
60
  }
61
+
62
+ /* Highlight active section in nav */
63
+ nav a.active {
64
+ color: #8b5cf6 !important;
65
+ font-weight: 600;
66
+ }
67
+
68
+ /* Remove blue outline on focus for buttons */
69
+ button:focus, a:focus {
70
+ outline: none;
71
+ box-shadow: none;
72
+ }
73
+
74
+ /* Section fade-in animation */
75
+ section {
76
+ opacity: 0;
77
+ transform: translateY(20px);
78
+ transition: opacity 0.6s ease, transform 0.6s ease;
79
+ }
80
+
81
+ section.visible {
82
+ opacity: 1;
83
+ transform: translateY(0);
84
+ }
85
  </style>
86
  </head>
87
  <body class="bg-gray-50">
 
96
  </div>
97
  </div>
98
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
99
+ <a href="#home" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
100
+ <a href="#services" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Services</a>
101
+ <a href="#solutions" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Solutions</a>
102
+ <a href="#demo" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Demo</a>
103
+ <a href="#contact" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a>
104
  <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
105
  Get Started
106
  </button>
 
117
  <!-- Mobile menu -->
118
  <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
119
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
120
+ <a href="#home" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Home</a>
121
+ <a href="#services" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Services</a>
122
+ <a href="#solutions" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Solutions</a>
123
+ <a href="#demo" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Demo</a>
124
+ <a href="#contact" class="mobile-nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Contact</a>
125
  <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">
126
  Get Started
127
  </button>
 
132
  <!-- Hero Section -->
133
  <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white">
134
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
135
+ <div class="lg:flex lg:items-center lg:justify-between">
136
+ <div class="lg:w-1/2">
137
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
138
+ Revolutionize Your Business With <span class="text-yellow-300">Voice AI</span>
139
  </h1>
140
+ <p class="text-xl text-gray-100 mb-8">
141
+ We build custom voice-enabled AI solutions that transform customer interactions and streamline operations.
142
  </p>
143
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
144
+ <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-md font-medium text-lg transition duration-300">
145
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
146
  </button>
147
+ <button class="border-2 border-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-md font-medium text-lg transition duration-300">
148
+ <i class="fas fa-comment-dots mr-2"></i> Chat With Us
149
  </button>
150
  </div>
151
  </div>
152
+ <div class="lg:w-1/2 mt-12 lg:mt-0 flex justify-center">
153
+ <div class="relative w-64 h-64 sm:w-80 sm:h-80 lg:w-96 lg:h-96">
154
+ <div class="absolute inset-0 bg-purple-500 rounded-full opacity-20 animate-ping"></div>
155
+ <div class="absolute inset-4 bg-purple-500 rounded-full opacity-20 animate-ping delay-300"></div>
156
+ <div class="absolute inset-8 bg-white rounded-full flex items-center justify-center voice-recording">
157
+ <i class="fas fa-microphone-alt text-purple-600 text-5xl sm:text-6xl lg:text-7xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </div>
159
  </div>
 
 
160
  </div>
161
  </div>
162
  </div>
163
+ <div class="voice-wave"></div>
164
  </section>
165
 
166
  <!-- Clients Section -->
167
  <section class="py-12 bg-gray-100">
168
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
169
+ <h3 class="text-center text-gray-500 text-sm mb-8">TRUSTED BY INNOVATIVE COMPANIES WORLDWIDE</h3>
 
 
170
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center">
171
  <div class="flex justify-center">
172
+ <i class="fab fa-google text-4xl text-gray-700"></i>
173
  </div>
174
  <div class="flex justify-center">
175
+ <i class="fab fa-amazon text-4xl text-gray-700"></i>
176
  </div>
177
  <div class="flex justify-center">
178
+ <i class="fab fa-microsoft text-4xl text-gray-700"></i>
179
  </div>
180
  <div class="flex justify-center">
181
+ <i class="fab fa-slack text-4xl text-gray-700"></i>
182
  </div>
183
+ <div class="flex justify-center">
184
+ <i class="fab fa-spotify text-4xl text-gray-700"></i>
185
  </div>
186
  </div>
187
  </div>
 
191
  <section id="services" class="py-16 bg-white">
192
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
193
  <div class="text-center mb-16">
194
+ <span class="text-purple-600 font-medium">OUR SERVICES</span>
195
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Tailored Voice AI Solutions</h2>
196
+ <p class="max-w-2xl mx-auto text-gray-600">We offer comprehensive voice AI services designed to enhance customer experience and operational efficiency.</p>
 
 
 
197
  </div>
198
 
199
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
200
  <!-- Service 1 -->
201
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
202
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
203
  <i class="fas fa-robot text-purple-600 text-2xl"></i>
204
  </div>
205
+ <h3 class="text-xl font-bold mb-3">Voice Assistants</h3>
206
+ <p class="text-gray-600 mb-4">Custom voice assistants that understand natural language and respond intelligently to customer queries.</p>
207
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
208
  </div>
209
 
210
  <!-- Service 2 -->
211
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
212
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
213
+ <i class="fas fa-headset text-purple-600 text-2xl"></i>
214
  </div>
215
+ <h3 class="text-xl font-bold mb-3">IVR Systems</h3>
216
+ <p class="text-gray-600 mb-4">Interactive voice response systems that automate customer service while maintaining human-like interactions.</p>
217
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
 
220
  <!-- Service 3 -->
221
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
222
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
223
+ <i class="fas fa-chart-line text-purple-600 text-2xl"></i>
224
  </div>
225
+ <h3 class="text-xl font-bold mb-3">Speech Analytics</h3>
226
+ <p class="text-gray-600 mb-4">Analyze customer calls to gain valuable insights into sentiment, trends, and business opportunities.</p>
227
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a>
228
+ </div>
229
+
230
+ <!-- Service 4 -->
231
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
232
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
233
+ <i class="fas fa-language text-purple-600 text-2xl"></i>
234
+ </div>
235
+ <h3 class="text-xl font-bold mb-3">Multilingual Support</h3>
236
+ <p class="text-gray-600 mb-4">Voice AI solutions that work across languages and dialects to serve global customer bases.</p>
237
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a>
238
+ </div>
239
+
240
+ <!-- Service 5 -->
241
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
242
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
243
+ <i class="fas fa-home text-purple-600 text-2xl"></i>
244
+ </div>
245
+ <h3 class="text-xl font-bold mb-3">Smart Home Integration</h3>
246
+ <p class="text-gray-600 mb-4">Voice-controlled solutions for smart homes and IoT devices with custom wake words and commands.</p>
247
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a>
248
+ </div>
249
+
250
+ <!-- Service 6 -->
251
+ <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
252
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
253
+ <i class="fas fa-cogs text-purple-600 text-2xl"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold mb-3">Custom Development</h3>
256
+ <p class="text-gray-600 mb-4">Tailor-made voice AI solutions designed specifically for your business needs and workflows.</p>
257
+ <a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a>
258
  </div>
259
  </div>
260
  </div>
 
263
  <!-- Solutions Section -->
264
  <section id="solutions" class="py-16 bg-gray-50">
265
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
266
+ <div class="lg:flex lg:items-center lg:space-x-12">
267
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
268
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
269
+ alt="Voice AI Solutions"
270
+ class="rounded-xl shadow-xl w-full h-auto">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  </div>
272
+ <div class="lg:w-1/2">
273
+ <span class="text-purple-600 font-medium">INDUSTRY SOLUTIONS</span>
274
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Voice AI For Every Industry</h2>
275
+
276
+ <div class="space-y-6">
277
+ <!-- Solution 1 -->
278
+ <div class="flex">
279
+ <div class="flex-shrink-0">
280
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
281
+ <i class="fas fa-store text-xl"></i>
282
+ </div>
283
+ </div>
284
+ <div class="ml-4">
285
+ <h3 class="text-lg font-bold mb-2">Retail & E-commerce</h3>
286
+ <p class="text-gray-600">Voice shopping assistants that help customers discover products and make purchases hands-free.</p>
 
287
  </div>
288
  </div>
289
+
290
+ <!-- Solution 2 -->
291
+ <div class="flex">
292
+ <div class="flex-shrink-0">
293
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
294
+ <i class="fas fa-medkit text-xl"></i>
295
+ </div>
296
+ </div>
297
+ <div class="ml-4">
298
+ <h3 class="text-lg font-bold mb-2">Healthcare</h3>
299
+ <p class="text-gray-600">Voice-enabled documentation and patient interaction tools that streamline clinical workflows.</p>
 
 
 
 
 
 
 
300
  </div>
301
  </div>
302
+
303
+ <!-- Solution 3 -->
304
+ <div class="flex">
305
+ <div class="flex-shrink-0">
306
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
307
+ <i class="fas fa-university text-xl"></i>
308
+ </div>
309
+ </div>
310
+ <div class="ml-4">
311
+ <h3 class="text-lg font-bold mb-2">Banking & Finance</h3>
312
+ <p class="text-gray-600">Secure voice authentication and banking services that provide convenient access to financial services.</p>
313
+ </div>
314
  </div>
315
+
316
+ <!-- Solution 4 -->
317
+ <div class="flex">
318
+ <div class="flex-shrink-0">
319
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
320
+ <i class="fas fa-phone-alt text-xl"></i>
321
+ </div>
322
+ </div>
323
+ <div class="ml-4">
324
+ <h3 class="text-lg font-bold mb-2">Call Centers</h3>
325
+ <p class="text-gray-600">AI-powered voice agents that handle routine inquiries, reducing wait times and operational costs.</p>
326
  </div>
327
  </div>
328
  </div>
329
+
330
+ <button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
331
+ Explore All Industries <i class="fas fa-arrow-right ml-2"></i>
332
+ </button>
333
  </div>
334
  </div>
335
  </div>
 
338
  <!-- Demo Section -->
339
  <section id="demo" class="py-16 gradient-bg text-white">
340
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
341
+ <div class="text-center mb-12">
342
+ <span class="text-yellow-300 font-medium">EXPERIENCE THE FUTURE</span>
343
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Try Our Voice AI Demo</h2>
344
+ <p class="max-w-2xl mx-auto">Interact with our cutting-edge voice technology to see how it can transform your business.</p>
345
+ </div>
346
+
347
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 md:p-12 max-w-4xl mx-auto">
348
+ <div class="flex flex-col md:flex-row items-center">
349
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
350
+ <div class="relative">
351
+ <div class="w-40 h-40 sm:w-48 sm:h-48 rounded-full bg-purple-500 opacity-20 animate-ping"></div>
352
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
353
+ <i class="fas fa-microphone text-5xl sm:text-6xl text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  </div>
355
  </div>
356
  </div>
357
+ <div class="md:w-2/3 md:pl-8">
358
+ <h3 class="text-2xl font-bold mb-4">Speak to Our AI Assistant</h3>
359
+ <p class="mb-6 opacity-90">Click the microphone and ask about our services, pricing, or any other question you might have.</p>
360
+
361
+ <div class="bg-white bg-opacity-20 rounded-lg p-4 mb-6">
362
+ <div class="flex items-center mb-3">
363
+ <div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div>
364
+ <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
365
+ <div class="w-4 h-4 rounded-full bg-green-500"></div>
 
 
 
 
 
 
 
366
  </div>
367
+ <div id="demo-response" class="text-sm md:text-base min-h-20">
368
+ <p>Hello! I'm VoxAI assistant. Press the microphone button below and ask me anything about our services.</p>
 
 
 
 
 
369
  </div>
370
  </div>
371
+
372
+ <button class="voice-recording bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full font-medium text-lg transition duration-300 flex items-center mx-auto">
373
+ <i class="fas fa-microphone mr-3"></i> Tap to Speak
374
+ </button>
 
 
 
 
 
 
 
 
375
  </div>
376
  </div>
377
  </div>
 
381
  <!-- Testimonials -->
382
  <section class="py-16 bg-white">
383
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
384
+ <div class="text-center mb-12">
385
+ <span class="text-purple-600 font-medium">CLIENT TESTIMONIALS</span>
386
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">What Our Clients Say</h2>
387
+ <p class="max-w-2xl mx-auto text-gray-600">Don't just take our word for it - hear from businesses that transformed with our voice AI solutions.</p>
 
 
 
388
  </div>
389
 
390
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
391
  <!-- Testimonial 1 -->
392
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
393
  <div class="flex items-center mb-4">
394
+ <div class="flex-shrink-0">
395
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
396
  </div>
397
+ <div class="ml-4">
398
+ <h3 class="text-lg font-bold">Sarah Johnson</h3>
399
+ <p class="text-purple-600 text-sm">CEO, RetailCo</p>
400
  </div>
401
  </div>
402
+ <p class="text-gray-600 italic">"VoxAI's voice shopping assistant increased our conversion rate by 35% and reduced cart abandonment significantly. The natural language understanding is incredible!"</p>
403
+ <div class="mt-4 flex text-yellow-400">
 
 
404
  <i class="fas fa-star"></i>
405
  <i class="fas fa-star"></i>
406
  <i class="fas fa-star"></i>
 
410
  </div>
411
 
412
  <!-- Testimonial 2 -->
413
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
414
  <div class="flex items-center mb-4">
415
+ <div class="flex-shrink-0">
416
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen">
417
  </div>
418
+ <div class="ml-4">
419
+ <h3 class="text-lg font-bold">Michael Chen</h3>
420
+ <p class="text-purple-600 text-sm">CIO, HealthPlus</p>
421
  </div>
422
  </div>
423
+ <p class="text-gray-600 italic">"Our doctors now save 2 hours daily with voice-enabled patient documentation. The accuracy and medical terminology understanding is beyond anything we've tried before."</p>
424
+ <div class="mt-4 flex text-yellow-400">
 
 
 
425
  <i class="fas fa-star"></i>
426
  <i class="fas fa-star"></i>
427
  <i class="fas fa-star"></i>
428
  <i class="fas fa-star"></i>
429
+ <i class="fas fa-star-half-alt"></i>
430
  </div>
431
  </div>
432
 
433
  <!-- Testimonial 3 -->
434
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
435
  <div class="flex items-center mb-4">
436
+ <div class="flex-shrink-0">
437
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
438
  </div>
439
+ <div class="ml-4">
440
+ <h3 class="text-lg font-bold">Emma Rodriguez</h3>
441
+ <p class="text-purple-600 text-sm">Director, GlobalCall</p>
442
  </div>
443
  </div>
444
+ <p class="text-gray-600 italic">"The AI call center solution reduced our operational costs by 40% while maintaining customer satisfaction. The multilingual support was a game-changer for us."</p>
445
+ <div class="mt-4 flex text-yellow-400">
446
+ <i class="fas fa-star"></i>
 
447
  <i class="fas fa-star"></i>
448
  <i class="fas fa-star"></i>
449
  <i class="fas fa-star"></i>
450
  <i class="fas fa-star"></i>
 
451
  </div>
452
  </div>
453
  </div>
 
457
  <!-- CTA Section -->
458
  <section class="py-16 bg-purple-900 text-white">
459
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
460
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business with Voice AI?</h2>
461
+ <p class="text-xl text-purple-200 max-w-3xl mx-auto mb-8">Schedule a free consultation with our voice AI experts to discover how we can revolutionize your customer interactions.</p>
 
 
 
 
462
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
463
+ <button class="bg-white text-purple-900 hover:bg-gray-100 px-8 py-4 rounded-md font-bold text-lg transition duration-300">
464
+ <i class="fas fa-calendar-check mr-2"></i> Book a Demo
465
  </button>
466
+ <button class="border-2 border-white text-white hover:bg-white hover:text-purple-900 px-8 py-4 rounded-md font-bold text-lg transition duration-300">
467
+ <i class="fas fa-phone-alt mr-2"></i> Talk to an Expert
468
  </button>
469
  </div>
470
  </div>
 
473
  <!-- Contact Section -->
474
  <section id="contact" class="py-16 bg-white">
475
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
476
+ <div class="lg:flex lg:items-center lg:space-x-12">
477
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
478
+ <span class="text-purple-600 font-medium">CONTACT US</span>
479
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Get In Touch</h2>
480
+ <p class="text-gray-600 mb-8">Have questions about our voice AI solutions? Our team is here to help you find the perfect technology for your needs.</p>
481
+
 
 
482
  <div class="space-y-6">
483
  <div class="flex items-start">
484
+ <div class="flex-shrink-0">
485
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
486
+ <i class="fas fa-map-marker-alt text-xl"></i>
487
+ </div>
488
  </div>
489
+ <div class="ml-4">
490
+ <h3 class="text-lg font-bold mb-1">Office</h3>
491
+ <p class="text-gray-600">123 AI Street, Tech Valley, CA 94025</p>
492
  </div>
493
  </div>
494
+
495
  <div class="flex items-start">
496
+ <div class="flex-shrink-0">
497
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
498
+ <i class="fas fa-envelope text-xl"></i>
499
+ </div>
500
  </div>
501
+ <div class="ml-4">
502
+ <h3 class="text-lg font-bold mb-1">Email</h3>
503
+ <p class="text-gray-600">hello@voxai.com</p>
504
  </div>
505
  </div>
506
+
507
  <div class="flex items-start">
508
+ <div class="flex-shrink-0">
509
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
510
+ <i class="fas fa-phone-alt text-xl"></i>
511
+ </div>
512
+ </div>
513
+ <div class="ml-4">
514
+ <h3 class="text-lg font-bold mb-1">Phone</h3>
515
+ <p class="text-gray-600">+1 (555) 123-4567</p>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="mt-8 flex space-x-4">
521
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-purple-600 hover:text-white transition duration-300">
522
+ <i class="fab fa-twitter"></i>
523
+ </a>
524
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-purple-600 hover:text-white transition duration-300">
525
+ <i class="fab fa-linkedin-in"></i>
526
+ </a>
527
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-purple-600 hover:text-white transition duration-300">
528
+ <i class="fab fa-facebook-f"></i>
529
+ </a>
530
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-purple-600 hover:text-white transition duration-300">
531
+ <i class="fab fa-instagram"></i>
532
+ </a>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="lg:w-1/2">
537
+ <form class="space-y-6">
538
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
539
+ <div>
540
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
541
+ <input type="text" id="first-name" name="first-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
542
  </div>
543
  <div>
544
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
545
+ <input type="text" id="last-name" name="last-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
546
  </div>
547
  </div>
548
+ <div>
549
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
550
+ <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
551
+ </div>
552
+ <div>
553
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
554
+ <input type="tel" id="phone" name="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
555
+ </div>
556
+ <div>
557
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
558
+ <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500"></textarea>
559
+ </div>
560
+ <div>
561
+ <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
562
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
563
+ </button>
564
+ </div>
565
+ </form>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </section>
570
+
571
+ <!-- Footer -->
572
+ <footer class="bg-gray-900 text-white py-12">
573
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
574
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
575
+ <div>
576
+ <div class="flex items-center mb-4">
577
+ <i class="fas fa-microphone-alt text-purple-400 text-2xl mr-2"></i>
578
+ <span class="text-xl font-bold">Vox<span class="text-purple-400">AI</span></span>
579
  </div>
580
+ <p class="text-gray-400">Revolutionizing business interactions through cutting-edge voice AI technology.</p>
581
+ </div>
582
+
583
+ <div>
584
+ <h3 class="text-lg font-bold mb-4">Services</h3>
585
+ <ul class="space-y-2">
586
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Voice Assistants</a></li>
587
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">IVR Systems</a></li>
588
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Speech Analytics</a></li>
589
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Smart Home</a></li>
590
+ </ul>
591
+ </div>
592
+
593
+ <div>
594
+ <h3 class="text-lg font-bold mb-4">Company</h3>
595
+ <ul class="space-y-2">
596
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
597
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
598
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
599
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
600
+ </ul>
601
+ </div>
602
+
603
+ <div>
604
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
605
+ <ul class="space-y-2">
606
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li>
607
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API Reference</a></li>
608
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li>
609
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Support</a></li>
610
+ </ul>
611
  </div>
612
+ </div>
613
+
614
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
615
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 VoxAI. All rights reserved.</p>
616
+ <div class="flex space-x-6">
617
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
618
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
619
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookies</a>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </footer>
624
+
625
+ <script>
626
+ document.addEventListener('DOMContentLoaded', function() {
627
+ // Smooth scroll for navigation links
628
+ const navLinks = document.querySelectorAll('.nav-link, .mobile-nav-link');
629
+
630
+ navLinks.forEach(link => {
631
+ link.addEventListener('click', function(e) {
632
+ e.preventDefault();
633
+
634
+ // Get the target element
635
+ const targetId = this.getAttribute('href');
636
+ const targetElement = document.querySelector(targetId);
637
+
638
+ if (targetElement) {
639
+ // Close mobile menu if open
640
+ const mobileMenu = document.getElementById('mobile-menu');
641
+ if (mobileMenu.classList.contains('hidden') === false) {
642
+ mobileMenu.classList.add('hidden');
643
+ }
644
+
645
+ // Calculate the position to scroll to
646
+ const headerOffset = 80; // Adjust this value based on your header height
647
+ const elementPosition = targetElement.getBoundingClientRect().top;
648
+ const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
649
+
650
+ // Smooth scroll animation
651
+ window.scrollTo({
652
+ top: offsetPosition,
653
+ behavior: 'smooth'
654
+ });
655
+ }
656
+ });
657
+ });
658
+
659
+ // Mobile menu toggle
660
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
661
+ const mobileMenu = document.getElementById('mobile-menu');
662
+
663
+ mobileMenuButton.addEventListener('click', function() {
664
+ mobileMenu.classList.toggle('hidden');
665
+ });
666
+
667
+ // Highlight active section in navigation
668
+ const sections = document.querySelectorAll('section[id]');
669
+
670
+ window.addEventListener('scroll', function() {
671
+ let current = '';
672
+
673
+ sections.forEach(section => {
674
+ const sectionTop = section.offsetTop;
675
+ const sectionHeight = section.clientHeight;
676
+
677
+ if (pageYOffset >= sectionTop - 200) {
678
+ current = section.getAttribute('id');
679
+ }
680
+ });
681
+
682
+ navLinks.forEach(link => {
683
+ link.classList.remove('active');
684
+ if (link.getAttribute('href') === `#${current}`) {
685
+ link.classList.add('active');
686
+ }
687
+ });
688
+
689
+ // Show sections when in viewport
690
+ sections.forEach(section => {
691
+ const sectionTop = section.getBoundingClientRect().top;
692
+ const sectionHeight = section.clientHeight;
693
+ const windowHeight = window.innerHeight;
694
+
695
+ if (sectionTop < windowHeight - 100) {
696
+ section.classList.add('visible');
697
+ }
698
+ });
699
+ });
700
+
701
+ // Trigger scroll event to set initial active state and show visible sections
702
+ window.dispatchEvent(new Event('scroll'));
703
+
704
+ // Demo button interaction
705
+ const demoButton = document.querySelector('.voice-recording');
706
+ const demoResponse = document.getElementById('demo-response');
707
+
708
+ if (demoButton) {
709
+ demoButton.addEventListener('click', function() {
710
+ this.classList.toggle('recording');
711
+ if (this.classList.contains('recording')) {
712
+ this.innerHTML = '<i class="fas fa-stop mr-3"></i> Stop Recording';
713
+ demoResponse.innerHTML = '<p class="text-gray-800">Listening... Please speak clearly into your microphone.</p>';
714
+ } else {
715
+ this.innerHTML = '<i class="fas fa-microphone mr-3"></i> Tap to Speak';
716
+ demoResponse.innerHTML = '<p>Thank you for your question! A summary of our pricing starts at $5,000 for basic implementations. Contact us for a detailed quote.</p>';
717
+ }
718
+ });
719
+ }
720
+ });
721
+ </script>
722
+ <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>
723
  </html>