// ============================================================ // Alumnus member app — onboarding screens 1.1 → 1.7 // ============================================================ const { Icon: I, Crest, Lockup, Avatar, Button, Eyebrow, Hair, Pill, Card, Phone, PermissionCard, MEMBER, PARTNER, SPONSOR } = window.AL; // ───────────────────────────────────────────────────────────── // 1.1 Welcome / brand intro // ───────────────────────────────────────────────────────────── const M_Welcome = ({ nav = () => {} }) => (
Welcome to the community that comes next.
You've already done the hard part. From here you don't do it alone.
); // ───────────────────────────────────────────────────────────── // 1.2 Invite code entry // ───────────────────────────────────────────────────────────── const M_Invite = ({ nav = () => {} }) => { const code = ['P','I','N','E','4','7']; return (
Step 1 of 4 · Invitation

Enter your invite code.

You'll find this on the discharge letter from Pine Tree Recovery, or in the email from your accountability partner.

{code.map((c, i) => (
{i < 4 ? c : ''}
))}
Six characters. Letters and numbers.
); }; // ───────────────────────────────────────────────────────────── // 1.3 Profile setup (multi-step shown as one screen) // ───────────────────────────────────────────────────────────── const M_Profile = ({ nav = () => {} }) => { const goals = ['Family', 'Work', 'Health', 'Recovery community', 'Education', 'Quiet']; const chosen = ['Family', 'Recovery community', 'Health']; return (
Step 2 of 4 · Your profile

Tell us who you are.

Your name
Anna Reyes
Your class year
April 4, 2026
The day you completed your program. Anchors everything that follows.
What matters now
{goals.map(g => { const on = chosen.includes(g); return (
{on && } {g}
); })}
); }; // ───────────────────────────────────────────────────────────── // 1.4 Membership Commitment — the philosophical heart // ───────────────────────────────────────────────────────────── const M_Commitment = ({ nav = () => {} }) => (
Step 3 of 4 · A membership

What we promise. What we ask.

Alumnus is a membership, not a monitor. The product earns its keep by being measured, plain, and yours to leave.

{[ { i: 'waveform', h: 'We observe rhythm, not contents.', b: "Sleep, meeting attendance, time-of-day patterns. We never read your messages, screen, or browsing." }, { i: 'users-three', h: "Your network sees patterns.", b: 'Three people you choose. They see whether your week is steady — never the details.' }, { i: 'hand-palm', h: 'You can pause or revoke at any time.', b: 'One tap pauses observation. One tap removes a person from your network. No questions, no exit interview.' }, { i: 'graduation-cap', h: 'You get a community in return.', b: 'A continuing class of alumni. Meeting check-ins. Someone reaching out when a hard week shows up.' }, ].map((row, i) => (
{row.h}
{row.b}
))}
Signed by you, witnessed by Pine Tree Recovery.
); // ───────────────────────────────────────────────────────────── // 1.5 Permission Request Sequence (5 individual screens) // ───────────────────────────────────────────────────────────── const M_PermNotif = ({ nav = () => {} }) => ( nav('perm-location')} onSkip={() => nav('perm-location')} /> ); const M_PermLocation = ({ nav = () => {} }) => ( nav('perm-activity')} onSkip={() => nav('perm-activity')} /> ); const M_PermActivity = ({ nav = () => {} }) => ( nav('perm-content')} onSkip={() => nav('perm-content')} /> ); const M_PermContent = ({ nav = () => {} }) => ( nav('perm-network')} onSkip={() => nav('perm-network')} /> ); const M_PermNetwork = ({ nav = () => {} }) => ( nav('network')} onSkip={() => nav('network')} /> ); // ───────────────────────────────────────────────────────────── // 1.6 Accountability Network Setup // ───────────────────────────────────────────────────────────── const M_NetworkSetup = ({ nav = () => {} }) => { const people = [ { name: 'Maria Reyes', role: 'Mother', tag: 'Primary partner', status: 'Invited Apr 5', initials: 'MR', tone: 'ivy' }, { name: 'Beth Whelan', role: 'Sponsor · 8 months', tag: 'Sponsor', status: 'Accepted Apr 5', initials: 'BW', tone: 'brass' }, { name: 'Dr. Caleb Singh', role: 'Pine Tree Recovery', tag: 'Clinical', status: 'Connected', initials: 'CS', tone: 'moss' }, ]; return (
Step 4 of 4 · Your network

Three people, looking out.

They'll get an invitation to install the partner portal. Each one decides what they're comfortable seeing.

{people.map((p, i) => (
{p.name}
{p.role}
{p.tag}
))}
You can change this list any time. Pause one, remove one, swap one. It is yours.
); }; // ───────────────────────────────────────────────────────────── // 1.7 Meeting Schedule Setup // ───────────────────────────────────────────────────────────── const M_MeetingsSetup = ({ nav = () => {} }) => { const types = [ { i: 'users-three', n: 'AA / NA', d: 'Local chapter, weekly' }, { i: 'first-aid-kit', n: 'IOP', d: 'Intensive outpatient' }, { i: 'chat-circle', n: 'Individual therapy', d: 'With your clinician' }, { i: 'church', n: 'SMART Recovery', d: 'Peer-led meeting' }, ]; const added = [ { i: 'users-three', n: "St. Margaret's Wed night", d: 'Wednesdays · 7:30 pm', loc: '442 Bay St, St. Petersburg' }, { i: 'first-aid-kit', n: 'Pine Tree IOP', d: 'Mon / Thu · 6:00 pm', loc: 'Pine Tree Recovery, Clearwater' }, ]; return (
Almost there · meetings

Tell us about the rooms you'll be in.

Add a meeting and you'll be checked in automatically when you arrive.

Quick add
{types.map(t => (
{t.n}
{t.d}
))}
On your schedule {added.map((m, i) => (
{m.n}
{m.d} · {m.loc}
))}
); }; window.MemberOnboarding = { M_Welcome, M_Invite, M_Profile, M_Commitment, M_PermNotif, M_PermLocation, M_PermActivity, M_PermContent, M_PermNetwork, M_NetworkSetup, M_MeetingsSetup, };