"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Compass, Zap, Box, Fingerprint, ArrowRight, Maximize } from "lucide-react"; const SkewCard = ({ title, subtitle, icon: Icon, metric, clipPath, hoverClip, gridClass, bg = "bg-zinc-100 dark:bg-zinc-900", accent = "text-indigo-500" }: { title: string; subtitle: string; icon: any; metric?: string; clipPath: string; hoverClip: string; gridClass: string; bg?: string; accent?: string; }) => { const [isHovered, setIsHovered] = useState(false); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className={`relative group ${gridClass} min-h-[300px] cursor-none`} >

{subtitle}

{title}

{metric && ( {metric} )}

View Protocol

{/* Decorative scanline */}

{/* Shadow layer for depth */}

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

{/* Card 1: Top Left - Aggressive Diagonal */} {/* Card 2: Top Right - Wedge Shape */} {/* Card 3: Bottom Left - Inverted Wedge */} {/* Card 4: Bottom Right - Completing the Puzzle */}

{/* Background elements */}

); }