// Hero: two layouts — "split" (headline left + browser mock right) and // "centered" (Notion-style: centered headline above, big platform screenshot below). // Layout is driven by the [data-hero-layout] attribute on , set by MxTweaks. function Hero() { const [layout, setLayout] = React.useState(() => document.documentElement.getAttribute("data-hero-layout") || "split" ); React.useEffect(() => { // React to tweak changes from the panel. const onChange = (e) => { const d = e && e.detail; if (d && Object.prototype.hasOwnProperty.call(d, "heroLayout")) { setLayout(d.heroLayout || "split"); } }; window.addEventListener("tweakchange", onChange); // Also poll the attribute once in case it was set after first render. const attr = document.documentElement.getAttribute("data-hero-layout"); if (attr && attr !== layout) setLayout(attr); return () => window.removeEventListener("tweakchange", onChange); }, []); return (
{layout === "centered" ? : }
); } function HeroSplit() { return (
Chamber CRM × AI

Increase your revenue by knowing your members.

memberx is the lightweight CRM for chambers and business member organisations — membership, billing, events, training — with an AI layer that tells you what your members actually need next.

Sign up for early access
Founding 5 · trial program Full platform, your team Hands-on migration
); } function HeroCentered() { return ( <>
Chamber CRM × AI

Increase your revenue by knowing your members.

The lightweight CRM for chambers and business member organisations — with an AI layer that tells you what your members actually need next.

Sign up for early access
Founding 5 · trial program Full platform, your team Hands-on migration
); } function HeroProductMock() { return (
app.memberx.ai/dashboard

Good morning, Sarah

Search
Suggested by memberx Updated 2h ago

22% of your members are engineering firms — 282 businesses. None attended training this year. Your 2024 ISO 9001 course sold out in 4 days. Estimated revenue: $34,200 if you run it again this quarter.

); } function Stat({ label, value, delta, spark, tone }) { const toneClass = tone === "pink" ? "is-pink" : tone === "amber" ? "is-amber" : ""; return (
{label}
{value}
▲ {delta}
{spark && }
); } function Sparkline({ values, className }) { const max = Math.max(...values); const min = Math.min(...values); const range = Math.max(1, max - min); const w = 100, h = 22; const pts = values.map((v, i) => { const x = (i / (values.length - 1)) * w; const y = h - ((v - min) / range) * (h - 3) - 2; return [x, y]; }); let d = `M ${pts[0][0]} ${pts[0][1]}`; for (let i = 1; i < pts.length; i++) { const [x0,y0] = pts[i-1], [x1,y1] = pts[i]; const cx = (x0 + x1) / 2; d += ` Q ${cx} ${y0} ${x1} ${y1}`; } const area = `${d} L ${w} ${h} L 0 ${h} Z`; return ( ); } function SectorStrip() { const segs = [ { pct: 22, color: "var(--primary)", name: "Engineering" }, { pct: 18, color: "var(--pink)", name: "Manufacturing" }, { pct: 16, color: "var(--amber)", name: "Prof svcs" }, { pct: 12, color: "var(--success)", name: "Tech" }, { pct: 32, color: "var(--border-bold)", name: "Other" }, ]; return (
Sector mix
{segs.map((s,i) => )}
{segs.slice(0,3).map((s,i) => ( {s.pct}% ))}
); } window.Hero = Hero;