// Ring Facet shared design system // Loaded by every page via: // Requires: React, ReactDOM already on window. window.__clerkPk + window.__clerkReady set before this. const P = { paper: '#F5F5F4', card: '#FFFFFF', ink: '#0A0B0D', ink90: 'rgba(10,11,13,0.92)', ink60: 'rgba(10,11,13,0.62)', ink40: 'rgba(10,11,13,0.40)', ink15: 'rgba(10,11,13,0.13)', ink08: 'rgba(10,11,13,0.08)', sans: '"Inter Tight", -apple-system, system-ui, sans-serif', mono: '"IBM Plex Mono", ui-monospace, monospace', }; function PMono({ children, style }) { return {children}; } function PBtn({ children, primary, ghost, size = 'md', style, ...rest }) { const sz = { sm: { p: '8px 14px', f: 12.5 }, md: { p: '12px 18px', f: 13.5 }, lg: { p: '14px 22px', f: 14 } }[size]; const base = { display: 'inline-flex', alignItems: 'center', gap: 8, padding: sz.p, fontFamily: P.sans, fontSize: sz.f, fontWeight: 500, letterSpacing: -0.1, cursor: 'pointer', borderRadius: 8, border: 'none', lineHeight: 1, textDecoration: 'none' }; const tone = primary ? { background: P.ink, color: P.paper } : ghost ? { background: 'transparent', color: P.ink } : { background: P.card, color: P.ink, boxShadow: `inset 0 0 0 1px ${P.ink15}` }; if (rest.href) return {children}; return ; } function PMark({ size = 22, dark }) { const c = dark ? P.paper : P.ink; const w = Math.round(size * 304 / 240); return ( ); } function PPlaceholder({ label, height = 320, dark, style }) { const fg = dark ? 'rgba(245,245,244,0.10)' : 'rgba(10,11,13,0.06)'; const bg = dark ? P.ink : '#EDEDEB'; const tx = dark ? 'rgba(245,245,244,0.55)' : P.ink40; return (
{label}
); } function useBreakpoint() { const [w, setW] = React.useState(window.innerWidth); React.useEffect(() => { const h = () => setW(window.innerWidth); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, []); return { isMobile: w < 768, isTablet: w < 1024, isCompactNav: w < 1280 }; } function useClerkUser() { const [user, setUser] = React.useState(window.__clerkUser || null); React.useEffect(() => { const h = () => setUser(window.__clerkUser || null); window.addEventListener('clerkUserChanged', h); return () => window.removeEventListener('clerkUserChanged', h); }, []); return user; } function PNav({ active }) { const links = [['Solutions','solutions.html'],['Pricing','pricing.html'],['Docs','docs.html'],['Contact','contact.html']]; const user = useClerkUser(); const { isMobile, isTablet, isCompactNav } = useBreakpoint(); const useMobileNav = isTablet; const navPadding = isCompactNav ? '8px 8px' : '8px 14px'; const navLinkStyle = (isActive) => ({ fontFamily: P.sans, fontSize: isCompactNav ? 13.5 : 14, color: isActive ? P.ink : P.ink60, textDecoration: 'none', fontWeight: isActive ? 600 : 400, padding: navPadding, borderRadius: 8, background: isActive ? P.ink08 : 'transparent', border: isActive ? `1px solid ${P.ink15}` : '1px solid transparent', whiteSpace: 'nowrap', }); const strongLinkStyle = (isActive) => ({ ...navLinkStyle(isActive), fontWeight: 600, color: isActive ? P.ink : P.ink, }); const mobileLinkStyle = (isActive) => ({ fontFamily: P.sans, fontSize: 15, color: isActive ? P.ink : P.ink60, textDecoration: 'none', fontWeight: isActive ? 500 : 400, padding: '10px 8px', borderRadius: 6, background: isActive ? P.ink08 : 'transparent', }); const [open, setOpen] = React.useState(false); const [productsOpen, setProductsOpen] = React.useState(false); const signIn = () => window.__clerkReady?.then(c => c.redirectToSignIn({ redirectUrl: window.location.href })).catch(console.error); const signUp = () => window.__clerkReady?.then(c => c.redirectToSignUp({ redirectUrl: window.location.href })).catch(console.error); const signOut = () => window.__clerkReady?.then(c => c.signOut()).catch(console.error); const productsActive = active === 'Products' || active === 'Ring Builder' || active === 'Jewel Shots'; const closeMenus = () => { setOpen(false); setProductsOpen(false); }; React.useEffect(() => { document.body.style.overflow = (open && useMobileNav) ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open, useMobileNav]); return (
Ring Facet {!useMobileNav && !isCompactNav && NEWv1.3} {!useMobileNav && ( )} {!useMobileNav && (
{user ? (<> {user.firstName || user.emailAddresses?.[0]?.emailAddress?.split('@')[0]} Sign out ) : (<> Start free → )}
)} {useMobileNav && }
{useMobileNav && open && (
Home Demo
PRODUCTS
Ring Builder Ring Builder demo → Jewel Shots Jewel Shots demo → {links.map(([n, href]) => ( {n} ))} My Ring Builder My Models
{user ? (<> {user.firstName || user.emailAddresses?.[0]?.emailAddress?.split('@')[0]} Sign out ) : (<> Start free → )}
)}
); } function PFooter() { const cols = [ ['Product', ['Ring Builder','Jewel Shots','My Models','Pricing']], ['Solutions', ['Engagement rings','Shopify jewelers','Product renders','Diamond feeds']], ['Resources', ['Docs','FAQ','Blog','Support']], ['Company', ['About','Contact','Privacy']], ]; const { isMobile } = useBreakpoint(); const linkMap = { 'Ring Builder': 'ring-builder.html', 'Jewel Shots': 'jewel-shots-product.html', 'My Models': 'jewel-shots.html', Pricing: 'pricing.html', 'Engagement rings': 'solutions.html#engagement-rings', 'Shopify jewelers': 'solutions.html#shopify-jewelers', 'Product renders': 'solutions.html#product-renders', 'Diamond feeds': 'solutions.html#lab-grown-diamonds', Docs: 'docs.html', FAQ: 'faq.html', Blog: 'blog.html', Support: 'support.html', About: 'about.html', Contact: 'contact.html', Privacy: 'privacy.html', }; return ( ); }