Neo-Brutalist High-Contrast Sign Up

1'use client';
2
3import React, { useState } from 'react';
4import { ArrowRight, Check } from 'lucide-react';
5
6export default function BrutalSignUp() {
7  const [name, setName] = useState('');
8  const [email, setEmail] = useState('');
9  const [password, setPassword] = useState('');
10  const [submitted, setSubmitted] = useState(false);
11
12  const handleSubmit = (e: React.FormEvent) => {
13    e.preventDefault();
14    setSubmitted(true);
15  };
16
17  return (
18    <div className="w-full max-w-md border-4 border-black bg-yellow-300 p-6 sm:p-8 font-mono shadow-[8px_8px_0px_#000] text-black select-none transition-all">
19      <div className="border-b-4 border-black pb-4 mb-6">
20        <div className="inline-block bg-black text-yellow-300 px-3 py-1 text-xs font-black uppercase tracking-wider mb-2">
21          JOIN_AURENZA
22        </div>
23        <h2 className="text-2xl font-black uppercase tracking-tight">CREATE_ACCOUNT</h2>
24        <p className="text-xs font-bold text-black/80 mt-1">Get immediate raw access to the full UI kit.</p>
25      </div>
26
27      {submitted ? (
28        <div className="border-3 border-black bg-white p-6 text-center space-y-3">
29          <div className="mx-auto flex h-12 w-12 items-center justify-center border-3 border-black bg-emerald-400 font-black shadow-[3px_3px_0px_#000]">
30            <Check className="h-6 w-6 stroke-[3]" />
31          </div>
32          <h3 className="font-black text-lg uppercase">YOU_ARE_IN!</h3>
33          <p className="text-xs font-bold">Welcome aboard, {name || 'Architect'}.</p>
34          <button
35            onClick={() => setSubmitted(false)}
36            className="mt-3 w-full border-3 border-black bg-yellow-300 py-2 text-xs font-black uppercase shadow-[3px_3px_0px_#000] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[1px_1px_0px_#000] transition"
37          >
38            RESET
39          </button>
40        </div>
41      ) : (
42        <form onSubmit={handleSubmit} className="space-y-4">
43          <div>
44            <label className="block text-xs font-black uppercase tracking-wider mb-1">YOUR_NAME</label>
45            <input
46              type="text"
47              required
48              value={name}
49              onChange={(e) => setName(e.target.value)}
50              placeholder="ALEX_RIVERA"
51              className="w-full border-3 border-black bg-white px-3 py-2 text-sm font-bold uppercase placeholder:text-black/40 outline-none shadow-[3px_3px_0px_#000] focus:bg-amber-50"
52            />
53          </div>
54
55          <div>
56            <label className="block text-xs font-black uppercase tracking-wider mb-1">EMAIL_ADDRESS</label>
57            <input
58              type="email"
59              required
60              value={email}
61              onChange={(e) => setEmail(e.target.value)}
62              placeholder="NAME@DOMAIN.COM"
63              className="w-full border-3 border-black bg-white px-3 py-2 text-sm font-bold placeholder:text-black/40 outline-none shadow-[3px_3px_0px_#000] focus:bg-amber-50"
64            />
65          </div>
66
67          <div>
68            <label className="block text-xs font-black uppercase tracking-wider mb-1">MASTER_PASSWORD</label>
69            <input
70              type="password"
71              required
72              value={password}
73              onChange={(e) => setPassword(e.target.value)}
74              placeholder="••••••••••••"
75              className="w-full border-3 border-black bg-white px-3 py-2 text-sm font-bold placeholder:text-black/40 outline-none shadow-[3px_3px_0px_#000] focus:bg-amber-50"
76            />
77          </div>
78
79          <button
80            type="submit"
81            className="w-full border-3 border-black bg-black py-3 text-sm font-black text-yellow-300 uppercase tracking-wider shadow-[4px_4px_0px_#fff] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[2px_2px_0px_#fff] active:translate-x-1 active:translate-y-1 transition flex items-center justify-center gap-2 cursor-pointer"
82          >
83            CLAIM ACCESS NOW <ArrowRight className="h-4 w-4" />
84          </button>
85        </form>
86      )}
87    </div>
88  );
89}