Brutalist Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, ArrowRight, Fingerprint } from 'lucide-react';
4
5export default function BrutalistSignIn() {
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-none border-4 border-zinc-900 dark:border-zinc-100 bg-white dark:bg-zinc-900 p-8 shadow-[8px_8px_0px_#18181b] dark:shadow-[8px_8px_0px_#e4e4e7]">
10      <div className="mb-6 flex items-center gap-3">
11        <Fingerprint className="h-7 w-7 text-zinc-900 dark:text-zinc-100" />
12        <h2 className="text-2xl font-black uppercase tracking-tight text-zinc-900 dark:text-zinc-100">Sign In</h2>
13      </div>
14      <form onSubmit={submit} className="space-y-4">
15        <div>
16          <label className="block text-[11px] font-black uppercase tracking-widest text-zinc-900 dark:text-zinc-100 mb-1">Email</label>
17          <div className="relative">
18            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
19            <input type="email" required placeholder="you@example.com" className="w-full border-2 border-zinc-900 dark:border-zinc-100 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm font-bold text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:bg-white dark:focus:bg-zinc-900 transition" />
20          </div>
21        </div>
22        <div>
23          <label className="block text-[11px] font-black uppercase tracking-widest text-zinc-900 dark:text-zinc-100 mb-1">Password</label>
24          <div className="relative">
25            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
26            <input type="password" required placeholder="••••••••" className="w-full border-2 border-zinc-900 dark:border-zinc-100 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm font-bold text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:bg-white dark:focus:bg-zinc-900 transition" />
27          </div>
28        </div>
29        <button
30          type="submit"
31          disabled={loading}
32          className="flex w-full items-center justify-center gap-2 border-4 border-zinc-900 dark:border-zinc-100 bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 py-3 text-sm font-black uppercase tracking-widest text-white dark:text-zinc-900 shadow-[4px_4px_0px_#3b82f6] active:shadow-none active:translate-x-1 active:translate-y-1 transition-all disabled:opacity-60"
33        >
34          {loading ? 'Entering...' : <><span>Enter</span><ArrowRight className="h-4 w-4" /></>}
35        </button>
36      </form>
37      <div className="mt-4 border-t-2 border-zinc-900 dark:border-zinc-100 pt-4 text-center">
38        <a href="#" className="text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 hover:underline">Create Account →</a>
39      </div>
40    </div>
41  );
42}