Futuristic login form

/**
 * Required External Styles:
 * link rel="preconnect" href="https://fonts.googleapis.com"
 * link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Orbitron:wght@400;700&display=swap" rel="stylesheet"
 */

import React from 'react';

const Component: React.FC = () => {
  return (
    <div className="w-full h-full min-h-screen bg-transparent flex items-center justify-center">
      {/* Aerogel Login Component */}
      <div className="relative w-full max-w-md p-4 group">
          
          {/* Background Ambient Light */}
          <div className="absolute -inset-20 bg-cyan-500/10 rounded-full blur-[120px] opacity-30 group-hover:opacity-50 transition-opacity duration-1000"></div>
          <div className="absolute -inset-20 top-auto bottom-0 bg-blue-600/10 rounded-full blur-[120px] opacity-20 group-hover:opacity-40 transition-opacity duration-1000"></div>
      
          {/* Main Card Container */}
          <div className="aerogel-card relative overflow-hidden backdrop-blur-3xl bg-white/[0.03] border border-white/10 rounded-[2.5rem] shadow-2xl p-10 md:p-12">
              
              {/* Internal Shimmer & Glow */}
              <div className="absolute inset-0 glow-overlay pointer-events-none"></div>
              <div className="absolute inset-0 shimmer opacity-30 pointer-events-none"></div>
      
              {/* Header Section */}
              <div className="relative z-10 text-center mb-10">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/5 border border-white/10 mb-6 group-hover:scale-110 transition-transform duration-700">
                      <svg className="w-8 h-8 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
                      </svg>
                  </div>
                  <h1 className="text-3xl font-['Orbitron'] font-bold text-white tracking-widest mb-2">NEURAL_ID</h1>
                  <p className="text-slate-400 text-sm font-light tracking-wide">Secure Biometric Access Portal</p>
              </div>
      
              {/* Login Form */}
              <form className="relative z-10 space-y-6" onSubmit="event.preventDefault()">
                  
                  {/* Identifier Input */}
                  <div className="space-y-2">
                      <label className="text-[10px] uppercase tracking-[0.2em] text-cyan-400/80 font-semibold ml-1">Universal Identifier</label>
                      <div className="relative group/input">
                          <input type="text" 
                              className="w-full bg-white/5 border border-white/10 rounded-2xl px-5 py-4 text-white placeholder:text-slate-600 outline-none transition-all duration-300 focus:bg-white/10 focus:border-cyan-500/50 focus:ring-4 focus:ring-cyan-500/10" 
                              placeholder="user.042@core.net" />
                          <div className="absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-focus-within/input:opacity-100 transition-opacity">
                              <div className="w-1.5 h-1.5 rounded-full bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.8)] pulse-soft"></div>
                          </div>
                      </div>
                  </div>
      
                  {/* Access Key Input */}
                  <div className="space-y-2">
                      <label className="text-[10px] uppercase tracking-[0.2em] text-cyan-400/80 font-semibold ml-1">Access Cipher</label>
                      <div className="relative group/input">
                          <input type="password" 
                              className="w-full bg-white/5 border border-white/10 rounded-2xl px-5 py-4 text-white placeholder:text-slate-600 outline-none transition-all duration-300 focus:bg-white/10 focus:border-cyan-500/50 focus:ring-4 focus:ring-cyan-500/10" 
                              placeholder="••••••••••••" />
                          <button type="button" className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors">
                              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                          </button>
                      </div>
                  </div>
      
                  {/* Auxiliary Options */}
                  <div className="flex items-center justify-between px-1">
                      <label className="flex items-center space-x-2 cursor-pointer group/check">
                          <div className="relative w-4 h-4 rounded border border-white/20 bg-white/5 group-hover/check:border-cyan-500/50 transition-colors">
                              <input type="checkbox" className="absolute inset-0 opacity-0 cursor-pointer peer" />
                              <div className="absolute inset-0 flex items-center justify-center opacity-0 peer-checked:opacity-100 text-cyan-400">
                                  <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"></path></svg>
                              </div>
                          </div>
                          <span className="text-xs text-slate-400 group-hover/check:text-slate-300 transition-colors">Maintain Link</span>
                      </label>
                      <a href="#" className="text-xs text-slate-500 hover:text-cyan-400 transition-colors">Lost Cipher?</a>
                  </div>
      
                  {/* Submit Button */}
                  <button className="relative w-full group/btn mt-4 overflow-hidden rounded-2xl p-[1px] focus:outline-none focus:ring-2 focus:ring-cyan-500/50">
                      <div className="absolute inset-0 bg-gradient-to-r from-cyan-600 to-blue-600 transition-all group-hover/btn:scale-110"></div>
                      <div className="relative flex items-center justify-center px-8 py-4 bg-transparent transition-all group-hover/btn:bg-white/5">
                          <span className="text-sm font-['Orbitron'] font-bold text-white tracking-widest uppercase">Initiate Protocol</span>
                      </div>
                  </button>
              </form>
      
              {/* Footer / System Status */}
              <div className="relative z-10 mt-10 pt-8 border-t border-white/5 flex flex-col items-center gap-4">
                  <div className="flex items-center gap-6">
                      <div className="flex items-center gap-2 group/status cursor-default">
                          <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)] animate-pulse"></div>
                          <span className="text-[10px] text-slate-500 font-medium uppercase tracking-tighter group-hover:text-emerald-400 transition-colors">Server Uplink Stable</span>
                      </div>
                      <div className="flex items-center gap-2 group/status cursor-default">
                          <div className="w-1.5 h-1.5 rounded-full bg-slate-700"></div>
                          <span className="text-[10px] text-slate-500 font-medium uppercase tracking-tighter">Latency: 14ms</span>
                      </div>
                  </div>
                  
                  <p className="text-[10px] text-slate-600 text-center leading-relaxed">
                      By entering the neural network, you agree to <br /> 
                      <span className="text-slate-500 hover:underline cursor-pointer">Encryption Standards v2.4</span>
                  </p>
              </div>
      
              {/* Corner Accents */}
              <div className="absolute top-0 right-0 p-4 opacity-30">
                  <div className="w-12 h-[1px] bg-gradient-to-l from-white/40 to-transparent"></div>
                  <div className="w-[1px] h-12 bg-gradient-to-t from-white/40 to-transparent absolute right-0 top-0"></div>
              </div>
              <div className="absolute bottom-0 left-0 p-4 opacity-30">
                  <div className="w-12 h-[1px] bg-gradient-to-r from-white/40 to-transparent"></div>
                  <div className="w-[1px] h-12 bg-gradient-to-b from-white/40 to-transparent absolute left-0 bottom-0"></div>
              </div>
          </div>
      
          {/* Floating Decorative Element (Bottom Right) */}
          <div className="absolute -bottom-6 -right-6 w-24 h-24 backdrop-blur-md bg-cyan-500/5 border border-white/10 rounded-full flex items-center justify-center animate-[float_10s_ease-in-out_infinite_alt] pointer-events-none">
              <div className="w-16 h-16 border border-white/5 rounded-full animate-spin-slow">
                  <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-cyan-400 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.8)]"></div>
              </div>
          </div>
      </div>
    </div>
  );
}

export default Component;