Minimal Sign Up

1'use client';
2
3import React, { useState } from 'react';
4import { Mail, Lock, User, ArrowRight, CheckCircle2 } from 'lucide-react';
5import { FaGoogle, FaGithub } from 'react-icons/fa6';
6
7export default function MinimalSignup() {
8  const [name, setName] = useState('');
9  const [email, setEmail] = useState('');
10  const [password, setPassword] = useState('');
11  const [agreed, setAgreed] = useState(false);
12  const [loading, setLoading] = useState(false);
13
14  const handleSubmit = (e: React.FormEvent) => {
15    e.preventDefault();
16    setLoading(true);
17    setTimeout(() => {
18      setLoading(false);
19      alert('Account registered successfully!');
20    }, 1200);
21  };
22
23  return (
24    <div className="w-full max-w-md rounded-2xl sm:rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 sm:p-8 shadow-xl transition-colors">
25      <div className="text-center mb-6">
26        <h2 className="text-xl sm:text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Create your account</h2>
27        <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">Join thousands building with Aurenza UI</p>
28      </div>
29
30      <div className="grid grid-cols-2 gap-2.5 mb-5">
31        <button className="flex items-center justify-center gap-2 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/60 py-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
32          <FaGoogle className="h-3.5 w-3.5 text-rose-500" /> Google
33        </button>
34        <button className="flex items-center justify-center gap-2 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/60 py-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
35          <FaGithub className="h-3.5 w-3.5" /> GitHub
36        </button>
37      </div>
38
39      <div className="relative my-4 text-center">
40        <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-slate-200 dark:border-slate-800" /></div>
41        <span className="relative bg-white dark:bg-slate-900 px-2 text-[10px] uppercase text-slate-400 font-semibold">Or with email</span>
42      </div>
43
44      <form onSubmit={handleSubmit} className="space-y-3.5">
45        <div>
46          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Full Name</label>
47          <div className="relative">
48            <User className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
49            <input
50              type="text"
51              value={name}
52              onChange={(e) => setName(e.target.value)}
53              placeholder="Sarah Connor"
54              required
55              className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 py-2 pl-9 pr-3 text-sm text-slate-900 dark:text-slate-100 outline-none focus:border-blue-500 transition"
56            />
57          </div>
58        </div>
59
60        <div>
61          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Email Address</label>
62          <div className="relative">
63            <Mail className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
64            <input
65              type="email"
66              value={email}
67              onChange={(e) => setEmail(e.target.value)}
68              placeholder="sarah@example.com"
69              required
70              className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 py-2 pl-9 pr-3 text-sm text-slate-900 dark:text-slate-100 outline-none focus:border-blue-500 transition"
71            />
72          </div>
73        </div>
74
75        <div>
76          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Password</label>
77          <div className="relative">
78            <Lock className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
79            <input
80              type="password"
81              value={password}
82              onChange={(e) => setPassword(e.target.value)}
83              placeholder="••••••••"
84              required
85              className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 py-2 pl-9 pr-3 text-sm text-slate-900 dark:text-slate-100 outline-none focus:border-blue-500 transition"
86            />
87          </div>
88        </div>
89
90        <div className="flex items-center gap-2 pt-1 text-xs">
91          <input
92            type="checkbox"
93            checked={agreed}
94            onChange={(e) => setAgreed(e.target.checked)}
95            required
96            className="rounded border-slate-300 dark:border-slate-700 text-blue-600 focus:ring-blue-500"
97          />
98          <span className="text-slate-600 dark:text-slate-400">I agree to Terms &amp; Conditions</span>
99        </div>
100
101        <button
102          type="submit"
103          disabled={loading}
104          className="mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 hover:bg-blue-700 active:scale-98 py-2.5 text-sm font-semibold text-white shadow-md transition disabled:opacity-50"
105        >
106          {loading ? 'Creating Account...' : 'Get Started Free'}
107          {!loading && <ArrowRight className="h-4 w-4" />}
108        </button>
109      </form>
110    </div>
111  );
112}