// Shared lo-fi sketch components for the Pulse LANDING PAGE wireframes. // Same hand-drawn vocabulary as wireframe-components.jsx. // Exports to window: LPNav, EmailCapture, SectionHead, LogoRow, StatBand, // StepsRow, FeatureCard, FeatureGrid, FaqList, CTABand, LPFooter, // ImgPlaceholder, BrowserFrame, Tag, CoordinatorMock, OrbitMock, StackMock. const INK = '#2b2a28'; const MUT = '#6f6a60'; const DIM = '#98917f'; const PAPER = '#faf8f3'; const PAPER2 = '#ffffff'; // ---------- waitlist email capture ---------- function EmailCapture({ accent, size = 'lg', note = 'No credit card. Spots are limited.' }) { const h = size === 'lg' ? 52 : 44; const fs = size === 'lg' ? 17 : 15; return (
you@team.dev |
{note &&
{note}
}
); } // ---------- nav ---------- function LPNav({ accent, links = ['How it works', 'The views', 'Pricing', 'FAQ'] }) { return (
PULSE
{links.map((l) => ( {l} ))}
Sign in
); } // ---------- section eyebrow + heading ---------- function SectionHead({ eyebrow, title, sub, accent, align = 'left', maxW = 760 }) { return (
{eyebrow && (
{eyebrow}
)}
{title}
{sub &&
{sub}
}
); } // ---------- striped image placeholder ---------- function ImgPlaceholder({ label, h = 200, w = '100%', accent, radius = 'r1' }) { return (
{label}
); } // ---------- sketch browser chrome ---------- function BrowserFrame({ accent, url = 'pulse.dev/app', children, h }) { return (
{[0, 1, 2].map((i) => )} {url}
{children}
); } // ---------- logo row (social proof) ---------- function LogoRow({ count = 6, label }) { return (
{label &&
{label}
}
{Array.from({ length: count }).map((_, i) => (
logo
))}
); } // ---------- big stats band ---------- function StatBand({ accent, stats }) { return (
{stats.map((s, i) => (
{s.n}
{s.l}
))}
); } // ---------- how it works steps ---------- function StepsRow({ accent, steps }) { return (
{steps.map((s, i) => (
{i + 1}
{s.title}
{s.body}
))}
); } // ---------- feature grid ---------- function FeatureCard({ f, accent, idx }) { return (
{f.title}
{f.body}
); } function FeatureGrid({ accent, features, cols = 3 }) { return (
{features.map((f, i) => )}
); } // ---------- FAQ ---------- function FaqList({ accent, items }) { return (
{items.map((it, i) => (
{it.q}
{i === 0 ? '–' : '+'}
{i === 0 &&
{it.a}
}
))}
); } // ---------- final CTA band ---------- function CTABand({ accent, title, sub }) { return (
{title}
{sub &&
{sub}
}
you@team.dev
); } // ---------- footer ---------- function LPFooter({ accent }) { const cols = [ { h: 'Product', items: ['How it works', 'Demo', 'Pricing', 'Changelog'] }, { h: 'Company', items: ['About', 'Careers', 'Blog'] }, { h: 'Resources', items: ['Docs', 'Status', 'Contact'] }, ]; return (
PULSE
One engineer. Many tasks. You stay in the loop by voice.
{cols.map((c) => (
{c.h}
{c.items.map((it) => {it})}
))}
© 2026 Pulse Labs · backed by Spring VC Privacy · Terms
); } Object.assign(window, { LPNav, EmailCapture, SectionHead, LogoRow, StatBand, StepsRow, FeatureCard, FeatureGrid, FaqList, CTABand, LPFooter, ImgPlaceholder, BrowserFrame, LP_INK: INK, LP_MUT: MUT, LP_DIM: DIM, LP_PAPER: PAPER, LP_PAPER2: PAPER2, });