// WakeMeBot landing — atomic visual bits. // All exports attach to window at the bottom. const { useState, useEffect, useRef } = React; // ─── SunDisc ────────────────────────────────────────────────────────────── // Radial gradient sun with subtle specular highlight + soft halo + pulse. const SunDisc = ({ size = 360, halo = true, hover = true }) => { const VB = 200; return (
{halo && (
)} {/* faint highlight crescent at the very top */}
); }; // ─── Wordmark ───────────────────────────────────────────────────────────── const Wordmark = ({ size = 28, weight = 600 }) => ( WakeMeBot ); // ─── GlassCard ──────────────────────────────────────────────────────────── const GlassCard = ({ children, style, pad = 36, radius = 28, tint = 0.55 }) => (
{children}
); // ─── iOS App Store badge — original CTA pill (not Apple's official badge) ─ const AppStorePill = ({ primary = true }) => ( e.currentTarget.style.transform = 'translateY(-1px)'} onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}> Get it on iOS — App Store ); // ─── Secondary text CTA ─────────────────────────────────────────────────── const TextCTA = ({ href = '#how', children, arrow = true }) => ( { e.currentTarget.style.background = 'rgba(255,255,255,0.4)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}> {children} {arrow && } ); // ─── Animated voice waveform ────────────────────────────────────────────── const Waveform = ({ bars = 28, height = 56, color = 'var(--coral)', running = true }) => { // Deterministic heights so SSR/RSC-style hydration mismatches don't happen const heights = React.useMemo(() => Array.from({ length: bars }, (_, i) => { const t = i / bars; const w = 0.45 + 0.55 * Math.abs(Math.sin(t * Math.PI * 2.4) * Math.cos(t * Math.PI * 1.6)); return Math.max(0.18, w); }), [bars]); return (
{heights.map((h, i) => ( ))}
); }; // ─── Section heading ────────────────────────────────────────────────────── const Eyebrow = ({ children, color = 'var(--coral)' }) => (
{children}
); // ─── iPhone bezel mock — for screenshots in calendar section ────────────── const PhoneFrame = ({ children, width = 320, height = 656 }) => (
{/* Dynamic island */}
{/* Status bar */}
9:41
{children}
); // ─── Calendar-suggestion phone screen ───────────────────────────────────── const PhoneCalendarScreen = () => (
AI Suggestions
Three smart alarms
for tomorrow
{[ { time: '5:45', label: 'Flight · LHR → JFK', why: 'Leave by 6:30 to make 8:55 boarding', icon: '✈' }, { time: '7:00', label: 'Investor pitch · Sequoia', why: 'You said you wanted 90 min of prep', icon: '◐' }, { time: '8:15', label: 'Standup · Eng team', why: 'Recurring · 30 min before', icon: '◍' }, ].map((s, i) => (
{s.time}
AM
{s.icon}
{s.label}
{s.why}
))}
{/* Bottom CTA */}
Add all three
); // ─── Voice-prompt phone screen ──────────────────────────────────────────── const PhoneVoiceScreen = () => (
New alarm
Tell me why
{/* Pulse ring */}
"Wake me at 7am tomorrow for my investor pitch with Sequoia."
{[0,1,2,3,4,5,6,7,8,9,10,11].map(i => ( ))}
); Object.assign(window, { SunDisc, Wordmark, GlassCard, AppStorePill, TextCTA, Waveform, Eyebrow, PhoneFrame, PhoneCalendarScreen, PhoneVoiceScreen, });