/* hero.jsx — Hero, Floating Video card, Authority stats strip */
/* ===== Hero composition — the book is the visual anchor, kept simple
so it actually reads on every breakpoint. One sticky-note testimonial,
one hand-drawn cursive accent, soft gold glow behind. ===== */
function HeroMockups() {
return (
{/* Soft mustard-gold radial glow */}
{/* Decorative dotted arc */}
{/* Book — anchored, fluid sizing */}
{/* PDF badge — top right corner of book */}
{/* Sticky-note testimonial — overlaps book TOP-LEFT */}
{/* Hand-drawn cursive accent — bottom of column, points UP-RIGHT at the book */}
the book you'll reach for at 2am
);
}
/* ===== Compact, single-card price + CTA — replaces the old split layout.
This is the conversion engine: price, savings, scarcity, primary CTA, micro-trust,
all in one well-organised card. ===== */
function HeroOfferCard() {
const { copiesRemaining, copiesSold, copiesTotal } = useCounters();
const pct = Math.min(100, Math.max(8, (copiesSold / copiesTotal) * 100));
const scrollToPreview = (e) => {
e.preventDefault();
const el = document.getElementById("preview");
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};
return (
{/* SAVE coral stamp */}
SAVE $15
{/* Status pills */}
LAUNCH PRICE
{/* Price row */}
{/* Scarcity */}
Launch price · first 1,000 copies only
{/* Progress bar */}
{copiesSold.toLocaleString()}
of {copiesTotal.toLocaleString()} sold
Only {copiesRemaining.toLocaleString()} left
{/* Sophie signature — trust anchor */}
— Sophie
Author · Born to Know
{/* CTAs inside the card — primary + preview text link */}
Start understanding my baby
{/* Micro-copy — right under the CTA */}
Instant PDF
·
No subscription
·
Yours forever
{/* Preview — demoted to text link */}
Preview pages →
);
}
/* ===== Hero — tighter, conversion-focused, pixel-perfect responsive ===== */
function HeroSection() {
return (
{/* LEFT */}
A SCIENCE-BACKED PARENTING HANDBOOK
Stop guessing.
Start understanding the baby in front of you.
For new and expecting parents who want to understand why —
not just be told what to do. 108 pages of peer-reviewed developmental science, translated for tired parents.
Cries, sleep, sensory world, and brain development — from prenatal through 36 months.
{/* Trust strip — social proof first */}
{[0,1,2,3,4].map(s => (
))}
4.9/5
· 1,743 parents
{[12, 47, 32, 5, 26].map((id, i) => (
))}
47 countries
{/* Feature chips — after social proof */}
{[
["BookOpen", "108 Pages"],
["Sparkles", "12 Chapters"],
["ShieldCheck", "30+ Studies"]
].map(([icon, label]) => (
{label}
))}
{/* Combined offer + CTA card */}
{/* RIGHT */}
);
}
/* ===== Floating Video Card — real Sophie intro video, tap to play/pause
(no native player UI — matches the video-story cards) ===== */
function FloatingVideoCard() {
const vref = React.useRef(null);
const [playing, setPlaying] = React.useState(false);
const toggle = () => {
const v = vref.current;
if (!v) return;
if (v.paused) { v.play().catch(() => {}); setPlaying(true); }
else { v.pause(); setPlaying(false); }
};
return (
{/* Thumbnail (shown before play) */}
{/* Real video — only fetched once the user presses play. No native
controls so the player chrome never shows (like the story cards). */}
setPlaying(false)} onPause={() => setPlaying(false)}
style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
objectFit: "cover", background: "transparent",
opacity: playing ? 1 : 0, transition: "opacity 240ms ease",
pointerEvents: "none" }} />
{/* Tap layer toggles play / pause */}
{/* Centered play — only when paused */}
{!playing && (
)}
{/* Hook text + "press play" cursive accent — only when paused */}
{!playing && (
{/* Hook line — all screens */}
Sophie explains in 60 seconds why this book is different
)}
{/* Bottom-left caption — stays visible, also during playback */}
Meet Sophie
A 1-minute note from the author
);
}
/* ===== Authority stats strip — editorial dark band ===== */
function AuthorityStrip() {
const stats = [
["Users", "1,743", "Parents Worldwide", 1743, "47 countries"],
["Globe", "47", "Countries Reading", 47, "and counting"],
["FlaskConical", "30+", "Peer-Reviewed Studies", 30, "APA-7 cited"],
["FileText", "108", "Pages of Science", 108, "12 chapters"]
];
const sources = [
"Harvard · Center on the Developing Child",
"Tronick · Still-Face Research",
"Kuhl · Linguistic Genius Window",
"Fernald · Infant-Directed Speech",
"Ainsworth · Attachment Theory",
"Glover · Prenatal Stress",
"Hirsh-Pasek · Language Development",
"Wolff · Infant States"
];
return (
BUILT ON PEER-REVIEWED SCIENCE
Not a hot take. A research synthesis —
written for the parent at 2am.
Every chapter is built on developmental science — peer-reviewed, properly cited, translated for tired parents.
{stats.map(([icon, big, label, num, sub], i) => (
{num
? (num === 1743 ?
: num === 47 ?
: num === 108 ?
: <>+ >)
: big}
{label}
{sub}
{i < stats.length - 1 && (
)}
))}
"In the first few years of life, more than one million new neural connections form every second."
Harvard Center on the Developing Child
· (Shonkoff & Phillips, 2000)
DRAWN FROM
{sources.map((s, i) => (
{s}
))}
);
}
Object.assign(window, { HeroSection, FloatingVideoCard, AuthorityStrip });