{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "template1",
  "title": "Template Open Agents.",
  "description": "",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/templates/template1.tsx",
      "content": "'use client';\r\n\r\nimport { useState } from 'react';\r\nimport { motion } from 'framer-motion';\r\nimport { ChevronRight, CodeXml, Sun, Moon } from 'lucide-react';\r\nimport Link from \"next/link\";\r\n\r\nconst fadeInUp = {\r\n    initial: { opacity: 0, y: 20 },\r\n    whileInView: { opacity: 1, y: 0 },\r\n    viewport: { once: true },\r\n    transition: { duration: 0.6 }\r\n};\r\n\r\nconst staggerContainer = {\r\n    initial: { opacity: 0 },\r\n    whileInView: { opacity: 1 },\r\n    viewport: { once: true },\r\n    transition: { staggerChildren: 0.1, delayChildren: 0.2 }\r\n};\r\n\r\nconst staggerItem = {\r\n    initial: { opacity: 0, y: 10 },\r\n    whileInView: { opacity: 1, y: 0 },\r\n    transition: { duration: 0.5 }\r\n};\r\n\r\nexport default function OpenAgents() {\r\n    const [dark, setDark] = useState(false);\r\n\r\n    const toggle = () => {\r\n        setDark(!dark);\r\n        document.documentElement.classList.toggle('dark', !dark);\r\n    };\r\n\r\n    const bg = dark ? 'bg-black' : 'bg-white';\r\n    const text = dark ? 'text-white' : 'text-black';\r\n    const border = dark ? 'border-white/10' : 'border-black/10';\r\n    const muted = dark ? 'text-white/50' : 'text-black/50';\r\n    const subtle = dark ? 'text-white/70' : 'text-black/70';\r\n    const btnPrimary = dark ? 'bg-white text-black hover:bg-white/90' : 'bg-black text-white hover:bg-black/80';\r\n    const btnOutline = dark ? 'border-white/20 hover:border-white/60' : 'border-black/20 hover:border-black/60';\r\n    const cardBg = dark ? 'bg-white/5' : 'bg-black/5';\r\n    const logoSrc = dark\r\n        ? \"https://bagui.vercel.app/faviconblack.png\"\r\n        : \"https://bagui.vercel.app/faviconwhite.png\";\r\n\r\n    return (\r\n        <div className={`min-h-screen ${bg} ${text} transition-colors duration-300`}>\r\n            {/* Navigation */}\r\n            <nav className={`sticky top-0 z-50 border-b ${border} ${bg}/80 backdrop-blur-md`}>\r\n                <div className={`max-w-7xl mx-auto px-6 h-16 flex items-center justify-between border-x ${border}`}>\r\n                    <div className=\"flex items-center gap-3 shrink-0\">\r\n                        <Link href=\"/\" className=\"flex items-center gap-2\">\r\n                            <img src={logoSrc} alt=\"BagUI Logo\" width={30} height={30} />\r\n                            <span className={`text-sm font-semibold tracking-tight ${text}`}>Bag\\Ui</span>\r\n                        </Link>\r\n                        <Link\r\n                            href=\"https://x.com/anelkabag\"\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className={`text-xs ${muted} hover:${text} transition-colors`}\r\n                        >\r\n                            by Anelka\r\n                        </Link>\r\n                    </div>\r\n                    <div className=\"flex items-center gap-8\">\r\n                        <Link href=\"/docs\" className={`text-sm ${muted} hover:${text} transition-colors`}>Docs</Link>\r\n                        <Link href=\"/pricing\" className={`text-sm ${muted} hover:${text} transition-colors`}>Pricing</Link>\r\n                        <Link href=\"/blog\" className={`text-sm ${muted} hover:${text} transition-colors`}>Blog</Link>\r\n                    </div>\r\n                </div>\r\n            </nav>\r\n\r\n            <div className={`max-w-7xl mx-auto px-6 border-x border-b ${border}`}>\r\n                {/* Hero */}\r\n                <motion.section\r\n                    className=\"pt-10\"\r\n                    initial={{ opacity: 0 }}\r\n                    animate={{ opacity: 1 }}\r\n                    transition={{ duration: 0.8 }}\r\n                >\r\n                    <div className=\"max-w-2xl\">\r\n                        <motion.h1\r\n                            className=\"text-5xl md:text-6xl font-bold mb-6 leading-tight tracking-tight\"\r\n                            initial={{ opacity: 0, y: 20 }}\r\n                            animate={{ opacity: 1, y: 0 }}\r\n                            transition={{ duration: 0.8, delay: 0.1 }}\r\n                        >\r\n                            Open Agents.\r\n                        </motion.h1>\r\n                        <motion.p\r\n                            className={`text-lg ${muted} mb-8 leading-relaxed`}\r\n                            initial={{ opacity: 0, y: 20 }}\r\n                            animate={{ opacity: 1, y: 0 }}\r\n                            transition={{ duration: 0.8, delay: 0.2 }}\r\n                        >\r\n                            Spawn coding agents that run infinitely in the cloud.\r\n                            <br />\r\n                            Powered by AI SDK, Gateway, Sandbox, and Workflow SDK.\r\n                        </motion.p>\r\n                        <motion.div\r\n                            className=\"flex items-center gap-4 mb-10\"\r\n                            initial={{ opacity: 0, y: 20 }}\r\n                            animate={{ opacity: 1, y: 0 }}\r\n                            transition={{ duration: 0.8, delay: 0.3 }}\r\n                        >\r\n                            <button className={`px-6 py-3 ${btnPrimary} text-sm font-medium rounded-lg transition flex items-center gap-2 cursor-pointer`}>\r\n                                <span>Sign in with Bag\\Ui</span>\r\n                                <ChevronRight size={16} />\r\n                            </button>\r\n                            <button className={`px-6 py-3 border ${btnOutline} text-sm font-medium rounded-lg transition flex items-center gap-2 cursor-pointer`}>\r\n                                <CodeXml size={24} />\r\n                                <span>Open Source</span>\r\n                            </button>\r\n                        </motion.div>\r\n                    </div>\r\n                </motion.section>\r\n\r\n                {/* Featured Image */}\r\n                <motion.section {...fadeInUp}>\r\n                    <div className={`aspect-video ${cardBg} rounded-xl overflow-hidden mb-10`}>\r\n                        <div className={`w-full h-full flex items-center justify-center ${muted} text-sm`}>\r\n                            [Dashboard Preview]\r\n                        </div>\r\n                    </div>\r\n                </motion.section>\r\n            </div>\r\n\r\n            {/* Feature 1 */}\r\n            <motion.section className={`max-w-7xl mx-auto px-6 py-20 border-x border-b ${border}`} {...fadeInUp}>\r\n                <div className=\"grid md:grid-cols-2 gap-12 items-center\">\r\n                    <div>\r\n                        <h2 className=\"text-4xl font-bold mb-6 leading-tight\">Agents that ship real code.</h2>\r\n                        <p className={`${muted} mb-6 leading-relaxed`}>\r\n                            Each agent gets a full sandbox environment with filesystem, networks, and runtime access. Describe what to build and let the agent work autonomously until it's done.\r\n                        </p>\r\n                        <ul className={`space-y-3 ${subtle}`}>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>File ops, search, shell, and task delegation built in</span></li>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Explorer and executor subagents for parallel work</span></li>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Multi-model support with AI Gateway</span></li>\r\n                        </ul>\r\n                    </div>\r\n                    <motion.div\r\n                        className={`aspect-video ${cardBg} rounded-xl`}\r\n                        initial={{ opacity: 0, x: 20 }}\r\n                        whileInView={{ opacity: 1, x: 0 }}\r\n                        viewport={{ once: true }}\r\n                        transition={{ duration: 0.6 }}\r\n                    >\r\n                        <div className={`w-full h-full flex items-center justify-center ${muted} text-sm`}>[Code Preview]</div>\r\n                    </motion.div>\r\n                </div>\r\n            </motion.section>\r\n\r\n            {/* Feature 2 */}\r\n            <motion.section className={`max-w-7xl mx-auto px-6 py-20 border-x border-b ${border}`} {...fadeInUp}>\r\n                <div className=\"grid md:grid-cols-2 gap-12 items-center\">\r\n                    <motion.div\r\n                        className={`aspect-video ${cardBg} rounded-xl order-last md:order-first`}\r\n                        initial={{ opacity: 0, x: -20 }}\r\n                        whileInView={{ opacity: 1, x: 0 }}\r\n                        viewport={{ once: true }}\r\n                        transition={{ duration: 0.6 }}\r\n                    >\r\n                        <div className={`w-full h-full flex items-center justify-center ${muted} text-sm`}>[Sandbox Preview]</div>\r\n                    </motion.div>\r\n                    <div className=\"order-first md:order-last\">\r\n                        <h2 className=\"text-4xl font-bold mb-6 leading-tight\">Cloud sandboxes, not local machines.</h2>\r\n                        <p className={`${muted} mb-6 leading-relaxed`}>\r\n                            Every session runs in an isolated Vercel sandbox with its own filesystem. Work is committed and pushed automatically — nothing is lost when the sandbox expires.\r\n                        </p>\r\n                        <ul className={`space-y-3 ${subtle}`}>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Ephemeral environments with full git integration</span></li>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Auto-hibernation on inactivity, instant restore</span></li>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Snapshot and restore filesystem state</span></li>\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n            </motion.section>\r\n\r\n            {/* Feature 3 */}\r\n            <motion.section className={`max-w-7xl mx-auto px-6 py-20 border-x border-b ${border}`} {...fadeInUp}>\r\n                <div className=\"grid md:grid-cols-2 gap-12 items-center\">\r\n                    <div>\r\n                        <h2 className=\"text-4xl font-bold mb-6 leading-tight\">Durable workflows that survive anything.</h2>\r\n                        <p className={`${muted} mb-6 leading-relaxed`}>\r\n                            Agent loops run as durable workflows that survive restarts, retry on failure, and coordinate multi-step operations over time. No work is ever lost mid-run.\r\n                        </p>\r\n                        <ul className={`space-y-3 ${subtle}`}>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Resumable agent loops with automatic checkpointing</span></li>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Post-finish usage tracking, off caching, auto-commit</span></li>\r\n                            <li className=\"flex gap-3\"><span>•</span><span>Reconnect to running workflows from any client</span></li>\r\n                        </ul>\r\n                    </div>\r\n                    <motion.div\r\n                        className={`aspect-video ${cardBg} rounded-xl`}\r\n                        initial={{ opacity: 0, x: 20 }}\r\n                        whileInView={{ opacity: 1, x: 0 }}\r\n                        viewport={{ once: true }}\r\n                        transition={{ duration: 0.6 }}\r\n                    >\r\n                        <div className={`w-full h-full flex items-center justify-center ${muted} text-sm`}>[Workflow Preview]</div>\r\n                    </motion.div>\r\n                </div>\r\n            </motion.section>\r\n\r\n            {/* Infrastructure */}\r\n            <motion.section className={`max-w-7xl mx-auto px-6 pt-10 border-x ${border}`} {...fadeInUp}>\r\n                <div className=\"max-w-7xl mx-auto px-6 py-20\">\r\n                    <div className=\"grid md:grid-cols-2 gap-12 items-start\">\r\n                        <div>\r\n                            <h2 className=\"text-5xl md:text-6xl font-bold leading-tight tracking-tight\">Infrastructure that ships.</h2>\r\n                        </div>\r\n                        <div className=\"space-y-6\">\r\n                            <p className={`${subtle} text-base leading-relaxed`}>\r\n                                Built on production-grade primitives from the Vercel ecosystem. No synthetic demos — real infrastructure for real agents.\r\n                            </p>\r\n                            <button className={`px-6 py-3 ${btnPrimary} text-sm font-medium rounded-lg transition flex items-center gap-2`}>\r\n                                <span>▲</span>\r\n                                <span>Sign in with Vercel</span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <motion.div\r\n                    className={`w-full border-t ${border}`}\r\n                    variants={staggerContainer}\r\n                    initial=\"initial\"\r\n                    whileInView=\"whileInView\"\r\n                    viewport={{ once: true }}\r\n                >\r\n                    <div className=\"grid md:grid-cols-4\">\r\n                        {[\r\n                            { number: '001', title: 'AI SDK', description: 'Unified interface across models. Switch providers, stream responses, and call tools with a single API.' },\r\n                            { number: '002', title: 'AI Gateway', description: 'Route requests across providers with built-in fallbacks, rate limiting, and observability.' },\r\n                            { number: '003', title: 'Sandbox', description: 'Secure, isolated environments for every session. Full filesystem, network, and runtime access.' },\r\n                            { number: '004', title: 'Workflow SDK', description: 'Durable, resumable agent workflows that survive restarts and coordinate multi-step operations.' }\r\n                        ].map((item, i) => (\r\n                            <motion.div\r\n                                key={i}\r\n                                className={`px-6 py-12 ${i < 3 ? `border-r ${border}` : ''}`}\r\n                                variants={staggerItem}\r\n                            >\r\n                                <div className={`text-xs ${muted} font-mono tracking-wider mb-6`}>{item.number}</div>\r\n                                <div className={`w-8 h-8 mb-6 ${muted}`}>\r\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\r\n                                        <rect x=\"4\" y=\"4\" width=\"5\" height=\"5\" />\r\n                                        <rect x=\"15\" y=\"4\" width=\"5\" height=\"5\" />\r\n                                        <rect x=\"4\" y=\"15\" width=\"5\" height=\"5\" />\r\n                                        <rect x=\"15\" y=\"15\" width=\"5\" height=\"5\" />\r\n                                    </svg>\r\n                                </div>\r\n                                <h3 className=\"text-lg font-bold mb-3\">{item.title}</h3>\r\n                                <p className={`text-sm ${muted} leading-relaxed`}>{item.description}</p>\r\n                            </motion.div>\r\n                        ))}\r\n                    </div>\r\n                </motion.div>\r\n            </motion.section>\r\n\r\n            <motion.section className={`w-full border-t ${border}`} {...fadeInUp}>\r\n                <div className={`text-center max-w-7xl mx-auto px-6 py-24 border-x ${border}`}>\r\n                    <p className={`${muted} text-sm mb-6`}>\r\n                        Built on production-grade primitives from the Vercel ecosystem.\r\n                        No synthetic demos — real infrastructure for real agents.\r\n                    </p>\r\n                    <button className={`px-6 py-3 ${btnPrimary} text-sm font-medium rounded-lg transition flex items-center gap-2 mx-auto`}>\r\n                        <span>Sign in with Vercel</span>\r\n                        <ChevronRight size={16} />\r\n                    </button>\r\n                </div>\r\n            </motion.section>\r\n\r\n            {/* Footer */}\r\n            <footer className={`w-full border-t ${border}`}>\r\n                <div className={`max-w-7xl mx-auto px-6 pt-10 border-x ${border}`}>\r\n                    <div className=\"grid md:grid-cols-3 gap-16 mb-12\">\r\n                        <div>\r\n                            <h4 className={`text-xs font-semibold ${muted} uppercase tracking-widest mb-4`}>Open Agents</h4>\r\n                            <p className={`text-sm ${subtle} leading-relaxed`}>Open Agents for shipping code.</p>\r\n                        </div>\r\n                        <div>\r\n                            <h4 className={`text-xs font-semibold ${muted} uppercase tracking-widest mb-6`}>Product</h4>\r\n                            <ul className={`space-y-3 text-sm ${subtle}`}>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>AI SDK</a></li>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>AI Gateway</a></li>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>Sandbox</a></li>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>Workflow SDK</a></li>\r\n                            </ul>\r\n                        </div>\r\n                        <div>\r\n                            <h4 className={`text-xs font-semibold ${muted} uppercase tracking-widest mb-6`}>Links</h4>\r\n                            <ul className={`space-y-3 text-sm ${subtle}`}>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>GitHub</a></li>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>Vercel</a></li>\r\n                                <li><a href=\"#\" className={`hover:${text} transition`}>AI SDK Docs</a></li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div className={`border-t ${border} pt-12 pb-10 flex items-center justify-between`}>\r\n                        <Link href=\"/\">\r\n                            <img src={logoSrc} width={30} height={30} />\r\n                        </Link>\r\n                        <button\r\n                            onClick={toggle}\r\n                            className={`p-2 rounded-full border cursor-pointer ${btnOutline} transition`}\r\n                            aria-label=\"Toggle theme\"\r\n                        >\r\n                            {dark ? <Sun className=\"w-4 h-4\" /> : <Moon className=\"w-4 h-4\" />}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </footer>\r\n        </div>\r\n    );\r\n}",
      "type": "registry:block",
      "target": "components/Template1.tsx"
    }
  ],
  "type": "registry:block"
}