73 lines
3.7 KiB
TypeScript
73 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { SignInForm } from "./signin-form"
|
|
import { SignUpForm } from "./signup-form"
|
|
|
|
export function AuthPage() {
|
|
const [isSignIn, setIsSignIn] = useState(false)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
|
|
<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
|
|
{/* Left: Gradient panel with steps */}
|
|
<div className="hidden lg:block">
|
|
<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-orange-400 via-orange-500 to-black p-10">
|
|
{/* subtle grain */}
|
|
<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
|
|
<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
|
|
</div>
|
|
|
|
{/* soft circular accents (minimal) */}
|
|
<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
|
|
<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
|
|
<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>
|
|
|
|
<div className="relative z-10 flex h-full flex-col justify-center">
|
|
<div className="mb-12">
|
|
<p className="text-5xl font-bold text-center text-white/80">Codenuk</p>
|
|
</div>
|
|
<h2 className="text-3xl text-center font-bold mb-3">Get Started with Us</h2>
|
|
<p className="text-white/80 text-center mb-10">Complete these easy steps to register your account.</p>
|
|
|
|
<div className="space-y-4">
|
|
{/* Step 1 */}
|
|
<div className={`${!isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
|
|
<div className={`${!isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>1</div>
|
|
<span className="font-medium">Sign up your account</span>
|
|
</div>
|
|
{/* Step 2 */}
|
|
<div className={`${isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
|
|
<div className={`${isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>2</div>
|
|
<span className="font-medium">Set up your workspace</span>
|
|
</div>
|
|
{/* Step 3 */}
|
|
{/* <div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
|
|
<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">3</div>
|
|
<span className="font-medium">Set up your profile</span>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Form area */}
|
|
<div className="flex items-center">
|
|
<div className="w-full max-w-md ml-auto">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-2xl font-semibold text-white mb-1">{isSignIn ? "Sign In Account" : "Sign Up Account"}</h1>
|
|
<p className="text-white/60">{isSignIn ? "Enter your credentials to access your account." : "Enter your personal data to create your account."}</p>
|
|
</div>
|
|
|
|
{isSignIn ? (
|
|
<SignInForm onToggleMode={() => setIsSignIn(false)} />
|
|
) : (
|
|
<SignUpForm onToggleMode={() => setIsSignIn(true)} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|