Merge version_4_1781897531842 into main #4
@@ -13,11 +13,15 @@ import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
import TrustedBySection from './HomePage/sections/TrustedBy';export default function HomePage(): React.JSX.Element {
|
||||
import TrustedBySection from './HomePage/sections/TrustedBy';
|
||||
import BusinessProblemsSection from './HomePage/sections/BusinessProblems';
|
||||
import AiDemosSection from './HomePage/sections/AiDemos';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<TrustedBySection />
|
||||
<BusinessProblemsSection />
|
||||
<AiDemosSection />
|
||||
|
||||
<AboutSection />
|
||||
|
||||
|
||||
148
src/pages/HomePage/sections/AiDemos.tsx
Normal file
148
src/pages/HomePage/sections/AiDemos.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { motion } from "motion/react";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { Mic, PhoneCall, MessageSquare, Calendar } from "lucide-react";
|
||||
|
||||
export default function AiDemosSection() {
|
||||
return (
|
||||
<section data-webild-section="ai-demos" className="relative w-full py-24 bg-card overflow-hidden">
|
||||
<div className="w-content-width mx-auto">
|
||||
<ScrollReveal variant="fade">
|
||||
<div className="text-center mb-16">
|
||||
<TextAnimation
|
||||
text="Meet Your New Best Employees"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-tight font-bold text-foreground mb-6"
|
||||
gradientText={false}
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-2xl mx-auto">
|
||||
Available 24/7. Never takes a sick day. Instantly responds to every lead and books appointments while you sleep.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* AI Receptionist Demo */}
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<div className="group relative p-8 md:p-10 rounded-[32px] border border-white/5 bg-background hover:border-primary-cta/30 transition-colors duration-500">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-cta/5 to-transparent rounded-[32px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-cta/20 flex items-center justify-center">
|
||||
<PhoneCall className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-tight font-bold text-foreground">AI Receptionist</h3>
|
||||
</div>
|
||||
<span className="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm font-medium flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||||
Online
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex gap-4">
|
||||
<div className="w-8 h-8 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<span className="text-xs font-bold text-primary-cta">AI</span>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-2xl rounded-tl-none p-4 text-sm text-foreground">
|
||||
"Hi, thanks for calling! How can I help you today?"
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 flex-row-reverse">
|
||||
<div className="w-8 h-8 rounded-full bg-secondary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<span className="text-xs font-bold text-secondary-cta">You</span>
|
||||
</div>
|
||||
<div className="bg-secondary-cta/10 rounded-2xl rounded-tr-none p-4 text-sm text-foreground">
|
||||
"I need to book an appointment for tomorrow."
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-8 h-8 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<span className="text-xs font-bold text-primary-cta">AI</span>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-2xl rounded-tl-none p-4 text-sm text-foreground">
|
||||
"I have 10:00 AM or 2:00 PM available. Which works better for you?"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-center gap-3 text-accent text-sm">
|
||||
<div className="w-5 h-5 rounded-full bg-primary-cta/20 flex items-center justify-center">
|
||||
<Mic className="w-3 h-3 text-primary-cta" />
|
||||
</div>
|
||||
Human-like voice conversations
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-accent text-sm">
|
||||
<div className="w-5 h-5 rounded-full bg-primary-cta/20 flex items-center justify-center">
|
||||
<Calendar className="w-3 h-3 text-primary-cta" />
|
||||
</div>
|
||||
Direct calendar integration
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Button text="Hear a Live Demo" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Website Voice Agent Demo */}
|
||||
<ScrollReveal variant="fade" delay={0.4}>
|
||||
<div className="group relative p-8 md:p-10 rounded-[32px] border border-white/5 bg-background hover:border-secondary-cta/30 transition-colors duration-500">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-secondary-cta/5 to-transparent rounded-[32px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-secondary-cta/20 flex items-center justify-center">
|
||||
<MessageSquare className="w-6 h-6 text-secondary-cta" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-tight font-bold text-foreground">Website Voice Agent</h3>
|
||||
</div>
|
||||
<span className="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm font-medium flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||||
Listening
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative h-48 rounded-2xl bg-white/5 border border-white/10 flex flex-col items-center justify-center mb-8 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=2000&auto=format&fit=crop')] opacity-10 bg-cover bg-center" />
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center">
|
||||
<div className="w-16 h-16 rounded-full bg-secondary-cta/20 flex items-center justify-center mb-4 relative">
|
||||
<div className="absolute inset-0 rounded-full border border-secondary-cta/50 animate-ping" />
|
||||
<Mic className="w-8 h-8 text-secondary-cta" />
|
||||
</div>
|
||||
<p className="text-foreground font-medium">"Hi, how can I help you today?"</p>
|
||||
<p className="text-accent text-sm mt-2">Click to speak</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-center gap-3 text-accent text-sm">
|
||||
<div className="w-5 h-5 rounded-full bg-secondary-cta/20 flex items-center justify-center">
|
||||
<MessageSquare className="w-3 h-3 text-secondary-cta" />
|
||||
</div>
|
||||
Replaces boring contact forms
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-accent text-sm">
|
||||
<div className="w-5 h-5 rounded-full bg-secondary-cta/20 flex items-center justify-center">
|
||||
<PhoneCall className="w-3 h-3 text-secondary-cta" />
|
||||
</div>
|
||||
Qualifies leads instantly
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Button text="Try Website Agent" variant="secondary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
123
src/pages/HomePage/sections/BusinessProblems.tsx
Normal file
123
src/pages/HomePage/sections/BusinessProblems.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
|
||||
export default function BusinessProblemsSection() {
|
||||
const [missedCalls, setMissedCalls] = useState(10);
|
||||
const [customerValue, setCustomerValue] = useState(500);
|
||||
|
||||
const yearlyLost = missedCalls * customerValue * 52;
|
||||
const monthlyLost = Math.round(yearlyLost / 12);
|
||||
|
||||
return (
|
||||
<section data-webild-section="business-problems" className="relative w-full py-24 bg-background overflow-hidden">
|
||||
<div className="w-content-width mx-auto">
|
||||
<ScrollReveal variant="fade">
|
||||
<div className="text-center mb-16">
|
||||
<TextAnimation
|
||||
text="The Hidden Cost of Missing Calls"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-tight font-bold text-foreground mb-6"
|
||||
gradientText={false}
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-2xl mx-auto">
|
||||
Every missed call is a missed opportunity. While you're busy running your business, potential revenue is slipping through the cracks. Let's calculate exactly how much.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<div className="card p-8 md:p-12 rounded-[32px] border border-white/5 bg-white/5 backdrop-blur-xl shadow-2xl">
|
||||
<h3 className="text-2xl font-tight font-bold text-foreground mb-8">Lost Revenue Calculator</h3>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<label className="text-foreground font-medium">Missed Calls per Week</label>
|
||||
<span className="text-secondary-cta font-bold">{missedCalls}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
value={missedCalls}
|
||||
onChange={(e) => setMissedCalls(parseInt(e.target.value))}
|
||||
className="w-full accent-secondary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<label className="text-foreground font-medium">Average Customer Value ($)</label>
|
||||
<span className="text-secondary-cta font-bold">${customerValue}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="50"
|
||||
max="5000"
|
||||
step="50"
|
||||
value={customerValue}
|
||||
onChange={(e) => setCustomerValue(parseInt(e.target.value))}
|
||||
className="w-full accent-secondary-cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 p-6 rounded-2xl bg-background/50 border border-white/5">
|
||||
<p className="text-accent text-sm mb-2">Estimated Lost Revenue (Yearly)</p>
|
||||
<div className="text-5xl font-tight font-bold text-primary-cta">
|
||||
${yearlyLost.toLocaleString()}
|
||||
</div>
|
||||
<p className="text-accent text-sm mt-4">
|
||||
That's <span className="text-foreground font-semibold">${monthlyLost.toLocaleString()}</span> every month.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fade" delay={0.4}>
|
||||
<div className="space-y-8">
|
||||
<div className="flex gap-6">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-primary-cta text-xl">📞</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-tight font-bold text-foreground mb-2">You Can't Answer Every Call</h4>
|
||||
<p className="text-accent">When you're with a client, in a meeting, or after hours, calls go to voicemail. 80% of callers won't leave a message—they just call your competitor.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
<div className="w-12 h-12 rounded-full bg-secondary-cta/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-secondary-cta text-xl">⏳</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-tight font-bold text-foreground mb-2">Slow Follow-ups Kill Deals</h4>
|
||||
<p className="text-accent">If you don't reply within 5 minutes, your chance of closing the lead drops by 400%. Manual follow-ups are too slow.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-primary-cta text-xl">💸</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-tight font-bold text-foreground mb-2">The Solution is Automation</h4>
|
||||
<p className="text-accent">Stop losing money to missed calls. Our AI Receptionist answers instantly, qualifies the lead, and books the appointment directly on your calendar.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button text="Stop Losing Revenue" variant="primary" className="w-full md:w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user