/* ===================================================================== Hero — Animated entrance. Mobile-responsive. Time-of-day aware. ===================================================================== */ const { useEffect: useEffectHero, useRef: useRefHero, useState: useStateHero } = React; function Hero({ tod }) { const [time, setTime] = useStateHero(() => new Date()); const [mounted, setMounted] = useStateHero(false); const [stripScrolled, setStripScrolled] = useStateHero(false); useEffectHero(() => { const t = setInterval(() => setTime(new Date()), 1000); const m = setTimeout(() => setMounted(true), 50); const onScroll = () => setStripScrolled(window.scrollY > 60); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => { clearInterval(t); clearTimeout(m); window.removeEventListener('scroll', onScroll); }; }, []); const hhmm = time.toLocaleTimeString('en-US', { hour12: false, timeZone: 'America/Chicago' }); return (
{/* Sticky sub-strip — rides below the nav, thins out on scroll */}
35.47°N · 97.52°W — OKLAHOMA STATE LIVE · {hhmm} CT · {tod.toUpperCase()} SERVING OKC METRO & BEYOND
{/* Main content */}
OKLAHOMA'S WEBSITE STUDIO | BOOKING SPRING 2026

A website your customers
actually{' '}

Lawn care, hydraulic shops, restaurants, real estate — whatever you do, we hand-build the website that gets you calls. Real people, real craft. You run your business.

Show up on Google. Look good on phones. Want a smart helper that talks to your customers 24/7? We can wire that in too.

Get a free quote See our work ↓
{/* Right panel — a statement, broken into distinct blocks */}
); } /* ----------------------------------------------------------------- Typed verb — types a word, pauses, backspaces, types the next. Uses the editorial italic treatment from the original second line. ----------------------------------------------------------------- */ function TypedVerb({ words, mounted }) { const [wordIdx, setWordIdx] = useStateHero(0); const [typed, setTyped] = useStateHero(''); const [phase, setPhase] = useStateHero('typing'); // typing | holding | deleting useEffectHero(() => { if (!mounted) return; const word = words[wordIdx % words.length]; let timer; if (phase === 'typing') { if (typed.length < word.length) { timer = setTimeout(() => setTyped(word.slice(0, typed.length + 1)), 95 + Math.random() * 55); } else { timer = setTimeout(() => setPhase('holding'), 1700); } } else if (phase === 'holding') { timer = setTimeout(() => setPhase('deleting'), 900); } else if (phase === 'deleting') { if (typed.length > 0) { timer = setTimeout(() => setTyped(word.slice(0, typed.length - 1)), 45); } else { timer = setTimeout(() => { setWordIdx((i) => (i + 1) % words.length); setPhase('typing'); }, 260); } } return () => clearTimeout(timer); }, [typed, phase, wordIdx, mounted, words]); return ( {typed} ); } /* ----------------------------------------------------------------- Hero aside — reworked as a statement. Denser, layered, contrasty. Header band, three clearly broken-up blocks, stronger typography. ----------------------------------------------------------------- */ function HeroAside({ mounted }) { return ( ); } function AsideRow({ label, children, accent }) { return (
{label}
{children}
); } function HeroLine({ children, delay, mounted }) { return ( {children} ); } function CornerMarks() { const Mark = ({ style, t, l, r, b }) => ( ); return ( <> ); } function HeroTicker() { const items = ['LAWN CARE & LANDSCAPING', 'RESTAURANTS & CAFÉS', 'REAL ESTATE', 'CONTRACTORS & TRADES', 'AUTO & HYDRAULICS', 'HVAC & PLUMBING', 'SALONS & STUDIOS', 'RETAIL & BOUTIQUES', 'GOOGLE BUSINESS SETUP', 'LOCAL SEO', 'SMART CHATBOTS', 'FOUND ON GOOGLE', 'MOBILE FIRST', 'OKC METRO & BEYOND']; const row = [...items, ...items]; return (
{row.map((s, i) => ( ◆ {s} ))}
); } Object.assign(window, { Hero });