// ═══════════════════════════════════════════════ // JAGTAR STUDIO — Design System Components // ═══════════════════════════════════════════════ const JAGTAR = {}; // ─── Colors ─── JAGTAR.c = { bg: '#F8F6F2', cream: '#F2EDE6', charcoal: '#1A1A1A', gray: '#B8B5B0', gold: '#B08D5C', terracotta: '#C97B5C', border: '#E5E2DC', success: '#5C7A5C', error: '#A04444', dark: '#111110', }; // ─── Image map for real photos ─── JAGTAR.imageMap = { 'hero': 'https://images.unsplash.com/photo-1618336753974-aae8e04506aa?w=1400&q=80&auto=format', 'bust-front': 'https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=800&q=80&auto=format', 'bust-side': 'https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=800&q=80&auto=format', 'bust-quarter': 'https://images.unsplash.com/photo-1588771930296-9d16be4fd228?w=800&q=80&auto=format', 'bust-detail': 'https://images.unsplash.com/photo-1618336753974-aae8e04506aa?w=800&q=80&auto=format', 'bust-woman': 'https://images.unsplash.com/photo-1614107151491-6876eecbff89?w=800&q=80&auto=format', 'bust-man': 'https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=800&q=80&auto=format', 'bust-child': 'https://images.unsplash.com/photo-1513519245088-0e12902e35ca?w=800&q=80&auto=format', 'lifestyle': 'https://images.unsplash.com/photo-1616047006789-b7af5afb8c20?w=1200&q=80&auto=format', 'founder': 'https://images.unsplash.com/photo-1552058544-f2b08422138a?w=800&q=80&auto=format', 'studio': 'https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=1400&q=80&auto=format', 'process': 'https://images.unsplash.com/photo-1558618019-05d14e5dbf4c?w=800&q=80&auto=format', 'packaging': 'https://images.unsplash.com/photo-1513519245088-0e12902e35ca?w=800&q=80&auto=format', 'phone': 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80&auto=format', 'good-photo': 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80&auto=format', 'bad-photo': 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=800&q=80&auto=format', 'hand-finishing': 'https://images.unsplash.com/photo-1558618019-05d14e5dbf4c?w=1200&q=80&auto=format', 'mantel': 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=800&q=80&auto=format', 'preview': 'https://images.unsplash.com/photo-1618336753974-aae8e04506aa?w=600&q=80&auto=format', }; // ─── label→key resolver ─── JAGTAR._resolveImg = (label) => { const l = (label || '').toLowerCase(); if (l.includes('hero')) return JAGTAR.imageMap['hero']; if (l.includes('front angle') || l.includes('front view')) return JAGTAR.imageMap['bust-front']; if (l.includes('side profile') || l.includes('side')) return JAGTAR.imageMap['bust-side']; if (l.includes('three-quarter') || l.includes('quarter')) return JAGTAR.imageMap['bust-quarter']; if (l.includes('texture') || l.includes('detail') || l.includes('close-up')) return JAGTAR.imageMap['bust-detail']; if (l.includes('woman') || l.includes('profile')) return JAGTAR.imageMap['bust-woman']; if (l.includes('elderly') || l.includes('man')) return JAGTAR.imageMap['bust-man']; if (l.includes('child')) return JAGTAR.imageMap['bust-child']; if (l.includes('bookshelf') || l.includes('lifestyle') || l.includes('mantel')) return JAGTAR.imageMap['lifestyle']; if (l.includes('founder') || l.includes('candid')) return JAGTAR.imageMap['founder']; if (l.includes('studio') || l.includes('workspace') || l.includes('wide shot')) return JAGTAR.imageMap['studio']; if (l.includes('sculptor') || l.includes('hand-finish') || l.includes('finishing')) return JAGTAR.imageMap['hand-finishing']; if (l.includes('process') || l.includes('primed')) return JAGTAR.imageMap['process']; if (l.includes('unbox') || l.includes('packag') || l.includes('box') || l.includes('tissue')) return JAGTAR.imageMap['packaging']; if (l.includes('phone') || l.includes('choosing')) return JAGTAR.imageMap['phone']; if (l.includes('good') || l.includes('clear') || l.includes('natural light')) return JAGTAR.imageMap['good-photo']; if (l.includes('bad') || l.includes('blurry') || l.includes('dark')) return JAGTAR.imageMap['bad-photo']; if (l.includes('example front')) return JAGTAR.imageMap['good-photo']; if (l.includes('example side')) return JAGTAR.imageMap['bust-side']; if (l.includes('preview') || l.includes('bust preview')) return JAGTAR.imageMap['preview']; if (l.includes('bust')) return JAGTAR.imageMap['bust-front']; return null; }; // ─── Image component with real photos ─── JAGTAR.Img = ({ label, dark, ratio = '4/3', style, className }) => { const src = JAGTAR._resolveImg(label); return (
{src ? ( {label} ) : (
{label}
)} {/* subtle film grain overlay */}
); }; // ─── Typography ─── JAGTAR.H1 = ({ children, style }) => (

{children}

); JAGTAR.H2 = ({ children, style }) => (

{children}

); JAGTAR.H3 = ({ children, style }) => (

{children}

); JAGTAR.Label = ({ children, style }) => ( {children} ); JAGTAR.Body = ({ children, style, small }) => (

{children}

); // ─── Primary CTA Button ─── JAGTAR.CTA = ({ children, onClick, style, secondary }) => { const [hover, setHover] = React.useState(false); const [press, setPress] = React.useState(false); return ( ); }; // ─── Text Button ─── JAGTAR.TextBtn = ({ children, onClick, style }) => { const [hover, setHover] = React.useState(false); return ( ); }; // ─── Navigation ─── JAGTAR.Nav = ({ currentPage, onNavigate, dark }) => { const [open, setOpen] = React.useState(false); const fg = dark ? '#F8F6F2' : JAGTAR.c.charcoal; const menuBg = dark ? '#1A1A1A' : '#F8F6F2'; const links = [ ['home', 'Home'], ['product', 'Commission'], ['how', 'Process'], ['account', 'My Orders'], ['checkout', 'Cart'], ]; return ( <> {/* Full-screen menu overlay */}
{links.map(([key, label]) => ( ))}
); }; // ─── Footer ─── JAGTAR.Footer = ({ onNavigate }) => { const footLinkStyle = { fontFamily: "'Manrope', sans-serif", fontSize: 14, color: '#5a5751', textDecoration: 'none', borderBottom: `1px solid ${JAGTAR.c.border}`, paddingBottom: 1, transition: 'border-color 0.2s, color 0.2s', }; return ( ); }; // ─── Form Field ─── JAGTAR.Field = ({ label, placeholder, type = 'text', name, value, onChange, required, autoComplete, half, style, }) => { const controlled = value !== undefined; return (
e.target.style.borderColor = JAGTAR.c.gold} onBlur={e => e.target.style.borderColor = JAGTAR.c.border} />
); }; // ─── Section wrapper with fade-in ─── JAGTAR.Section = ({ children, style, dark, cream, id }) => { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold: 0.1 }); obs.observe(el); return () => obs.disconnect(); }, []); return (
{children}
); }; // ─── Divider ─── JAGTAR.Divider = () => (
); // ─── Upload Zone ─── JAGTAR.Upload = ({ label, sublabel }) => { const [hover, setHover] = React.useState(false); const [file, setFile] = React.useState(null); return ( ); }; Object.assign(window, { JAGTAR });