Dark Sign Up

1'use client';
2import React, { useState } from 'react';
3import { User, Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4
5export default function DarkSignUp() {
6  const [showPass, setShowPass] = useState(false);
7  const [loading, setLoading] = useState(false);
8  const submit = (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); };
9  return (
10    <div className="w-full max-w-sm rounded-2xl bg-zinc-950 border border-zinc-800 p-8 shadow-2xl">
11      <div className="mb-7">
12        <div className="inline-flex items-center gap-1.5 rounded-full border border-zinc-700 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-zinc-400 mb-4">Free Forever</div>
13        <h2 className="text-2xl font-extrabold text-white leading-tight">Create your<br />account today</h2>
14        <p className="mt-2 text-xs text-zinc-500">No credit card required. Cancel anytime.</p>
15      </div>
16      <form onSubmit={submit} className="space-y-4">
17        <div>
18          <label className="block text-xs font-semibold text-zinc-400 mb-1.5">Full name</label>
19          <div className="relative">
20            <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
21            <input type="text" required placeholder="Your name" className="w-full rounded-lg border border-zinc-800 bg-zinc-900 py-2.5 pl-9 pr-3 text-sm text-zinc-100 placeholder:text-zinc-600 outline-none focus:border-blue-500 transition" />
22          </div>
23        </div>
24        <div>
25          <label className="block text-xs font-semibold text-zinc-400 mb-1.5">Email</label>
26          <div className="relative">
27            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
28            <input type="email" required placeholder="you@company.com" className="w-full rounded-lg border border-zinc-800 bg-zinc-900 py-2.5 pl-9 pr-3 text-sm text-zinc-100 placeholder:text-zinc-600 outline-none focus:border-blue-500 transition" />
29          </div>
30        </div>
31        <div>
32          <label className="block text-xs font-semibold text-zinc-400 mb-1.5">Password</label>
33          <div className="relative">
34            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
35            <input type={showPass ? 'text' : 'password'} required placeholder="Min 8 characters" className="w-full rounded-lg border border-zinc-800 bg-zinc-900 py-2.5 pl-9 pr-10 text-sm text-zinc-100 placeholder:text-zinc-600 outline-none focus:border-blue-500 transition" />
36            <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300">
37              {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
38            </button>
39          </div>
40        </div>
41        <label className="flex items-center gap-2 text-xs text-zinc-500 cursor-pointer">
42          <input type="checkbox" required className="rounded border-zinc-700 bg-zinc-900 text-blue-600" />
43          I accept the <a href="#" className="text-blue-400 hover:underline">Terms of Service</a>
44        </label>
45        <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
46          {loading ? 'Creating...' : <><span>Get Started Free</span><ArrowRight className="h-4 w-4" /></>}
47        </button>
48      </form>
49      <p className="mt-6 text-center text-xs text-zinc-600">Already a member? <a href="#" className="text-blue-400 font-semibold hover:underline">Sign in</a></p>
50    </div>
51  );
52}