"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Database, ShieldCheck, Cpu, Zap, BarChart3, Globe } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } const items = [ { id: "01", title: "Quantum Ledger", metric: "1.2ms Latency", description: "Real-time immutable database with atomic synchronization across 40 edge regions.", icon: Database, color: "from-blue-600 to-cyan-500", gridSpan: "@4xl:col-span-2 @4xl:row-span-2", }, { id: "02", title: "Neural Engine", metric: "98% Accuracy", description: "Proprietary AI core for predictive pattern recognition.", icon: Cpu, color: "from-purple-600 to-indigo-500", gridSpan: "@4xl:col-span-2 @4xl:row-span-1", }, { id: "03", title: "Zero-Trust", metric: "Encrypted", description: "Hardware-level security protocols.", icon: ShieldCheck, color: "from-emerald-600 to-teal-500", gridSpan: "@4xl:col-span-1 @4xl:row-span-1", }, { id: "04", title: "Turbo Flow", metric: "4.8 TB/s", description: "Global bandwidth throughput.", icon: Zap, color: "from-orange-600 to-amber-500", gridSpan: "@4xl:col-span-1 @4xl:row-span-1", }, ]; export function FeatureInteractiveBentoReveal() { const [hovered, setHovered] = useState(null); return (

Core Engine v4.8

High-velocity
infrastructure.

Scalable logic modules designed for maximum throughput and cryptographic integrity.

setHovered(null)} > {items.map((item) => ( setHovered(item.id)} className={cn( "relative rounded-[2.5rem] p-8 overflow-hidden transition-all duration-500 flex flex-col justify-between border", item.gridSpan, hovered === item.id ? "border-neutral-300 dark:border-neutral-700 shadow-2xl scale-[1.02] z-10" : "border-neutral-100 dark:border-neutral-900 opacity-60 dark:opacity-40 grayscale" )} > {/* Background Gradient Effect */} {hovered === item.id && ( )}

Status: OK

NODE_{item.id}

{item.title}

{item.metric}

{hovered === item.id && ( {item.description} )}

))}

); } export default function FeatureInteractiveBentoRevealDemo() { return ; }

High-velocity infrastructure.

{item.title}

High-velocity
infrastructure.