// Reusable atoms: Buttons, Nav, Phone, Reveal, Chips, etc.
const Reveal = ({ children, delay = 0, as: As = 'div', className = '' }) => {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => e.target.classList.add('in'), delay);
io.unobserve(e.target);
}
});
},
{ threshold: 0.12 }
);
io.observe(el);
return () => io.disconnect();
}, [delay]);
return {children};
};
const BtnMint = ({ children, href = '#', size = 'md', className = '', icon = true, target, rel }) => {
const pad = size === 'lg' ? 'px-7 py-4 text-[15px]' : size === 'sm' ? 'px-4 py-2 text-[13px]' : 'px-6 py-3.5 text-sm';
return (
{children}
{icon && }
);
};
const BtnGhost = ({ children, href = 'javascript:void(0)', size = 'md', className = '', iconLeft = null, target, rel }) => {
const pad = size === 'lg' ? 'px-7 py-4 text-[15px]' : size === 'sm' ? 'px-4 py-2 text-[13px]' : 'px-6 py-3.5 text-sm';
return (
{iconLeft && {iconLeft}}
{children}
);
};
const BrandMark = ({ size = 28 }) => (
);
const Wordmark = ({ size = 'md' }) => (
);
const Nav = () => {
const [open, setOpen] = React.useState(false);
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
['Features', '#features'],
['Leaks', '#leaks'],
['For Creators', '#creators'],
['Testimonials', '#testimonials'],
];
return (
{open && (
)}
);
};
// Phone with screenshot — supports drop-shadow glow color
const Phone = ({ src, alt = '', glow = 'mint', width = 280, className = '', notch = true }) => (
{notch &&
}
);
// Trust chip used in hero
const TrustChip = ({ children }) => (
{children}
);
// Section eyebrow
const Eyebrow = ({ children, color = 'mint' }) => (
{children}
);
// Display heading
const Display = ({ children, className = '', as: As = 'h2' }) => (
{children}
);
Object.assign(window, { Reveal, BtnMint, BtnGhost, BrandMark, Wordmark, Nav, Phone, TrustChip, Eyebrow, Display });