|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>VoxAI - Voice AI Solutions Agency</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
|
|
|
.voice-wave { |
|
|
position: relative; |
|
|
height: 50px; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.voice-wave::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
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>'); |
|
|
background-size: cover; |
|
|
animation: wave 8s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { background-position-x: 0; } |
|
|
100% { background-position-x: 500px; } |
|
|
} |
|
|
|
|
|
.voice-recording { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
nav a.active { |
|
|
color: #8b5cf6 !important; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
button:focus, a:focus { |
|
|
outline: none; |
|
|
box-shadow: none; |
|
|
} |
|
|
|
|
|
|
|
|
section { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: opacity 0.6s ease, transform 0.6s ease; |
|
|
} |
|
|
|
|
|
section.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-md z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-microphone-alt text-purple-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">Vox<span class="text-purple-600">AI</span></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#services" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Services</a> |
|
|
<a href="#solutions" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Solutions</a> |
|
|
<a href="#demo" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Demo</a> |
|
|
<a href="#contact" class="nav-link text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<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"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
<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"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:flex lg:items-center lg:justify-between"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4"> |
|
|
Revolutionize Your Business With <span class="text-yellow-300">Voice AI</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-100 mb-8"> |
|
|
We build custom voice-enabled AI solutions that transform customer interactions and streamline operations. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-md font-medium text-lg transition duration-300"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Watch Demo |
|
|
</button> |
|
|
<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"> |
|
|
<i class="fas fa-comment-dots mr-2"></i> Chat With Us |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 mt-12 lg:mt-0 flex justify-center"> |
|
|
<div class="relative w-64 h-64 sm:w-80 sm:h-80 lg:w-96 lg:h-96"> |
|
|
<div class="absolute inset-0 bg-purple-500 rounded-full opacity-20 animate-ping"></div> |
|
|
<div class="absolute inset-4 bg-purple-500 rounded-full opacity-20 animate-ping delay-300"></div> |
|
|
<div class="absolute inset-8 bg-white rounded-full flex items-center justify-center voice-recording"> |
|
|
<i class="fas fa-microphone-alt text-purple-600 text-5xl sm:text-6xl lg:text-7xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="voice-wave"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-100"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h3 class="text-center text-gray-500 text-sm mb-8">TRUSTED BY INNOVATIVE COMPANIES WORLDWIDE</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center"> |
|
|
<div class="flex justify-center"> |
|
|
<i class="fab fa-google text-4xl text-gray-700"></i> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<i class="fab fa-amazon text-4xl text-gray-700"></i> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<i class="fab fa-microsoft text-4xl text-gray-700"></i> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<i class="fab fa-slack text-4xl text-gray-700"></i> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<i class="fab fa-spotify text-4xl text-gray-700"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="text-purple-600 font-medium">OUR SERVICES</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Tailored Voice AI Solutions</h2> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-robot text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Voice Assistants</h3> |
|
|
<p class="text-gray-600 mb-4">Custom voice assistants that understand natural language and respond intelligently to customer queries.</p> |
|
|
<a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-headset text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">IVR Systems</h3> |
|
|
<p class="text-gray-600 mb-4">Interactive voice response systems that automate customer service while maintaining human-like interactions.</p> |
|
|
<a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-chart-line text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Speech Analytics</h3> |
|
|
<p class="text-gray-600 mb-4">Analyze customer calls to gain valuable insights into sentiment, trends, and business opportunities.</p> |
|
|
<a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-language text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Multilingual Support</h3> |
|
|
<p class="text-gray-600 mb-4">Voice AI solutions that work across languages and dialects to serve global customer bases.</p> |
|
|
<a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-home text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Smart Home Integration</h3> |
|
|
<p class="text-gray-600 mb-4">Voice-controlled solutions for smart homes and IoT devices with custom wake words and commands.</p> |
|
|
<a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-cogs text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Custom Development</h3> |
|
|
<p class="text-gray-600 mb-4">Tailor-made voice AI solutions designed specifically for your business needs and workflows.</p> |
|
|
<a href="#" class="text-purple-600 font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="solutions" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:flex lg:items-center lg:space-x-12"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" |
|
|
alt="Voice AI Solutions" |
|
|
class="rounded-xl shadow-xl w-full h-auto"> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<span class="text-purple-600 font-medium">INDUSTRY SOLUTIONS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Voice AI For Every Industry</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-store text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-2">Retail & E-commerce</h3> |
|
|
<p class="text-gray-600">Voice shopping assistants that help customers discover products and make purchases hands-free.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-medkit text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-2">Healthcare</h3> |
|
|
<p class="text-gray-600">Voice-enabled documentation and patient interaction tools that streamline clinical workflows.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-university text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-2">Banking & Finance</h3> |
|
|
<p class="text-gray-600">Secure voice authentication and banking services that provide convenient access to financial services.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-phone-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-2">Call Centers</h3> |
|
|
<p class="text-gray-600">AI-powered voice agents that handle routine inquiries, reducing wait times and operational costs.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition duration-300"> |
|
|
Explore All Industries <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-16 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<span class="text-yellow-300 font-medium">EXPERIENCE THE FUTURE</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Try Our Voice AI Demo</h2> |
|
|
<p class="max-w-2xl mx-auto">Interact with our cutting-edge voice technology to see how it can transform your business.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 md:p-12 max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="w-40 h-40 sm:w-48 sm:h-48 rounded-full bg-purple-500 opacity-20 animate-ping"></div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> |
|
|
<i class="fas fa-microphone text-5xl sm:text-6xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3 md:pl-8"> |
|
|
<h3 class="text-2xl font-bold mb-4">Speak to Our AI Assistant</h3> |
|
|
<p class="mb-6 opacity-90">Click the microphone and ask about our services, pricing, or any other question you might have.</p> |
|
|
|
|
|
<div class="bg-white bg-opacity-20 rounded-lg p-4 mb-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div> |
|
|
<div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div> |
|
|
<div class="w-4 h-4 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div id="demo-response" class="text-sm md:text-base min-h-20"> |
|
|
<p>Hello! I'm VoxAI assistant. Press the microphone button below and ask me anything about our services.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
<i class="fas fa-microphone mr-3"></i> Tap to Speak |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<span class="text-purple-600 font-medium">CLIENT TESTIMONIALS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">What Our Clients Say</h2> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold">Sarah Johnson</h3> |
|
|
<p class="text-purple-600 text-sm">CEO, RetailCo</p> |
|
|
</div> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-4 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold">Michael Chen</h3> |
|
|
<p class="text-purple-600 text-sm">CIO, HealthPlus</p> |
|
|
</div> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-4 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold">Emma Rodriguez</h3> |
|
|
<p class="text-purple-600 text-sm">Director, GlobalCall</p> |
|
|
</div> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-4 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-purple-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business with Voice AI?</h2> |
|
|
<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> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-purple-900 hover:bg-gray-100 px-8 py-4 rounded-md font-bold text-lg transition duration-300"> |
|
|
<i class="fas fa-calendar-check mr-2"></i> Book a Demo |
|
|
</button> |
|
|
<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"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Talk to an Expert |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:flex lg:items-center lg:space-x-12"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0"> |
|
|
<span class="text-purple-600 font-medium">CONTACT US</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Get In Touch</h2> |
|
|
<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> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-map-marker-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-1">Office</h3> |
|
|
<p class="text-gray-600">123 AI Street, Tech Valley, CA 94025</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-1">Email</h3> |
|
|
<p class="text-gray-600">hello@voxai.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-phone-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold mb-1">Phone</h3> |
|
|
<p class="text-gray-600">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 flex space-x-4"> |
|
|
<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"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label> |
|
|
<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"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
|
|
<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> |
|
|
</div> |
|
|
<div> |
|
|
<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"> |
|
|
Send Message <i class="fas fa-paper-plane ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-microphone-alt text-purple-400 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold">Vox<span class="text-purple-400">AI</span></span> |
|
|
</div> |
|
|
<p class="text-gray-400">Revolutionizing business interactions through cutting-edge voice AI technology.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Voice Assistants</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">IVR Systems</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Speech Analytics</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Smart Home</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API Reference</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 VoxAI. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const navLinks = document.querySelectorAll('.nav-link, .mobile-nav-link'); |
|
|
|
|
|
navLinks.forEach(link => { |
|
|
link.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (mobileMenu.classList.contains('hidden') === false) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
const headerOffset = 80; |
|
|
const elementPosition = targetElement.getBoundingClientRect().top; |
|
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset; |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: offsetPosition, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const sections = document.querySelectorAll('section[id]'); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
let current = ''; |
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.offsetTop; |
|
|
const sectionHeight = section.clientHeight; |
|
|
|
|
|
if (pageYOffset >= sectionTop - 200) { |
|
|
current = section.getAttribute('id'); |
|
|
} |
|
|
}); |
|
|
|
|
|
navLinks.forEach(link => { |
|
|
link.classList.remove('active'); |
|
|
if (link.getAttribute('href') === `#${current}`) { |
|
|
link.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.getBoundingClientRect().top; |
|
|
const sectionHeight = section.clientHeight; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if (sectionTop < windowHeight - 100) { |
|
|
section.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.dispatchEvent(new Event('scroll')); |
|
|
|
|
|
|
|
|
const demoButton = document.querySelector('.voice-recording'); |
|
|
const demoResponse = document.getElementById('demo-response'); |
|
|
|
|
|
if (demoButton) { |
|
|
demoButton.addEventListener('click', function() { |
|
|
this.classList.toggle('recording'); |
|
|
if (this.classList.contains('recording')) { |
|
|
this.innerHTML = '<i class="fas fa-stop mr-3"></i> Stop Recording'; |
|
|
demoResponse.innerHTML = '<p class="text-gray-800">Listening... Please speak clearly into your microphone.</p>'; |
|
|
} else { |
|
|
this.innerHTML = '<i class="fas fa-microphone mr-3"></i> Tap to Speak'; |
|
|
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>'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
