const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React; // Sample call transcript that plays on loop const TRANSCRIPT = [ { speaker: 'caller', text: "Hi, I want to book a table for four tonight at 8.", delay: 0 }, { speaker: 'agent', text: "Of course — let me check 8 PM for four guests. One moment.", delay: 2200 }, { speaker: 'agent', text: "We have a window table available. Any dietary preferences?", delay: 4400 }, { speaker: 'caller', text: "One vegetarian, and we'll need a high chair.", delay: 6600 }, { speaker: 'agent', text: "Noted. May I have the name and a contact number?", delay: 8800 }, { speaker: 'caller', text: "Hassan Ali — 0312 4567890.", delay: 11000 }, { speaker: 'agent', text: "Perfect, Hassan. Booked: 8 PM, table for 4, vegetarian + high chair. Confirmation sent via SMS.", delay: 13200 }, ]; function Hero({ tweaks }) { const isMobile = useMediaQuery('(max-width: 768px)'); const [step, setStep] = useStateHero(0); const [elapsed, setElapsed] = useStateHero(0); // Loop transcript every ~17s useEffectHero(() => { const start = Date.now(); const tick = setInterval(() => { const t = (Date.now() - start) % 17000; setElapsed(t); let s = 0; for (let i = 0; i < TRANSCRIPT.length; i++) { if (t >= TRANSCRIPT[i].delay) s = i; } setStep(s); }, 100); return () => clearInterval(tick); }, []); const headlineStyle = tweaks?.headlineStyle || 'serif-mix'; return (
{tweaks?.showGrid && (
)}
{/* LEFT — copy */}
LIVE · 2,418 CALLS HANDLED TODAY

{headlineStyle === 'all-sans' ? ( <>Never miss a call.
Never hire a receptionist. ) : headlineStyle === 'all-serif' ? ( Never miss a call.
Never hire a receptionist. ) : ( <> Never miss{' '} a call.
Never hire{' '} a receptionist. )}

Our AI voice agent answers every inbound call, handles the conversation in a natural human voice, and logs everything to your dashboard — 24/7, in 50+ languages.

Book Now Hear it in action
{/* Stat badges */}
{/* RIGHT — live call simulation */}
); } function Stat({ number, label, accent, isMobile, last }) { return (
{number}
{label}
); } function CallSimulator({ step, elapsed }) { const isMobile = useMediaQuery('(max-width: 768px)'); const seconds = Math.floor(elapsed / 1000); const mm = String(Math.floor(seconds / 60)).padStart(2, '0'); const ss = String(seconds % 60).padStart(2, '0'); return (
{/* Header */}
Incoming call
+92 312 456 7890
{mm}:{ss}
{/* Waveform */} {/* Status row */}
AxisAgent
MODEL · CALLAXIS-V3 · UR/EN
Intent: reservation
{/* Transcript */}
{TRANSCRIPT.slice(Math.max(0, step - 2), step + 1).map((line, i, arr) => ( ))}
{/* Action bar */}
LOGGED TRANSCRIBED SMS QUEUED
); } function Waveform() { // 56 bars with varied heights const bars = Array.from({ length: 56 }, (_, i) => { const seed = (Math.sin(i * 1.7) + 1) / 2; return 0.25 + seed * 0.7; }); return (
{bars.map((h, i) => (
))}
); } function TranscriptLine({ line, fresh }) { const isAgent = line.speaker === 'agent'; return (
{isAgent ? 'AI' : 'C'}
{line.text}
); } function Tag({ dot, children }) { return ( {children} ); } window.Hero = Hero; window.Marquee = function Marquee() { const isMobile = useMediaQuery('(max-width: 768px)'); const items = [ 'KARACHI BIRYANI HOUSE', 'DR. KHAN CLINIC', 'ZARA REAL ESTATE', 'BOLT MOTORS', 'GREEN LEAF PHARMACY', 'NORTH STAR LOGISTICS', 'AALI DENTAL', 'SHAHEEN AUTO', 'CRESCENT SALON', 'METRO MART', 'EVERFRESH GROCERS', 'HORIZON PROPERTIES', ]; return (
ANSWERING CALLS FOR
{[...items, ...items].map((item, i) => ( {item} ))}
); };