536 lines
22 KiB
JavaScript
536 lines
22 KiB
JavaScript
// ============================================================
|
|
// auth-style-c.jsx — Glass aurora auth (marketing-flavoured).
|
|
// Vibrant gradient background, frosted card, soft floating
|
|
// chrome. Onboarding becomes a kept-it-light, swipey wizard.
|
|
// ============================================================
|
|
|
|
const cc = {
|
|
bg: "#08081a", text: "#ffffff",
|
|
subtext: "rgba(255,255,255,0.7)", muted: "rgba(255,255,255,0.5)",
|
|
glass: "rgba(255,255,255,0.06)",
|
|
glassStrong: "rgba(255,255,255,0.1)",
|
|
glassBorder: "rgba(255,255,255,0.14)",
|
|
brandA: "#7a78ff", brandB: "#b15bff", brandC: "#00e5b3",
|
|
};
|
|
const fontC = "'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif";
|
|
|
|
const IcnC = ({ 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 PC = {
|
|
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"/>,
|
|
spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3"/>,
|
|
upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5M12 3v12"/></>,
|
|
pen: <><path d="m12 19 7-7 3 3-7 7-3-1z"/><path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></>,
|
|
bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
|
|
workflow: <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h6a3 3 0 0 1 3 3v6"/></>,
|
|
};
|
|
|
|
const MarkC = ({ size = 22 }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<defs>
|
|
<linearGradient id={`mkc${size}`} x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="#7a78ff"/>
|
|
<stop offset="100%" stopColor="#b15bff"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M3 20 L12 4 L21 20 Z" fill={`url(#mkc${size})`}/>
|
|
</svg>
|
|
);
|
|
|
|
// Reusable aurora background — also used by onboarding
|
|
const AuroraBg = () => (
|
|
<>
|
|
<div style={{
|
|
position: "absolute", top: -250, left: -150, width: 700, height: 700,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(circle, ${cc.brandA} 0%, transparent 60%)`,
|
|
filter: "blur(100px)", opacity: 0.55, pointerEvents: "none",
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", top: 100, right: -200, width: 600, height: 600,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(circle, ${cc.brandB} 0%, transparent 60%)`,
|
|
filter: "blur(100px)", opacity: 0.5, pointerEvents: "none",
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", bottom: -200, left: "30%", width: 600, height: 600,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(circle, ${cc.brandC} 0%, transparent 60%)`,
|
|
filter: "blur(100px)", opacity: 0.35, pointerEvents: "none",
|
|
}}></div>
|
|
{/* Grain overlay */}
|
|
<div style={{
|
|
position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.6,
|
|
backgroundImage: `radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)`,
|
|
backgroundSize: "3px 3px",
|
|
}}></div>
|
|
</>
|
|
);
|
|
|
|
// Frosted glass top nav (the pill from the marketing nav, smaller)
|
|
const GlassTopNav = ({ right }) => (
|
|
<header style={{
|
|
position: "absolute", top: 22, left: "50%", transform: "translateX(-50%)",
|
|
zIndex: 10, width: "max-content", whiteSpace: "nowrap",
|
|
display: "flex", alignItems: "center", gap: 4,
|
|
padding: "8px 8px 8px 18px",
|
|
background: cc.glass, backdropFilter: "blur(24px)", WebkitBackdropFilter: "blur(24px)",
|
|
border: `1px solid ${cc.glassBorder}`, borderRadius: 999,
|
|
boxShadow: "0 18px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1)",
|
|
}}>
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
marginRight: 16, fontWeight: 600, fontSize: 14, color: "#fff",
|
|
}}>
|
|
<MarkC size={18} /> Lattice
|
|
</div>
|
|
{["Product", "Pricing", "Docs"].map(l => (
|
|
<button key={l} style={{
|
|
background: "transparent", border: "none", color: "#fff",
|
|
padding: "7px 12px", borderRadius: 999, fontSize: 13,
|
|
fontFamily: fontC, cursor: "pointer",
|
|
}}>{l}</button>
|
|
))}
|
|
<div style={{
|
|
width: 1, height: 18, background: cc.glassBorder, margin: "0 6px",
|
|
}}></div>
|
|
{right}
|
|
</header>
|
|
);
|
|
|
|
const CField = ({ label, value, placeholder, type, hint, optional, autofocus }) => (
|
|
<div style={{ marginBottom: 14 }}>
|
|
{label && (
|
|
<div style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "baseline",
|
|
fontSize: 12, fontWeight: 500, color: cc.subtext, marginBottom: 6,
|
|
}}>
|
|
<span>{label}</span>
|
|
{optional && <span style={{ color: cc.muted, fontWeight: 400 }}>optional</span>}
|
|
</div>
|
|
)}
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
padding: "11px 14px", borderRadius: 10,
|
|
background: cc.glass,
|
|
backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)",
|
|
border: `1px solid ${autofocus ? cc.brandA : cc.glassBorder}`,
|
|
boxShadow: autofocus ? `0 0 0 3px ${cc.brandA}33` : "none",
|
|
fontSize: 13, color: value ? cc.text : cc.muted,
|
|
}}>
|
|
<span style={{ flex: 1, letterSpacing: type === "password" ? "0.2em" : "0" }}>
|
|
{value || placeholder}
|
|
</span>
|
|
{type === "password" && <span style={{ color: cc.muted, display: "flex" }}><IcnC d={PC.eye} size={14}/></span>}
|
|
</div>
|
|
{hint && <div style={{ fontSize: 11, color: cc.muted, marginTop: 5 }}>{hint}</div>}
|
|
</div>
|
|
);
|
|
|
|
const CSocial = ({ children, glyph }) => (
|
|
<button style={{
|
|
flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
|
|
padding: "10px 14px", borderRadius: 10,
|
|
background: cc.glass, backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)",
|
|
border: `1px solid ${cc.glassBorder}`, color: cc.text, fontSize: 13,
|
|
fontFamily: fontC, fontWeight: 500, cursor: "pointer",
|
|
}}>{glyph}<span>{children}</span></button>
|
|
);
|
|
|
|
const CPrimary = ({ children, full = true }) => (
|
|
<button style={{
|
|
width: full ? "100%" : "auto", padding: "12px 22px", borderRadius: 999,
|
|
background: "#fff", color: "#08081a", border: "none",
|
|
fontSize: 13, fontWeight: 600, fontFamily: fontC, cursor: "pointer",
|
|
display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
|
|
}}>{children}</button>
|
|
);
|
|
|
|
const CSecondary = ({ children, full = false }) => (
|
|
<button style={{
|
|
width: full ? "100%" : "auto", padding: "12px 22px", borderRadius: 999,
|
|
background: cc.glass, color: cc.text,
|
|
backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)",
|
|
border: `1px solid ${cc.glassBorder}`,
|
|
fontSize: 13, fontWeight: 500, fontFamily: fontC, cursor: "pointer",
|
|
display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
|
|
}}>{children}</button>
|
|
);
|
|
|
|
// Centered glass card shell — used by sign-in & sign-up
|
|
const CCardShell = ({ children, eyebrow }) => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: cc.bg, color: cc.text,
|
|
fontFamily: fontC, position: "relative", overflow: "hidden",
|
|
}}>
|
|
<AuroraBg/>
|
|
<GlassTopNav right={
|
|
<>
|
|
<button style={{
|
|
background: "transparent", border: "none", color: cc.text,
|
|
padding: "7px 12px", borderRadius: 999, fontSize: 13,
|
|
fontFamily: fontC, cursor: "pointer",
|
|
}}>Sign in</button>
|
|
<button style={{
|
|
background: "#fff", color: "#08081a", border: "none",
|
|
padding: "7px 14px", borderRadius: 999, fontSize: 13, fontWeight: 600,
|
|
fontFamily: fontC, cursor: "pointer",
|
|
}}>Get Lattice →</button>
|
|
</>
|
|
} />
|
|
|
|
<main style={{
|
|
position: "relative", height: "100%",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
padding: 24,
|
|
}}>
|
|
<div style={{
|
|
width: 460, padding: "32px 36px 36px", borderRadius: 22,
|
|
background: cc.glass, backdropFilter: "blur(28px)", WebkitBackdropFilter: "blur(28px)",
|
|
border: `1px solid ${cc.glassBorder}`,
|
|
boxShadow: `0 30px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12)`,
|
|
}}>
|
|
{eyebrow && (
|
|
<div style={{
|
|
display: "inline-flex", alignItems: "center", gap: 8,
|
|
padding: "4px 12px 4px 4px", borderRadius: 999,
|
|
background: cc.glass, border: `1px solid ${cc.glassBorder}`,
|
|
fontSize: 11, color: cc.subtext, marginBottom: 16,
|
|
}}>
|
|
<span style={{
|
|
padding: "2px 8px", background: cc.brandA, color: "#fff",
|
|
borderRadius: 999, fontWeight: 600, fontSize: 10,
|
|
}}>BETA</span>
|
|
{eyebrow}
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer dots */}
|
|
<div style={{
|
|
position: "absolute", bottom: 22, left: "50%", transform: "translateX(-50%)",
|
|
fontSize: 11, color: cc.muted, zIndex: 5,
|
|
display: "flex", gap: 18,
|
|
}}>
|
|
<span>Privacy</span><span>Terms</span><span>Security</span>
|
|
<span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
|
|
<span style={{
|
|
width: 6, height: 6, borderRadius: "50%", background: cc.brandC,
|
|
boxShadow: `0 0 8px ${cc.brandC}`,
|
|
}}></span>
|
|
All systems normal
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const CSignIn = () => (
|
|
<CCardShell>
|
|
<h1 style={{
|
|
fontSize: 32, fontWeight: 500, margin: 0, letterSpacing: "-0.03em",
|
|
}}>Welcome back.</h1>
|
|
<p style={{ fontSize: 14, color: cc.subtext, margin: "10px 0 26px" }}>
|
|
Sign in and pick up where you left off.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
|
|
<CSocial glyph={<GoogleGlyph/>}>Google</CSocial>
|
|
<CSocial glyph={<MicrosoftGlyph/>}>Microsoft</CSocial>
|
|
<CSocial glyph={<span style={{ color: cc.text, display: "flex" }}><AppleGlyph/></span>}>Apple</CSocial>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 10,
|
|
fontSize: 11, color: cc.muted, margin: "0 0 18px",
|
|
}}>
|
|
<div style={{ flex: 1, height: 1, background: cc.glassBorder }}></div>
|
|
<span style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}>or with email</span>
|
|
<div style={{ flex: 1, height: 1, background: cc.glassBorder }}></div>
|
|
</div>
|
|
|
|
<CField 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: cc.subtext, marginBottom: 6,
|
|
}}>
|
|
<span>Password</span>
|
|
<span style={{ color: cc.text, cursor: "pointer", fontWeight: 500 }}>Forgot?</span>
|
|
</div>
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
padding: "11px 14px", borderRadius: 10,
|
|
background: cc.glass, backdropFilter: "blur(16px)",
|
|
border: `1px solid ${cc.glassBorder}`,
|
|
fontSize: 13, color: cc.text, letterSpacing: "0.2em",
|
|
}}>
|
|
<span style={{ flex: 1 }}>••••••••••</span>
|
|
<span style={{ color: cc.muted, display: "flex" }}><IcnC d={PC.eye} size={14}/></span>
|
|
</div>
|
|
</div>
|
|
|
|
<CPrimary>Sign in <IcnC d={PC.arrow} size={13}/></CPrimary>
|
|
|
|
<div style={{ fontSize: 12, color: cc.subtext, marginTop: 22, textAlign: "center" }}>
|
|
Don't have an account? <span style={{ color: cc.text, fontWeight: 500, cursor: "pointer" }}>
|
|
Sign up for free
|
|
</span>
|
|
</div>
|
|
</CCardShell>
|
|
);
|
|
|
|
const CSignUp = () => (
|
|
<CCardShell eyebrow="Lattice 4.0 · agents that draft for you">
|
|
<h1 style={{
|
|
fontSize: 32, fontWeight: 500, margin: 0, letterSpacing: "-0.03em",
|
|
}}>
|
|
Start your <span style={{
|
|
background: `linear-gradient(90deg, ${cc.brandB}, ${cc.brandA}, ${cc.brandC})`,
|
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
fontStyle: "italic", fontWeight: 400,
|
|
}}>workspace</span>.
|
|
</h1>
|
|
<p style={{ fontSize: 14, color: cc.subtext, margin: "10px 0 22px" }}>
|
|
Free for 10 people. No card. 60 seconds to set up.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
|
|
<CSocial glyph={<GoogleGlyph/>}>Google</CSocial>
|
|
<CSocial glyph={<MicrosoftGlyph/>}>Microsoft</CSocial>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 10,
|
|
fontSize: 11, color: cc.muted, margin: "0 0 16px",
|
|
}}>
|
|
<div style={{ flex: 1, height: 1, background: cc.glassBorder }}></div>
|
|
<span style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}>or with email</span>
|
|
<div style={{ flex: 1, height: 1, background: cc.glassBorder }}></div>
|
|
</div>
|
|
|
|
<CField label="Work email" value="mira@lattice.co" autofocus />
|
|
<CField label="Password" value="••••••••••" type="password"
|
|
hint="10+ chars · 1 number · 1 symbol — strong enough" />
|
|
|
|
<div style={{ display: "flex", alignItems: "flex-start", gap: 8, margin: "10px 0 18px" }}>
|
|
<div style={{
|
|
width: 16, height: 16, borderRadius: 4, marginTop: 1,
|
|
background: cc.brandA, color: "#fff",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
}}><IcnC d={PC.check} size={11} sw={2.4}/></div>
|
|
<span style={{ fontSize: 12, color: cc.subtext, lineHeight: 1.5 }}>
|
|
I agree to Lattice's <span style={{ color: cc.text, fontWeight: 500 }}>Terms</span> and{" "}
|
|
<span style={{ color: cc.text, fontWeight: 500 }}>Privacy Policy</span>.
|
|
</span>
|
|
</div>
|
|
|
|
<CPrimary>Create my workspace <IcnC d={PC.arrow} size={13}/></CPrimary>
|
|
|
|
<div style={{ fontSize: 12, color: cc.subtext, marginTop: 22, textAlign: "center" }}>
|
|
Already on Lattice? <span style={{ color: cc.text, fontWeight: 500, cursor: "pointer" }}>
|
|
Sign in
|
|
</span>
|
|
</div>
|
|
</CCardShell>
|
|
);
|
|
|
|
const COnboarding = () => {
|
|
// Glass invite-teammates step — a single big card on aurora bg.
|
|
const ProgressDot = ({ state }) => (
|
|
<div style={{
|
|
width: state === "active" ? 26 : 10, height: 10,
|
|
borderRadius: 999,
|
|
background: state === "done" ? "#fff" :
|
|
state === "active" ? cc.brandA : cc.glassStrong,
|
|
transition: "all .2s",
|
|
}}></div>
|
|
);
|
|
|
|
const EmailRow = ({ email, role, status, color }) => (
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 12,
|
|
padding: "10px 12px", borderRadius: 10,
|
|
background: cc.glass,
|
|
backdropFilter: "blur(12px)",
|
|
border: `1px solid ${cc.glassBorder}`,
|
|
}}>
|
|
<div style={{
|
|
width: 28, height: 28, borderRadius: "50%", background: color,
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
fontSize: 11, fontWeight: 600, color: "#3a2820",
|
|
}}>{email.slice(0, 2).toUpperCase()}</div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{
|
|
fontSize: 13, color: cc.text, whiteSpace: "nowrap",
|
|
overflow: "hidden", textOverflow: "ellipsis",
|
|
}}>{email}</div>
|
|
</div>
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 6, padding: "3px 9px",
|
|
borderRadius: 6, background: cc.glassStrong, fontSize: 11, color: cc.text,
|
|
}}>{role} <IcnC d={<path d="m6 9 6 6 6-6"/>} size={11}/></div>
|
|
{status && <span style={{
|
|
fontSize: 11, padding: "2px 8px", borderRadius: 999,
|
|
background: status === "queued" ? `${cc.brandA}33` : "#22c55e33",
|
|
color: status === "queued" ? cc.brandA : "#7aff66",
|
|
}}>{status}</span>}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: cc.bg, color: cc.text,
|
|
fontFamily: fontC, position: "relative", overflow: "hidden",
|
|
}}>
|
|
<AuroraBg/>
|
|
|
|
{/* Brand top-left + skip top-right */}
|
|
<header style={{
|
|
position: "absolute", top: 22, left: 32, zIndex: 10,
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
fontWeight: 600, fontSize: 14, color: cc.text,
|
|
}}>
|
|
<MarkC size={20} /> Lattice
|
|
</header>
|
|
<div style={{
|
|
position: "absolute", top: 26, right: 32, zIndex: 10,
|
|
fontSize: 12, color: cc.subtext,
|
|
}}>
|
|
Step 3 of 4 · <span style={{ color: cc.text, cursor: "pointer" }}>Skip</span>
|
|
</div>
|
|
|
|
<main style={{
|
|
position: "relative", height: "100%",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
padding: 24,
|
|
}}>
|
|
<div style={{
|
|
width: 620, padding: "36px 40px 32px", borderRadius: 26,
|
|
background: cc.glass, backdropFilter: "blur(28px)", WebkitBackdropFilter: "blur(28px)",
|
|
border: `1px solid ${cc.glassBorder}`,
|
|
boxShadow: `0 40px 100px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12)`,
|
|
}}>
|
|
{/* Progress dots */}
|
|
<div style={{
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
gap: 8, marginBottom: 26,
|
|
}}>
|
|
<ProgressDot state="done" />
|
|
<ProgressDot state="done" />
|
|
<ProgressDot state="active" />
|
|
<ProgressDot state="todo" />
|
|
</div>
|
|
|
|
<h1 style={{
|
|
fontSize: 34, fontWeight: 500, margin: 0, letterSpacing: "-0.03em",
|
|
textAlign: "center", textWrap: "balance",
|
|
}}>
|
|
Lattice gets <em style={{
|
|
fontStyle: "italic", fontWeight: 400,
|
|
background: `linear-gradient(90deg, ${cc.brandB}, ${cc.brandC})`,
|
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
}}>better</em> with your team.
|
|
</h1>
|
|
<p style={{
|
|
fontSize: 14, color: cc.subtext, margin: "12px 0 26px",
|
|
textAlign: "center", lineHeight: 1.5,
|
|
}}>
|
|
Invite the people you actually work with. You can always add more later.
|
|
</p>
|
|
|
|
{/* Invite input + role */}
|
|
<div style={{
|
|
display: "flex", gap: 8, marginBottom: 14,
|
|
}}>
|
|
<div style={{
|
|
flex: 1, display: "flex", alignItems: "center", gap: 8,
|
|
padding: "11px 14px", borderRadius: 12,
|
|
background: cc.glass,
|
|
backdropFilter: "blur(16px)",
|
|
border: `1px solid ${cc.brandA}`,
|
|
boxShadow: `0 0 0 3px ${cc.brandA}33`,
|
|
fontSize: 13, color: cc.subtext,
|
|
}}>
|
|
<span style={{ flex: 1 }}>name@company.com, separate with commas…</span>
|
|
</div>
|
|
<div style={{
|
|
display: "flex", alignItems: "center", gap: 6,
|
|
padding: "11px 14px", borderRadius: 12, fontSize: 13, color: cc.text,
|
|
background: cc.glassStrong,
|
|
backdropFilter: "blur(16px)",
|
|
border: `1px solid ${cc.glassBorder}`,
|
|
cursor: "pointer", whiteSpace: "nowrap",
|
|
}}>
|
|
Member <IcnC d={<path d="m6 9 6 6 6-6"/>} size={12}/>
|
|
</div>
|
|
<button style={{
|
|
padding: "0 18px", borderRadius: 12, background: "#fff",
|
|
color: "#08081a", border: "none", fontFamily: fontC,
|
|
fontSize: 13, fontWeight: 600, cursor: "pointer",
|
|
}}>Send</button>
|
|
</div>
|
|
|
|
{/* Already queued list */}
|
|
<div style={{
|
|
fontSize: 11, color: cc.muted, letterSpacing: "0.08em",
|
|
textTransform: "uppercase", fontWeight: 500, margin: "12px 0 8px",
|
|
}}>To be invited · 3</div>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
|
<EmailRow email="theo@lattice.co" role="Admin" status="queued" color="#c8e8a8" />
|
|
<EmailRow email="devi@lattice.co" role="Admin" status="queued" color="#a8c8e8" />
|
|
<EmailRow email="sun@lattice.co" role="Member" status="queued" color="#e8a87c" />
|
|
</div>
|
|
|
|
{/* Shareable link */}
|
|
<div style={{
|
|
marginTop: 18, padding: "12px 14px", borderRadius: 12,
|
|
background: cc.glass,
|
|
backdropFilter: "blur(16px)",
|
|
border: `1px dashed ${cc.glassBorder}`,
|
|
display: "flex", alignItems: "center", gap: 12,
|
|
}}>
|
|
<div style={{
|
|
width: 30, height: 30, borderRadius: 8,
|
|
background: cc.glassStrong,
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
color: cc.brandA,
|
|
}}><IcnC d={PC.workflow} size={14}/></div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontSize: 13, fontWeight: 500 }}>Or share an invite link</div>
|
|
<div style={{
|
|
fontSize: 12, color: cc.subtext, fontFamily: "monospace",
|
|
whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
|
|
}}>lattice.app/join/mira-reyes-7f4ac…</div>
|
|
</div>
|
|
<button style={{
|
|
padding: "6px 12px", borderRadius: 999, fontSize: 12,
|
|
fontFamily: fontC, background: cc.glassStrong,
|
|
border: `1px solid ${cc.glassBorder}`, color: cc.text, cursor: "pointer",
|
|
}}>Copy link</button>
|
|
</div>
|
|
|
|
{/* Footer buttons */}
|
|
<div style={{
|
|
display: "flex", justifyContent: "space-between", marginTop: 28, alignItems: "center",
|
|
}}>
|
|
<button style={{
|
|
background: "transparent", border: "none", color: cc.subtext,
|
|
fontSize: 13, fontFamily: fontC, cursor: "pointer", padding: 0,
|
|
}}>I'll do this later</button>
|
|
<CPrimary full={false}>Send invites & continue <IcnC d={PC.arrow} size={13}/></CPrimary>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Object.assign(window, { CSignIn, CSignUp, COnboarding });
|