{creator.name[0]}

{/* Online dot — green */}

); }; // ============================================================================ // OF BUTTON — DO NOT CHANGE COLOR OR EMOJIS // ============================================================================ const OFButton = ({ url, theme }) => { // Flow: idle (tap) → age-gate (confirm 18+) → hold (press & hold to reveal) // → armed (long-press menu is now available; instruct user to tap Open Link) const [state, setState] = useState('idle'); const [holding, setHolding] = useState(false); const [progress, setProgress] = useState(0); // 0 → 1 const rafRef = useRef(null); const startRef = useRef(0); const HOLD_MS = 750; // Drive the progress bar while held useEffect(() => { if (!holding) { cancelAnimationFrame(rafRef.current); // If released before arming, smoothly drain if (state === 'hold') { const drainStart = performance.now(); const startVal = progress; const drain = (t) => { const k = Math.min(1, (t - drainStart) / 220); const v = startVal * (1 - k); setProgress(v); if (k < 1) rafRef.current = requestAnimationFrame(drain); }; rafRef.current = requestAnimationFrame(drain); } return () => cancelAnimationFrame(rafRef.current); } startRef.current = performance.now() - progress * HOLD_MS; const tick = (t) => { const p = Math.min(1, (t - startRef.current) / HOLD_MS); setProgress(p); if (p >= 1) { setState('armed'); setHolding(false); // Haptic on supported devices if (navigator.vibrate) navigator.vibrate(12); return; } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); // eslint-disable-next-line }, [holding]); // ── STATE 1: AGE GATE ───────────────────────────────────────────────────── if (state === 'verifying') { return (

confirm you're 18+

This link contains adult content. You must be 18 or older to continue.

); } // ── STATES 2+3: HOLD + ARMED ────────────────────────────────────────────── // These share one `` — so the native long-press menu attaches to a real // link target. Before the hold completes, href is "#" (no navigation even if // a hurried user taps). Once filled, href becomes the real URL. if (state === 'hold' || state === 'armed') { const armed = state === 'armed'; const pct = Math.round(progress * 100); const start = (e) => { if (armed) return; e.preventDefault?.(); setHolding(true); }; const end = () => { if (armed) return; setHolding(false); }; const label = armed ? 'Tap "Open Link" ↑' : holding ? 'Keep holding…' : 'Press & hold'; const sub = armed ? 'A menu should now appear — choose "Open Link"' : holding ? `${pct}%` : 'Hold the button to continue'; return (

{/* Helper caption above the button — guides first-timers */}

{armed ? 'almost there' : 'press & hold to continue'}

{ // If user long-presses before the fill completes, prevent it — // we want them to see the full "armed" state first. if (!armed) e.preventDefault(); }} onClick={(e) => { // A quick tap shouldn't navigate; they must hold. if (!armed) e.preventDefault(); }} draggable={false} className="group relative w-full flex items-center gap-3.5 rounded-[14px] p-3.5 text-left overflow-hidden select-none" style={{ background: 'linear-gradient(180deg, #00AFF0 0%, #009EDA 100%)', border: '1px solid rgba(0,0,0,0.15)', boxShadow: armed ? '0 1px 0 rgba(255,255,255,0.2) inset, 0 0 0 3px rgba(0,175,240,0.28)' : '0 1px 0 rgba(255,255,255,0.2) inset', textDecoration: 'none', WebkitTouchCallout: armed ? 'default' : 'none', transform: holding ? 'scale(0.992)' : 'scale(1)', transition: 'transform 120ms, box-shadow 220ms', }} aria-label="Private link — press and hold" > {/* PROGRESS FILL — darker blue wipes left→right, stays filled when armed */}

{/* Leading edge shimmer while holding */} {holding && progress < 1 && (

{armed && ( )}

); } // ── STATE 0: IDLE ───────────────────────────────────────────────────────── return ( ); }; // ============================================================================ // SOCIAL BUTTON — branded per platform, shared row below the OF hero // ============================================================================ const SocialButton = ({ social, theme, fonts }) => { const brand = BRAND[social.brand]; let IconEl = null; if (social.brand === 'instagram') IconEl = window.InstagramIcon; if (social.brand === 'tiktok') IconEl = window.TikTokIcon; if (social.brand === 'youtube') IconEl = window.YouTubeIcon; if (social.brand === 'x') IconEl = window.XIcon; if (social.brand === 'spotify') IconEl = window.SpotifyIcon; // Subtle platform-tinted fill — dimmer than OF's full saturation. // Each gets a low-alpha color wash + matching rail + icon. const tint = brand.tint || brand.icon; return ( {/* Left rail — platform color */}

{/* Icon chip */}

{IconEl && }

{/* Label only — no hint */}

{social.label}

); }; // ============================================================================ // LANDING (theme-driven) // ============================================================================ const Landing = ({ themeKey = 'ivory', fontKey = 'editorial', showReplyLine = true }) => { const theme = THEMES[themeKey]; const fonts = FONT_PAIRS[fontKey]; // CSS vars scoped to this landing instance const scopeStyle = { '--font-display': fonts.display, '--font-body': fonts.body, '--font-mono': fonts.mono, fontFamily: fonts.body, color: theme.ink, }; return (

{/* Ambient blush glow behind primary — sits ABOVE background, BELOW content */}

{/* PROFILE PHOTO */}

{/* NAME (serif display) + verified gold tick */}

{creator.name}

{creator.verified && ( )}

{/* Handle + dusty-rose underline flourish */}

@{creator.handle}

{/* One uniform button stack — OF first, then socials. No divider labels. */}

{creator.socials.map((s) => ( ))}

{/* FOOTER — quiet signature */}

— with love, jess —

); }; Object.assign(window, { Landing, THEMES, FONT_PAIRS });