Spaces:
Sleeping
Sleeping
| import { useState } from "react" | |
| const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)" | |
| function MirrorLogo({ size = 48 }) { | |
| return ( | |
| <svg width={size} height={size} viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="onb-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="20" width="6" height="6" rx="3" fill="url(#onb-g)" opacity=".35"/> | |
| <rect x="11" y="13" width="6" height="13" rx="3" fill="url(#onb-g)" opacity=".6"/> | |
| <rect x="20" y="6" width="8" height="20" rx="4" fill="url(#onb-g)"/> | |
| <rect x="31" y="13" width="6" height="13" rx="3" fill="url(#onb-g)" opacity=".6"/> | |
| <rect x="40" y="20" width="6" height="6" rx="3" fill="url(#onb-g)" opacity=".35"/> | |
| <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/> | |
| <rect x="2" y="29" width="6" height="6" rx="3" fill="url(#onb-g)" opacity=".15"/> | |
| <rect x="11" y="29" width="6" height="13" rx="3" fill="url(#onb-g)" opacity=".27"/> | |
| <rect x="20" y="29" width="8" height="20" rx="4" fill="url(#onb-g)" opacity=".33"/> | |
| <rect x="31" y="29" width="6" height="13" rx="3" fill="url(#onb-g)" opacity=".3"/> | |
| <rect x="40" y="29" width="6" height="6" rx="3" fill="url(#onb-g)" opacity=".15"/> | |
| </svg> | |
| ) | |
| } | |
| function StepConcept() { | |
| return ( | |
| <div> | |
| <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}> | |
| <MirrorLogo /> | |
| </div> | |
| <h1 style={{ | |
| fontSize: 26, fontWeight: 700, color: "#f0eeff", | |
| margin: "0 0 14px", lineHeight: 1.25, textAlign: "center", | |
| letterSpacing: "-0.4px", | |
| }}> | |
| Your conversations reveal<br />who you are | |
| </h1> | |
| <p style={{ | |
| fontSize: 14, color: "#8b89aa", lineHeight: 1.8, | |
| margin: "0 0 28px", textAlign: "center", | |
| }}> | |
| Most people go through hundreds of conversations without ever seeing their | |
| own patterns. mirror changes that — not by telling you what to say, | |
| but by reflecting how you actually show up. | |
| </p> | |
| <div style={{ display: "flex", flexDirection: "column", gap: 10 }}> | |
| {[ | |
| ["How you show up varies", | |
| "Confident in some rooms, hesitant in others. The mirror maps both."], | |
| ["Your signals are consistent", | |
| "Speech pace, filler words, how you listen, when you push — they form a pattern whether you notice it or not."], | |
| ["Seeing it clearly is rare", | |
| "Most people only get this from years of therapy or a very honest coach. This is a faster mirror."], | |
| ].map(([title, body]) => ( | |
| <div key={title} style={{ | |
| display: "flex", gap: 14, padding: "14px 16px", | |
| background: "#151922", border: "1px solid #1e2438", borderRadius: 10, | |
| }}> | |
| <div style={{ | |
| width: 7, height: 7, borderRadius: "50%", flexShrink: 0, | |
| background: G, marginTop: 5, | |
| }} /> | |
| <div> | |
| <div style={{ fontSize: 13, fontWeight: 600, color: "#f0eeff", marginBottom: 4 }}> | |
| {title} | |
| </div> | |
| <div style={{ fontSize: 13, color: "#6b6888", lineHeight: 1.65 }}>{body}</div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| function StepHow() { | |
| const steps = [ | |
| ["Record a Google Meet call", | |
| "Hit Start Recording in the side panel when your conversation begins — mirror captures your voice automatically, right there in the room."], | |
| ["We extract your patterns", | |
| "Speech pace, confidence signals, how you listen, when you interrupt, how your energy shifts — all mapped to the type of conversation."], | |
| ["Your portrait builds", | |
| "Your first profile appears after 3 sessions. After 10, the mirror knows your patterns better than people who've known you for years."], | |
| ] | |
| return ( | |
| <div> | |
| <h1 style={{ | |
| fontSize: 24, fontWeight: 700, color: "#f0eeff", | |
| margin: "0 0 10px", lineHeight: 1.3, letterSpacing: "-0.3px", | |
| }}> | |
| It gets smarter with every session | |
| </h1> | |
| <p style={{ fontSize: 14, color: "#6b6888", margin: "0 0 28px", lineHeight: 1.75 }}> | |
| Each conversation you record teaches the mirror something new about you. | |
| The first few sessions are setup — after that, it starts talking back. | |
| </p> | |
| <div style={{ display: "flex", flexDirection: "column" }}> | |
| {steps.map(([title, body], i) => ( | |
| <div key={title} style={{ display: "flex", gap: 16, position: "relative", | |
| paddingBottom: i < steps.length - 1 ? 26 : 0 }}> | |
| {i < steps.length - 1 && ( | |
| <div style={{ position: "absolute", left: 16, top: 34, | |
| width: 2, height: "calc(100% - 8px)", | |
| background: "#1e2438" }} /> | |
| )} | |
| <div style={{ width: 34, height: 34, borderRadius: "50%", flexShrink: 0, | |
| background: "rgba(29,78,216,0.1)", border: "1px solid rgba(29,78,216,0.3)", | |
| display: "flex", alignItems: "center", justifyContent: "center", | |
| fontSize: 13, fontWeight: 700, color: "#5b9cf6", zIndex: 1 }}> | |
| {i + 1} | |
| </div> | |
| <div style={{ paddingTop: 6 }}> | |
| <div style={{ fontSize: 14, fontWeight: 600, color: "#f0eeff", marginBottom: 5 }}> | |
| {title} | |
| </div> | |
| <div style={{ fontSize: 13, color: "#6b6888", lineHeight: 1.65 }}>{body}</div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| function StepPreview() { | |
| const reflected = [ | |
| ["#5b9cf6", "pace", "brisk, steady 170 wpm across your sessions"], | |
| ["#c084fc", "vocabulary richness", "varied — about 66% unique words"], | |
| ] | |
| return ( | |
| <div> | |
| <h1 style={{ | |
| fontSize: 24, fontWeight: 700, color: "#f0eeff", | |
| margin: "0 0 10px", lineHeight: 1.3, letterSpacing: "-0.3px", | |
| }}> | |
| Here's what you'll see | |
| </h1> | |
| <p style={{ fontSize: 14, color: "#6b6888", margin: "0 0 18px", lineHeight: 1.75 }}> | |
| After a few sessions, your portrait starts to look something like this — specific | |
| to you, not generic advice. | |
| </p> | |
| <div style={{ | |
| background: "#151922", border: "1px solid #1e2438", borderRadius: 12, | |
| padding: "18px 20px", position: "relative", | |
| }}> | |
| <div style={{ position: "absolute", top: 12, right: 14, fontSize: 10, | |
| color: "#3a3a52", textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600 }}> | |
| Example | |
| </div> | |
| <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}> | |
| <MirrorLogo size={16} /> | |
| <span style={{ fontSize: 13, fontWeight: 700, color: "#f0eeff" }}>Your Portrait</span> | |
| </div> | |
| <p style={{ | |
| fontSize: 13.5, color: "#dcdaf0", fontStyle: "italic", lineHeight: 1.85, | |
| margin: "0 0 14px", | |
| }}> | |
| "You tend to hedge more and speak more carefully in high-stakes reviews, but that | |
| caution disappears almost entirely in casual conversations — where your pace | |
| picks up and you build on what others say far more often." | |
| </p> | |
| <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginBottom: 16 }}> | |
| {["context-sensitive", "measured under pressure", "collaborative when relaxed"].map(tag => ( | |
| <span key={tag} style={{ | |
| fontSize: 10.5, fontWeight: 600, color: "#5b9cf6", | |
| background: "rgba(91,156,246,0.1)", border: "1px solid rgba(91,156,246,0.3)", | |
| borderRadius: 9, padding: "3px 10px", | |
| }}>{tag}</span> | |
| ))} | |
| </div> | |
| <div style={{ fontSize: 10, fontWeight: 700, color: "#4a4865", | |
| textTransform: "uppercase", letterSpacing: 0.6, margin: "16px 0 8px" }}> | |
| Already reflected back | |
| </div> | |
| {reflected.map(([color, name, body], i) => ( | |
| <div key={name} style={{ | |
| display: "flex", alignItems: "center", gap: 9, padding: "9px 0", | |
| borderTop: i > 0 ? "1px solid #131722" : "none", | |
| }}> | |
| <div style={{ width: 6, height: 6, borderRadius: "50%", flexShrink: 0, background: color }} /> | |
| <div style={{ fontSize: 12, fontWeight: 600, color: "#f0eeff", flexShrink: 0 }}>{name}</div> | |
| <div style={{ color: "#3a3a52", flexShrink: 0 }}>·</div> | |
| <div style={{ fontSize: 11.5, color: "#5a5878", lineHeight: 1.4 }}>{body}</div> | |
| </div> | |
| ))} | |
| <div style={{ | |
| marginTop: 16, padding: "12px 14px", background: "#131722", | |
| border: "1px dashed #1e2438", borderRadius: 8, display: "flex", gap: 12, | |
| }}> | |
| <div style={{ fontSize: 13, color: "#4a4865", flexShrink: 0 }}>?</div> | |
| <div> | |
| <div style={{ fontSize: 11, fontWeight: 600, color: "#4a4865", | |
| textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 3 }}> | |
| What the mirror can't see yet | |
| </div> | |
| <div style={{ fontSize: 12, color: "#3a3a52", lineHeight: 1.6 }}> | |
| You haven't recorded an evaluative conversation yet — some patterns only | |
| show up in high-stakes settings. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| function StepTrust() { | |
| return ( | |
| <div> | |
| <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}> | |
| <div style={{ width: 48, height: 48, borderRadius: 12, | |
| background: "rgba(29,78,216,0.1)", border: "1px solid rgba(29,78,216,0.3)", | |
| display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}> | |
| 🔒 | |
| </div> | |
| </div> | |
| <h1 style={{ | |
| fontSize: 24, fontWeight: 700, color: "#f0eeff", | |
| margin: "0 0 10px", lineHeight: 1.3, textAlign: "center", letterSpacing: "-0.3px", | |
| }}> | |
| What happens to your recording | |
| </h1> | |
| <p style={{ fontSize: 14, color: "#6b6888", margin: "0 0 24px", lineHeight: 1.75, textAlign: "center" }}> | |
| Two things are true every single time, no exceptions. | |
| </p> | |
| <div style={{ display: "flex", flexDirection: "column", gap: 10 }}> | |
| {[ | |
| ["Deleted the instant it's processed", | |
| "Your audio is analyzed and permanently deleted the moment that finishes — never stored, never replayed, never shared with anyone, including us."], | |
| ["We remember you. No one else.", | |
| "Only your own patterns are kept. Anyone else on the call is never profiled, never stored, never analyzed individually — the mirror reflects you, not the room."], | |
| ].map(([title, body]) => ( | |
| <div key={title} style={{ | |
| display: "flex", gap: 14, padding: "14px 16px", | |
| background: "#151922", border: "1px solid #1e2438", borderRadius: 10, | |
| }}> | |
| <div style={{ | |
| width: 7, height: 7, borderRadius: "50%", flexShrink: 0, | |
| background: G, marginTop: 5, | |
| }} /> | |
| <div> | |
| <div style={{ fontSize: 13, fontWeight: 600, color: "#f0eeff", marginBottom: 4 }}> | |
| {title} | |
| </div> | |
| <div style={{ fontSize: 13, color: "#6b6888", lineHeight: 1.65 }}>{body}</div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| const STEPS = [StepConcept, StepHow, StepPreview, StepTrust] | |
| export default function OnboardingView({ onDone }) { | |
| const [step, setStep] = useState(0) | |
| const StepComponent = STEPS[step] | |
| function finish() { | |
| // Persisting the "done" flag (scoped to the signed-in account) is | |
| // App.jsx's job — it's the one that knows which user is currently | |
| // signed in, this component doesn't need to. | |
| onDone() | |
| } | |
| return ( | |
| <div style={{ | |
| minHeight: "100vh", display: "flex", alignItems: "center", | |
| justifyContent: "center", padding: "32px 24px", background: "#0f1117", | |
| }}> | |
| <div style={{ maxWidth: 480, width: "100%" }}> | |
| {/* Step indicators */} | |
| <div style={{ display: "flex", justifyContent: "center", gap: 8, marginBottom: 44 }}> | |
| {STEPS.map((_, i) => ( | |
| <div key={i} style={{ | |
| height: 5, borderRadius: 3, | |
| width: i === step ? 28 : 8, | |
| background: i <= step ? G : "#1e2438", | |
| transition: "all 0.3s ease", | |
| }} /> | |
| ))} | |
| </div> | |
| <StepComponent /> | |
| {/* Navigation */} | |
| <div style={{ | |
| display: "flex", justifyContent: "space-between", | |
| alignItems: "center", marginTop: 40, | |
| }}> | |
| <button onClick={finish} style={{ | |
| background: "none", border: "none", cursor: "pointer", | |
| fontSize: 13, color: "#3a3a52", padding: 0, | |
| }}> | |
| Skip | |
| </button> | |
| {step > 0 && ( | |
| <button onClick={() => setStep(s => s - 1)} style={{ | |
| background: "none", border: "none", cursor: "pointer", | |
| fontSize: 13, color: "#6b6888", padding: 0, | |
| marginLeft: "auto", marginRight: 20, | |
| }}> | |
| ← Back | |
| </button> | |
| )} | |
| <button | |
| onClick={step < STEPS.length - 1 ? () => setStep(s => s + 1) : finish} | |
| style={{ | |
| padding: "12px 28px", background: G, color: "white", | |
| border: "none", borderRadius: 8, fontSize: 14, cursor: "pointer", | |
| fontWeight: 600, boxShadow: "0 0 24px rgba(29,78,216,0.25)", | |
| }} | |
| > | |
| {step < STEPS.length - 1 ? "Next →" : "Open the mirror →"} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |