/* global React, Phone, Butterfly, Avatar, TabBar, ButterflyProgress */ /* ========================================================= 07 · PROFILE HOME — Your story, with visual progress ========================================================= */ function ScrProfileHome() { // Per-section completion + meta. Stage drives the small icon visual. const sections = [ { l: 'About you', m: 'Voice intro · 0:48', pct: 100, kind: 'voice' }, { l: 'Skills', m: '6 added · 3 verified', pct: 75, kind: 'chips', chips: [1,1,1,0,0,0] }, { l: 'Project stories', m: '1 of 3 stories recorded', pct: 33, kind: 'stories', filled: 1, total: 3 }, { l: 'Work preferences', m: 'Remote · 2 days/wk', pct: 60, kind: 'bar' }, { l: 'Experience', m: '2 roles · add one more', pct: 70, kind: 'bar' }, { l: 'Education', m: 'UAL · 2024', pct: 100, kind: 'check' }, ]; // Aggregate: 76% (used in butterfly). Threshold for unlocking matches: 80%. const overall = 76; const unlockAt = 80; const gap = unlockAt - overall; return (
{/* Header bar — settings */}
{/* Profile hero card */}
Sophie Bennett
Brand Designer · London
Almost ready
{/* === UNLOCK PROGRESS CARD — the WOW moment === */}
{/* faded butterfly watermark */}
Becoming · {overall}%
{gap}% from unlocking
your first matches.
{/* Threshold bar */}
{/* 80% threshold marker */}
UNLOCK · {unlockAt}%
Two more stories will get you over the line.
{/* Sections list — each with its own progress visual */}
{sections.map((s, i, arr) => ( ))}
); } /* ----- A single profile section row with section-specific progress visual ----- */ function ProfileSectionRow({ s, last }) { return (
{s.l}
{s.m}
); } /* ----- Per-section progress indicator (visual variety!) ----- */ function SectionVisual({ s }) { const wrap = { width: 44, height: 44, borderRadius: 12, background: 'rgba(31,36,33,0.04)', display: 'grid', placeItems: 'center', flexShrink: 0, position: 'relative', }; // ── 1) Voice intro — mini waveform that fills as % grows if (s.kind === 'voice') { return (
{[0.35, 0.7, 1, 0.55, 0.85, 0.5, 0.7].map((h, j) => ( ))}
); } // ── 2) Skills — six chip-dots, filled = added if (s.kind === 'chips') { return (
{s.chips.map((c, j) => (
))}
); } // ── 3) Project stories — N filled circles, M empty if (s.kind === 'stories') { return (
{Array.from({ length: s.total }).map((_, j) => { const filled = j < s.filled; return (
); })}
); } // ── 4) Bar — horizontal progress block if (s.kind === 'bar') { return (
); } // ── 5) Check — fully complete if (s.kind === 'check') { return (
); } return
; } /* ----- tiny mini-ring for the right-side percentage ----- */ function SectionPct({ pct }) { const size = 30; const r = 12; const c = 2 * Math.PI * r; const off = c * (1 - pct / 100); const isDone = pct === 100; return (
{pct}
); } /* ========================================================= 08 · STORY EDITOR — Voice question for a story slot ========================================================= */ function ScrStoryEdit() { return (
{/* Header */}
Story 2 of 3
Skip
About you

What's a project
you're most proud of?

{/* Coach prompt card */}
Coach tip — talk about the problem, what you did, and what changed. ~60 seconds is plenty.
{/* Static waveform / preview */}
{Array.from({ length: 24 }).map((_, i) => ( ))}
Tap to record · ~ 60 sec
{/* Big record button */}
Type instead Upload audio
); } /* ========================================================= 09 · SKILLS PICKER — Verified chips ========================================================= */ function ScrSkillsPicker() { return (
Skills
Save

What you can actually do.

{/* Search */}
Search 800+ skills
{/* Your skills */}
Your skills · 6
{[ { l: 'Brand identity', v: true }, { l: 'Figma', v: true }, { l: 'Type systems', v: false }, { l: 'User research', v: true }, { l: 'Logo design', v: false }, { l: 'Webflow', v: false }, ].map((s, i) => ( {s.v && } {s.l} ))}
{/* Suggested */}
Suggested · based on your stories
{['Motion design', 'Illustrator', 'Notion', 'Workshops', 'Brand strategy', 'Design tokens', 'Prototyping', 'Wireframing'].map(s => ( + {s} ))}
{/* Verify CTA */}
Verify 3 unverified skills
5-minute assessment · boosts match score
 ); } Object.assign(window, { ScrProfileHome, ScrStoryEdit, ScrSkillsPicker });