);
}
// ===== Hero =====
function Hero({ variant }) {
const [url, setUrl] = useState("");
const [status, setStatus] = useState("idle"); // idle | loading | done
const [missed, setMissed] = useState(0);
// little live counter on the side
useEffect(() => {
let n = 1247;
setMissed(n);
const t = setInterval(() => {
n += Math.floor(Math.random() * 3);
setMissed(n);
}, 2400);
return () => clearInterval(t);
}, []);
const onSubmit = (e) => {
e.preventDefault();
if (!url.trim()) return;
setStatus("loading");
setTimeout(() => setStatus("done"), 1400);
};
return (
FOR HOME-SERVICE BUSINESSES
Turn every missed call
into a booked job.
CleanerClicks captures the lead, replies in seconds, and follows up for a full year โ so roofers, HVAC techs, plumbers, and electricians stop losing revenue to voicemail.
More leadsFaster repliesBetter reviews
{/* Right side โ animated phone showing a missed-call โ text reply moment */}
);
}
function HeroPhone({ variant, missed }) {
const [step, setStep] = useState(0);
const [time, setTime] = useState("");
useEffect(() => {
const tick = () => {
const d = new Date();
setTime(`${d.getHours() % 12 || 12}:${String(d.getMinutes()).padStart(2, "0")}`);
};
tick();
const t = setInterval(tick, 60_000);
return () => clearInterval(t);
}, []);
useEffect(() => {
const order = [0, 1, 2, 3];
let i = 0;
const t = setInterval(() => {
i = (i + 1) % order.length;
setStep(order[i]);
}, 2200);
return () => clearInterval(t);
}, []);
return (
{time || "9:41"}
{/* SMS thread */}
Today {time || "9:41"}
{step >= 0 && (
Missed call
(555) 218-4567
{time || "9:41"}
)}
{step >= 1 && (
Hey, this is Tony at Oakridge HVAC โ sorry we missed you. What's going on?
)}
{step >= 2 && (
AC stopped cooling overnight. Anyone available today?
)}
{step >= 3 && (
Got you on the calendar for 2pm โ confirm? oakridge.co/c/9k4