"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Zap, Shield, Command, Cpu, Radio, Maximize2 } from "lucide-react"; const GlitchLayer = ({ color }: { color: string }) => ( ); interface ShardCardProps { title: string; subtitle: string; icon: React.ElementType; metric?: string; gridClass: string; variant?: "primary" | "secondary" | "accent"; } const ShardCard = ({ title, subtitle, icon: Icon, metric, gridClass, variant = "primary" }: ShardCardProps) => { const [isHovered, setIsHovered] = useState(false); const theme = { primary: "border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-zinc-100", secondary: "border-indigo-500/30 text-indigo-600 dark:text-indigo-400 bg-indigo-500/5", accent: "border-rose-500/30 text-rose-600 dark:text-rose-400 bg-rose-500/5" }[variant]; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className={`relative group overflow-hidden border p-8 flex flex-col justify-between transition-all duration-300 ${theme} ${gridClass} bg-white dark:bg-[#0a0a0a] rounded-none`} > {/* Glitch Effects on Hover */} {isHovered && ( <> )}

// {subtitle}

{title}

{metric && (

{metric}

)}

STATUS: OK

{/* Decorative Shard Geometry */}

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

{/* Background Decorative Grid */}

); }