Glass Sign Up

1'use client';
2import React, { useState } from 'react';
3import { User, Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4
5export default function GlassSignUp() {
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="relative w-full max-w-sm overflow-hidden rounded-3xl border border-white/20 dark:border-white/10 bg-white/30 dark:bg-zinc-900/40 backdrop-blur-2xl p-8 shadow-2xl">
11      <div className="pointer-events-none absolute -top-20 -right-20 h-56 w-56 rounded-full bg-blue-500/25 blur-3xl" />
12      <div className="pointer-events-none absolute -bottom-20 -left-10 h-40 w-40 rounded-full bg-purple-500/20 blur-3xl" />
13      <div className="relative z-10">
14        <div className="mb-6 text-center">
15          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl border border-white/30 bg-blue-600/80 backdrop-blur-sm text-white font-bold text-lg">A</div>
16          <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Join Aurenza UI</h2>
17          <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">Create your free account today</p>
18        </div>
19        <form onSubmit={submit} className="space-y-4">
20          <div>
21            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Full name</label>
22            <div className="relative">
23              <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
24              <input type="text" required placeholder="Your name" className="w-full rounded-xl border border-white/30 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm 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/50 transition" />
25            </div>
26          </div>
27          <div>
28            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
29            <div className="relative">
30              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
31              <input type="email" required placeholder="you@example.com" className="w-full rounded-xl border border-white/30 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm 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/50 transition" />
32            </div>
33          </div>
34          <div>
35            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
36            <div className="relative">
37              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
38              <input type={showPass ? 'text' : 'password'} required placeholder="Min 8 characters" className="w-full rounded-xl border border-white/30 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm 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/50 transition" />
39              <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">
40                {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
41              </button>
42            </div>
43          </div>
44          <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-xl border border-blue-500/30 bg-blue-600/90 hover:bg-blue-600 backdrop-blur-sm py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
45            {loading ? 'Creating...' : <><span>Create Account</span><ArrowRight className="h-4 w-4" /></>}
46          </button>
47        </form>
48        <p className="mt-5 text-center text-xs text-zinc-600 dark:text-zinc-400">Already a member? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign in</a></p>
49      </div>
50    </div>
51  );
52}
53`,
54    jsxSourceCode: `'use client';
55import React, { useState } from 'react';
56import { User, Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
57
58export default function GlassSignUp() {
59  const [showPass, setShowPass] = useState(false);
60  const [loading, setLoading] = useState(false);
61  const submit = (e) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); };
62  return (
63    <div className="relative w-full max-w-sm overflow-hidden rounded-3xl border border-white/20 dark:border-white/10 bg-white/30 dark:bg-zinc-900/40 backdrop-blur-2xl p-8 shadow-2xl">
64      <div className="pointer-events-none absolute -top-20 -right-20 h-56 w-56 rounded-full bg-blue-500/25 blur-3xl" />
65      <div className="pointer-events-none absolute -bottom-20 -left-10 h-40 w-40 rounded-full bg-purple-500/20 blur-3xl" />
66      <div className="relative z-10">
67        <div className="mb-6 text-center">
68          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl border border-white/30 bg-blue-600/80 backdrop-blur-sm text-white font-bold text-lg">A</div>
69          <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Join Aurenza UI</h2>
70          <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">Create your free account today</p>
71        </div>
72        <form onSubmit={submit} className="space-y-4">
73          <div>
74            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Full name</label>
75            <div className="relative">
76              <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
77              <input type="text" required placeholder="Your name" className="w-full rounded-xl border border-white/30 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm 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/50 transition" />
78            </div>
79          </div>
80          <div>
81            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
82            <div className="relative">
83              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
84              <input type="email" required placeholder="you@example.com" className="w-full rounded-xl border border-white/30 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm 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/50 transition" />
85            </div>
86          </div>
87          <div>
88            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
89            <div className="relative">
90              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
91              <input type={showPass ? 'text' : 'password'} required placeholder="Min 8 characters" className="w-full rounded-xl border border-white/30 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm 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/50 transition" />
92              <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">
93                {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
94              </button>
95            </div>
96          </div>
97          <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-xl border border-blue-500/30 bg-blue-600/90 hover:bg-blue-600 backdrop-blur-sm py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
98            {loading ? 'Creating...' : <><span>Create Account</span><ArrowRight className="h-4 w-4" /></>}
99          </button>
100        </form>
101        <p className="mt-5 text-center text-xs text-zinc-600 dark:text-zinc-400">Already a member? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign in</a></p>
102      </div>
103    </div>
104  );
105}