undefined / index.html
Synthify-ai's picture
remove the first line from each of the 3 tiers talking about the number of receptionist theyre getting
c956205 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Synthify.AI - AI Receptionists for Local Businesses</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.testimonial-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 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">
<img src="https://huggingface.co/spaces/Synthify-ai/undefined/resolve/main/images/synthify%20logo%202.png" class="h-8 w-8" alt="Synthify.AI Logo">
<span class="ml-2 text-xl font-bold text-gray-900">Synthify.AI</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#how-it-works" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">How It Works</a>
<a href="#pricing" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Pricing</a>
<a href="#industries" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Industries</a>
<a href="#results" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Results</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
<button class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Book a Demo
</button>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="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 focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-gradient">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">AI Receptionists That Never</span>
<span class="block text-blue-600">Sleep, Call In Sick, or Make Mistakes</span>
</h1>
<p class="mt-3 max-w-md mx-auto text-base text-gray-600 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
Synthify.AI handles calls, books appointments, and manages messages - saving your staff hours every day while improving customer experience.
</p>
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
<div class="rounded-md shadow">
<a href="#contact" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
Get Started
</a>
</div>
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a href="#how-it-works" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
How It Works
</a>
</div>
</div>
</div>
</div>
</div>
<!-- How It Works -->
<div id="how-it-works" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Simple Setup, Powerful Results
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
Get your AI receptionist up and running in days, not months.
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
<!-- Step 1 -->
<div class="feature-card relative transition-all duration-300 ease-in-out">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">1</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Setup</h3>
<p class="mt-2 text-base text-gray-600">
We learn your business specifics, hours, services, and appointment types in a quick onboarding call.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="feature-card relative transition-all duration-300 ease-in-out">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">2</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Integration</h3>
<p class="mt-2 text-base text-gray-600">
We connect with your phone system, calendar, and CRM - no technical work required on your end.
</p>
</div>
</div>
<!-- Step 3 -->
<div class="feature-card relative transition-all duration-300 ease-in-out">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">3</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Live Agent</h3>
<p class="mt-2 text-base text-gray-600">
Your AI receptionist goes live, handling calls 24/7 with human-like conversations tailored to your business.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Industries -->
<div id="industries" class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Industries</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Who We Help
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
Local service businesses that rely on phone calls to drive revenue.
</p>
</div>
<div class="mt-10">
<div class="grid gap-10 md:grid-cols-3">
<!-- Dentists -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="activity" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Dental Clinics</h3>
</div>
</div>
<div class="mt-4">
<p class="text-base text-gray-600">
Never miss another new patient call. Your AI receptionist books appointments, answers FAQs, and follows up with patients automatically.
</p>
</div>
</div>
</div>
<!-- Pharmacies -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="plus-circle" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Pharmacies</h3>
</div>
</div>
<div class="mt-4">
<p class="text-base text-gray-600">
Handle prescription refills, medication questions, and pickup times without adding staff during busy hours.
</p>
</div>
</div>
</div>
<!-- Service Businesses -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="scissors" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Local Services</h3>
</div>
</div>
<div class="mt-4">
<p class="text-base text-gray-600">
Salons, repair shops, contractors - any business that books appointments by phone can benefit from an always-available AI receptionist.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Results -->
<div id="results" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Results</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Measurable Impact
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
What our clients experience after implementing Synthify.AI
</p>
</div>
<div class="mt-10 grid gap-10 lg:grid-cols-3">
<!-- Stat 1 -->
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-5xl font-bold text-blue-600">80%</div>
<div class="mt-2 text-lg font-medium text-gray-900">Reduction in Missed Calls</div>
<p class="mt-2 text-gray-600">
Calls are answered instantly, day or night, even during lunch breaks and holidays.
</p>
</div>
<!-- Stat 2 -->
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-5xl font-bold text-blue-600">15+</div>
<div class="mt-2 text-lg font-medium text-gray-900">Hours Saved Weekly</div>
<p class="mt-2 text-gray-600">
Staff spend less time on the phone and more time serving customers in person.
</p>
</div>
<!-- Stat 3 -->
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-5xl font-bold text-blue-600">30%</div>
<div class="mt-2 text-lg font-medium text-gray-900">More Appointments Booked</div>
<p class="mt-2 text-gray-600">
Our AI never forgets to follow up or ask for the appointment, increasing conversions.
</p>
</div>
</div>
<!-- Testimonials -->
<div class="mt-16">
<h3 class="text-2xl font-bold text-center text-gray-900">What Our Clients Say</h3>
<div class="mt-8 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 -->
<div class="testimonial-card p-6 rounded-lg">
<div class="flex items-center">
<img class="h-12 w-12 rounded-full" src="http://static.photos/medical/200x200/1" alt="Dr. Sarah Johnson">
<div class="ml-4">
<h4 class="text-lg font-medium">Dr. Sarah Johnson</h4>
<p class="text-gray-600">Dental Clinic Owner</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-700 italic">
"Synthify.AI has transformed our practice. We went from missing 30% of new patient calls to booking every single one. The AI sounds so natural that patients often don't realize they're not talking to a human."
</p>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card p-6 rounded-lg">
<div class="flex items-center">
<img class="h-12 w-12 rounded-full" src="http://static.photos/retail/200x200/2" alt="Mike Thompson">
<div class="ml-4">
<h4 class="text-lg font-medium">Mike Thompson</h4>
<p class="text-gray-600">Pharmacy Manager</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-700 italic">
"Our staff was overwhelmed with phone calls about refills and hours. Now Synthify handles 80% of these calls automatically, freeing up our pharmacists to focus on patient care."
</p>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card p-6 rounded-lg">
<div class="flex items-center">
<img class="h-12 w-12 rounded-full" src="http://static.photos/workspace/200x200/3" alt="Lisa Chen">
<div class="ml-4">
<h4 class="text-lg font-medium">Lisa Chen</h4>
<p class="text-gray-600">Salon Owner</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-700 italic">
"As a small business, we couldn't afford a full-time receptionist. Synthify gives us professional call handling at a fraction of the cost. Our no-show rate dropped by 40% thanks to the automated reminders."
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pricing -->
<div id="pricing" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Pricing</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Choose Your Plan
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
Simple, transparent pricing with no hidden fees.
</p>
</div>
<div class="mt-10 grid gap-8 md:grid-cols-3">
<!-- Starter Plan -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden border border-gray-200">
<div class="px-6 py-8">
<h3 class="text-2xl font-bold text-center text-gray-900">Starter</h3>
<div class="mt-4 text-center">
<span class="text-4xl font-bold text-gray-900">£449</span>
<span class="text-lg font-medium text-gray-600">/month</span>
</div>
<p class="mt-2 text-center text-gray-600">+ £799 setup fee</p>
<ul class="mt-6 space-y-4">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Up to 200 calls or messages</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Basic call routing</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Standard business hours</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Email support</span>
</li>
</ul>
</div>
<div class="px-6 pt-4 pb-8 bg-gray-50 text-center">
<a href="#contact" class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
Book a Demo
</a>
</div>
</div>
<!-- Growth Plan -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-blue-500 transform scale-105">
<div class="px-6 py-8">
<div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 text-xs font-bold uppercase">Popular</div>
<h3 class="text-2xl font-bold text-center text-gray-900">Growth</h3>
<div class="mt-4 text-center">
<span class="text-4xl font-bold text-gray-900">£699</span>
<span class="text-lg font-medium text-gray-600">/month</span>
</div>
<p class="mt-2 text-center text-gray-600">+ £1,099 setup fee</p>
<ul class="mt-6 space-y-4">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Up to 600 calls or messages</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Custom voice and call flow</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Calendar & CRM integration</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">After-hours handling</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Monthly performance report</span>
</li>
</ul>
</div>
<div class="px-6 pt-4 pb-8 bg-gray-50 text-center">
<a href="#contact" class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
Book a Demo
</a>
</div>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden border border-gray-200">
<div class="px-6 py-8">
<h3 class="text-2xl font-bold text-center text-gray-900">Pro</h3>
<div class="mt-4 text-center">
<span class="text-4xl font-bold text-gray-900">£999</span>
<span class="text-lg font-medium text-gray-600">/month</span>
</div>
<p class="mt-2 text-center text-gray-600">+ £1,599 setup fee</p>
<ul class="mt-6 space-y-4">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Unlimited calls and messages</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Advanced CRM integrations</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">WhatsApp & SMS support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Priority support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500"></i>
<span class="ml-3 text-gray-700">Dedicated account manager</span>
</li>
</ul>
</div>
<div class="px-6 pt-4 pb-8 bg-gray-50 text-center">
<a href="#contact" class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
Book a Demo
</a>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-blue-700">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
<span class="block">Ready to save time and grow your business?</span>
<span class="block text-blue-200">Get started with Synthify.AI today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
Book a Demo
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70">
Contact Sales
</a>
</div>
</div>
</div>
</div>
<!-- Contact Form -->
<div id="contact" class="bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
</div>
<!-- Legal Footer -->
<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<h3 class="text-lg font-bold mb-4">Synthify.AI</h3>
<p class="text-gray-400">AI receptionists for local businesses that never sleep, call in sick, or make mistakes.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Contact</h4>
<address class="text-gray-400 not-italic">
<p>123 Business Street</p>
<p>London, UK</p>
<p class="mt-2">hello@synthify.ai</p>
<p>+44 123 456 7890</p>
</address>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Legal</h4>
<ul class="text-gray-400 space-y-2">
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Cookie Policy</a></li>
<li><a href="#" class="hover:text-white">GDPR Compliance</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
<p>© 2023 Synthify.AI. All rights reserved.</p>
<p class="mt-2">Synthify.AI is a registered trademark.</p>
</div>
</footer>
</body>
</html>