"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { Terminal, Shield, Zap, Activity, Lock, ChevronRight } from "lucide-react"; const NeonCorner = ({ position, colorClass }: { position: string, colorClass: string }) => { const positions: Record = { "top-left": "top-0 left-0 border-t-2 border-l-2", "top-right": "top-0 right-0 border-t-2 border-r-2", "bottom-left": "bottom-0 left-0 border-b-2 border-l-2", "bottom-right": "bottom-0 right-0 border-b-2 border-r-2", }; return (

); }; const CyberCard = ({ title, subtitle, icon: Icon, metric, gridClass, color = "cyan" }: { title: string; subtitle: string; icon: any; metric?: string; gridClass: string; color?: "cyan" | "rose" | "emerald"; }) => { const themes = { cyan: { border: "border-cyan-500/20 dark:border-cyan-500/30", hoverBorder: "group-hover:border-cyan-500", text: "text-cyan-600 dark:text-cyan-400", glow: "bg-cyan-500", corner: "border-cyan-500", shadow: "group-hover:shadow-[0_0_30px_rgba(6,182,212,0.15)] dark:group-hover:shadow-[0_0_40px_rgba(6,182,212,0.2)]" }, rose: { border: "border-rose-500/20 dark:border-rose-500/30", hoverBorder: "group-hover:border-rose-500", text: "text-rose-600 dark:text-rose-400", glow: "bg-rose-500", corner: "border-rose-500", shadow: "group-hover:shadow-[0_0_30px_rgba(244,63,94,0.15)] dark:group-hover:shadow-[0_0_40px_rgba(244,63,94,0.2)]" }, emerald: { border: "border-emerald-500/20 dark:border-emerald-500/30", hoverBorder: "group-hover:border-emerald-500", text: "text-emerald-600 dark:text-emerald-400", glow: "bg-emerald-500", corner: "border-emerald-500", shadow: "group-hover:shadow-[0_0_30_rgba(16,185,129,0.15)] dark:group-hover:shadow-[0_0_40px_rgba(16,185,129,0.2)]" } }; const theme = themes[color]; return (

{/* Background Pulse Glow */} {/* Tactical Corners */}

{subtitle}

{title}

{metric && (

{metric}

)}

{/* Decorative ID tag */}

0x_{title.replace(/\s/g, '_').toUpperCase()}

); }; export default function CyberNeonBento() { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* Structural Grid Background */}

); }