"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { AreaChart, Area, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; import { Dna, Activity, Zap, Search, Microscope, Biohazard, Plus, ArrowUpRight, } from "lucide-react"; import { cn } from "@/src/lib/utils"; import { GlobalStyles, NavOrb, StatOrb, BioCard, VITAL_SIGNS, CELLS, SYMBIOTES } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/XOXO"; // --- MAIN LAYOUT --- export default function XenoDashboard() { const [activeTab, setActiveTab] = useState("Bio-Monitor"); const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); // Mouse "Torch" Effect useEffect(() => { const handleMove = (e: MouseEvent) => setMousePos({ x: e.clientX, y: e.clientY }); window.addEventListener("mousemove", handleMove); return () => window.removeEventListener("mousemove", handleMove); }, []); return (

{/* --- AMBIENT BACKGROUND LAYER --- */}

{/* Mouse Follower Blob */} {/* Static Blobs */}

{/* Organic Mesh Texture */}

{/* Hexagon Grid Overlay */}

{/* --- CONTENT LAYER --- */}

{/* LEFT NUCLEUS (Nav) */}

{[ { id: "Bio-Monitor", icon: Activity }, { id: "Cells", icon: Dna }, { id: "Metabolism", icon: Zap }, { id: "Symbiotes", icon: Biohazard }, { id: "Scan", icon: Search }, ].map((item) => ( setActiveTab(item.id)} /> ))}

{/* MAIN ORGANISM (Dashboard) */}

{/* Header */}

XENO.SYS

v.9.0.2 // Subject: Agency_Alpha // Vital Signs: Normal

System Load: 12%

{/* Scrollable View */}

{/* TOP ROW: ORBS */}

{/* Summary Card */}

Organism Health

Optimal

All agency systems function within expected parameters. Revenue intake increased by 14% since last cycle.

{/* MIDDLE ROW: CHARTS & CELLS */}

{/* Main Vital Graph */}

{/* Active Cells List */}

{CELLS.map((cell) => (

{cell.name} {cell.type}

))}

{/* BOTTOM ROW: SYMBIOTES */}

{SYMBIOTES.map((sym: any) => (

{sym.name}

{sym.role} // {sym.status}

))}

); }

Property	Type	Default	Description
primaryColor	string	#ff006e	Playful pink color for XOXO elements.
secondaryColor	string	#8338ec	Secondary playful color for variety.
interactionIntensity	number	1	Intensity of playful interactions (0.5-2).
enableAnimations	boolean	true	Enable fun animations and transitions.

XOXO

Props