const { useState, useEffect, useRef } = React; /** Opens the lander booking card + Calendly embed (no separate /build route on static hosting). */ const BOOKING_URL = "/lander.html#book"; const LANDER_URL = "/lander.html"; const DIY_URL = "/diy.html"; const PATRIZIO_PHOTO = "patrizio-20bio.avif"; const PORTFOLIO_SITES = [ { url: "https://poolbidder.com", label: "Pool Bidder", tag: "Marketplace" }, { url: "https://margaritas.ai", label: "Margaritas.ai", tag: "Hospitality & AI" }, { url: "https://may.construction", label: "May Construction", tag: "Construction" }, { url: "https://animatedmedical.com", label: "Animated Medical", tag: "Healthcare" }, { url: "https://sclawcenter.com", label: "SC Law Center", tag: "Legal" }, ]; const LIVE_PREVIEW_W = 1280; const LIVE_PREVIEW_H = 820; /** Scale iframe to cover the clip (like object-fit: cover) — fills width and height, no side gutters. */ const useLivePreviewCover = (fallback = 0.38) => { const ref = useRef(null); const [box, setBox] = useState({ w: 0, h: 0 }); useEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(() => { setBox({ w: el.clientWidth, h: el.clientHeight }); }); ro.observe(el); setBox({ w: el.clientWidth, h: el.clientHeight }); return () => ro.disconnect(); }, []); const { w, h } = box; const scale = w > 0 && h > 0 ? Math.max(w / LIVE_PREVIEW_W, h / LIVE_PREVIEW_H) : fallback; return [ref, scale]; }; // ——————————————————————————————————————————————— // Icons (minimal, brand-consistent — no starter-pack look) // ——————————————————————————————————————————————— const S = ({ d, className = "", stroke = 1.5, fill = "none" }) => ( ); const I = { Pencil: (p) => } />, Server: (p) => } />, Trend: (p) => } />, Shield: (p) => } />, Globe: (p) => } />, Mail: (p) => } />, Save: (p) => } />, Lock: (p) => } />, Map: (p) => } />, Cal: (p) => } />, Msg: (p) => } />, Star: (p) => , Pin: (p) => } />, Search: (p) => } />, Phone: (p) => } />, Bar: (p) => } />, Inbox: (p) => } />, Life: (p) => } />, ArrowR: (p) => } />, ArrowD: (p) => } />, Menu: (p) => } />, X: (p) => } />, }; const Plus = ({ className = "" }) => ( ); // ——————————————————————————————————————————————— // Header with sticky blur after 80px // ——————————————————————————————————————————————— const Header = () => { const [stuck, setStuck] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setStuck(window.scrollY > 80); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
🦊 Foxes.ai
Get my free website
{open && (
🦊 Foxes.ai
Get my free website
)}
); }; // ——————————————————————————————————————————————— // Hero // ——————————————————————————————————————————————— const Hero = () => (
Websites for local businesses

Stunning websites. Built free. Delivered before we even meet.

Then we keep them running — hosting, domain, email, booking, reviews, the whole stack — for $99/mo, all‑in. Or take the code and run it yourself. Your call.

No credit card. No sales call pressure. 20 minutes, then your site.

); // ——————————————————————————————————————————————— // What we do // ——————————————————————————————————————————————— const Capabilities = () => { const items = [ { Icon: I.Pencil, eyebrow: "Design", h: "We build it.", b: "A custom website, designed around your business — not a template with your logo slapped on. Ready before our first call, so you judge the work, not a pitch." }, { Icon: I.Server, eyebrow: "Host", h: "We run it.", b: "Hosting, SSL, your .com domain, branded business email, security monitoring, daily backups. One monthly price, no labor fees, no surprise invoices." }, { Icon: I.Trend, eyebrow: "Grow", h: "We help it grow.", b: "Booking widget, review automation, Google Maps integration, on‑page SEO, lead inbox, analytics. The stack that turns a website into a working storefront." }, ]; return (
What we do

Everything your business needs online, in one place.

{items.map((it, i) => (
{it.eyebrow}

{it.h}

{it.b}

))}
); }; // ——————————————————————————————————————————————— // Founder note // ——————————————————————————————————————————————— const Founder = () => (
Patrizio Murdocca, founder of Foxes.ai
Patrizio Murdocca, founder
Why we do this

Local businesses deserve websites that match the work they do.

I spent years building 5th Factory into a design agency. When we sold to JBowman Creative, I thought I was done with agency work. But I kept seeing the same thing: local businesses — the best restaurants, the best yoga studios, the best tradespeople — stuck with websites that embarrassed them. They couldn't afford what I used to charge. So Foxes.ai was born: stunning websites, free. We make our money keeping them running. Not building them.

My promise: if we can't build you something you love, we'll be the first to say so. If we can, you'll see it before you pay us a dime.

— Patrizio
); // ——————————————————————————————————————————————— // Work — five live portfolio sites (preview + link) // ——————————————————————————————————————————————— const WorkPreviewCard = ({ url, label, tag }) => { const [clipRef, scale] = useLivePreviewCover(0.38); const href = url.replace(/\/$/, ""); let host = ""; try { host = new URL(href).hostname.replace(/^www\./, ""); } catch { host = href; } return (