"use client"; import React, { useMemo, useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { Sparkles, Cpu, Shield, Zap, Globe, Network } from "lucide-react"; // --- TYPES --- interface FeatureCardProps { title: string; desc: string; icon: React.ElementType; accent: string; glow: string; } const FeatureCard = ({ title, desc, icon: Icon, accent, glow }: FeatureCardProps) => { const cardRef = useRef(null); // 3D Physics (UIXTRA Engine) const x = useMotionValue(0); const y = useMotionValue(0); const springConfig = { damping: 25, stiffness: 200 }; const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [10, -10]), springConfig); const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-10, 10]), springConfig); const glowX = useSpring(useTransform(x, [-0.5, 0.5], ["-20%", "20%"]), springConfig); const glowY = useSpring(useTransform(y, [-0.5, 0.5], ["-20%", "20%"]), springConfig); const stars = useMemo(() => { return Array.from({ length: 30 }).map((_, i) => ({ id: i, left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, size: Math.random() * 1.2 + 0.4, opacity: Math.random() * 0.5 + 0.3, duration: Math.random() * 3 + 2, })); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); x.set((e.clientX - rect.left) / rect.width - 0.5); y.set((e.clientY - rect.top) / rect.height - 0.5); }; return (

{ x.set(0); y.set(0); }} style={{ rotateX, rotateY, transformStyle: "preserve-3d" }} className="relative group w-full max-w-[320px] h-[380px] rounded-[2.5rem] bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-white/5 overflow-hidden transition-all duration-500 hover:shadow-2xl dark:hover:border-white/20" > {/* INTERNAL STARFIELD */}

{stars.map((star) => ( ))}

{/* MOUSE-TRACKING GLOW */} {/* CARD CONTENT */}

{title}

{desc}

V3 System

); }; export default function CosmosFeatureHub() { const features = [ { title: "Neural Mesh", desc: "Distributed node processing with zero latency overhead for enterprise-grade clusters.", icon: Network, accent: "text-blue-500", glow: "from-blue-600 to-indigo-600" }, { title: "Quantum Lock", desc: "Military-grade encryption for every data packet using non-linear security protocols.", icon: Shield, accent: "text-amber-500", glow: "from-amber-600 to-orange-600" }, { title: "Edge Sync", desc: "Real-time global state synchronization in under 10ms across 40+ regional edges.", icon: Globe, accent: "text-purple-500", glow: "from-purple-600 to-fuchsia-600" } ]; return (

Core Architecture

Unleash the
Core Engine.

{features.map((f, i) => ( ))}

); }

{title}

Unleash the Core Engine.

Unleash the
Core Engine.