Card Sign Up

1'use client';
2import React, { useState } from 'react';
3import { User, Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4import { FaGoogle, FaGithub } from 'react-icons/fa6';
5
6export default function CardSignUp() {
7  const [showPass, setShowPass] = useState(false);
8  const [loading, setLoading] = useState(false);
9  const submit = (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); };
10  return (
11    <div className="w-full max-w-sm rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-8 shadow-lg">
12      <div className="mb-6 text-center">
13        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white font-bold text-lg">A</div>
14        <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Create account</h2>
15        <p className="mt-1 text-xs text-zinc-500">Start building beautiful UIs today</p>
16      </div>
17      <div className="grid grid-cols-2 gap-2 mb-5">
18        <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
19          <FaGoogle className="h-3.5 w-3.5 text-rose-500" /> Google
20        </button>
21        <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
22          <FaGithub className="h-3.5 w-3.5" /> GitHub
23        </button>
24      </div>
25      <div className="relative mb-5">
26        <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-zinc-200 dark:border-zinc-800" /></div>
27        <span className="relative mx-auto block w-fit bg-white dark:bg-zinc-900 px-3 text-[10px] uppercase tracking-wider text-zinc-400">or email</span>
28      </div>
29      <form onSubmit={submit} className="space-y-3.5">
30        <div>
31          <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Full name</label>
32          <div className="relative">
33            <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
34            <input type="text" required placeholder="Alex Johnson" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition" />
35          </div>
36        </div>
37        <div>
38          <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
39          <div className="relative">
40            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
41            <input type="email" required placeholder="you@example.com" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition" />
42          </div>
43        </div>
44        <div>
45          <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
46          <div className="relative">
47            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
48            <input type={showPass ? 'text' : 'password'} required placeholder="Min 8 characters" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-10 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition" />
49            <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
50              {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
51            </button>
52          </div>
53        </div>
54        <label className="flex items-start gap-2 text-xs text-zinc-600 dark:text-zinc-400 cursor-pointer">
55          <input type="checkbox" required className="mt-0.5 rounded border-zinc-300 dark:border-zinc-700 text-blue-600" />
56          I agree to the <a href="#" className="text-blue-600 dark:text-blue-400 underline">Terms of Service</a> and <a href="#" className="text-blue-600 dark:text-blue-400 underline">Privacy Policy</a>
57        </label>
58        <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-700 py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
59          {loading ? 'Creating...' : <><span>Create Account</span><ArrowRight className="h-4 w-4" /></>}
60        </button>
61      </form>
62      <p className="mt-5 text-center text-xs text-zinc-500">Already have an account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign in</a></p>
63    </div>
64  );
65}