// focuznow-sections.jsx — feature rows, scrolly lockdown, grid, stats, pricing
/* a standard alternating feature row */
function FeatureRow({ flip, eyebrow, icon, title, body, bullets, visual }) {
return (
{eyebrow}
{title}
{body}
{bullets &&
{bullets.map((b, i) =>
{b}
)}
}
{visual}
);
}
/* ============ NUCLEAR LOCKDOWN — pinned scrolly ============ */
function LockdownScrolly() {
const ref = React.useRef(null);
const [p, setP] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
// progress through the tall scrolly container
const total = el.offsetHeight - vh;
const passed = Math.min(Math.max(-r.top, 0), total);
setP(total > 0 ? passed / total : 0);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const steps = [
{ t: 'Pick your targets', d: 'Your blocklist only — or the entire internet. Every http and https URL you name goes dark.' },
{ t: 'Set the duration', d: 'Twenty minutes or a whole weekend. You decide the sentence before it begins.' },
{ t: 'Seal it shut', d: 'Hit start and the timer is locked. No edits, no pause, no “just five minutes.” Real commitment.' },
];
const active = p < 0.4 ? 0 : p < 0.72 ? 1 : 2;
return (
Nuclear Lockdown
When you mean it, mean it.
{steps.map((s, i) => (
0{i + 1}
{s.t}
{s.d}
))}
);
}
/* ============ SECONDARY FEATURE GRID ============ */
function SecondaryGrid() {
const items = [
{ icon: 'clock', t: 'Pomodoro', d: 'A fully customizable focus timer. Set your intervals, breaks, and long-break cadence — then lock in.' },
{ icon: 'flame', t: 'Habits', d: 'Build streaks that stick. Check in once a day and watch the chain grow longer than your excuses.' },
{ icon: 'chart', t: 'Statistics', d: 'See exactly where your time went on every site, every day — and scroll back through history.' },
{ icon: 'note', t: 'Scratches', d: 'Frictionless little notes. Spin up as many as you want, capture a thought, get back to work.' },
{ icon: 'settings', t: 'Settings', d: 'Themes, custom block messages, unblock challenges, a draggable site timer, and granular tracking.' },
{ icon: 'shield', t: 'Unblock Challenge', d: 'Make breaking focus deliberately annoying. Solve a challenge before any site unlocks early.' },
];
return (
The rest of the suite
Everything else you need, in the same tab.
{items.map((it, i) => (
{it.t}
{it.d}
))}
);
}
/* ============ STATS BAND ============ */
function StatsBand() {
return (