design: remove trust bullet strip from signup, make 🇨🇦 Built in Canada single larger centered footer below card
This commit is contained in:
@@ -72,10 +72,6 @@ export default function AuthScreen({
|
||||
signIn("google", { callbackUrl: cb });
|
||||
};
|
||||
|
||||
const trust = isSignup
|
||||
? ["No credit card", "No homework", "🇨🇦 Built in Canada"]
|
||||
: ["Built in Canada", "Your data stays safe", "No homework"];
|
||||
|
||||
return (
|
||||
<div className="vibn-auth">
|
||||
<div className="page">
|
||||
@@ -135,7 +131,7 @@ export default function AuthScreen({
|
||||
<h1 className="auth-title">
|
||||
{isSignup ? (
|
||||
<>
|
||||
Create your <em>workspace</em>.
|
||||
Create your <em>account</em>.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@@ -144,9 +140,7 @@ export default function AuthScreen({
|
||||
)}
|
||||
</h1>
|
||||
<p className="auth-sub">
|
||||
{isSignup
|
||||
? "Set up your account with an email and password — you'll be building in seconds."
|
||||
: "Pick up right where you left off."}
|
||||
{isSignup ? null : "Pick up right where you left off."}
|
||||
</p>
|
||||
|
||||
<form className="auth-form" onSubmit={handleSubmit} noValidate>
|
||||
@@ -215,11 +209,11 @@ export default function AuthScreen({
|
||||
{submitting ? (
|
||||
<>
|
||||
<span className="auth-spinner" />{" "}
|
||||
{isSignup ? "Creating your workspace…" : "Signing in…"}
|
||||
{isSignup ? "Creating your account…" : "Signing in…"}
|
||||
</>
|
||||
) : isSignup ? (
|
||||
<>
|
||||
Create my workspace <Arrow size={13} />
|
||||
Create my account <Arrow size={13} />
|
||||
</>
|
||||
) : (
|
||||
<>Sign in</>
|
||||
@@ -270,7 +264,7 @@ export default function AuthScreen({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TrustStrip items={trust} />
|
||||
<div className="auth-built-canada">🇨🇦 Built in Canada</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -318,22 +312,6 @@ function Glows() {
|
||||
);
|
||||
}
|
||||
|
||||
function TrustStrip({ items }: { items: string[] }) {
|
||||
return (
|
||||
<div className="auth-trust">
|
||||
{items.map((item, i) => (
|
||||
<span
|
||||
key={item}
|
||||
style={{ display: "inline-flex", alignItems: "center", gap: 14 }}
|
||||
>
|
||||
{i > 0 && <span className="sep">·</span>}
|
||||
<span>{item}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Arrow({ size = 14 }: { size?: number }) {
|
||||
return (
|
||||
<svg
|
||||
|
||||
@@ -448,20 +448,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Trust strip */
|
||||
.vibn-auth .auth-trust {
|
||||
/* Single Centered Built in Canada Footer */
|
||||
.vibn-auth .auth-built-canada {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.vibn-auth .auth-trust .sep {
|
||||
color: var(--fg-faint);
|
||||
opacity: 0.5;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user