549 lines
22 KiB
JavaScript
549 lines
22 KiB
JavaScript
// ============================================================
|
|
// auth-style-b.jsx — Dark split-hero auth (Vercel / Stripe school).
|
|
// Two-column: marketing/storytelling on the left, form on the right.
|
|
// Inverts gracefully for onboarding (single dark surface, full width).
|
|
// ============================================================
|
|
|
|
const b = {
|
|
bg: "#0a0a0a", left: "#0f0f14",
|
|
surface: "#101015", surface2: "#16161d",
|
|
border: "#1f1f25", borderStrong: "#2a2a32",
|
|
text: "#fafafa", subtext: "#a8a8b0", muted: "#6a6a72",
|
|
accent: "#ffffff", accentText: "#0a0a0a",
|
|
brandA: "#5e5cff", brandB: "#b15bff",
|
|
};
|
|
const fontB = "'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif";
|
|
|
|
// Local icon helper (kept independent of other auth files)
|
|
const IcnB = ({ d, size = 16, sw = 1.6 }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" strokeWidth={sw}
|
|
strokeLinecap="round" strokeLinejoin="round">{d}</svg>
|
|
);
|
|
const PB = {
|
|
check: <path d="M5 12l5 5L20 7"/>,
|
|
eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
|
|
arrow: <path d="M5 12h14M13 5l7 7-7 7"/>,
|
|
bolt: <path d="m13 2-9 13h7l-1 7 9-13h-7z"/>,
|
|
spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3"/>,
|
|
star: <path d="m12 3 2.6 6.2 6.7.5-5.1 4.4 1.6 6.6L12 17.3 6.2 20.7l1.6-6.6L2.7 9.7l6.7-.5z"/>,
|
|
};
|
|
|
|
const MarkB = ({ size = 22 }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<defs>
|
|
<linearGradient id={`mkb${size}`} x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="#6e6cff"/>
|
|
<stop offset="100%" stopColor="#b15bff"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M3 20 L12 4 L21 20 Z" fill={`url(#mkb${size})`}/>
|
|
</svg>
|
|
);
|
|
|
|
const BField = ({ label, value, placeholder, type, icon, hint, optional, autofocus }) => (
|
|
<div style={{ marginBottom: 14 }}>
|
|
{label && (
|
|
<div style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "baseline",
|
|
fontSize: 12, fontWeight: 500, color: b.subtext, marginBottom: 6,
|
|
}}>
|
|
<span>{label}</span>
|
|
{optional && <span style={{ color: b.muted, fontWeight: 400 }}>optional</span>}
|
|
</div>
|
|
)}
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
padding: "10px 12px", borderRadius: 8,
|
|
background: b.surface2,
|
|
border: `1px solid ${autofocus ? b.brandA : b.border}`,
|
|
boxShadow: autofocus ? `0 0 0 3px ${b.brandA}33` : "none",
|
|
fontSize: 13, color: value ? b.text : b.muted,
|
|
}}>
|
|
{icon && <span style={{ color: b.muted, display: "flex" }}>{icon}</span>}
|
|
<span style={{ flex: 1, letterSpacing: type === "password" ? "0.2em" : "0" }}>
|
|
{value || placeholder}
|
|
</span>
|
|
{type === "password" && <span style={{ color: b.muted, display: "flex" }}><IcnB d={PB.eye} size={14}/></span>}
|
|
</div>
|
|
{hint && <div style={{ fontSize: 11, color: b.muted, marginTop: 5 }}>{hint}</div>}
|
|
</div>
|
|
);
|
|
|
|
const BSocial = ({ children, glyph }) => (
|
|
<button style={{
|
|
flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
|
|
padding: "10px 14px", borderRadius: 8, background: b.surface2,
|
|
border: `1px solid ${b.border}`, color: b.text, fontSize: 13,
|
|
fontFamily: fontB, fontWeight: 500, cursor: "pointer",
|
|
}}>{glyph}<span>{children}</span></button>
|
|
);
|
|
|
|
const BPrimary = ({ children, full = true }) => (
|
|
<button style={{
|
|
width: full ? "100%" : "auto",
|
|
padding: "11px 18px", borderRadius: 8,
|
|
background: b.accent, color: b.accentText, border: "none",
|
|
fontSize: 13, fontWeight: 600, fontFamily: fontB, cursor: "pointer",
|
|
display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
|
|
}}>{children}</button>
|
|
);
|
|
|
|
// LEFT hero panel — short storytelling
|
|
const HeroPanel = ({ headline, sub, badge }) => (
|
|
<div style={{
|
|
background: b.left, color: b.text, padding: "32px 44px 36px",
|
|
display: "flex", flexDirection: "column", height: "100%",
|
|
position: "relative", overflow: "hidden",
|
|
borderRight: `1px solid ${b.border}`,
|
|
}}>
|
|
{/* Decorative grid + glow */}
|
|
<div style={{
|
|
position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.5,
|
|
backgroundImage: `linear-gradient(${b.border} 1px, transparent 1px),
|
|
linear-gradient(90deg, ${b.border} 1px, transparent 1px)`,
|
|
backgroundSize: "40px 40px",
|
|
maskImage: "radial-gradient(circle at 50% 30%, #000 40%, transparent 80%)",
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", top: -180, left: -120, width: 540, height: 540,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(circle, ${b.brandA}40, transparent 60%)`,
|
|
filter: "blur(60px)",
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", bottom: -200, right: -120, width: 500, height: 500,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(circle, ${b.brandB}40, transparent 60%)`,
|
|
filter: "blur(60px)",
|
|
}}></div>
|
|
|
|
{/* Brand */}
|
|
<div style={{
|
|
position: "relative", display: "flex", alignItems: "center", gap: 10,
|
|
fontWeight: 600, fontSize: 16,
|
|
}}>
|
|
<MarkB size={22} />
|
|
Lattice
|
|
</div>
|
|
|
|
{/* Mid */}
|
|
<div style={{ position: "relative", marginTop: "auto" }}>
|
|
{badge && (
|
|
<div style={{
|
|
display: "inline-flex", alignItems: "center", gap: 8,
|
|
padding: "4px 12px 4px 4px", borderRadius: 999,
|
|
background: "#ffffff08", border: "1px solid #ffffff14",
|
|
fontSize: 11, color: b.subtext, marginBottom: 22,
|
|
}}>
|
|
<span style={{
|
|
padding: "2px 8px", background: b.brandA, color: "#fff",
|
|
borderRadius: 999, fontWeight: 600, fontSize: 10,
|
|
}}>NEW</span>
|
|
{badge}
|
|
</div>
|
|
)}
|
|
<h2 style={{
|
|
fontSize: 38, lineHeight: 1.05, margin: 0, letterSpacing: "-0.03em",
|
|
fontWeight: 500, textWrap: "balance", maxWidth: 360,
|
|
}}>{headline}</h2>
|
|
<p style={{ fontSize: 14, color: b.subtext, marginTop: 14, lineHeight: 1.5, maxWidth: 340 }}>
|
|
{sub}
|
|
</p>
|
|
|
|
{/* Trust row */}
|
|
<div style={{
|
|
marginTop: 32, paddingTop: 22, borderTop: `1px solid ${b.border}`,
|
|
}}>
|
|
<div style={{
|
|
fontSize: 11, color: b.muted, letterSpacing: "0.1em",
|
|
textTransform: "uppercase", fontWeight: 500, marginBottom: 12,
|
|
}}>Used by teams at</div>
|
|
<div style={{
|
|
display: "flex", gap: 22, alignItems: "center",
|
|
fontWeight: 600, fontSize: 15, color: b.subtext,
|
|
}}>
|
|
<span>Halcyon</span><span>·</span><span>Kestrel</span>
|
|
<span>·</span><span>Mossbank</span><span>·</span><span>Verra</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom quote */}
|
|
<div style={{
|
|
position: "relative", marginTop: 28, padding: "16px 18px",
|
|
borderRadius: 12, background: "#ffffff06",
|
|
border: `1px solid ${b.border}`,
|
|
}}>
|
|
<p style={{ fontSize: 13, color: b.text, margin: 0, lineHeight: 1.5 }}>
|
|
"Replaced three tools in our first week. Lattice is what every
|
|
CRM should have been."
|
|
</p>
|
|
<div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 10 }}>
|
|
<div style={{
|
|
width: 26, height: 26, borderRadius: "50%", background: "#a8c8e8",
|
|
fontSize: 11, fontWeight: 600, color: "#1a3a5e",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
}}>DP</div>
|
|
<div style={{ fontSize: 12 }}>
|
|
<div style={{ fontWeight: 500 }}>Devi Patel</div>
|
|
<div style={{ color: b.muted, fontSize: 11 }}>Head of Sales, Halcyon</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// 2-col shell: hero on left, form on right
|
|
const BSplitShell = ({ hero, children }) => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: b.bg,
|
|
color: b.text, fontFamily: fontB,
|
|
display: "grid", gridTemplateColumns: "1fr 1fr",
|
|
}}>
|
|
{hero}
|
|
<div style={{
|
|
display: "flex", flexDirection: "column", padding: "32px 56px",
|
|
position: "relative",
|
|
}}>
|
|
<div style={{
|
|
display: "flex", justifyContent: "flex-end", fontSize: 13, color: b.subtext,
|
|
}}>
|
|
<span>Need help? <span style={{ color: b.text, fontWeight: 500 }}>support</span></span>
|
|
</div>
|
|
<div style={{
|
|
flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
|
|
}}>
|
|
<div style={{ width: 380 }}>{children}</div>
|
|
</div>
|
|
<div style={{
|
|
display: "flex", gap: 18, fontSize: 11, color: b.muted, justifyContent: "flex-end",
|
|
}}>
|
|
<span>Privacy</span><span>Terms</span><span>Security</span>
|
|
<span>v4.2.1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const BSignIn = () => (
|
|
<BSplitShell hero={
|
|
<HeroPanel
|
|
badge="Lattice 4.0 · agents that draft for you"
|
|
headline="The workspace where good ideas compound."
|
|
sub="One luminous surface for docs, canvases, contacts and pipelines. Built by people tired of switching tabs."
|
|
/>}>
|
|
<h1 style={{ fontSize: 26, fontWeight: 600, margin: 0, letterSpacing: "-0.02em" }}>
|
|
Sign in to Lattice
|
|
</h1>
|
|
<p style={{ fontSize: 13, color: b.subtext, margin: "6px 0 24px" }}>
|
|
Welcome back. Pick how you'd like to continue.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 18 }}>
|
|
<BSocial glyph={<GoogleGlyph/>}>Continue with Google</BSocial>
|
|
<BSocial glyph={<MicrosoftGlyph/>}>Continue with Microsoft</BSocial>
|
|
<BSocial glyph={<span style={{ color: b.text, display: "flex" }}><AppleGlyph/></span>}>Continue with Apple</BSocial>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 10,
|
|
fontSize: 11, color: b.muted, margin: "0 0 18px",
|
|
}}>
|
|
<div style={{ flex: 1, height: 1, background: b.border }}></div>
|
|
<span style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}>or with email</span>
|
|
<div style={{ flex: 1, height: 1, background: b.border }}></div>
|
|
</div>
|
|
|
|
<BField label="Email" value="mira@lattice.co" autofocus />
|
|
<div style={{ marginBottom: 18 }}>
|
|
<div style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "baseline",
|
|
fontSize: 12, fontWeight: 500, color: b.subtext, marginBottom: 6,
|
|
}}>
|
|
<span>Password</span>
|
|
<span style={{ color: b.text, cursor: "pointer", fontWeight: 500 }}>Forgot?</span>
|
|
</div>
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
padding: "10px 12px", borderRadius: 8,
|
|
background: b.surface2, border: `1px solid ${b.border}`,
|
|
fontSize: 13, color: b.text, letterSpacing: "0.2em",
|
|
}}>
|
|
<span style={{ flex: 1 }}>••••••••••</span>
|
|
<span style={{ color: b.muted, display: "flex" }}><IcnB d={PB.eye} size={14}/></span>
|
|
</div>
|
|
</div>
|
|
|
|
<BPrimary>Sign in <IcnB d={PB.arrow} size={13}/></BPrimary>
|
|
|
|
<div style={{
|
|
marginTop: 22, padding: "10px 14px", borderRadius: 8,
|
|
background: b.surface2, border: `1px solid ${b.border}`,
|
|
fontSize: 12, color: b.subtext, display: "flex",
|
|
alignItems: "center", gap: 10,
|
|
}}>
|
|
<IcnB d={PB.bolt} size={14}/>
|
|
<span style={{ flex: 1 }}>SAML / SSO for your company?</span>
|
|
<span style={{ color: b.text, fontWeight: 500, cursor: "pointer" }}>Use SSO →</span>
|
|
</div>
|
|
|
|
<div style={{ fontSize: 12, color: b.subtext, marginTop: 22, textAlign: "center" }}>
|
|
New here? <span style={{ color: b.text, fontWeight: 500, cursor: "pointer" }}>
|
|
Create an account
|
|
</span>
|
|
</div>
|
|
</BSplitShell>
|
|
);
|
|
|
|
const BSignUp = () => (
|
|
<BSplitShell hero={
|
|
<HeroPanel
|
|
headline="Start a Lattice workspace in 30 seconds."
|
|
sub="Free for up to 10 people. No card required. SSO and SCIM on the Pro plan."
|
|
/>}>
|
|
<h1 style={{ fontSize: 26, fontWeight: 600, margin: 0, letterSpacing: "-0.02em" }}>
|
|
Create your account
|
|
</h1>
|
|
<p style={{ fontSize: 13, color: b.subtext, margin: "6px 0 24px" }}>
|
|
You'll set up your workspace in the next step.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 18 }}>
|
|
<BSocial glyph={<GoogleGlyph/>}>Continue with Google</BSocial>
|
|
<BSocial glyph={<MicrosoftGlyph/>}>Continue with Microsoft</BSocial>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 10,
|
|
fontSize: 11, color: b.muted, margin: "0 0 18px",
|
|
}}>
|
|
<div style={{ flex: 1, height: 1, background: b.border }}></div>
|
|
<span style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}>or with email</span>
|
|
<div style={{ flex: 1, height: 1, background: b.border }}></div>
|
|
</div>
|
|
|
|
<BField label="Full name" value="Mira Reyes" autofocus />
|
|
<BField label="Work email" value="mira@lattice.co"
|
|
hint="We'll send a 6-digit code to confirm." />
|
|
<BField label="Password" value="••••••••••" type="password"
|
|
hint="At least 10 chars · 1 number · 1 symbol." />
|
|
|
|
<div style={{ display: "flex", alignItems: "flex-start", gap: 8, margin: "8px 0 18px" }}>
|
|
<div style={{
|
|
width: 14, height: 14, borderRadius: 3, marginTop: 2,
|
|
background: b.surface2, border: `1px solid ${b.borderStrong}`,
|
|
}}></div>
|
|
<span style={{ fontSize: 12, color: b.subtext, lineHeight: 1.5 }}>
|
|
I agree to the <span style={{ color: b.text, fontWeight: 500 }}>Terms</span> and{" "}
|
|
<span style={{ color: b.text, fontWeight: 500 }}>Privacy Policy</span>.
|
|
</span>
|
|
</div>
|
|
|
|
<BPrimary>Create account <IcnB d={PB.arrow} size={13}/></BPrimary>
|
|
|
|
<div style={{ fontSize: 12, color: b.subtext, marginTop: 22, textAlign: "center" }}>
|
|
Already have an account? <span style={{ color: b.text, fontWeight: 500, cursor: "pointer" }}>
|
|
Sign in
|
|
</span>
|
|
</div>
|
|
</BSplitShell>
|
|
);
|
|
|
|
const BOnboarding = () => {
|
|
// Full-bleed dark onboarding screen (workspace customization step)
|
|
const Step = ({ n, label, state }) => (
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
<div style={{
|
|
width: 22, height: 22, borderRadius: "50%",
|
|
background: state === "done" ? b.brandA : state === "active" ? b.text : "transparent",
|
|
color: state === "active" ? b.bg : state === "done" ? "#fff" : b.muted,
|
|
border: state === "todo" ? `1px solid ${b.borderStrong}` : "none",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
fontSize: 11, fontWeight: 600,
|
|
}}>{state === "done" ? <IcnB d={PB.check} size={12} sw={2.4}/> : n}</div>
|
|
<div style={{
|
|
fontSize: 12, color: state === "todo" ? b.muted : b.text, whiteSpace: "nowrap",
|
|
}}>{label}</div>
|
|
</div>
|
|
);
|
|
|
|
const ColorSwatch = ({ color, selected }) => (
|
|
<div style={{
|
|
width: 36, height: 36, borderRadius: 10, background: color, cursor: "pointer",
|
|
boxShadow: selected ? `0 0 0 2px ${b.bg}, 0 0 0 4px ${b.text}` : "none",
|
|
}}></div>
|
|
);
|
|
|
|
const Template = ({ title, sub, icon, selected, color }) => (
|
|
<div style={{
|
|
padding: 18, borderRadius: 12, cursor: "pointer", textAlign: "left",
|
|
border: selected ? `1.5px solid ${color}` : `1px solid ${b.border}`,
|
|
background: selected ? `${color}10` : b.surface,
|
|
position: "relative", overflow: "hidden",
|
|
}}>
|
|
<div style={{
|
|
width: 32, height: 32, borderRadius: 8, marginBottom: 12,
|
|
background: selected ? color : "#ffffff10",
|
|
color: selected ? "#fff" : b.subtext,
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
}}>{icon}</div>
|
|
<div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{title}</div>
|
|
<div style={{ fontSize: 12, color: b.muted, lineHeight: 1.4 }}>{sub}</div>
|
|
{selected && (
|
|
<div style={{
|
|
position: "absolute", top: 14, right: 14,
|
|
width: 18, height: 18, borderRadius: "50%", background: color,
|
|
color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
|
|
}}><IcnB d={PB.check} size={11} sw={2.4}/></div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: b.bg, color: b.text,
|
|
fontFamily: fontB, display: "grid", gridTemplateRows: "auto 1fr auto",
|
|
position: "relative", overflow: "hidden",
|
|
}}>
|
|
{/* Decorative aurora */}
|
|
<div style={{
|
|
position: "absolute", top: -200, right: -150, width: 600, height: 600,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(circle, ${b.brandA}33, transparent 60%)`,
|
|
filter: "blur(80px)", pointerEvents: "none",
|
|
}}></div>
|
|
|
|
{/* Top stepper bar */}
|
|
<header style={{
|
|
padding: "20px 56px", display: "flex", alignItems: "center", gap: 14,
|
|
borderBottom: `1px solid ${b.border}`, background: "#0a0a0d", position: "relative",
|
|
}}>
|
|
<MarkB size={22} />
|
|
<span style={{ fontWeight: 600, fontSize: 14 }}>Lattice</span>
|
|
<div style={{ width: 1, height: 18, background: b.border, margin: "0 12px" }}></div>
|
|
|
|
<div style={{ display: "flex", alignItems: "center", gap: 14, flex: 1 }}>
|
|
<Step n="1" label="Account" state="done" />
|
|
<div style={{ width: 32, height: 1, background: b.border }}></div>
|
|
<Step n="2" label="Workspace" state="done" />
|
|
<div style={{ width: 32, height: 1, background: b.border }}></div>
|
|
<Step n="3" label="Personalise" state="active" />
|
|
<div style={{ width: 32, height: 1, background: b.border }}></div>
|
|
<Step n="4" label="Invite" state="todo" />
|
|
<div style={{ width: 32, height: 1, background: b.border }}></div>
|
|
<Step n="5" label="Import" state="todo" />
|
|
</div>
|
|
|
|
<button style={{
|
|
background: "transparent", border: "none", color: b.subtext,
|
|
fontSize: 12, fontFamily: fontB, cursor: "pointer",
|
|
}}>Skip setup →</button>
|
|
</header>
|
|
|
|
<main style={{
|
|
padding: "44px 64px 24px", position: "relative", overflowY: "auto",
|
|
display: "flex", flexDirection: "column", alignItems: "center",
|
|
}}>
|
|
<div style={{
|
|
fontSize: 11, color: b.muted, letterSpacing: "0.12em",
|
|
textTransform: "uppercase", fontWeight: 500, marginBottom: 12,
|
|
}}>Step 3 of 5 · Personalise</div>
|
|
<h1 style={{
|
|
fontSize: 40, fontWeight: 500, margin: 0, letterSpacing: "-0.03em",
|
|
textAlign: "center", textWrap: "balance",
|
|
}}>
|
|
Pick a template to get going.
|
|
</h1>
|
|
<p style={{
|
|
fontSize: 14, color: b.subtext, margin: "12px 0 36px",
|
|
textAlign: "center", maxWidth: 540, lineHeight: 1.5,
|
|
}}>
|
|
We'll pre-fill your workspace with the right objects, views and
|
|
fields. Everything is editable later.
|
|
</p>
|
|
|
|
{/* Template grid */}
|
|
<div style={{
|
|
display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14,
|
|
width: "100%", maxWidth: 1080,
|
|
}}>
|
|
<Template title="Sales CRM" sub="Pipeline, contacts, deals, activity" icon={<IcnB d={PB.bolt} size={16}/>} selected color="#5e5cff" />
|
|
<Template title="Operations" sub="Vendors, suppliers, contracts" icon={<IcnB d={PB.spark} size={16}/>} color="#22c55e" />
|
|
<Template title="Recruiting" sub="Candidates, roles, interview loops" icon={<IcnB d={PB.star} size={16}/>} color="#f6c560" />
|
|
<Template title="Blank workspace" sub="Start from zero — I'll define my own objects" icon={<IcnB d={PB.spark} size={16}/>} color="#b15bff" />
|
|
</div>
|
|
|
|
{/* Theme + accent strip */}
|
|
<div style={{
|
|
marginTop: 32, padding: "20px 24px", borderRadius: 14,
|
|
background: b.surface, border: `1px solid ${b.border}`,
|
|
width: "100%", maxWidth: 1080,
|
|
display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32,
|
|
}}>
|
|
<div>
|
|
<div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Theme</div>
|
|
<div style={{ fontSize: 12, color: b.muted, marginBottom: 14 }}>
|
|
Light, dark, or follow the system.
|
|
</div>
|
|
<div style={{ display: "flex", gap: 8 }}>
|
|
{[
|
|
["Light", "#fafaf9", "#111"],
|
|
["Dark", "#0f0f14", "#fafafa"],
|
|
["System", "linear-gradient(135deg, #fafaf9 50%, #0f0f14 50%)", "#888"],
|
|
].map(([n, bg, ink], i) => (
|
|
<div key={n} style={{
|
|
flex: 1, padding: 4, borderRadius: 10, cursor: "pointer",
|
|
border: i === 1 ? `1.5px solid ${b.brandA}` : `1px solid ${b.border}`,
|
|
}}>
|
|
<div style={{
|
|
height: 56, borderRadius: 6, background: bg,
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
color: ink, fontSize: 11, fontWeight: 500,
|
|
}}>{n}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Accent</div>
|
|
<div style={{ fontSize: 12, color: b.muted, marginBottom: 14 }}>
|
|
The color of your CTAs, links and focus rings.
|
|
</div>
|
|
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
|
|
<ColorSwatch color="#5e5cff" selected />
|
|
<ColorSwatch color="#22c55e" />
|
|
<ColorSwatch color="#f6c560" />
|
|
<ColorSwatch color="#ff5b6b" />
|
|
<ColorSwatch color="#b15bff" />
|
|
<ColorSwatch color="#06b6d4" />
|
|
<ColorSwatch color="#fafafa" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer style={{
|
|
padding: "16px 56px", display: "flex", justifyContent: "space-between",
|
|
alignItems: "center", borderTop: `1px solid ${b.border}`,
|
|
background: "#0a0a0d", position: "relative",
|
|
}}>
|
|
<button style={{
|
|
background: "transparent", border: `1px solid ${b.border}`, color: b.text,
|
|
padding: "9px 16px", borderRadius: 8, fontSize: 13, fontFamily: fontB, cursor: "pointer",
|
|
}}>← Back</button>
|
|
<span style={{ fontSize: 12, color: b.muted }}>
|
|
Press <code style={{
|
|
background: b.surface2, padding: "1px 6px", borderRadius: 3,
|
|
border: `1px solid ${b.border}`, fontFamily: "monospace",
|
|
}}>⌘ + Enter</code> to continue
|
|
</span>
|
|
<BPrimary full={false}>Continue <IcnB d={PB.arrow} size={13}/></BPrimary>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Object.assign(window, { BSignIn, BSignUp, BOnboarding });
|