{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid-1",
  "title": "Bento Grid 1",
  "description": "Solace UI bento grid block variation 1.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/blocks/bento-grid/one/index.tsx",
      "content": "import {\n    BentoGrid,\n    BentoItem,\n    ChatMessaging,\n    CompanyLogos,\n} from \"@/registry/blocks/bento-grid/one/bento-grid-template-one\";\n\r\nexport default function BentoGridOne() {\r\n    const items: BentoItem[] = [\r\n        {\r\n            id: \"1\",\r\n            type: \"feature\",\r\n            title: \"World-Class Information Design\",\r\n            description:\r\n                \"Transform complex data into crisp visuals that quickly tell your story.\",\r\n            image:\r\n                \"https://res.cloudinary.com/harshitproject/image/upload/v1746774246/hero-video.jpg\",\r\n        },\r\n        {\r\n            id: \"2\",\r\n            type: \"chat\",\r\n            content: <ChatMessaging />,\r\n        },\r\n        {\r\n            id: \"3\",\r\n            type: \"partners\",\r\n            title: \"Connected Everywhere\",\r\n            description:\r\n                \"Embed your work seamlessly across your favorite platforms for instant sharing.\",\r\n            content: <CompanyLogos />,\r\n        },\r\n    ];\r\n\r\n    return (\r\n        <main className=\"flex min-h-screen flex-col items-center justify-center p-4 md:p-24 \">\r\n            <BentoGrid items={items} />\r\n        </main>\r\n    );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/bento-grid-1.tsx"
    },
    {
      "path": "src/registry/blocks/bento-grid/one/bento-grid-template-one.tsx",
      "content": "\"use client\";\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { motion } from \"motion/react\";\r\nimport Image from \"next/image\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Types for our bento grid items\r\nexport type BentoItem = {\r\n    id: string;\r\n    type: \"feature\" | \"chat\" | \"partners\";\r\n    title?: string;\r\n    description?: string;\r\n    image?: string;\r\n    className?: string;\r\n    content?: ReactNode;\r\n};\r\n\r\n// Props for our base BentoGrid component\r\ninterface BentoGridProps {\r\n    items: BentoItem[];\r\n    className?: string;\r\n}\r\n\r\n// Props for each bento item\r\ninterface BentoItemProps {\r\n    item: BentoItem;\r\n    className?: string;\r\n}\r\n\r\n// Base BentoGrid component\r\nexport function BentoGrid({ items, className }: BentoGridProps) {\r\n    return (\r\n        <div\r\n            className={cn(\r\n                \"grid grid-cols-1 md:grid-cols-2 gap-4 max-w-7xl mx-auto\",\r\n                className\r\n            )}\r\n        >\r\n            {items.map((item) => {\r\n                return (\r\n                    <div\r\n                        key={item.id}\r\n                        className={cn(\r\n                            \"row-span-1\",\r\n                            item.type === \"feature\" && \"col-span-1 md:col-span-2\",\r\n                            item.className\r\n                        )}\r\n                    >\r\n                        <BentoGridItem item={item} />\r\n                    </div>\r\n                );\r\n            })}\r\n        </div>\r\n    );\r\n}\r\n\r\n// Individual BentoGridItem component\r\nfunction BentoGridItem({ item, className }: BentoItemProps) {\r\n    const { type, title, description, image, content } = item;\r\n\r\n    // Different layouts based on item type\r\n    switch (type) {\r\n        case \"feature\":\r\n            return (\r\n                <motion.div\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{ opacity: 1, y: 0 }}\r\n                    transition={{ duration: 0.5 }}\r\n                    className={cn(\r\n                        \"group relative overflow-hidden rounded-xl bg-[#19ffc2ec] dark:bg-neutral-900 p-8 h-[400px] flex flex-col md:flex-row shadow-md\",\r\n                        className\r\n                    )}\r\n                >\r\n                    <div className=\"flex flex-col justify-center z-10 md:w-1/2\">\r\n                        <span className=\"text-xs uppercase  dark:text-[#1DCD9F] text-black font-medium mb-2\">\r\n                            Visualise Info\r\n                        </span>\r\n                        <h2 className=\"text-3xl md:text-4xl font-bold  dark:text-white text-black mb-4 text-balance\">\r\n                            {title}\r\n                        </h2>\r\n                        <p className=\"text-sm text-neutral-600 max-w-md text-balance\">\r\n                            {description}\r\n                        </p>\r\n                    </div>\r\n\r\n                    {image && (\r\n                        <div className=\" md:w-1/2 h-full right-0 top-0 flex items-center justify-center\">\r\n                            <div className=\"relative w-full h-full\">\r\n                                <motion.div\r\n                                    initial={{ rotate: 0 }}\r\n                                    animate={{ scale: 1.1 }}\r\n                                    transition={{ duration: 0.7 }}\r\n                                    className=\"absolute inset-0 z-0\"\r\n                                >\r\n                                    <div className=\"relative w-full h-full top-10 left-10\">\r\n                                        <Image\r\n                                            src={image || \"/placeholder.svg\"}\r\n                                            alt=\"visualise\"\r\n                                            fill\r\n                                            className=\"object-cover rounded-md shadow-xl dark:shadow-[#1DCD9F] shadow-white\"\r\n                                        />\r\n                                    </div>\r\n                                </motion.div>\r\n                            </div>\r\n                        </div>\r\n                    )}\r\n                    <div className=\"absolute bottom-0 z-50 inset-x-0 h-[2rem] bg-gradient-to-t dark:from-neutral-900 from-[#1DCD9F] to-transparent w-full pointer-events-none\" />\r\n                </motion.div>\r\n            );\r\n\r\n        case \"chat\":\r\n            return (\r\n                <motion.div\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{ opacity: 1, y: 0 }}\r\n                    transition={{ duration: 0.5, delay: 0.1 }}\r\n                    className={cn(\r\n                        \"group relative overflow-hidden rounded-xl bg-[#222222] dark:bg-neutral-900 p-8 h-[400px] flex flex-col shadow-md\",\r\n                        className\r\n                    )}\r\n                >\r\n                    <div className=\"z-10\">\r\n                        <span className=\"text-xs uppercase text-[#1DCD9F] font-medium mb-2 flex items-center justify-center p-2\">\r\n                            Customise\r\n                        </span>\r\n                    </div>\r\n\r\n                    <div className=\"flex-1 relative\">{content}</div>\r\n                    <div className=\"absolute bottom-0 z-50 inset-x-0 h-[2rem] bg-gradient-to-t from-neutral-900 to-transparent w-full pointer-events-none\" />\r\n                </motion.div>\r\n            );\r\n\r\n        case \"partners\":\r\n            return (\r\n                <motion.div\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{ opacity: 1, y: 0 }}\r\n                    transition={{ duration: 0.5, delay: 0.2 }}\r\n                    className={cn(\r\n                        \"group relative overflow-hidden rounded-xl bg-neutral-900 p-8 h-[400px] flex flex-col shadow-md\",\r\n                        className\r\n                    )}\r\n                >\r\n                    <div className=\"flex-1 relative flex items-center justify-center\">\r\n                        {content}\r\n                        <div className=\"absolute left-0 z-[100] inset-y-0 w-10 bg-gradient-to-r from-neutral-900 to-transparent  h-full pointer-events-none\" />\r\n                        <div className=\"absolute right-0 z-[100] inset-y-0 w-10 bg-gradient-to-l from-neutral-900  to-transparent h-full pointer-events-none\" />\r\n                    </div>\r\n\r\n                    <div className=\"mt-4 z-10\">\r\n                        <span className=\"text-xs uppercase text-[#1DCD9F] font-medium \">\r\n                            Embed\r\n                        </span>\r\n                        <h3 className=\"text-2xl font-bold text-white mb-2 text-balance\">\r\n                            {title}\r\n                        </h3>\r\n                        <p className=\"text-sm dark:text-neutral-600 text-neutral-700 text-balance\">\r\n                            {description}\r\n                        </p>\r\n                    </div>\r\n                </motion.div>\r\n            );\r\n\r\n        default:\r\n            return null;\r\n    }\r\n}\r\n\r\n// Company logos component for the partners section\r\nexport function CompanyLogos() {\r\n    const logos = [\r\n        {\r\n            name: \"Spotify\",\r\n            url: \"https://res.cloudinary.com/harshitproject/image/upload/v1746774292/Spotify.png\",\r\n        },\r\n        {\r\n            name: \"Notion\",\r\n            url: \"https://res.cloudinary.com/harshitproject/image/upload/v1746774291/Notion.png\",\r\n        },\r\n        {\r\n            name: \"Slack\",\r\n            url: \"https://res.cloudinary.com/harshitproject/image/upload/v1746774292/Slack.png\",\r\n        },\r\n        {\r\n            name: \"Twitter\",\r\n            url: \"https://res.cloudinary.com/harshitproject/image/upload/v1746774292/Twitter.png\",\r\n        },\r\n        {\r\n            name: \"Apple\",\r\n            url: \"https://res.cloudinary.com/harshitproject/image/upload/v1746774291/Apple.png\",\r\n        },\r\n    ];\r\n\r\n    return (\r\n        <div className=\"w-full overflow-hidden\">\r\n            <motion.div\r\n                className=\"flex gap-8 items-center justify-center\"\r\n                animate={{ x: [0, -1000] }}\r\n                transition={{\r\n                    x: {\r\n                        repeat: Number.POSITIVE_INFINITY,\r\n                        repeatType: \"loop\",\r\n                        duration: 20,\r\n                        ease: \"linear\",\r\n                    },\r\n                }}\r\n            >\r\n                {/* First set of logos */}\r\n                {logos.map((logo) => (\r\n                    <div\r\n                        key={logo.name}\r\n                        className=\"flex-shrink-0 w-16 h-16 bg-neutral-800 rounded-lg flex items-center justify-center p-2\"\r\n                    >\r\n                        <Image\r\n                            src={logo.url || \"/placeholder.svg\"}\r\n                            alt={logo.name}\r\n                            width={40}\r\n                            height={40}\r\n                            className=\"w-10 h-10 object-contain\"\r\n                        />\r\n                    </div>\r\n                ))}\r\n\r\n                {/* Duplicate set for seamless looping */}\r\n                {logos.map((logo) => (\r\n                    <div\r\n                        key={`${logo.name}-dup`}\r\n                        className=\"flex-shrink-0 w-16 h-16 bg-neutral-800 rounded-lg flex items-center justify-center p-2\"\r\n                    >\r\n                        <Image\r\n                            src={logo.url || \"/placeholder.svg\"}\r\n                            alt={logo.name}\r\n                            width={40}\r\n                            height={40}\r\n                            className=\"w-10 h-10 object-contain\"\r\n                        />\r\n                    </div>\r\n                ))}\r\n            </motion.div>\r\n        </div>\r\n    );\r\n}\r\n\r\n// Chat messaging component with iPhone mockup\r\nexport function ChatMessaging() {\r\n    return (\r\n        <div className=\"relative w-full h-full flex items-center justify-center\">\r\n            <div className=\"relative w-[280px] h-[500px] bg-neutral-800 rounded-[36px] p-3 border-4 border-neutral-700 overflow-hidden\">\r\n                <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3 h-6 bg-neutral-700 rounded-b-xl z-10\" />\r\n                <div className=\"w-full h-full bg-neutral-900 rounded-[28px] p-4 overflow-hidden\">\r\n                    <div className=\"flex items-center mb-4\">\r\n                        <div className=\"w-8 h-8 rounded-full bg-[#1DCD9F] mr-3\" />\r\n                        <div>\r\n                            <div className=\"text-white text-xs font-medium\">Assistant</div>\r\n                            <div className=\"text-neutral-400 text-[10px]\">Online</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div className=\"space-y-3\">\r\n                        <motion.div\r\n                            initial={{ opacity: 0, x: -20 }}\r\n                            animate={{ opacity: 1, x: 0 }}\r\n                            transition={{ duration: 0.5 }}\r\n                            className=\"bg-neutral-800 p-2 rounded-lg rounded-tl-none max-w-[80%] text-[10px] text-white\"\r\n                        >\r\n                            How can I help you today?\r\n                        </motion.div>\r\n\r\n                        <motion.div\r\n                            initial={{ opacity: 0, x: 20 }}\r\n                            animate={{ opacity: 1, x: 0 }}\r\n                            transition={{ duration: 0.5, delay: 0.3 }}\r\n                            className=\"bg-[#1DCD9F] p-2 rounded-lg rounded-tr-none max-w-[80%] ml-auto text-[10px] text-white\"\r\n                        >\r\n                            I need help with my project\r\n                        </motion.div>\r\n\r\n                        <motion.div\r\n                            initial={{ opacity: 0, x: -20 }}\r\n                            animate={{ opacity: 1, x: 0 }}\r\n                            transition={{ duration: 0.5, delay: 0.6 }}\r\n                            className=\"bg-neutral-800 p-2 rounded-lg rounded-tl-none max-w-[80%] text-[10px] text-white\"\r\n                        >\r\n                            I&apos;d be happy to help! What kind of project are you working\r\n                            on?\r\n                        </motion.div>\r\n\r\n                        <motion.div\r\n                            initial={{ opacity: 0, x: 20 }}\r\n                            animate={{ opacity: 1, x: 0 }}\r\n                            transition={{ duration: 0.5, delay: 0.9 }}\r\n                            className=\"bg-[#1DCD9F] p-2 rounded-lg rounded-tr-none max-w-[80%] ml-auto text-[10px] text-white\"\r\n                        >\r\n                            I&apos;m building a component library with Next.js and Tailwind\r\n                        </motion.div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/bento-grid-template-one.tsx"
    }
  ],
  "type": "registry:block"
}