Spatial Spotlight Glow Sign Up

1'use client';
2
3import React, { useState } from 'react';
4import { Sparkles, ArrowRight, User, Mail, Lock, Check } from 'lucide-react';
5
6export default function GlowHoverSignUp() {
7  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
8  const [submitted, setSubmitted] = useState(false);
9
10  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
11    const rect = e.currentTarget.getBoundingClientRect();
12    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
13  };
14
15  return (
16    <div
17      onMouseMove={handleMouseMove}
18      className="group relative w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-900/90 p-6 sm:p-8 backdrop-blur-xl shadow-2xl transition-all duration-300 select-none"
19    >
20      <div
21        className="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
22        style={{
23          background: `radial-gradient(350px circle at ${mousePos.x}px ${mousePos.y}px, rgba(99,102,241,0.18), transparent 80%)`
24        }}
25      />
26
27      <div className="relative z-10 flex items-center justify-between mb-6">
28        <div className="flex items-center gap-2">
29          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-indigo-500/10 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
30            <Sparkles className="h-4 w-4" />
31          </div>
32          <span className="font-bold text-sm text-slate-900 dark:text-white">Aurenza Glow</span>
33        </div>
34        <span className="text-[11px] font-semibold text-indigo-500 bg-indigo-50 dark:bg-indigo-950/60 border border-indigo-200 dark:border-indigo-800 px-2.5 py-0.5 rounded-full">
35          Spatial Tier
36        </span>
37      </div>
38
39      {submitted ? (
40        <div className="relative z-10 rounded-2xl bg-slate-50 dark:bg-slate-800/50 p-6 text-center space-y-3">
41          <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 text-white">
42            <Check className="h-5 w-5" />
43          </div>
44          <h3 className="font-bold text-slate-900 dark:text-white">Registration Complete</h3>
45          <p className="text-xs text-slate-500 dark:text-slate-400">Your spatial account is activated.</p>
46          <button
47            onClick={() => setSubmitted(false)}
48            className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer"
49          >
50            Start over
51          </button>
52        </div>
53      ) : (
54        <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} className="relative z-10 space-y-4">
55          <div>
56            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Full Name</label>
57            <div className="relative">
58              <User className="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
59              <input
60                type="text"
61                required
62                placeholder="Elena Rostova"
63                className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/60 py-2.5 pl-10 pr-3 text-xs sm:text-sm text-slate-900 dark:text-white placeholder:text-slate-400 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition"
64              />
65            </div>
66          </div>
67
68          <div>
69            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Email Address</label>
70            <div className="relative">
71              <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
72              <input
73                type="email"
74                required
75                placeholder="elena@aurenza.design"
76                className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/60 py-2.5 pl-10 pr-3 text-xs sm:text-sm text-slate-900 dark:text-white placeholder:text-slate-400 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition"
77              />
78            </div>
79          </div>
80
81          <div>
82            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Password</label>
83            <div className="relative">
84              <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
85              <input
86                type="password"
87                required
88                placeholder="••••••••••••"
89                className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/60 py-2.5 pl-10 pr-3 text-xs sm:text-sm text-slate-900 dark:text-white placeholder:text-slate-400 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition"
90              />
91            </div>
92          </div>
93
94          <button
95            type="submit"
96            className="w-full rounded-xl bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 py-3 text-xs sm:text-sm font-bold text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 hover:scale-[1.01] active:scale-[0.99] transition flex items-center justify-center gap-2 cursor-pointer"
97          >
98            Create Spatial Account <ArrowRight className="h-4 w-4" />
99          </button>
100        </form>
101      )}
102    </div>
103  );
104}