"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Network, Fingerprint, Activity, Cpu, ArrowUpRight } from "lucide-react"; /** * MatrixNodeGrid: Generates a reactive grid of pulsing nodes. */ const MatrixNodeGrid = () => { return (

{[...Array(24)].map((_, i) => ( ))}

); }; /** * HashStream: Simulates a continuous stream of cryptographic hashes. */ const HashStream = () => { const [hashes, setHashes] = useState([]); useEffect(() => { const generateHash = () => Array.from({ length: 12 }, () => Math.floor(Math.random() * 16).toString(16) ).join(""); setHashes(Array.from({ length: 6 }, generateHash)); const interval = setInterval(() => { setHashes((prev) => [generateHash(), ...prev.slice(0, 5)]); }, 800); return () => clearInterval(interval); }, []); return (

{hashes.map((hash, i) => ( 0x{hash}... ))}

); }; export default function NexusFocusBento() { const [activeId, setActiveId] = useState(null); const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); if (!isMounted) return null; const BENTO_BLOCKS = [ { id: "block-1", size: "@4xl:col-span-8 @4xl:row-span-2", icon: Network, title: "Global Synchronization", subtitle: "Core Network Architecture", accent: "text-indigo-600 dark:text-indigo-400", content: (

), }, { id: "block-2", size: "@4xl:col-span-4 @4xl:row-span-1", icon: Cpu, title: "Active Nodes", subtitle: "Cluster Density", accent: "text-cyan-600 dark:text-cyan-400", content: (

), }, { id: "block-3", size: "@4xl:col-span-4 @4xl:row-span-1", icon: Fingerprint, title: "Ledger State", subtitle: "Live Cryptography", accent: "text-emerald-600 dark:text-emerald-400", content: (

), }, { id: "block-4", size: "@4xl:col-span-12 @4xl:row-span-1", icon: Activity, title: "Throughput Telemetry", subtitle: "Bandwidth Allocation", accent: "text-fuchsia-600 dark:text-fuchsia-400", content: (

), }, ]; return (

{BENTO_BLOCKS.map((block) => { const isFocused = activeId === block.id; const isBlurred = activeId !== null && activeId !== block.id; const IconComponent = block.icon; return ( setActiveId(block.id)} onMouseLeave={() => setActiveId(null)} initial={false} animate={{ scale: isFocused ? 1.02 : isBlurred ? 0.98 : 1, opacity: isBlurred ? 0.4 : 1, filter: isBlurred ? "blur(4px)" : "blur(0px)", zIndex: isFocused ? 20 : 10, }} transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }} className={` relative flex flex-col justify-between overflow-hidden bg-white dark:bg-white/[0.02] backdrop-blur-xl border border-slate-200 dark:border-white/5 rounded-[2rem] p-8 @2xl:p-10 cursor-crosshair transition-shadow duration-500 ${block.size} ${isFocused ? 'shadow-2xl shadow-slate-200/50 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1),0_20px_40px_-10px_rgba(0,0,0,0.8)]' : 'shadow-sm shadow-slate-200/30 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),0_10px_30px_-10px_rgba(0,0,0,0.5)]' } `} > {/* Internal Glow on Hover */}

{/* Block Header */}

{block.subtitle}

{block.title}

{isFocused ? : }

{/* Unique Block Content Animation */} {block.content} {/* Decorative Corner Borders */}

); })}

{/* Background Ambient Glow */}

); }