// Pellex landing page sections. Mobile-first. Each section is a React component. // Uses window.PELLEX_PALETTES / FONTS / HEADLINES from pellex-tokens.jsx. // Exposes everything to window at the bottom for cross-script use. const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // Helpers // ───────────────────────────────────────────────────────────── function useReveal() { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const el = ref.current; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) el.classList.add('in'); }); }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }); io.observe(el); return () => io.disconnect(); }, []); return ref; } function Reveal({ children, delay = 0, style }) { const ref = useReveal(); return (
{children}
); } // Tiny icon helpers (minimal stroke icons, no emoji) const Icon = { arrow: (props={}) => ( ), arrowUpRight: (props={}) => ( ), check: (props={}) => ( ), spark: (props={}) => ( ), plus: (props={}) => ( ), minus: (props={}) => ( ), globe: (props={}) => ( ), }; // ───────────────────────────────────────────────────────────── // Reusable bits // ───────────────────────────────────────────────────────────── function Chip({ children, p, accent }) { return ( {children} ); } function PrimaryCTA({ p, children, full, onClick, sub }) { return ( ); } function GhostCTA({ p, children, onClick, full }) { return ( ); } // ───────────────────────────────────────────────────────────── // Section: Header (sticky) // ───────────────────────────────────────────────────────────── function Header({ p, lang, setLang }) { const [languageMenuOpen, setLanguageMenuOpen] = useState(false); const languageOptions = [ { code: 'en', label: 'English', short: 'EN' }, { code: 'tc', label: '繁體中文', short: '繁中' }, { code: 'sc', label: '简体中文', short: '简中' }, ]; return (
P
Pellex
{languageMenuOpen && (
{languageOptions.map((option) => { const selected = lang === option.code; return ( ); })}
)}
{ e.preventDefault(); window.pellexNav('kit'); }} style={{ padding: '6px 12px', borderRadius: 99, background: p.accent, color: p.accentInk, fontSize: 12, fontWeight: 700, textDecoration: 'none', fontFamily: PELLEX_FONTS.body, letterSpacing: -0.1, whiteSpace: 'nowrap', }}>Get the kit
); } // ───────────────────────────────────────────────────────────── // Section: Hero // ───────────────────────────────────────────────────────────── function Hero({ p, headlineKey, density, lang }) { const h = PELLEX_HEADLINES[headlineKey] || PELLEX_HEADLINES.asset; const translatedH1 = lang === 'tc' ? '建立一個小型 AI 資產，讓它在你睡覺時也能運作。' : lang === 'sc' ? '建立一个小型 AI 资产，让它在你睡觉时也能运作。' : h.h1; const padY = density === 'compact' ? 28 : 44; return (
{/* glow */}
{h.eyebrow}

{h.h1pre} {lang === 'en' ? h.h1.split(' ').map((w, i) => { const highlight = ['AI', 'asset', 'shovels', 'income', 'system,', 'sleep.', 'Sunday.'].includes(w); return ( {w}{i < h.h1.split(' ').length - 1 ? ' ' : ''} ); }) : {translatedH1}}

{h.sub}

window.pellexNav('map')}> Show me the route window.pellexNav('kit')}>See the $9 Starter Kit
Beginner-safe No code 1 weekend
); } // ───────────────────────────────────────────────────────────── // Section: Asset-machine visual (the "what you'll build" mock) // ───────────────────────────────────────────────────────────── function AssetMachine({ p }) { return (
Your tiny machine ● live
{/* Free page → product → automation */}
MONTH 1 RESULT
$487 example
); } function MachineRow({ p, step, label, detail, meta, accent, sparkline }) { return (
{step}
{label}
{detail}
{sparkline && }
{meta}
); } function Spark({ p }) { return ( ); } function Connector({ p }) { return (
); } // ───────────────────────────────────────────────────────────── // Section: 3 Rules // ───────────────────────────────────────────────────────────── function Rules({ p }) { const rules = [ { n: '01', title: 'Content first, product second.', body: 'Publish a genuinely useful page before you ask for money. Help comes first — money follows the help.' }, { n: '02', title: 'Sell the shovel, not the mine.', body: 'Don\'t promise income. Sell the templates, prompts and checklists that help someone move 10× faster today.' }, { n: '03', title: 'Niche down hard.', body: '"AI business" is too broad. "AI follow-up kit for cleaning quotes" is buyable. Pick a tiny painful problem.' }, ]; return (
What we learned

Three rules we live by — copied from the people doing it well.

The pattern is boring on purpose. Boring is what actually works.

{rules.map((r, i) => (
{r.n}

{r.title}

{r.body}

))}
); } // ───────────────────────────────────────────────────────────── // Section: 4-step playbook // ───────────────────────────────────────────────────────────── function Playbook({ p }) { const [active, setActive] = useState(0); const steps = [ { tag: 'PICK', title: 'Pick a tiny painful niche.', body: 'Tutors stuck on weekend enquiries. Cleaners chasing late quotes. Salons forgetting follow-ups. Look for boring, repeated pain.', example: 'e.g. "AI follow-up for cleaning quotes"', time: '~20 min', }, { tag: 'PUBLISH', title: 'Publish a free useful page.', body: 'Make one page someone can search, share, or copy from. A template, checklist, calculator, or teardown. Help first.', example: 'e.g. cleaning-follow-up-template.html', time: '~2 hrs', }, { tag: 'SELL', title: 'Sell the shovel.', body: 'Package a prompt pack, mini guide, spreadsheet, or audit. Price small ($9-49). Help them move faster, not get rich.', example: 'e.g. $9 prompt pack + setup guide', time: '~1 day', }, { tag: 'AUTOMATE', title: 'Automate fulfilment.', body: 'Stripe link + auto-email delivery + Notion drop. Use no-code tools you already know. Custom software is the last resort.', example: 'Stripe → Resend → Notion', time: '~3 hrs', }, ]; return (
The playbook

Four steps. One weekend.

A tiny repeatable machine: content attracts attention, a small product converts, automation fulfils, feedback tells you what to make next.

{/* Step tabs */}
{steps.map((s, i) => ( ))}
0{active+1} STEP {active+1} / 4
{steps[active].time}

{steps[active].title}

{steps[active].body}

{steps[active].example}
{steps.map((_, i) => (
))}
); } // ───────────────────────────────────────────────────────────── // Section: Before / After // ───────────────────────────────────────────────────────────── function BeforeAfter({ p }) { return (
The shift

Stop selling your hours. Start owning a tiny asset.

); } function CompareCard({ p, label, title, rows, tone }) { const bright = tone === 'bright'; return (
{label}

{title}

{rows.map(([k, v], i) => (
{k} {v}
))}
); } // ───────────────────────────────────────────────────────────── // Section: Free resources // ───────────────────────────────────────────────────────────── function Resources({ p }) { const items = [ { tag: 'TEMPLATE', title: 'Weekend tutoring reply', desc: 'Drop-in template for parents asking about lessons.', kind: 'free' }, { tag: 'KIT', title: 'Cleaning quote follow-up', desc: 'Niche lead-magnet you can copy in an hour.', kind: 'free' }, { tag: 'CALCULATOR', title: 'Cleaning ROI calc', desc: 'Live calculator that captures emails while running.', kind: 'free' }, ]; return (
Resource hub

Steal a working example before you build your own.

Each free page below is a real "traffic asset" — see the shape, then copy it for your niche.

{items.map((it, i) => ( { e.preventDefault(); window.pellexNav('resource'); }} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 16, borderRadius: 14, background: p.bgElev, border: `1px solid ${p.border}`, textDecoration: 'none', transition: 'border-color 180ms ease, transform 180ms ease', }} onMouseEnter={e => { e.currentTarget.style.borderColor = p.accent + '55'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = p.border; }} >
{it.tag} · FREE
{it.title}
{it.desc}
 ))}
); } function ThumbBlock({ p, kind }) { // Tiny iconographic block per resource type const common = { width: 52, height: 52, borderRadius: 12, background: p.bgCard, border: `1px solid ${p.border}`, display: 'grid', placeItems: 'center', flexShrink: 0, }; if (kind === 'TEMPLATE') return (
); if (kind === 'KIT') return (
); return (
); } Object.assign(window, { useReveal, Reveal, Icon, Chip, PrimaryCTA, GhostCTA, Header, Hero, AssetMachine, Rules, Playbook, BeforeAfter, Resources, });