// Shared tiny helpers
const Icon = ({ name, size = 20, stroke = 1.75, className = "" }) => {
const paths = {
play: ,
trend: <>,
target: <>,
zap: ,
cpu: <>,
clapper: <>,
arrowRight: <>,
check: ,
dollar: <>,
bar: <>,
menu: <>,
close: <>,
sparkles: ,
trophy: <>,
};
return (
);
};
const Logo = ({ size = 32, color = "#051B42" }) => (
);
const Eyebrow = ({ children, color = "#4361EE" }) => (
{children}
);
const Button = ({ children, variant = "primary", href = "#", onClick, icon }) => {
const base = {
display: "inline-flex", alignItems: "center", gap: 8,
fontFamily: "'Inter',sans-serif", fontWeight: 500, fontSize: 15,
padding: "12px 24px", borderRadius: 999, border: 0, cursor: "pointer",
textDecoration: "none", transition: "all 180ms cubic-bezier(.2,.7,.2,1)",
};
const variants = {
primary: { background: "#051B42", color: "#fff" },
secondary: { background: "#fff", color: "#051B42", border: "1.5px solid #051B42", padding: "10.5px 22.5px" },
cta: { background: "#4361EE", color: "#fff" },
ghost: { background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.25)", padding: "10.5px 22.5px" },
};
return (
{ e.currentTarget.style.transform = "translateY(-1px)"; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
{children}{icon && }
);
};
// Responsive breakpoint hook. Returns "mobile" (<768), "tablet" (768–1023), or "desktop" (≥1024).
const useBreakpoint = () => {
const compute = () => {
if (typeof window === "undefined") return "desktop";
const w = window.innerWidth;
return w < 768 ? "mobile" : w < 1024 ? "tablet" : "desktop";
};
const [bp, setBp] = React.useState(compute);
React.useEffect(() => {
const onResize = () => setBp(compute());
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
return bp;
};
Object.assign(window, { Icon, Logo, Eyebrow, Button, useBreakpoint });