design(auth): apply new marketing site styling to sign in page
This commit is contained in:
@@ -5,8 +5,15 @@ import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, Suspense } from "react";
|
||||
import NextAuthComponent from "@/app/components/NextAuthComponent";
|
||||
|
||||
import "../../styles/new-site.css";
|
||||
|
||||
function deriveWorkspace(email: string): string {
|
||||
return email.split("@")[0].toLowerCase().replace(/[^a-z0-9]+/g, "-") + "-account";
|
||||
return (
|
||||
email
|
||||
.split("@")[0]
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-") + "-account"
|
||||
);
|
||||
}
|
||||
|
||||
function AuthPageInner() {
|
||||
@@ -32,7 +39,19 @@ function AuthPageInner() {
|
||||
);
|
||||
}
|
||||
|
||||
return <NextAuthComponent />;
|
||||
return (
|
||||
<div
|
||||
className="new-site-wrapper"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: "100vh",
|
||||
}}
|
||||
>
|
||||
<NextAuthComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AuthPage() {
|
||||
|
||||
@@ -146,36 +146,103 @@ function NextAuthForm() {
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
padding: "40px 32px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "24px",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<h1
|
||||
<div className="auth-card card">
|
||||
<style>{`
|
||||
.auth-card {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%; max-width: 440px;
|
||||
padding: 36px clamp(24px, 4vw, 40px) 32px;
|
||||
background: linear-gradient(180deg, oklch(0.20 0.009 60 / 0.85), oklch(0.17 0.008 60 / 0.85));
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 22px;
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow:
|
||||
0 30px 80px -20px oklch(0 0 0 / 0.7),
|
||||
0 0 80px -30px var(--accent-glow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.auth-card::before {
|
||||
content: "";
|
||||
position: absolute; left: 0; right: 0; top: 0; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
opacity: .6;
|
||||
}
|
||||
.auth-eye {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
color: var(--fg-mute);
|
||||
}
|
||||
.auth-eye::before {
|
||||
content: ""; width: 5px; height: 5px; border-radius: 50%;
|
||||
background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
|
||||
}
|
||||
.auth-title {
|
||||
margin-top: 14px;
|
||||
font-size: clamp(26px, 3.4vw, 34px);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1.1;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.auth-title em {
|
||||
font-style: normal;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 30px var(--accent-glow);
|
||||
}
|
||||
.auth-sub {
|
||||
margin-top: 10px;
|
||||
color: var(--fg-mute);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.5;
|
||||
text-wrap: balance;
|
||||
}
|
||||
`}</style>
|
||||
{/* Glows */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
overflow: "hidden",
|
||||
pointerEvents: "none",
|
||||
borderRadius: "inherit",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
fontWeight: 600,
|
||||
letterSpacing: "-0.02em",
|
||||
color: "var(--fg)",
|
||||
marginBottom: "8px",
|
||||
position: "absolute",
|
||||
top: "-20%",
|
||||
left: "-10%",
|
||||
width: "50%",
|
||||
height: "50%",
|
||||
background: "var(--accent)",
|
||||
filter: "blur(80px)",
|
||||
opacity: 0.15,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "-20%",
|
||||
right: "-10%",
|
||||
width: "50%",
|
||||
height: "50%",
|
||||
background: "oklch(0.65 0.20 18)",
|
||||
filter: "blur(80px)",
|
||||
opacity: 0.15,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ position: "relative", zIndex: 2 }}>
|
||||
<div className="auth-eye">Welcome back</div>
|
||||
<h1 className="auth-title">
|
||||
Sign in and <em>keep building</em>.
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "15px",
|
||||
color: "var(--fg-dim)",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
<p className="auth-sub">{subtitle}</p>
|
||||
</div>
|
||||
|
||||
{errorHint && (
|
||||
@@ -197,13 +264,35 @@ function NextAuthForm() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost"
|
||||
className="auth-btn-ghost"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "48px",
|
||||
gap: "10px",
|
||||
height: "50px",
|
||||
padding: "0 22px",
|
||||
borderRadius: "999px",
|
||||
fontWeight: 500,
|
||||
fontSize: "15px",
|
||||
gap: "12px",
|
||||
transition:
|
||||
"transform .12s, box-shadow .2s, background .2s, color .15s",
|
||||
whiteSpace: "nowrap",
|
||||
width: "100%",
|
||||
background: "oklch(0.20 0.009 60 / 0.6)",
|
||||
border: "1px solid var(--hairline)",
|
||||
color: "var(--fg-dim)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = "var(--fg)";
|
||||
e.currentTarget.style.borderColor = "var(--hairline-2)";
|
||||
e.currentTarget.style.background = "oklch(0.22 0.010 60 / 0.8)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = "var(--fg-dim)";
|
||||
e.currentTarget.style.borderColor = "var(--hairline)";
|
||||
e.currentTarget.style.background = "oklch(0.20 0.009 60 / 0.6)";
|
||||
}}
|
||||
onClick={handleGoogleSignIn}
|
||||
disabled={isLoading}
|
||||
|
||||
Reference in New Issue
Block a user