Dark Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, ArrowRight } from 'lucide-react';
4
5export default function DarkSignIn() {
6  const [loading, setLoading] = useState(false);
7  const submit = (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); };
8  return (
9    <div className="w-full max-w-sm rounded-2xl bg-zinc-950 border border-zinc-800 p-8 shadow-2xl">
10      <div className="mb-7">
11        <div className="inline-flex items-center gap-1.5 rounded-full border border-zinc-700 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-zinc-400 mb-4">Secure Login</div>
12        <h2 className="text-2xl font-extrabold text-white leading-tight">Sign in to<br />your account</h2>
13        <p className="mt-2 text-xs text-zinc-500">Enter your credentials to access the platform.</p>
14      </div>
15      <form onSubmit={submit} className="space-y-4">
16        <div>
17          <label className="block text-xs font-semibold text-zinc-400 mb-1.5">Email address</label>
18          <div className="relative">
19            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
20            <input type="email" required placeholder="you@company.com" className="w-full rounded-lg border border-zinc-800 bg-zinc-900 py-2.5 pl-9 pr-3 text-sm text-zinc-100 placeholder:text-zinc-600 outline-none focus:border-blue-500 transition" />
21          </div>
22        </div>
23        <div>
24          <label className="block text-xs font-semibold text-zinc-400 mb-1.5">Password</label>
25          <div className="relative">
26            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
27            <input type="password" required placeholder="••••••••" className="w-full rounded-lg border border-zinc-800 bg-zinc-900 py-2.5 pl-9 pr-3 text-sm text-zinc-100 placeholder:text-zinc-600 outline-none focus:border-blue-500 transition" />
28          </div>
29        </div>
30        <div className="flex items-center justify-between text-xs">
31          <label className="flex items-center gap-2 text-zinc-500 cursor-pointer">
32            <input type="checkbox" className="rounded border-zinc-700 bg-zinc-900 text-blue-600" />
33            Remember me
34          </label>
35          <a href="#" className="text-blue-400 hover:underline">Forgot password?</a>
36        </div>
37        <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
38          {loading ? 'Signing in...' : <><span>Continue</span><ArrowRight className="h-4 w-4" /></>}
39        </button>
40      </form>
41      <p className="mt-6 text-center text-xs text-zinc-600">New here? <a href="#" className="text-blue-400 font-semibold hover:underline">Create account</a></p>
42    </div>
43  );
44}