Side Image Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4
5export default function SideImageSignIn() {
6  const [showPass, setShowPass] = useState(false);
7  const [loading, setLoading] = useState(false);
8  return (
9    <div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-xl grid grid-cols-1 md:grid-cols-2">
10      {/* Image panel */}
11      <div className="hidden md:flex flex-col justify-between bg-zinc-950 p-8 text-white min-h-[420px]">
12        <div>
13          <div className="text-2xl font-black tracking-tight">Aurenza<span className="text-blue-400">UI</span></div>
14        </div>
15        <div className="space-y-6">
16          {/* Abstract art */}
17          <div className="grid grid-cols-3 gap-2">
18            {[...Array(9)].map((_, i) => (
19              <div key={i} className={`h-10 rounded-lg ${['bg-blue-600', 'bg-zinc-700', 'bg-zinc-800', 'bg-blue-400', 'bg-zinc-600', 'bg-blue-800', 'bg-zinc-700', 'bg-blue-500', 'bg-zinc-800'][i]}`} />
20            ))}
21          </div>
22          <div>
23            <p className="text-sm font-semibold leading-relaxed">&ldquo;Ship beautiful UIs in hours, not weeks.&rdquo;</p>
24            <p className="text-xs text-zinc-400 mt-1">— Aurenza UI Team</p>
25          </div>
26        </div>
27        <div className="text-xs text-zinc-500">© 2026 Aurenza UI</div>
28      </div>
29
30      {/* Form panel */}
31      <div className="flex flex-col justify-center bg-white dark:bg-zinc-900 p-8">
32        <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-1">Welcome back</h2>
33        <p className="text-xs text-zinc-500 mb-6">Sign in to your account</p>
34        <form onSubmit={(e) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); }} className="space-y-4">
35          <div>
36            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
37            <div className="relative">
38              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
39              <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 transition" />
40            </div>
41          </div>
42          <div>
43            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
44            <div className="relative">
45              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
46              <input type={showPass ? 'text' : 'password'} required placeholder="••••••••" 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 transition" />
47              <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">
48                {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
49              </button>
50            </div>
51          </div>
52          <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">
53            {loading ? 'Signing in...' : <><span>Sign In</span><ArrowRight className="h-4 w-4" /></>}
54          </button>
55        </form>
56        <p className="mt-5 text-xs text-zinc-500">No account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign up</a></p>
57      </div>
58    </div>
59  );
60}