/* HerBalance Website UI Kit — JSX components * Loaded with: * Components are exported to window.* for use across babel scripts. */ const Icon = ({ name, size = 20, color, stroke = 1.75, ...rest }) => { React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); return ; }; const Button = ({ variant = "primary", size, children, onClick, as: As = "button", ...rest }) => { const cls = `hb-btn hb-btn--${variant}${size === "lg" ? " hb-btn--lg" : ""}`; return {children}; }; const Nav = ({ cartCount = 0, onOpenCart }) => { const [stuck, setStuck] = React.useState(false); React.useEffect(() => { const onScroll = () => setStuck(window.scrollY > 8); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); }; const PhotoPlaceholder = ({ label, description, ratio = "4 / 5", style }) => (
{label}
"{description}"
); const Hero = ({ onCta }) => (
Hormone-free · clinically dosed

Same period. Different day one.

Glycine-Bound Magnesium — formulated to reduce the prostaglandins that turn your bathroom into a warzone every single month.

Free shipping · No questions returns · Made in USA
); const Pillars = () => { const items = [ { n: "01", title: "Cycle comfort.", body: "Calmer cramps. Reduced prostaglandin spikes. Less of the monthly chaos." }, { n: "02", title: "Digestive stability.", body: "Gentle on a gut already in disruption. Not a laxative. No surprise frictionless wipes." }, { n: "03", title: "Mood and mind.", body: "Magnesium's role in nervous system regulation, sleep, and the PMS undertow." }, { n: "04", title: "Hormone-free.", body: "No synthetic hormones. No prescription. No swapping one problem for another." }, ]; return (
What it actually does

Four things, done properly.

Magnesium glycinate, fully chelated, at a clinical dose. Formulated for a body that's already been through enough.

{items.map((p) => (
{p.n}

{p.title}

{p.body}

))}
); }; const Science = () => (
The science, plainly

It's not in your head. It's prostaglandins.

On day one, your body floods with a chemical called prostaglandin. It's what triggers uterine contractions — and the bowel contractions that come with them. Magnesium glycinate gets out ahead of the spike.

{[ { n: "1", title: "The spike", body: "Prostaglandins surge in the uterine lining as your cycle begins. They don't stay in the uterus — they travel." }, { n: "2", title: "The cascade", body: "The same contractions hit your gut. That's the day-one bathroom situation nobody warned you about." }, { n: "3", title: "The intervention", body: "275mg of elemental magnesium from glycinate dampens the prostaglandin response — before the spike takes the wheel." }, ].map((s) => (
{s.n}

{s.title}

{s.body}

))}
); const Testimonials = () => { const items = [ { initial: "M", name: "Maya R.", meta: "Verified · 8 weeks in", quote: "I made it to work on day one for the first time in three years." }, { initial: "J", name: "Jess B.", meta: "Verified · 4 months in", quote: "I cancelled my dentist and a wedding within six months. Now I keep both. That's it. That's the review." }, { initial: "P", name: "Priya S.", meta: "Verified · 11 weeks in", quote: "I didn't know magnesium could do this. I didn't know anything could do this." }, ]; return (
Real women. Specific outcomes.

Not five-star graphics. Day-one reports.

No incentives. No gifted bottles. Just the actual sentence she sent us.

{items.map((t) => (

"{t.quote}"

{t.initial}
{t.name}
{t.meta}
))}
); }; const Product = ({ onAdd }) => (
The flagship

Glycine-Bound Magnesium

275mg of elemental magnesium from 2,500mg of magnesium glycinate. Three vegan capsules. GMP certified. Made in the USA. No fillers. No hormones. Gentle on a gut already in crisis.

{["Hormone-free", "Vegan capsules", "GMP certified", "Made in USA"].map((c) => ( {c} ))}
$38 30 servings · ~$1.27/day
); const Guarantee = ({ onCta }) => (
60
Day Promise
The final word

Sixty days. No questions.
No return required.

Take it for two cycles. If it doesn't change your day one — keep the bottle, get a full refund, and we move on. We're only willing to sell you something we're willing to back.

); const FAQ = () => { const items = [ { q: "How is this different from drugstore magnesium?", a: "Most drugstore magnesium is oxide — cheap, poorly absorbed, and famous for sending people straight back to the bathroom. Ours is fully chelated glycinate. It's clinically dosed, gentle, and actually gets where it needs to go." }, { q: "When will I feel it?", a: "Most women feel a difference by their second cycle. The 60-day promise covers two full cycles for that exact reason. Keep taking it daily — it works upstream of the spike, not after it lands." }, { q: "Is there anything in here I should know about?", a: "Three ingredients. Magnesium glycinate, a vegan capsule, rice flour. No fillers, no hormones, no synthetic dyes, no surprises." }, { q: "What if it doesn't work for me?", a: "You email us within 60 days, we refund you in full. You keep the bottle. We do not require a return because we do not want you spending another minute on this." }, ]; const [open, setOpen] = React.useState(0); return (
Honest answers

The questions she actually asks.

{items.map((it, i) => (
{it.a}
))}
); }; const EmailCapture = () => { const [val, setVal] = React.useState(""); const [done, setDone] = React.useState(false); return (
Letters, not blasts

One letter a month. That's the deal.

The science we're reading, the questions we're getting, the women we're learning from. Unsubscribe in one click — we will not be offended.

{done ? (

You're in. Check your inbox.

) : (
{ e.preventDefault(); if (val) setDone(true); }}> setVal(e.target.value)} required />
)}
); }; const Footer = () => ( ); const CartDrawer = ({ open, onClose, items, onInc, onDec, onRemove }) => { const subtotal = items.reduce((s, it) => s + it.qty * it.price, 0); return (
); }; Object.assign(window, { Icon, Button, Nav, Hero, Pillars, Science, Testimonials, Guarantee, FAQ, EmailCapture, Footer, CartDrawer, PhotoPlaceholder });