"use client"; import React, { useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { Compass, Layers, Zap, Terminal, ArrowUpRight, Plus } from "lucide-react"; const TiltCard = ({ children, gridClass, delay = 0 }: { children: React.ReactNode; gridClass: string; delay?: number; }) => { const x = useMotionValue(0); const y = useMotionValue(0); const mouseXSpring = useSpring(x); const mouseYSpring = useSpring(y); const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["7deg", "-7deg"]); const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-7deg", "7deg"]); const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const width = rect.width; const height = rect.height; const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; const xPct = mouseX / width - 0.5; const yPct = mouseY / height - 0.5; x.set(xPct); y.set(yPct); }; const handleMouseLeave = () => { x.set(0); y.set(0); }; return ( {children} ); }; const CardContent = ({ title, subtitle, icon: Icon, metric, color }: any) => (

{/* Background Decorative Element */}

{subtitle}

{title}

{metric && (

{metric}

)}

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

))}

{/* Floating accent line */}

); export default function PlanarDepthBento() { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* Decorative environment background */}

); }