/* Hero Section — with realistic iPhone showing live call */ /* Count-up / count-down helper — strong ease-out (decelerates heavily at the end) */ const easeOutQuint = (t) => 1 - Math.pow(1 - t, 5); const useCount = (from, to, duration) => { const [v, setV] = React.useState(from); React.useEffect(() => { let raf, start; const tick = (ts) => { if (!start) start = ts; const p = Math.min(1, (ts - start) / duration); const eased = easeOutQuint(p); setV(from + (to - from) * eased); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [from, to, duration]); return v; }; const CountUp = ({ from=0, to, duration=2000 }) => { const v = useCount(from, to, duration); return <>{Math.round(v)}; }; const CountDown = ({ from, to, duration=2000 }) => { const v = useCount(from, to, duration); return <>{Math.round(v)}; }; const CountDownDecimal = ({ from, to, duration=2000 }) => { const v = useCount(from, to, duration); return <>{v.toFixed(2).replace('.', ',')}; }; const Hero = () => { // Start with the first greeting already visible — the chat shouldn't open "empty". const [transcriptIdx, setTranscriptIdx] = React.useState(1); const transcript = [ { who: 'aivent', text: 'Willkommen beim Taxi Ruf! Wo möchten Sie abgeholt werden?' }, { who: 'kunde', text: 'Mozartstraße 42, Vorderhaus.' }, { who: 'aivent', text: 'Gerne! Für sofort?' }, { who: 'kunde', text: 'Nein, für morgen früh um 6:30 Uhr.' }, { who: 'aivent', text: 'Notiert. Und wohin darf der Wagen Sie bringen?' }, { who: 'kunde', text: 'Zum Hauptbahnhof, bitte.' }, { who: 'aivent', text: 'Perfekt. Morgen 6:30, Mozartstr. 42 → Hauptbahnhof. Soll ich so buchen?' }, { who: 'kunde', text: 'Ja, gerne.' }, { who: 'aivent', text: 'Gebucht. Sie erhalten 10 Min. vorher eine SMS mit Fahrer und Kennzeichen.' }, ]; React.useEffect(() => { const t = setInterval(() => setTranscriptIdx(i => (i + 1) % (transcript.length + 2)), 2400); return () => clearInterval(t); }, []); const visible = transcript.slice(0, Math.min(transcriptIdx, transcript.length)); const typing = transcriptIdx < transcript.length; const nextSpeaker = transcript[transcriptIdx]?.who; // Time tick const [sec, setSec] = React.useState(8); React.useEffect(() => { const t = setInterval(() => setSec(s => s + 1), 1000); return () => clearInterval(t); }, []); const mm = String(Math.floor(sec/60)).padStart(2,'0'); const ss = String(sec%60).padStart(2,'0'); return (
Live seit 2025

Klingeln.
Buchen. Fahren.

KI-Telefonie für Taxizentralen. Buchungen, Vorbestellungen, Sonderwünsche — vollautomatisch.

Demo buchen ↗ Kontakt ↗
{/* iPhone */}
{/* Lime glow */}
{/* Floating annotations — fly in on mount */}
↘ ECHTZEIT-BUCHUNGEN
< 800ms LATENZ
); }; /* ── Realistic iPhone with visible hardware buttons ── */ const IPhone = ({ timer, visible, typing, nextSpeaker }) => { const W = 288, H = 586; const btn = 'linear-gradient(90deg,#1a1a1c 0%,#3a3a3d 40%,#2a2a2c 60%,#1a1a1c 100%)'; const btnR = 'linear-gradient(270deg,#1a1a1c 0%,#3a3a3d 40%,#2a2a2c 60%,#1a1a1c 100%)'; return (
{/* Side hardware buttons — sit OUTSIDE frame edge so they're visible */} {/* Left: Action + Volume Up + Volume Down */}
{/* Right: Power */}
{/* Outer titanium frame */}
{/* Inner frame darker */}
{/* Screen */}
{/* Dynamic Island */}
AIVENT {timer}
{/* Status bar */}
9:41
{/* Call header */}
EINGEHENDER ANRUF · #4721
+49 351 211 XXX
wird automatisch beantwortet von AIVENT
{/* Messages */}
{visible.slice(-5).map((m,i)=>(
{m.who==='aivent'?'AIVENT':'ANRUFER'}
{m.text}
))} {typing && (
)}
{/* Call controls */}
{[ {lbl:'Stumm'}, {lbl:'Tastatur'}, {lbl:'Lautspr.'}, ].map((b,i)=>(
{i===0 && } {i===1 && } {i===2 && }
{b.lbl}
))}
{/* Home indicator */}
); }; window.Hero = Hero;