"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { Mail, Lock, ArrowRight, ScanFace, ShieldCheck, Github, Command, Activity } from "lucide-react"; /** * Bento Matrix Auth v3 * A highly structural, dashboard-style authentication interface. * Abandons the traditional floating card in favor of a dense, modular Bento Grid * separating credentials, passkeys, OAuth, and system status into premium blocks. */ export default function BentoMatrixAuth() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [isFocused, setIsFocused] = useState<"email" | "password" | null>(null); const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* ================= BLOCK 1: Main Credentials (8 cols, 2 rows) ================= */}

{/* Subtle Ambient Gradient */}

System Access

Authenticate

Enter your standard credentials to decrypt your session node and access the platform.

e.preventDefault()}> {/* Standard Input Group */}

setEmail(e.target.value)} onFocus={() => setIsFocused("email")} onBlur={() => setIsFocused(null)} placeholder="name@company.com" className={`w-full pl-14 pr-4 py-4 @2xl:py-5 bg-zinc-50 dark:bg-[#121214] border-2 rounded-2xl text-sm font-bold text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none transition-all duration-300 ${ isFocused === "email" ? "border-indigo-500 shadow-[0_0_20px_rgba(99,102,241,0.1)]" : "border-transparent hover:border-zinc-200 dark:hover:border-zinc-800" }`} />

setPassword(e.target.value)} onFocus={() => setIsFocused("password")} onBlur={() => setIsFocused(null)} placeholder="••••••••••••" className={`w-full pl-14 pr-4 py-4 @2xl:py-5 bg-zinc-50 dark:bg-[#121214] border-2 rounded-2xl text-sm font-bold tracking-widest text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none transition-all duration-300 ${ isFocused === "password" ? "border-indigo-500 shadow-[0_0_20px_rgba(99,102,241,0.1)]" : "border-transparent hover:border-zinc-200 dark:hover:border-zinc-800" }`} />

Remember device Recover access

{/* ================= BLOCK 2: Quick Passkey (4 cols, 1 row) ================= */}

{/* Animated Background Ring */}

{/* Scanning Line */}

Use Passkey

Biometric login via device scanner.

{/* ================= BLOCK 3: Security Status (4 cols, 1 row) ================= */}

Secure

AES-256

End-to-end encrypted connection.

{/* ================= BLOCK 4: OAuth Providers (12 cols, 1 row) ================= */}

Or continue with

); }