// Sobella Landing Page — sections & components const { useState, useEffect, useRef } = React; const L = { primary: '#154734', deepGreen: '#0B2017', bg: '#FFF1E4', bgWarm: '#E8DFD1', cream: '#FAF9F5', charcoal: '#1F1E1D', nearBlack: '#141413', sage: '#D0D5CC', orange: '#E66B33', white: '#FFFFFF', fg2: 'rgba(31,30,29,0.60)', fg3: 'rgba(31,30,29,0.40)', fg4: 'rgba(31,30,29,0.30)', fg5: 'rgba(31,30,29,0.20)', }; function useWindowWidth() { const [w, setW] = useState(window.innerWidth); useEffect(() => { const h = () => setW(window.innerWidth); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, []); return w; } // ── Wordmark ───────────────────────────────────────────────── function Wordmark({ size = 13, color = L.charcoal }) { return ( SOBELLA ); } function Eyebrow({ children, color, track = '0.3em', size = 11 }) { return ( {children} ); } function LeafMark({ size = 28, color = '#fff' }) { return ( ); } // ── NAV ────────────────────────────────────────────────────── function Nav({ variant }) { const w = useWindowWidth(); const mob = w < 768; const dark = variant === 'dark'; const fg = dark ? '#fff' : L.charcoal; const muted = dark ? 'rgba(255,255,255,0.6)' : L.fg2; return ( ); } // ── PROMISE BAND ───────────────────────────────────────────── function Promise() { const w = useWindowWidth(); const mob = w < 768; return (
Our promise

No streaks to break. No shame spiral. Just a soft, steady hand on the days that feel hard — and the ones that feel ordinary.

); } // ── FEATURE PILLARS ────────────────────────────────────────── const PILLARS = [ { eyebrow: 'Journal', title: 'A short prompt, not a blank page.', body: 'Two minutes a day. Your companion asks the right question — you answer in your own words, or in your own voice.', tint: 'primary', ico: ( ), }, { eyebrow: 'Toolkit', title: 'Cravings, met with technique.', body: 'When the pull hits, tap one button. Breathing, grounding, urge surfing — practical techniques that actually fit in 90 seconds.', tint: 'orange', ico: ( ), }, { eyebrow: 'AF drinks', title: 'Keep the ritual. Change the fuel.', body: 'A curated library of zero-proof cocktails and picks for every bar, store, and mood. The glass still feels good in your hand.', tint: 'primary', ico: ( ), }, { eyebrow: 'Days', title: 'A counter that holds, never breaks.', body: 'Slips happen. Your Day count becomes a Chapter — the work doesn\'t reset to zero, because you aren\'t starting from zero.', tint: 'primary', ico: ( ), }, ]; function Pillars() { const w = useWindowWidth(); const mob = w < 768; const tab = w < 1024; return (
Inside the app

Four quiet tools. One steady companion.

Nothing to learn, nothing to game. Sobella is built to fit in the margins of your day — not to become one more thing on the list.

{PILLARS.map((p, i) => (
{p.ico}
{p.eyebrow}

{p.title}

{p.body}

))}
); } // ── DARK CEREMONIAL BAND ───────────────────────────────────── function Ceremony() { const w = useWindowWidth(); const mob = w < 768; return (
Written by someone on their Day 214
"I expected a tracker. I got something that felt like it was sitting next to me at 9pm on a Tuesday, quietly reminding me why I started."
M
Maren, 34
Chapter 2 · 214 quiet days
); } // ── HOW IT WORKS ───────────────────────────────────────────── function HowItWorks() { const w = useWindowWidth(); const mob = w < 768; const steps = [ { n: '01', title: 'Meet your companion.', body: 'Answer three gentle questions — your name, your starting point, what\'s drawing you toward change. Takes about a minute. No account needed to start.', }, { n: '02', title: 'Mark Day 1.', body: 'A quiet ceremony — not a countdown. Today becomes the day you decided. Sobella remembers the date and shows up tomorrow, and the day after.', }, { n: '03', title: 'Show up, most days.', body: 'A two-minute check-in, a toolkit for the hard moments, an AF drink when you want the ritual. Small things, done steadily, become a chapter.', }, ]; return (
How it works

Three soft steps. No cliffs, no streaks.

{steps.map((s, i) => (
{s.n}

{s.title}

{s.body}

))}
); } // ── FINAL CTA ──────────────────────────────────────────────── function FinalCTA() { const w = useWindowWidth(); const mob = w < 768; return (
Tomorrow you

The best day to begin was yesterday.
The next best day is today.

Free forever to start. $6.99/month unlocks the full toolkit, unlimited drinks library, and weekly reflections. Cancel anytime, your data stays yours.

); } // ── FOOTER ─────────────────────────────────────────────────── function Footer() { const w = useWindowWidth(); const mob = w < 768; return ( ); } Object.assign(window, { LandingNav: Nav, LandingPromise: Promise, LandingPillars: Pillars, LandingCeremony: Ceremony, LandingHowItWorks: HowItWorks, LandingFinalCTA: FinalCTA, LandingFooter: Footer, LandingTokens: L, useWindowWidth, });