{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-stack-full-demo",
  "title": "Cards stack full screen Demo",
  "description": "Demo showing different usecase of Cards Stack component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/cards-stack",
    "https://systaliko-ui.vercel.app/r/badge"
  ],
  "files": [
    {
      "path": "registry/demo/cards/cards-stack-work/index.tsx",
      "content": "import { Badge } from '@/components/systaliko-ui/shadcn/badge';\nimport { CardSticky, CardsStackContainer } from '@/components/systaliko-ui/cards/cards-stack';\n\nconst WORK_PROJECTS = [\n  {\n    id: 'work-project-3',\n    title: 'YCF DEV',\n    services: ['Portfolio', 'Partnership', 'UI UX Design'],\n    imageUrl:\n      'https://images.unsplash.com/photo-1607799279861-4dd421887fb3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n  {\n    id: 'work-project-2',\n    title: 'Marketing Agency',\n    services: ['Partnership', 'UI UX Design', 'Development'],\n    imageUrl:\n      'https://images.unsplash.com/photo-1683803055067-1ca1c17cb2b9?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n  {\n    id: 'work-project-1',\n    title: 'Stridath Ecommerce',\n    services: ['E-Commerce', 'Branding', 'UI UX Design', 'Development'],\n    imageUrl:\n      'https://images.unsplash.com/photo-1688561808434-886a6dd97b8c?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n];\n\nexport function CardsStackWorkDemo() {\n  return (\n    <div className=\"container place-content-center p-12 \">\n      <CardsStackContainer className=\"min-h-[500vh]\">\n        {WORK_PROJECTS.map((project, index) => (\n          <CardSticky\n            key={project.id}\n            index={index}\n            className=\"bg-accent/80 backdrop-blur-sm\"\n            incrementY={60}\n            incrementZ={5}\n          >\n            <div className=\"flex flex-wrap items-center justify-between gap-4 px-6 py-4\">\n              <h2 className=\"text-2xl font-bold tracking-tighter\">\n                {project.title}\n              </h2>\n              <div className=\"flex flex-wrap gap-1\">\n                {project.services.map((service) => (\n                  <Badge key={service} className=\"rounded-full\">\n                    {service}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n            <img\n              className=\"size-full object-cover\"\n              width=\"100%\"\n              height=\"100%\"\n              src={project.imageUrl}\n              alt=\"project\"\n            />\n          </CardSticky>\n        ))}\n      </CardsStackContainer>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/cards/cards-stack-work.tsx"
    }
  ],
  "type": "registry:block"
}