// ============================================ // COMPONENTS — Direction A // Photo placeholders + shared UI atoms // ============================================ // ====== PLACEHOLDER PHOTO ====== // Generates a stylized SVG that suggests a kitchen/bath/basement scene // without trying to be photoreal. Designed to be REPLACED with real photos. const Photo = ({ kind = "kitchen", tone = "warm", src, alt = "", label }) => { if (src) { return (

); } const palettes = { warm: { bg: "#E8DCC4", a: "#B5532A", b: "#8A6B45", c: "#3E2D20", d: "#F5EFE6" }, cool: { bg: "#D9D5CB", a: "#4F5A38", b: "#7A7565", c: "#2C2820", d: "#F0EBDF" }, deep: { bg: "#3E2D20", a: "#B5532A", b: "#8A6B45", c: "#1F1611", d: "#F5EFE6" }, cream: { bg: "#F5EFE6", a: "#B5532A", b: "#8A6B45", c: "#3E2D20", d: "#FFFFFF" }, moss: { bg: "#4F5A38", a: "#C68F2F", b: "#8A8260", c: "#2A2F20", d: "#F0EBDF" }, }; const p = palettes[tone] || palettes.warm; // each "kind" is a simple geometric scene suggesting the room const scenes = { kitchen: ( ), bath: ( ), basement: ( ), portrait: ( ), detail: ( ), arch: ( ), }; return (

{scenes[kind] || scenes.kitchen}

); }; // ====== NAV ====== const Nav = ({ page, setPage, brand = "Atlas Construction", tagline = "" }) => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); const links = [ ["home", "Home"], ["kitchen", "Kitchens"], ["bath", "Bathrooms"], ["basement", "Basements"], ["about", "About"], ["contact", "Contact"], ]; return ( ); }; // ====== TICKER ====== const Ticker = () => { const items = [ "Family owned since 2008", "Licensed & insured", "5-star reviewed", "Lifetime craftsmanship warranty", "Local crews — no subcontractors", "Design-build under one roof", ]; const doubled = [...items, ...items]; return (

{doubled.map((item, i) => ( {item} ✦ ))}

); }; // ====== TRUST BADGES ====== const Trust = () => (

Trusted locally

The reviews speak for themselves — and so do our neighbors.

{[ { name: "Google", num: "5.0", count: "184 reviews" }, { name: "Houzz", num: "4.9", count: "62 reviews" }, { name: "Yelp", num: "5.0", count: "47 reviews" }, { name: "BBB", num: "A+", count: "Accredited" }, ].map((b) => (

{b.name}

{b.num} ★★★★★

{b.count}

))}

); // ====== CTA STRIP ====== const CtaStrip = ({ setPage }) => (

Let's talk about your home.

Call or text — we pick up (646) 408-3455

{ e.preventDefault(); setPage("contact"); }}> Request a free estimate

); // ====== FOOTER ====== const Footer = ({ setPage, brand = "Atlas Construction" }) => ( ); Object.assign(window, { Photo, Nav, Ticker, Trust, CtaStrip, Footer });