// Shared small components for the 21 Day Reset sales page
const Eyebrow = ({ children, color = 'var(--blush-deep)' }) => (
{children}
);
const SerifH = ({ children, size = 64, style = {}, as = 'h2' }) => {
const Tag = as;
return (
{children}
);
};
const Italic = ({ children }) => (
{children}
);
const Body = ({ children, size = 17, muted = false, style = {} }) => (
{children}
);
const PrimaryCTA = ({ children, small = false, onClick, style = {} }) => (
{
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = '0 14px 32px -10px rgba(0, 48, 96, 0.55)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 8px 24px -10px rgba(0, 48, 96, 0.4)';
}}
>
{children}
→
);
const Placeholder = ({ label, ratio = '4/5', style = {} }) => (
{label}
);
const SoftCard = ({ children, style = {} }) => (
{children}
);
// Quote mark SVG
const QuoteMark = ({ size = 40, color = 'var(--blush-deep)' }) => (
);
// Small icon for checklists
const Tick = ({ color = 'var(--ink)' }) => (
);
const Cross = ({ color = 'var(--blush-deep)' }) => (
);
const Divider = ({ style = {} }) => (
);
Object.assign(window, {
Eyebrow, SerifH, Italic, Body, PrimaryCTA, Placeholder, SoftCard, QuoteMark, Tick, Cross, Divider,
});