/* ============================================================ Gramigo β€” landing page ============================================================ */ const { useState, useEffect, useRef, useCallback } = React; /* ------------------------------------------------------------- Supabase config ------------------------------------------------------------- To wire up a real waitlist, replace the two placeholders below with your Supabase project URL + anon (public) key, and make a table (default name: "waitlist") with a text column "email". The anon key is safe to embed in a public page. Until then, the form works locally (saves to localStorage) so you can demo it immediately. ------------------------------------------------------------- */ const SUPABASE_URL = 'https://asoowmxoedbuqxuzaeac.supabase.co'; const SUPABASE_ANON_KEY = 'sb_publishable_7Fp7AMz2l2WBYHbzVeJYYQ_c21Im4zS'; const WAITLIST_TABLE = 'waitlist'; const SUPABASE_READY = !SUPABASE_URL.startsWith('YOUR_') && !SUPABASE_ANON_KEY.startsWith('YOUR_') && typeof window.supabase !== 'undefined'; let _sb = null; function sb() { if (!SUPABASE_READY) return null; if (!_sb) _sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); return _sb; } async function joinWaitlist(email) { const clean = email.trim().toLowerCase(); if (SUPABASE_READY) { const { error } = await sb().from(WAITLIST_TABLE).insert({ email: clean }); if (error) { // 23505 = unique_violation β†’ already signed up, treat as success if (error.code === '23505') return { ok: true, already: true }; return { ok: false, error: error.message }; } return { ok: true }; } // Local fallback const key = 'gramigo_waitlist'; const list = JSON.parse(localStorage.getItem(key) || '[]'); const already = list.includes(clean); if (!already) { list.push(clean); localStorage.setItem(key, JSON.stringify(list)); } await new Promise((r) => setTimeout(r, 650)); // tiny delay so the spinner feels real return { ok: true, already, local: true }; } /* ---------------- confetti ---------------- */ const CONFETTI_COLORS = ['#8B6EF5', '#F04F9E', '#20C06C', '#4A98F9', '#FADE4D', '#A691FF']; function fireConfetti(x, y) { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const N = 46; for (let i = 0; i < N; i++) { const p = document.createElement('div'); p.className = 'confetti-piece'; const round = Math.random() > 0.5; const size = 7 + Math.random() * 8; const ang = Math.random() * Math.PI * 2; const dist = 90 + Math.random() * 230; const cx = Math.cos(ang) * dist; const cy = Math.sin(ang) * dist + 140; // gravity bias downward p.style.left = x + 'px'; p.style.top = y + 'px'; p.style.width = size + 'px'; p.style.height = (round ? size : size * 0.55) + 'px'; p.style.background = CONFETTI_COLORS[i % CONFETTI_COLORS.length]; p.style.borderRadius = round ? '50%' : '2px'; p.style.setProperty('--cx', cx + 'px'); p.style.setProperty('--cy', cy + 'px'); p.style.setProperty('--cr', (Math.random() * 720 - 360) + 'deg'); p.style.setProperty('--cd', (900 + Math.random() * 700) + 'ms'); document.body.appendChild(p); setTimeout(() => p.remove(), 1700); } } /* ---------------- reveal on scroll ---------------- */ function useReveal() { useEffect(() => { const els = Array.prototype.slice.call(document.querySelectorAll('.reveal')); const reveal = (el) => { if (el.classList.contains('in')) return; const d = el.getAttribute('data-delay'); if (d) el.style.transitionDelay = d + 'ms'; el.classList.add('in'); }; // rect-based check β€” works even if IntersectionObserver is flaky/paused const check = () => { const vh = window.innerHeight || document.documentElement.clientHeight; els.forEach((el) => { const r = el.getBoundingClientRect(); if (r.top < vh * 0.88 && r.bottom > 0) reveal(el); }); }; check(); let io = null; if ('IntersectionObserver' in window) { io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { reveal(en.target); io.unobserve(en.target); } }); }, { threshold: 0.14 }); els.forEach((e) => { if (!e.classList.contains('in')) io.observe(e); }); } window.addEventListener('scroll', check, { passive: true }); window.addEventListener('resize', check); return () => { window.removeEventListener('scroll', check); window.removeEventListener('resize', check); if (io) io.disconnect(); }; }, []); } /* ---------------- data ---------------- */ const CREW = [ { key: 'nouki', img: 'assets/nouki.png', name: 'Nouki', color: '#FADE4D', tag: 'the brains', line: "Reads your plate, does the macro math, and supplies the sass." }, { key: 'protein', img: 'assets/protein.png', name: 'Protein', color: '#8065F1', tag: 'the coach', line: "Keeps your gains on track, one gram at a time." }, { key: 'carbie', img: 'assets/carbie.png', name: 'Carbie', color: '#F04F9E', tag: 'the energy', line: "Fuel for the fun stuff. Always mid-run, never tired." }, { key: 'fatty', img: 'assets/fatty.png', name: 'Fatty', color: '#20C06C', tag: 'the zen one', line: "Good fats, good vibes. Breathe in, snack on." }, { key: 'fiber', img: 'assets/fiber.png', name: 'Fiber', color: '#4A98F9', tag: 'the quiet hero', line: "Soft-spoken, deeply important. Keeps things moving." }, ]; const STEPS = [ { n: '01', emoji: 'πŸ“Έ', title: 'Snap your meal', body: "Point your camera at the plate. That's genuinely the whole step." }, { n: '02', emoji: 'πŸ”', title: 'Nouki reads the macros', body: "Calories, protein, carbs, fat and fiber β€” broken down in seconds." }, { n: '03', emoji: 'πŸ”₯', title: 'Share with the crew', body: "Post to friends, collect reactions, and get lovingly roasted." }, ]; const HEADLINES = [ { id: 'cheeky', label: 'Cheeky', title: ['Track macros', 'without the misery.'], sub: "Snap a photo, let Nouki crunch the numbers, and get gently roasted by your friends. Nutrition tracking that doesn't feel like homework." }, { id: 'warm', label: 'Warm', title: ['Eat well,', 'together.'], sub: "Gramigo turns macro tracking into something you actually look forward to β€” friendly, social, and weirdly delightful." }, { id: 'minimal', label: 'Minimal', title: ['Macros,', 'minus the math.'], sub: "Photo in. Macros out. Friends optional, but very much encouraged." }, { id: 'mascot', label: 'Mascots', title: ['Meet your new', 'nutrition crew.'], sub: "Five tiny mascots who count your macros, hype you up, and occasionally judge your croissant." }, ]; const BACKGROUNDS = { lavender: 'radial-gradient(1200px 720px at 50% -8%, #EFE8FF 0%, #F6F4FB 52%, #F2F1F8 100%)', cream: 'radial-gradient(1200px 720px at 50% -8%, #FFF4E6 0%, #FBF7F0 52%, #F7F3EC 100%)', mint: 'radial-gradient(1200px 720px at 50% -8%, #E4F7EC 0%, #F1F8F3 52%, #EDF5EF 100%)', }; /* ============================================================ small pieces ============================================================ */ function Wordmark({ size = 26 }) { return (
Gramigo
); } function ComingSoonPill({ dark = false }) { return (
COMING SOON ON iOS
); } function Nav() { return ( ); } /* ---------------- waitlist form ---------------- */ function WaitlistForm({ accent, big = false, onDark = false }) { const [email, setEmail] = useState(''); const [status, setStatus] = useState('idle'); // idle | loading | done | error const [note, setNote] = useState(''); const btnRef = useRef(null); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); const submit = useCallback(async (e) => { e.preventDefault(); if (!valid || status === 'loading') return; setStatus('loading'); setNote(''); const res = await joinWaitlist(email); if (res.ok) { setStatus('done'); setNote(res.already ? "You're already on the list. Nouki remembers you." : ''); const r = btnRef.current ? btnRef.current.getBoundingClientRect() : null; if (r) fireConfetti(r.left + r.width / 2, r.top + r.height / 2); } else { setStatus('error'); setNote(res.error || 'Something went sideways. Try again?'); } }, [email, valid, status]); if (status === 'done') { return (
You're on the list! πŸŽ‰
{note || "We'll ping you the second Gramigo hits the App Store."}
); } return (
{ setEmail(e.target.value); if (status === 'error') setStatus('idle'); }} aria-label="Email address" style={{ height: 44 }} />
{status === 'error' ? note : 'No spam, ever. Just one happy email when we launch.'}
); } /* ---------------- hero ---------------- */ function Hero({ headline, accent }) { return (
MACRO TRACKING WITH YOUR SQUAD

{headline.title[0]}
{headline.title[1]}

{headline.sub}

Android, we promise you're next β†’
{/* crew */}
{/* sparkles removed per request */} The Gramigo mascot crew β€” five colorful characters cheering {/* fade base */}
); } function Sparkle({ style, color, dur }) { return ( ); } function AppStoreBadge() { return (
COMING SOON ON THE
App Store
); } /* ---------------- meet the crew ---------------- */ function Crew() { return (
{CREW.map((c, i) => (
{ e.currentTarget.style.transform = 'translateY(-8px)'; e.currentTarget.style.boxShadow = '0 22px 44px rgba(60,50,100,0.12)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 1px 2px rgba(60,50,100,0.03), 0 12px 28px rgba(60,50,100,0.06)'; }} >
{c.name}
{c.name} {c.tag}

{c.line}

))}
); } /* ---------------- how it works ---------------- */ function HowItWorks({ accent }) { return (
{STEPS.map((s, i) => (
{s.emoji} {s.n}

{s.title}

{s.body}

))}
); } /* ---------------- app peek (phone mockup) ---------------- */ function MiniRing({ value = 1250, goal = 1850, size = 132, stroke = 13 }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const pct = Math.min(1, value / goal); return (
EATEN
{value.toLocaleString()}
of {goal.toLocaleString()} kcal
); } function AppPeek() { const macros = [ { img: 'assets/protein.png', label: 'Protein', v: 78, g: 110, color: '#8065F1' }, { img: 'assets/carbie.png', label: 'Carbs', v: 145, g: 175, color: '#F04F9E' }, { img: 'assets/fatty.png', label: 'Fat', v: 38, g: 60, color: '#20C06C' }, { img: 'assets/fiber.png', label: 'Fiber', v: 14, g: 26, color: '#4A98F9' }, ]; return (
{['πŸ“Έ Snap to log', 'πŸ€– AI macros', 'πŸ”₯ Streaks', 'πŸ‘€ Friend feed', 'πŸ’¬ Nouki roasts'].map((chip) => ( {chip} ))}
{/* phone */}
{/* notch */}
{/* screen content */}
WEDNESDAY
Hi, Jamie πŸ‘‹
πŸ”₯ 12
{macros.map((m) => (
{m.label}
{m.v}/{m.g}g
))}
"Tahini was a power move. Look at you."
); } /* ---------------- final CTA + footer ---------------- */ function FinalCTA({ accent }) { return (
{CREW.map((c, i) => ( ))}

The crew is almost ready.

Be first in line when Gramigo lands on iOS. It takes one email and zero regret.

); } /* ---------------- shared section head ---------------- */ function SectionHead({ eyebrow, title, sub, align = 'center' }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } /* ============================================================ App + Tweaks ============================================================ */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "headline": "warm", "accent": "#8B6EF5", "background": "cream" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useReveal(); const headline = HEADLINES.find((h) => h.id === t.headline) || HEADLINES[0]; const accent = t.accent; const bg = BACKGROUNDS[t.background] || BACKGROUNDS.lavender; useEffect(() => { document.body.style.background = bg; }, [bg]); return (
); } // lighten a hex toward white for the gradient top stop function lighten(hex) { const map = { '#8B6EF5': '#A691FF', '#F04F9E': '#FF7DBE', '#4A98F9': '#7FB8FF', '#20C06C': '#5DD79A' }; return map[hex] || '#A691FF'; } ReactDOM.createRoot(document.getElementById('root')).render();