{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid-2",
  "title": "Bento Grid 2",
  "description": "Solace UI bento grid block variation 2.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/blocks/bento-grid/two/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n    BentoGridTemplateTwo,\n    BentoItem,\n} from \"@/registry/blocks/bento-grid/two/bento-grid-template-two\";\n\nconst sampleBentoData: BentoItem[] = [\n    {\n        id: \"design-system\",\n        title: \"Visual Design System\",\n        description: \"A comprehensive blueprint system built for layout structure.\",\n        size: \"large\",\n        tag: \"Blueprint\",\n        link: \"#design\",\n    },\n    {\n        id: \"ai-studio\",\n        title: \"AI Studio\",\n        description: \"Train and run agent prompting nodes with simple inputs.\",\n        size: \"small\",\n        tag: \"Active\",\n        link: \"#ai\",\n    },\n    {\n        id: \"analytics\",\n        title: \"Analytics Engine\",\n        description: \"Real-time metric telemetry and sparkline graphing.\",\n        size: \"small\",\n        tag: \"Live\",\n        link: \"#analytics\",\n    },\n    {\n        id: \"cloud-platform\",\n        title: \"Cloud Delivery Edge\",\n        description: \"Globally distributed regional edge nodes with real-time status reporting.\",\n        size: \"wide\",\n        tag: \"Edge\",\n        link: \"#cloud\",\n    },\n    {\n        id: \"security\",\n        title: \"Security Suite\",\n        description: \"Enterprise access control with JWT signature validation.\",\n        size: \"small\",\n        tag: \"Secure\",\n        link: \"#security\",\n    },\n    {\n        id: \"dev-hub\",\n        title: \"Developer Hub\",\n        description: \"CLI components and automated workspace setups.\",\n        size: \"small\",\n        tag: \"CLI Tool\",\n        link: \"#docs\",\n    },\n    {\n        id: \"collaboration\",\n        title: \"Realtime Collaboration\",\n        description: \"Multiplayer live presence cursors and shared scaling viewports.\",\n        size: \"small\",\n        tag: \"Multiplayer\",\n        link: \"#collaboration\",\n    },\n    {\n        id: \"community\",\n        title: \"Community & Integrations\",\n        description: \"Sync schemas across third-party operations pipelines.\",\n        size: \"small\",\n        tag: \"Sync Ready\",\n        link: \"#community\",\n    },\n];\n\nexport default function BentoGridTwo() {\n    const [items] = useState<BentoItem[]>(sampleBentoData);\n\n    return (\n        <div className=\"container mx-auto px-4 py-16 md:py-24\">\n            <BentoGridTemplateTwo items={items} gap={6} animate={true} />\n        </div>\n    );\n}\n",
      "type": "registry:component",
      "target": "components/bento-grid-2.tsx"
    },
    {
      "path": "src/registry/blocks/bento-grid/two/bento-grid-template-two.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport Link from \"next/link\";\nimport { ArrowUpRight, Lock, CheckCircle2, RefreshCw } from \"lucide-react\";\n\nexport type BentoItem = {\n    id: string;\n    title: string;\n    description?: string;\n    size?: \"small\" | \"medium\" | \"large\" | \"wide\" | \"tall\";\n    tag?: string;\n    link?: string;\n};\n\nexport type BentoGridProps = {\n    items: BentoItem[];\n    className?: string;\n    animate?: boolean;\n    gap?: number;\n};\n\nexport function BentoGridTemplateTwo({\n    items,\n    className,\n    animate = true,\n    gap = 6,\n}: BentoGridProps) {\n    return (\n        <div\n            className={cn(\n                \"grid grid-cols-1 md:grid-cols-4 auto-rows-[minmax(270px,auto)] w-full max-w-7xl mx-auto\",\n                className\n            )}\n            style={{ gap: `${gap * 0.25}rem` }}\n        >\n            {items.map((item, i) => {\n                return (\n                    <motion.div\n                        key={item.id}\n                        initial={animate ? { opacity: 0, y: 15 } : undefined}\n                        animate={animate ? { opacity: 1, y: 0 } : undefined}\n                        transition={{\n                            duration: 0.4,\n                            delay: animate ? i * 0.04 : 0,\n                            ease: [0.25, 1, 0.5, 1],\n                        }}\n                        className={cn(\n                            \"col-span-1 h-full\",\n                            item.size === \"large\" && \"md:col-span-2 md:row-span-2\",\n                            item.size === \"wide\" && \"md:col-span-2 md:row-span-1\"\n                        )}\n                    >\n                        <BentoGridItem item={item} />\n                    </motion.div>\n                );\n            })}\n        </div>\n    );\n}\n\n// Card 1: Visual Design System Morphing Mockup\nfunction DesignSystemMockup() {\n    const [isMobile, setIsMobile] = useState(false);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setIsMobile((prev) => !prev);\n        }, 3000);\n        return () => clearInterval(interval);\n    }, []);\n\n    return (\n        <div className=\"w-full h-full flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#050507] p-5 relative overflow-hidden select-none min-h-[220px]\">\n            {/* Blueprint Grid Lines */}\n            <div className=\"absolute inset-0 opacity-10 pointer-events-none\">\n                <svg width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" className=\"text-zinc-900 dark:text-white\">\n                    <defs>\n                        <pattern id=\"design-grid\" width=\"12\" height=\"12\" patternUnits=\"userSpaceOnUse\">\n                            <path d=\"M 12 0 L 0 0 0 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.5\" />\n                        </pattern>\n                      </defs>\n                      <rect width=\"100%\" height=\"100%\" fill=\"url(#design-grid)\" />\n                </svg>\n            </div>\n\n            {/* Header details */}\n            <div className=\"relative z-10 flex justify-between items-center font-mono text-[9px] text-zinc-400 dark:text-zinc-500 border-b border-zinc-200 dark:border-zinc-900 pb-2 mb-2\">\n                <span className=\"text-zinc-700 dark:text-zinc-300 font-semibold tracking-wider\">RESPONSIVE CANVAS</span>\n                <span>{isMobile ? \"VIEWPORT: MOBILE\" : \"VIEWPORT: DESKTOP\"}</span>\n            </div>\n\n            {/* Morphing layout boxes */}\n            <div className=\"relative z-10 flex-grow flex flex-col justify-center gap-4 py-2\">\n                <motion.div \n                    layout\n                    transition={{ duration: 0.6, ease: [0.25, 1, 0.5, 1] }}\n                    className={cn(\n                        \"w-full flex gap-3\",\n                        isMobile ? \"flex-col items-stretch\" : \"flex-row items-center\"\n                    )}\n                >\n                    {/* Box 1: Core Hero block */}\n                    <motion.div \n                        layout\n                        className=\"flex-grow p-3 border border-zinc-200 bg-white/80 dark:border-zinc-800 dark:bg-zinc-950/60 min-h-[50px] flex flex-col justify-between rounded-none\"\n                    >\n                        <div className=\"h-1.5 w-1/3 bg-zinc-300 dark:bg-zinc-850\" />\n                        <div className=\"h-1 w-full bg-zinc-200 dark:bg-zinc-900/60 mt-2\" />\n                    </motion.div>\n\n                    {/* Box 2: Secondary card */}\n                    <motion.div \n                        layout\n                        className={cn(\n                            \"p-3 border border-zinc-200 bg-white/80 dark:border-zinc-800 dark:bg-zinc-950/60 min-h-[50px] flex flex-col justify-between rounded-none\",\n                            isMobile ? \"w-full\" : \"w-[30%]\"\n                        )}\n                    >\n                        <div className=\"h-1.5 w-1/2 bg-zinc-300 dark:bg-zinc-850\" />\n                        <div className=\"h-1 w-full bg-zinc-200 dark:bg-zinc-900/60 mt-2\" />\n                    </motion.div>\n\n                    {/* Box 3: Tertiary card */}\n                    <motion.div \n                        layout\n                        className={cn(\n                            \"p-3 border border-zinc-200 bg-white/80 dark:border-zinc-800 dark:bg-zinc-950/60 min-h-[50px] flex flex-col justify-between rounded-none\",\n                            isMobile ? \"w-full\" : \"w-[25%]\"\n                        )}\n                    >\n                        <div className=\"h-1.5 w-2/3 bg-indigo-500/20 dark:bg-indigo-500/15\" />\n                        <div className=\"h-1 w-full bg-zinc-200 dark:bg-zinc-900/60 mt-2\" />\n                    </motion.div>\n                </motion.div>\n\n                {/* Canvas alignment indicators */}\n                <div className=\"flex justify-between items-center font-mono text-[8px] text-zinc-400 dark:text-zinc-650 mt-1\">\n                    <div className=\"flex items-center gap-1.5\">\n                        <span className=\"h-1 w-1 bg-indigo-500 rounded-full\" />\n                        <span>Auto-Layout: Flex</span>\n                    </div>\n                    <span>Gap: 12px</span>\n                </div>\n            </div>\n\n            {/* Footer details */}\n            <div className=\"relative z-10 text-[9px] font-mono text-zinc-400 dark:text-zinc-650 flex justify-between items-center pt-3 border-t border-zinc-200 dark:border-zinc-900\">\n                <span>COORDINATE MAPPING ENGINE</span>\n                <span className=\"h-1.5 w-1.5 bg-indigo-500 animate-ping rounded-none\" />\n            </div>\n        </div>\n    );\n}\n\n// Card 2: AI Studio typewriting effect\nfunction AIStudioMockup() {\n    const text = \"Design modular navigation bar with responsive layout\";\n    const [displayText, setDisplayText] = useState(\"\");\n\n    useEffect(() => {\n        let i = 0;\n        let isDeleting = false;\n        let timer: NodeJS.Timeout;\n\n        const type = () => {\n            if (!isDeleting) {\n                setDisplayText(text.slice(0, i));\n                i++;\n                if (i > text.length) {\n                    isDeleting = true;\n                    timer = setTimeout(type, 1500); // pause at the end\n                    return;\n                }\n                timer = setTimeout(type, 70);\n            } else {\n                setDisplayText(text.slice(0, i));\n                i--;\n                if (i < 0) {\n                    isDeleting = false;\n                    i = 0;\n                    timer = setTimeout(type, 500); // pause before starting over\n                    return;\n                }\n                timer = setTimeout(type, 30);\n            }\n        };\n\n        type();\n        return () => clearTimeout(timer);\n    }, []);\n\n    return (\n        <div className=\"w-full h-[120px] flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] p-3 font-mono text-[10px] text-zinc-500 relative overflow-hidden select-none\">\n            <div className=\"space-y-1\">\n                <div className=\"flex items-center justify-between text-zinc-650 dark:text-zinc-400 pb-1.5 border-b border-zinc-200 dark:border-zinc-900/60\">\n                    <span>Agent Prompt</span>\n                    <span className=\"text-[9px] text-zinc-400 dark:text-zinc-600\">Model: sol-v4</span>\n                </div>\n                <div className=\"pt-2 text-[10px] leading-relaxed text-zinc-750 dark:text-zinc-400 min-h-[40px]\">\n                    <span className=\"text-zinc-400 dark:text-zinc-600\">&gt; </span>\n                    <span>{displayText}</span>\n                    <span className=\"animate-pulse text-indigo-500 dark:text-indigo-400 font-bold ml-0.5\">|</span>\n                </div>\n            </div>\n            <div className=\"flex justify-between items-center pt-2 border-t border-zinc-200 dark:border-zinc-900/60\">\n                <span className=\"text-[9px] text-zinc-400 dark:text-zinc-600\">Tokens: {displayText.length * 3} / 8k</span>\n                <button className=\"px-2.5 py-0.5 bg-white border border-zinc-200 hover:bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:border-zinc-800 dark:text-white dark:hover:bg-zinc-800 transition-colors cursor-pointer text-[9px] rounded-none\">\n                    EXECUTE\n                </button>\n            </div>\n        </div>\n    );\n}\n\n// Card 3: Analytics build of curve animation\nfunction AnalyticsMockup() {\n    return (\n        <div className=\"w-full h-[120px] flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] p-3 font-mono text-[10px] text-zinc-500 relative overflow-hidden select-none\">\n            <div className=\"flex items-center justify-between text-zinc-650 dark:text-zinc-400 pb-1.5 border-b border-zinc-200 dark:border-zinc-900/60\">\n                <span>Telemetry Rate</span>\n                <span className=\"text-[9px] text-emerald-500 dark:text-emerald-400 flex items-center gap-1\">\n                    <span className=\"h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse\" />\n                    ONLINE\n                </span>\n            </div>\n            <div className=\"py-2.5 flex items-center justify-center\">\n                <svg className=\"w-full h-10\" viewBox=\"0 0 100 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    {/* Background grid lines */}\n                    <line x1=\"0\" y1=\"10\" x2=\"100\" y2=\"10\" stroke=\"currentColor\" className=\"text-zinc-200/50 dark:text-zinc-900/50\" strokeWidth=\"0.5\" />\n                    <line x1=\"0\" y1=\"20\" x2=\"100\" y2=\"20\" stroke=\"currentColor\" className=\"text-zinc-200/50 dark:text-zinc-900/50\" strokeWidth=\"0.5\" />\n                    \n                    <motion.path\n                        d=\"M0 25 L15 20 L30 22 L45 8 L60 18 L75 10 L90 5 L100 8\"\n                        stroke=\"#6366f1\"\n                        strokeWidth=\"1.5\"\n                        fill=\"none\"\n                        animate={{ pathLength: [0, 1, 1, 0] }}\n                        transition={{\n                            duration: 5,\n                            repeat: Infinity,\n                            ease: \"easeInOut\",\n                            times: [0, 0.7, 0.9, 1]\n                        }}\n                    />\n                    <motion.circle\n                        cx=\"100\"\n                        cy=\"8\"\n                        r=\"2\"\n                        fill=\"#818cf8\"\n                        animate={{\n                            opacity: [0, 0, 1, 0],\n                            scale: [0.5, 1, 1.4, 0.5]\n                        }}\n                        transition={{\n                            duration: 5,\n                            repeat: Infinity,\n                            ease: \"easeInOut\",\n                            times: [0, 0.65, 0.7, 1]\n                        }}\n                    />\n                </svg>\n            </div>\n            <div className=\"flex justify-between items-center text-[9px] text-zinc-400 dark:text-zinc-600\">\n                <span>AVG LATENCY: 14ms</span>\n                <span>SYNC RATE: 99.98%</span>\n            </div>\n        </div>\n    );\n}\n\n// Card 4: Cloud Latency Monitor Mockup\nfunction CloudMockup() {\n    const [latency1, setLatency1] = useState(11);\n    const [latency2, setLatency2] = useState(24);\n    const [latency3, setLatency3] = useState(38);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setLatency1(Math.floor(9 + Math.random() * 5));\n            setLatency2(Math.floor(21 + Math.random() * 6));\n            setLatency3(Math.floor(35 + Math.random() * 7));\n        }, 2000);\n        return () => clearInterval(interval);\n    }, []);\n\n    return (\n        <div className=\"w-full h-[100px] flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] p-3 font-mono text-[10px] text-zinc-500 relative overflow-hidden select-none\">\n            <div className=\"flex items-center justify-between text-zinc-600 dark:text-zinc-400 pb-1.5 border-b border-zinc-200 dark:border-zinc-900/60\">\n                <span>Regional Edge Nodes</span>\n                <span>Active Distribution</span>\n            </div>\n            <div className=\"grid grid-cols-3 gap-2.5 py-1\">\n                <div className=\"p-2 border border-zinc-205 bg-white dark:border-zinc-900 dark:bg-zinc-950/40 flex items-center justify-between\">\n                    <span>US-EAST</span>\n                    <span className=\"text-emerald-500 dark:text-emerald-400 flex items-center gap-1 font-semibold\">\n                        <span className=\"size-1 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-ping\" />\n                        {latency1}ms\n                    </span>\n                </div>\n                <div className=\"p-2 border border-zinc-205 bg-white dark:border-zinc-900 dark:bg-zinc-950/40 flex items-center justify-between\">\n                    <span>EU-WEST</span>\n                    <span className=\"text-emerald-500 dark:text-emerald-400 flex items-center gap-1 font-semibold\">\n                        <span className=\"size-1 rounded-full bg-emerald-500 dark:bg-emerald-400\" />\n                        {latency2}ms\n                    </span>\n                </div>\n                <div className=\"p-2 border border-zinc-205 bg-white dark:border-zinc-900 dark:bg-zinc-950/40 flex items-center justify-between\">\n                    <span>AP-SOUTH</span>\n                    <span className=\"text-emerald-500 dark:text-emerald-400 flex items-center gap-1 font-semibold\">\n                        <span className=\"size-1 rounded-full bg-emerald-500 dark:bg-emerald-400\" />\n                        {latency3}ms\n                    </span>\n                </div>\n            </div>\n        </div>\n    );\n}\n\n// Card 5: Security Lock Mockup\nfunction SecurityMockup() {\n    const [isValidating, setIsValidating] = useState(false);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setIsValidating(true);\n            setTimeout(() => setIsValidating(false), 900);\n        }, 4000);\n        return () => clearInterval(interval);\n    }, []);\n\n    return (\n        <div className=\"w-full h-[120px] flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] p-3 font-mono text-[9px] text-zinc-500 relative overflow-hidden select-none\">\n            <div className=\"flex items-center justify-between text-zinc-650 dark:text-zinc-400 pb-1.5 border-b border-zinc-200 dark:border-zinc-900/60\">\n                <span>Access Control</span>\n                <Lock className={cn(\"h-3 w-3 transition-colors duration-300\", isValidating ? \"text-emerald-500\" : \"text-indigo-500 dark:text-indigo-400\")} />\n            </div>\n            <div className=\"py-2.5 break-all leading-normal opacity-85\">\n                <span className=\"text-indigo-550 dark:text-indigo-400 font-medium\">eyJhbGciOiJIUzI1NiJ9.</span>\n                <span className=\"text-zinc-600 dark:text-zinc-500\">eyJuYW1lIjoiU2FyYWgifQ.</span>\n                <span className=\"text-zinc-700 dark:text-zinc-700\">signature-verification-key</span>\n            </div>\n            <div className=\"flex justify-between items-center text-[8px] font-semibold\">\n                <span>ALGORITHM: HS256</span>\n                <span className={cn(\"transition-colors duration-300\", isValidating ? \"text-emerald-500\" : \"text-zinc-400 dark:text-zinc-600\")}>\n                    {isValidating ? \"VERIFYING...\" : \"SIGNATURE VALIDATED\"}\n                </span>\n            </div>\n        </div>\n    );\n}\n\n// Card 6: Developer CLI mockup\nfunction DeveloperHubMockup() {\n    const [step, setStep] = useState(0);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setStep((prev) => (prev + 1) % 3);\n        }, 3000);\n        return () => clearInterval(interval);\n    }, []);\n\n    return (\n        <div className=\"w-full h-[120px] flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] p-3 font-mono text-[10px] text-zinc-500 relative overflow-hidden select-none\">\n            <div className=\"flex items-center gap-1 text-zinc-400 dark:text-zinc-750 pb-1.5 border-b border-zinc-200 dark:border-zinc-900/60\">\n                <div className=\"size-1.5 bg-zinc-300 dark:bg-zinc-800\" />\n                <div className=\"size-1.5 bg-zinc-300 dark:bg-zinc-800\" />\n                <div className=\"size-1.5 bg-zinc-300 dark:bg-zinc-800\" />\n                <span className=\"ml-auto text-[8px] text-zinc-400 dark:text-zinc-600\">terminal</span>\n            </div>\n            <div className=\"py-2 space-y-1.5 min-h-[50px] flex flex-col justify-center\">\n                {step >= 0 && (\n                    <div>\n                        <span className=\"text-zinc-400 dark:text-zinc-600\">$ </span>\n                        <span className=\"text-zinc-900 dark:text-white\">npx solaceui add bento-grid</span>\n                    </div>\n                )}\n                {step === 1 && (\n                    <div className=\"text-zinc-400 flex items-center gap-1.5 text-[9px]\">\n                        <RefreshCw className=\"h-2.5 w-2.5 animate-spin\" />\n                        <span>installing components...</span>\n                    </div>\n                )}\n                {step === 2 && (\n                    <div className=\"text-emerald-600 dark:text-emerald-500 opacity-90 text-[9px] flex items-center gap-1\">\n                        <CheckCircle2 className=\"h-3 w-3\" />\n                        <span>Component successfully added</span>\n                    </div>\n                )}\n            </div>\n            <div className=\"text-[8px] text-zinc-405 dark:text-zinc-700 border-t border-zinc-200 dark:border-zinc-900/40 pt-1.5\">\n                solaceui-cli@1.0.8\n            </div>\n        </div>\n    );\n}\n\n// Card 8: Community Integrations Sync Grid Mockup\nfunction CommunityMockup() {\n    const [activeNode, setActiveNode] = useState(0);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setActiveNode((prev) => (prev + 1) % 4);\n        }, 1500);\n        return () => clearInterval(interval);\n    }, []);\n\n    const nodes = [\"GitHub\", \"Figma\", \"Slack\", \"Linear\"];\n\n    return (\n        <div className=\"w-full h-[120px] flex flex-col justify-between border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] p-3 font-mono text-[9px] text-zinc-500 relative overflow-hidden select-none\">\n            <div className=\"flex items-center justify-between text-zinc-600 dark:text-zinc-400 pb-1.5 border-b border-zinc-200 dark:border-zinc-900/60\">\n                <span>Schema Sync</span>\n                <span className=\"text-[8px] text-indigo-400 animate-pulse\">SYNCING</span>\n            </div>\n            <div className=\"grid grid-cols-2 gap-1.5 py-2\">\n                {nodes.map((node, index) => {\n                    const isActive = activeNode === index;\n                    return (\n                        <div\n                            key={node}\n                            className={cn(\n                                \"p-1 border text-center transition-all duration-300 rounded-none cursor-pointer\",\n                                isActive \n                                    ? \"border-indigo-500 bg-indigo-500/5 text-indigo-600 dark:border-indigo-400 dark:bg-indigo-400/5 dark:text-indigo-400 font-semibold\"\n                                    : \"border-zinc-200 bg-white hover:text-black dark:border-zinc-900 dark:bg-zinc-950/40 dark:hover:text-white\"\n                            )}\n                        >\n                            {node}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n\nfunction BentoGridItem({ item }: { item: BentoItem }) {\n    const { id, title, description, link, tag } = item;\n\n    // Helper to render card visual mockup components\n    const renderVisualMockup = () => {\n        switch (id) {\n            case \"design-system\":\n                return <DesignSystemMockup />;\n\n            case \"ai-studio\":\n                return <AIStudioMockup />;\n\n            case \"analytics\":\n                return <AnalyticsMockup />;\n\n            case \"cloud-platform\":\n                return <CloudMockup />;\n\n            case \"security\":\n                return <SecurityMockup />;\n\n            case \"dev-hub\":\n                return <DeveloperHubMockup />;\n\n            case \"collaboration\":\n                return (\n                    <div className=\"w-full h-[120px] border border-zinc-200 bg-zinc-50/50 dark:border-zinc-900 dark:bg-[#040405] relative overflow-hidden select-none\">\n                        <div className=\"absolute inset-0 opacity-[0.03] pointer-events-none\">\n                            <svg width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" className=\"text-zinc-900 dark:text-white\">\n                                <defs>\n                                    <pattern id=\"collab-grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n                                        <circle cx=\"5\" cy=\"5\" r=\"0.5\" fill=\"currentColor\" />\n                                    </pattern>\n                                </defs>\n                                <rect width=\"100%\" height=\"100%\" fill=\"url(#collab-grid)\" />\n                            </svg>\n                        </div>\n                        {/* Cursor 1 */}\n                        <motion.div\n                            className=\"absolute left-[15%] top-[35%] flex items-center gap-1 pointer-events-none z-10\"\n                            animate={{ x: [0, 20, -5, 0], y: [0, -10, 15, 0] }}\n                            transition={{ duration: 7, repeat: Infinity, ease: \"easeInOut\" }}\n                        >\n                            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n                                <path d=\"M0 0 L8 3 L5 5 L3 8 Z\" fill=\"#6366f1\" />\n                            </svg>\n                            <span className=\"px-1 py-0.2 bg-[#6366f1] text-white text-[7px] font-semibold uppercase tracking-wider rounded-none\">SARAH</span>\n                        </motion.div>\n                        {/* Cursor 2 */}\n                        <motion.div\n                            className=\"absolute left-[55%] top-[20%] flex items-center gap-1 pointer-events-none z-10\"\n                            animate={{ x: [0, -25, 10, 0], y: [0, 20, -5, 0] }}\n                            transition={{ duration: 9, repeat: Infinity, ease: \"easeInOut\", delay: 0.5 }}\n                        >\n                            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n                                <path d=\"M0 0 L8 3 L5 5 L3 8 Z\" fill=\"#ec4899\" />\n                            </svg>\n                            <span className=\"px-1 py-0.2 bg-[#ec4899] text-white text-[7px] font-semibold uppercase tracking-wider rounded-none\">MARCUS</span>\n                        </motion.div>\n                    </div>\n                );\n\n            case \"community\":\n                return <CommunityMockup />;\n\n            default:\n                return null;\n        }\n    };\n\n    const ContentWrapper = (\n        <div className=\"group/item relative flex flex-col justify-between h-full bg-white border border-zinc-200 text-zinc-700 dark:bg-[#060608] dark:border-zinc-900 dark:text-zinc-300 p-6 relative overflow-hidden transition-all duration-300 hover:border-zinc-300 dark:hover:border-zinc-800 hover:scale-[1.01] hover:-translate-y-0.5 hover:shadow-[0_12px_25px_rgba(0,0,0,0.04)] dark:hover:shadow-[0_12px_25px_rgba(0,0,0,0.6)] select-none rounded-none\">\n            {/* Visual Header containing Tag and Arrow */}\n            <div className=\"flex justify-between items-center mb-4 z-10\">\n                {tag && (\n                    <span className=\"text-[9px] font-bold tracking-widest text-zinc-500 border border-zinc-250 bg-zinc-50 dark:border-zinc-900 dark:bg-zinc-950/50 px-2 py-0.5 rounded-none uppercase\">\n                        {tag}\n                    </span>\n                )}\n                {link && (\n                    <ArrowUpRight className=\"h-4 w-4 text-zinc-400 group-hover/item:text-zinc-900 dark:text-zinc-600 dark:group-hover/item:text-white group-hover/item:translate-x-0.5 group-hover/item:-translate-y-0.5 transition-all duration-300\" />\n                )}\n            </div>\n\n            {/* Custom Visual Graphic Content */}\n            <div className=\"my-2 flex-grow flex items-center justify-center z-10\">\n                {renderVisualMockup()}\n            </div>\n\n            {/* Title & Description at the bottom */}\n            <div className=\"mt-4 space-y-1.5 z-10\">\n                <h3 className=\"text-sm font-semibold tracking-tight text-zinc-900 dark:text-white group-hover/item:text-zinc-950 dark:group-hover/item:text-zinc-100 transition-colors\">\n                    {title}\n                </h3>\n                {description && (\n                    <p className=\"text-xs text-zinc-500 dark:text-zinc-500 leading-relaxed max-w-sm\">\n                        {description}\n                    </p>\n                )}\n            </div>\n        </div>\n    );\n\n    if (link) {\n        return (\n            <Link href={link} className=\"block h-full w-full outline-none focus:outline-none rounded-none\">\n                {ContentWrapper}\n            </Link>\n        );\n    }\n\n    return ContentWrapper;\n}\n",
      "type": "registry:component",
      "target": "components/bento-grid-template-two.tsx"
    }
  ],
  "type": "registry:block"
}