Cyberpunk Terminal Node Sign Up

1'use client';
2
3import React, { useState } from 'react';
4import { Cpu, ArrowRight, CheckCircle2 } from 'lucide-react';
5
6export default function CyberSignUp() {
7  const [handle, setHandle] = useState('');
8  const [netId, setNetId] = useState('');
9  const [cipher, setCipher] = useState('');
10  const [registered, setRegistered] = useState(false);
11
12  const handleRegister = (e: React.FormEvent) => {
13    e.preventDefault();
14    setRegistered(true);
15  };
16
17  return (
18    <div className="relative w-full max-w-md overflow-hidden rounded-2xl border-2 border-cyan-500/50 bg-slate-950 p-6 sm:p-8 font-mono text-cyan-400 shadow-[0_0_40px_rgba(6,182,212,0.2)] select-none">
19      <div
20        className="absolute inset-0 opacity-15 pointer-events-none"
21        style={{
22          backgroundImage: 'linear-gradient(to right, #06b6d4 1px, transparent 1px), linear-gradient(to bottom, #06b6d4 1px, transparent 1px)',
23          backgroundSize: '20px 20px'
24        }}
25      />
26
27      <div className="relative z-10 flex items-center justify-between border-b border-cyan-500/30 pb-4 mb-6">
28        <div className="flex items-center gap-2">
29          <Cpu className="h-5 w-5 text-cyan-400 animate-pulse" />
30          <span className="font-bold text-xs tracking-widest text-cyan-300">NODE_REGISTRY // v4.8</span>
31        </div>
32        <span className="text-[10px] text-emerald-400 bg-emerald-950/60 border border-emerald-500/40 px-2 py-0.5 rounded">
33          STATUS: ONLINE
34        </span>
35      </div>
36
37      {registered ? (
38        <div className="relative z-10 rounded-xl border border-cyan-500/40 bg-cyan-950/30 p-6 text-center space-y-3">
39          <CheckCircle2 className="mx-auto h-10 w-10 text-cyan-400 drop-shadow-[0_0_10px_#22d3ee]" />
40          <h3 className="font-bold text-base text-white tracking-wider">NEURAL_ID PROVISIONED</h3>
41          <p className="text-xs text-cyan-300/80">Entity [{handle || 'CYBER_USER'}] authenticated on Aurenza Grid.</p>
42          <button
43            onClick={() => setRegistered(false)}
44            className="mt-3 text-xs text-pink-400 hover:text-pink-300 underline cursor-pointer"
45          >
46            Authenticate another node
47          </button>
48        </div>
49      ) : (
50        <form onSubmit={handleRegister} className="relative z-10 space-y-4">
51          <div>
52            <label className="block text-[11px] font-bold tracking-wider text-cyan-300 mb-1">
53              &gt; OPERATOR_HANDLE
54            </label>
55            <input
56              type="text"
57              required
58              value={handle}
59              onChange={(e) => setHandle(e.target.value)}
60              placeholder="neo_protocol"
61              className="w-full rounded-lg border border-cyan-500/40 bg-slate-900/80 px-3.5 py-2 text-xs text-cyan-100 placeholder:text-cyan-800 outline-none focus:border-cyan-400 focus:shadow-[0_0_15px_rgba(6,182,212,0.4)] transition"
62            />
63          </div>
64
65          <div>
66            <label className="block text-[11px] font-bold tracking-wider text-cyan-300 mb-1">
67              &gt; NEURAL_MAIL
68            </label>
69            <input
70              type="email"
71              required
72              value={netId}
73              onChange={(e) => setNetId(e.target.value)}
74              placeholder="operator@matrix.net"
75              className="w-full rounded-lg border border-cyan-500/40 bg-slate-900/80 px-3.5 py-2 text-xs text-cyan-100 placeholder:text-cyan-800 outline-none focus:border-cyan-400 focus:shadow-[0_0_15px_rgba(6,182,212,0.4)] transition"
76            />
77          </div>
78
79          <div>
80            <label className="block text-[11px] font-bold tracking-wider text-cyan-300 mb-1">
81              &gt; ACCESS_CIPHER (PASSWORD)
82            </label>
83            <input
84              type="password"
85              required
86              value={cipher}
87              onChange={(e) => setCipher(e.target.value)}
88              placeholder="••••••••••••"
89              className="w-full rounded-lg border border-cyan-500/40 bg-slate-900/80 px-3.5 py-2 text-xs text-cyan-100 placeholder:text-cyan-800 outline-none focus:border-cyan-400 focus:shadow-[0_0_15px_rgba(6,182,212,0.4)] transition"
90            />
91          </div>
92
93          <button
94            type="submit"
95            className="w-full rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 py-2.5 text-xs font-black tracking-widest text-slate-950 uppercase shadow-[0_0_20px_rgba(6,182,212,0.5)] hover:from-cyan-400 hover:to-blue-500 transition flex items-center justify-center gap-2 cursor-pointer"
96          >
97            INITIALIZE UPLINK <ArrowRight className="h-4 w-4" />
98          </button>
99        </form>
100      )}
101    </div>
102  );
103}