{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "conditionGrid",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/grid/condition-grid.tsx",
      "content": "'use client';\nimport { MoveUpRight } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport Image from 'next/image';\nimport React from 'react';\n\ninterface ProjectsTypes {\n  id: string;\n  img: string;\n  title: string;\n  des: string;\n}\nconst projects: ProjectsTypes[] = [\n  {\n    id: '01',\n    img: 'https://images.unsplash.com/photo-1543508282-6319a3e2621f?q=80&w=1200&auto=format&fit=crop',\n    title: 'Distrokings',\n    des: 'We make your logo communicate with your customers more than words ever could',\n  },\n  {\n    id: '02',\n    img: 'https://images.unsplash.com/photo-1704677982215-a2248af6009b?q=80&w=1200&auto=format&fit=crop',\n    title: 'Profitables',\n    des: 'We are dedicated to unlocking your business potential through precision development',\n  },\n  {\n    id: '03',\n    img: 'https://images.unsplash.com/photo-1520256862855-398228c41684?q=80&w=800&auto=format&fit=crop',\n    title: 'Topserve-copiers',\n    des: 'We are dedicated to unlocking your business potential through precision development',\n  },\n  {\n    id: '04',\n    img: 'https://images.unsplash.com/photo-1605733160314-4fc7dac4bb16?q=80&w=800&auto=format&fit=crop',\n    title: 'Labramart.',\n    des: 'We specialize in crafting marketing solutions that propel your brand to new heights',\n  },\n];\n\nexport default function ConditionGrid() {\n  return (\n    <>\n      <div className='grid grid-cols-12  gap-4 overflow-hidden px-5 lg:pb-5 pb-2'>\n        {projects.map((project, index) => {\n          let colSpanClass = 'sm:col-span-6 col-span-12 ';\n          if (index === 0) {\n            colSpanClass = ' sm:col-span-5 col-span-12 ';\n          } else if (index === 1) {\n            colSpanClass = 'sm:col-span-7 col-span-12 ';\n          } else if (index === projects.length - 2) {\n            colSpanClass = 'sm:col-span-7 col-span-12 ';\n          } else if (index === projects.length - 1) {\n            colSpanClass = 'sm:col-span-5 col-span-12 ';\n          }\n          return (\n            <>\n              <motion.article\n                key={project.id ?? project.title}\n                initial={{ y: 50, opacity: 0 }}\n                whileInView={{ y: 0, opacity: 1 }}\n                transition={{ ease: 'easeOut' }}\n                viewport={{ once: false }}\n                className={` relative  ${colSpanClass} `}\n              >\n                <div className='w-auto h-full'>\n                  <Image\n                    src={project?.img}\n                    alt={'image'}\n                    height={600}\n                    width={1200}\n                    className='h-full w-full object-cover rounded-xl'\n                  />\n                </div>\n                <div className='absolute lg:bottom-2 bottom-0 text-black w-full p-4 flex justify-between items-center'>\n                  <h3 className='lg:text-xl text-sm bg-black text-white rounded-xl p-2 px-4'>\n                    {project.title}\n                  </h3>\n                  <div className='lg:w-12 w-10 lg:h-12 h-10 text-white grid place-content-center rounded-full bg-black'>\n                    <MoveUpRight />\n                  </div>\n                </div>\n              </motion.article>\n            </>\n          );\n        })}\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}