// Shared components const { useState, useEffect, useRef, useMemo } = React; // ---------- Icons (minimal hand-drawn — lucide-ish) ---------- const Icon = { Phone: (props) => ( ), Mail: (props) => ( ), Facebook: (props) => ( ), Instagram: (props) => ( ), ArrowRight: (props) => ( ), Menu: (props) => ( ), Close: (props) => ( ), Heart: (props) => ( ), Camera: (props) => ( ), Sparkles: (props) => ( ), Shield: (props) => ( ), Check: (props) => ( ), Eye: (props) => ( ), Star: (props) => ( ), Paw: (props) => ( ), }; // ---------- Logo ---------- function Logo({ variant = "primary", color = "steel", size = 1 }) { // Primary logo now uses Aaron-provided official Kari Breen Pet Portraits artwork. // Alternate camera/paw marks remain as small supporting submarks only. const colors = { steel: { name: "#4C6883", art: "#4C6883", sub: "#779A93", paw: "#C8B6A8", neutral: "#97A1AA" }, white: { name: "#ffffff", art: "#ffffff", sub: "rgba(255,255,255,0.86)", paw: "#DDD1C7", neutral: "rgba(255,255,255,.78)" }, wafer: { name: "#4C6883", art: "#C8B6A8", sub: "#779A93", paw: "#C8B6A8", neutral: "#97A1AA" }, }; const c = colors[color] || colors.steel; const transform = { transform: `scale(${size})`, transformOrigin: "left center" }; if (variant === "primary") { const onDark = color === "white"; return (
Kari Breen Pet Portraits
); } const CameraGlyph = ({ small = false }) => ( ); const PawGlyph = () => ( ); if (variant === "camera") { return (
Kari Breen
Pet Portraits
); } if (variant === "paw") { return (
Kari Breen
Pet Portraits
); } return ; } // ---------- Buttons ---------- function Button({ as = "button", variant = "primary", size = "md", children, className = "", ...rest }) { const Tag = as; const base = "inline-flex items-center justify-center gap-2 font-semibold tracking-[0.18em] uppercase text-xs transition-all duration-300 rounded-full active:scale-[0.98]"; const sizes = { sm: "px-5 py-2.5", md: "px-7 py-3.5", lg: "px-9 py-4 text-[13px]", }; const variants = { primary: "bg-charcoal text-white hover:bg-steel-blue shadow-[0_18px_38px_-22px_rgba(16,19,22,0.85)]", secondary: "bg-juniper text-white hover:bg-steel-blue shadow-[0_16px_34px_-24px_rgba(73,109,103,0.8)]", ghost: "bg-white/55 border border-steel-blue/25 text-steel-blue hover:bg-steel-blue hover:text-white hover:border-steel-blue backdrop-blur", "ghost-white": "border border-white/45 bg-white/10 text-white hover:bg-white hover:text-steel-blue backdrop-blur", tertiary: "bg-bark-beige-40 text-steel-blue hover:bg-white border border-white/60", link: "text-steel-blue underline-offset-4 hover:underline px-0", }; return ( {children} ); } // ---------- Eyebrow + ScriptAccent ---------- function Eyebrow({ children, color = "#4C6883", className = "" }) { return (
{children}
); } function ScriptAccent({ children, angle = -4, color = "#779A93", className = "", style }) { return ( {children} ); } // ---------- UtilityBar ---------- function UtilityBar() { return (
Fort Worth, TX · Pet Photography Studio
{window.PHONE_PRIMARY}
); } // ---------- Navbar ---------- function Navbar({ route, setRoute }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (!mobileOpen) { document.body.classList.remove("mobile-menu-open"); return; } document.body.classList.add("mobile-menu-open"); const onKey = (event) => { if (event.key === "Escape") setMobileOpen(false); }; window.addEventListener("keydown", onKey); return () => { document.body.classList.remove("mobile-menu-open"); window.removeEventListener("keydown", onKey); }; }, [mobileOpen]); const go = (key) => { setRoute(key); setMobileOpen(false); window.scrollTo({ top: 0, behavior: "instant" }); }; return (
{/* Mobile drawer */} {mobileOpen && (
setMobileOpen(false)} />
{window.PHONE_PRIMARY}
)}
); } // ---------- Footer ---------- function Footer({ setRoute }) { const go = (k) => { setRoute(k); window.scrollTo({ top: 0, behavior: "instant" }); }; return ( ); } // ---------- Sister-site strip ---------- function SisterSiteStrip() { return (
Need framing for your portraits? Kari also owns{" "} Marty & Pat's Frame Shoppe & Art Gallery.
{window.PHONE_MARTY}
); } // ---------- Lightbox ---------- function Lightbox({ images, index, onClose, onPrev, onNext }) { useEffect(() => { if (index == null) { document.body.classList.remove("no-scroll"); return; } document.body.classList.add("no-scroll"); const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowLeft") onPrev(); if (e.key === "ArrowRight") onNext(); }; window.addEventListener("keydown", onKey); return () => { document.body.classList.remove("no-scroll"); window.removeEventListener("keydown", onKey); }; }, [index, onClose, onPrev, onNext]); if (index == null) return null; const img = images[index]; return (
e.stopPropagation()}> {img.caption}
{img.caption}
{index + 1} / {images.length} ·{" "} Follow more on Instagram
); } // ---------- Image card with hover caption ---------- function PortfolioCard({ image, onClick }) { return ( ); } // ---------- Soul callout (brand guide page 20) ---------- function SoulCallout() { return (
Award-winning pet photographer

Portraits with personality, warmth, and heart.

A quiet, thoughtful way to preserve the spirit of the pets who are part of your family.

); } // ---------- Section header w/ optional eyebrow & script ---------- function SectionHeader({ eyebrow, title, script, scriptAfter, sub, align = "center", invert = false }) { const alignCls = align === "left" ? "text-left items-start" : "text-center items-center"; return (
{eyebrow && {eyebrow}}

{title} {script && ( <> {" "} {script} {scriptAfter} )}

{sub &&

{sub}

}
); } // ---------- HyperFrames motion graphics system ---------- function HyperFramesBackground() { const PawParticle = ({ cls }) => ( ); return (