Glass Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4
5export default function GlassSignIn() {
6  const [showPass, setShowPass] = useState(false);
7  return (
8    <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">
9      {/* Background blobs */}
10      <div className="pointer-events-none absolute -top-16 -right-16 h-48 w-48 rounded-full bg-blue-500/30 blur-3xl" />
11      <div className="pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-purple-500/20 blur-3xl" />
12
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-white/20 backdrop-blur-sm">
16            <Lock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
17          </div>
18          <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Sign In</h2>
19          <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">Glassmorphism authentication</p>
20        </div>
21
22        <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
23          <div>
24            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
25            <div className="relative">
26              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
27              <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 focus:bg-white/70 dark:focus:bg-white/10 transition" />
28            </div>
29          </div>
30          <div>
31            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
32            <div className="relative">
33              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
34              <input type={showPass ? 'text' : 'password'} required placeholder="••••••••" 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 focus:bg-white/70 dark:focus:bg-white/10 transition" />
35              <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">
36                {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
37              </button>
38            </div>
39          </div>
40          <button type="submit" 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">
41            Sign In <ArrowRight className="h-4 w-4" />
42          </button>
43        </form>
44
45        <div className="mt-5 flex items-center justify-between text-xs">
46          <a href="#" className="text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">Forgot password?</a>
47          <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Create account</a>
48        </div>
49      </div>
50    </div>
51  );
52}