"use client"; import { useEffect, useState } from "react"; import { AreaChart, Area, Tooltip, ResponsiveContainer } from "recharts"; import { ArrowUpRight, Command, Search, Zap, Users, Briefcase, Bell, Settings, Layers, Play } from "lucide-react"; import gsap from "gsap"; import { cn } from "@/src/lib/utils"; import { BentoCard, Metric, REVENUE_DATA, PROJECTS } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/PRISMOS"; // --- MAIN LAYOUT --- export default function PrismDashboard() { const [time, setTime] = useState(""); useEffect(() => { // Intro Animation const ctx = gsap.context(() => { gsap.from(".bento-item", { y: 100, opacity: 0, duration: 0.8, stagger: 0.1, ease: "power3.out", delay: 0.2 }); }); // Clock const timer = setInterval(() => { setTime(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); }, 1000); return () => { ctx.revert(); clearInterval(timer); } }, []); return (

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

{/* Animated Orbs */}

{/* Noise Texture */}

{/* --- CONTENT WRAPPER --- */}

{/* Header */}

Welcome back, Alex

Here's your agency's prism view for today.

{/* --- MASONRY BENTO GRID --- */}

{/* 1. Main Revenue (Span 2x2) */}

{/* 2. Team Status (Span 1x2) */}

{[ { name: 'Sarah', role: 'Design', status: 'Online', img: 'https://i.pravatar.cc/150?u=1' }, { name: 'Mike', role: 'Dev', status: 'In Meeting', img: 'https://i.pravatar.cc/150?u=2' }, { name: 'Jessica', role: 'PM', status: 'Online', img: 'https://i.pravatar.cc/150?u=3' } ].map((member, i) => (

{member.name}

{member.role}

))}

{/* 3. Time/Weather Widget (Span 1x1) */}

{time} London, UK

Sunny, 18°C

{/* 4. Project Status (Span 1x1) */}

{PROJECTS.map(p => (

{p.name} {p.progress}%

))}

{/* 5. Quick Actions (Span 2x1) */}

{[ { label: 'New Project', icon: Briefcase }, { label: 'Send Invoice', icon: ArrowUpRight }, { label: 'Add Member', icon: Users }, { label: 'Settings', icon: Settings }, ].map((action, i) => ( ))}

{/* 6. Media Player / Inspiration (Span 2x1) */}

Now Playing

Deep Focus Flow

Ambient Works • Vol 2

); }

Property	Type	Default	Description
prismColor1	string	#ff0080	First prism color (magenta).
prismColor2	string	#00ff80	Second prism color (green).
prismColor3	string	#0080ff	Third prism color (blue).
refractionIntensity	number	1	Intensity of light refraction effects (0-2).
animationSpeed	number	1	Speed of prism animations.

Prism OS

Props