Spaces:
Running
Running
File size: 6,390 Bytes
dcbba65 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | "use client";
import React, { useState } from "react";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "@/lib/firebase";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { Lock, User, ArrowRight, ShieldCheck, Mail, UserPlus } from "lucide-react";
import Link from "next/link";
export default function RegisterPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const router = useRouter();
const handleRegister = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError("");
try {
await createUserWithEmailAndPassword(auth, email, password);
router.push("/");
} catch (err: any) {
setError(err.message || "Error al crear la cuenta.");
setLoading(false);
}
};
return (
<div className="fixed inset-0 bg-[#020617] flex items-center justify-center p-6 z-[100]">
{/* Background Decorative Elements */}
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/20 rounded-full blur-[120px] animate-pulse"></div>
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-600/20 rounded-full blur-[120px] animate-pulse delay-1000"></div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="w-full max-w-md bg-white/5 border border-white/10 rounded-[2.5rem] p-10 backdrop-blur-3xl shadow-2xl relative overflow-hidden"
>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>
<div className="flex flex-col items-center mb-10">
<div className="w-16 h-16 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-[1.5rem] flex items-center justify-center shadow-2xl shadow-indigo-500/20 mb-6">
<UserPlus size={32} className="text-white" />
</div>
<h1 className="text-3xl font-black tracking-tighter italic uppercase text-white">
NEXUS <span className="text-indigo-500 italic">REGISTRO</span>
</h1>
<p className="text-gray-500 font-bold mt-2 uppercase text-[10px] tracking-[0.3em]">Crea tu cuenta empresarial</p>
</div>
<form onSubmit={handleRegister} className="space-y-4">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Nombre Completo</label>
<div className="relative group">
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-indigo-400 transition-colors" size={18} />
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all focus:bg-white/10"
placeholder="Juan Pérez"
required
/>
</div>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Correo Electrónico</label>
<div className="relative group">
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-indigo-400 transition-colors" size={18} />
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all focus:bg-white/10"
placeholder="usuario@empresa.com"
required
/>
</div>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Contraseña</label>
<div className="relative group">
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-indigo-400 transition-colors" size={18} />
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all focus:bg-white/10"
placeholder="••••••••"
required
/>
</div>
</div>
{error && (
<motion.p
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
className="text-red-400 text-xs font-bold text-center bg-red-500/10 py-3 rounded-xl border border-red-500/20"
>
{error}
</motion.p>
)}
<button
type="submit"
disabled={loading}
className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-indigo-900/40 flex items-center justify-center gap-2 group transition-all active:scale-[0.98] disabled:opacity-50"
>
{loading ? "Creando Cuenta..." : (
<>
Unirme a Nexus
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
</>
)}
</button>
</form>
<div className="mt-8 pt-8 border-t border-white/5 text-center">
<p className="text-xs text-gray-500 font-medium">
¿Ya tienes una cuenta? {" "}
<Link href="/login" className="text-indigo-400 font-black hover:text-indigo-300 transition-colors">
Inicia Sesión
</Link>
</p>
</div>
</motion.div>
</div>
);
}
|