// hushkit — landing page. Built in the app's own visual language: // anodized slate, dusty-pink value arcs, Space Grotesk + IBM Plex Mono, // hardware-panel motifs. Reuses the real app screens for fidelity. const T = { bg: '#0e0d12', bg2: '#16151a', card: '#1d1c22', raised: '#26242b', rim: '#2e2b34', ink: '#ece6dc', inkMute: 'rgba(236,230,220,0.55)', inkFaint: 'rgba(236,230,220,0.28)', pink: '#e2a3b1', pinkDeep: '#b87884', blue: '#a8c3d6', sand: '#d6b478', hot: '#ff7548', display: '"Space Grotesk", -apple-system, system-ui, sans-serif', mono: '"IBM Plex Mono", ui-monospace, monospace', }; // ── small hardware screw, like the faceplate corners ─── function Screw({ size = 13, angle = 24 }) { return (
); } // ── mono eyebrow / spec label ────────────────────────── function Eyebrow({ children, color = T.pink, style }) { return (
{children}
); } // ── App Store download button ────────────────────────── function AppStore({ small }) { return ( e.preventDefault()} style={{ display: 'inline-flex', alignItems: 'center', gap: 11, textDecoration: 'none', padding: small ? '9px 16px' : '13px 22px', background: T.ink, color: '#13121a', borderRadius: 12, boxShadow: '0 6px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4)', transition: 'transform .18s ease, box-shadow .18s ease', }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 6px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4)'; }}>
Download on the
App Store
 ); } // ── scaled screenshot wrapper ────────────────────────── function Device({ src, scale = 0.6, glow = T.pink }) { // Bezel thickness around the screen (unscaled px) const bx = 11, bt = 13, bb = 13; const sw = 390, sh = 844; const fw = sw + bx * 2, fh = sh + bt + bb; // frame outer dims const frameR = 56, screenR = 47; // Button positions are relative to the top of the frame const btns = [ // left side: action, vol-up, vol-down { side: 'left', top: bt + 82, h: 26 }, { side: 'left', top: bt + 132, h: 34 }, { side: 'left', top: bt + 178, h: 34 }, // right side: power { side: 'right', top: bt + 152, h: 70 }, ]; return (
{/* Ambient glow */}
{/* Everything below is rendered at 1× then scaled */}
{/* Phone frame body */}
{/* Screen */}
{/* Side buttons */} {btns.map(({ side, top, h }, i) => (
))}
); } // ── section wrapper ──────────────────────────────────── function Section({ children, style, id }) { return (
{children}
); } // ── thin panel screws frame (4 corners absolute) ─────── function PanelScrews({ inset = 16 }) { return (
); } // ════════════════════════════════════════════════════════ // NAV // ════════════════════════════════════════════════════════ function Nav() { return ( ); } // ════════════════════════════════════════════════════════ // HERO // ════════════════════════════════════════════════════════ function Hero() { return (
{/* ambient backdrop */}
{/* left — copy */}
HK-001 · White noise & shushing

One kit.
Full quiet.

Hushkit is a white noise and shushing app built to get your baby to sleep — and keep them there. Shush, brown noise, and white noise, all in one place.

{/* right — device pair */}
); } // ════════════════════════════════════════════════════════ // THE KIT — spec strip ("Everything in the kit") // ════════════════════════════════════════════════════════ function Kit() { const items = [ ['airplay', 'AirPlay', 'cast to any apple speaker'], ['bt', 'Bluetooth', 'any speaker in the house'], ['bg', 'Background', 'runs with the screen off'], ['ear', 'Listen detection', 'stops when baby settles'], ]; const ic = { airplay: , bt: , bg: , ear: , }; return (
Everything in the kit

AirPlay, Bluetooth, background playback, and listen detection — built in. No add-ons, no upgrades. Everything in the kit.

{items.map(([k, name, sub]) => (
{ic[k]}
{name}
{sub}
))}
); } // ════════════════════════════════════════════════════════ // FEATURE MODULE (alternating) // ════════════════════════════════════════════════════════ function Feature({ index, label, accent, title, body, device, flip, children }) { const Text = (
{index} / 05 {label}

{title}

{body}

{children}
); const Visual = (
{device}
); return (
{flip ? {Visual}{Text} : {Text}{Visual}}
); } // ── feature 02 triptych: three sounds ────────────────── function SoundsTriptych() { const sounds = [ ['shush', T.pink, 'images/shush.png'], ['brown', T.sand, 'images/brown.png'], ['white', T.blue, 'images/white.png'], ]; return (
02 / 05 Three sounds

Shush. Brown. White.

No scrolling through sounds you'll never use — just the ones that work, tuned to your needs.

{sounds.map(([name, accent, src]) => (
{name}
))}
); } // ── feature 05 visual: stays-on / background ─────────── function BackgroundVisual() { const bars = [0.3,0.5,0.75,0.55,0.9,0.65,0.4,0.85,0.7,0.45,0.8,0.6,0.9,0.5,0.7,0.85,0.4,0.65,0.9,0.55,0.75,0.6,0.8,0.45,0.7,0.55,0.85,0.4]; return (
Screen locked
running
{bars.map((h, i) => (
))}
zzz
shush · my voice
hushkit · background
); } // ════════════════════════════════════════════════════════ // FOOTER // ════════════════════════════════════════════════════════ function Footer() { return (
HK-001 · now available

One kit. Full quiet.

Put the phone down and actually rest. Hushkit keeps going.

); } // ════════════════════════════════════════════════════════ // PAGE // ════════════════════════════════════════════════════════ function App() { return (