feat(auth): redesign auth pages with brand panel, IconInput and forgot-password

This commit is contained in:
zetaloop
2026-02-25 15:49:37 +08:00
parent 7c4c2798a7
commit 5812b7b0ed
6 changed files with 344 additions and 122 deletions
+57 -17
View File
@@ -1,27 +1,67 @@
import { Gamepad2 } from "lucide-react"
import { ArrowLeft, Gamepad2 } from "lucide-react"
import Link from "next/link"
const stats = [
{ value: "12,000+", label: "认证打手" },
{ value: "98.6%", label: "好评率" },
{ value: "50,000+", label: "完成订单" },
]
export default function AuthLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen">
<div className="hidden md:flex w-1/2 relative overflow-hidden bg-primary items-center justify-center p-12 text-primary-foreground">
<div className="absolute inset-0 bg-linear-to-br from-primary via-primary/90 to-primary/80" />
<div className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-primary-foreground/10 blur-[120px]" />
<div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-primary-foreground/10 blur-[120px]" />
<div className="relative z-10 max-w-md space-y-6">
<div className="flex items-center gap-3">
<div className="rounded-2xl bg-primary-foreground/20 p-3 backdrop-blur-sm">
<Gamepad2 className="h-10 w-10" />
</div>
<span className="text-3xl font-bold tracking-tighter"> JuWan</span>
<div className="flex min-h-screen bg-background">
{/* Left: Brand Panel */}
<div className="hidden w-1/2 flex-col justify-between bg-card p-12 lg:flex">
<Link href="/" className="flex items-center gap-2">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary">
<Gamepad2 className="h-4 w-4 text-primary-foreground" />
</div>
<div className="space-y-2">
<h2 className="text-4xl font-bold leading-tight"></h2>
<p className="text-lg text-primary-foreground/80"></p>
<span className="text-xl font-bold tracking-tight"></span>
</Link>
<div className="max-w-md">
<h1 className="text-4xl font-bold leading-tight">
<br />
<span className="text-gradient-brand"></span>
</h1>
<p className="mt-4 text-base leading-relaxed text-muted-foreground">
</p>
<div className="mt-10 grid grid-cols-3 gap-6">
{stats.map((stat) => (
<div key={stat.label}>
<div className="text-2xl font-bold">{stat.value}</div>
<div className="mt-1 text-xs text-muted-foreground">{stat.label}</div>
</div>
))}
</div>
</div>
<div className="text-xs text-muted-foreground">&copy; 2025 . All rights reserved.</div>
</div>
<div className="flex-1 flex items-center justify-center p-6 bg-muted/30">
<div className="w-full max-w-md">{children}</div>
{/* Right: Auth Form */}
<div className="flex w-full flex-col items-center justify-center px-6 py-12 lg:w-1/2 lg:px-16">
{/* Mobile header */}
<div className="mb-8 flex w-full max-w-sm items-center justify-between lg:hidden">
<Link
href="/"
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
>
<ArrowLeft className="h-4 w-4" />
</Link>
<div className="flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
<Gamepad2 className="h-3.5 w-3.5 text-primary-foreground" />
</div>
<span className="text-lg font-bold"></span>
</div>
</div>
<div className="w-full max-w-sm">{children}</div>
</div>
</div>
)