feat(auth): redesign auth pages with brand panel, IconInput and forgot-password
This commit is contained in:
+57
-17
@@ -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">© 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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user