{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-stack-achievements-demo",
  "title": "Stack small cards Demo",
  "description": "Demo showing different usecase of Cards Stack component with smaller cards.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/cards-stack"
  ],
  "files": [
    {
      "path": "registry/demo/cards/cards-stack-achievements/index.tsx",
      "content": "import { Card } from '@/components/systaliko-ui/cards/card';\nimport { CardSticky, CardsStackContainer } from '@/components/systaliko-ui/cards/cards-stack';\n\nconst ACHIEVEMENTS = [\n  {\n    id: 'achivement-1',\n    title: '4',\n    description: 'site of the day',\n    bg: 'bg-indigo-500',\n  },\n  {\n    id: 'achivement-2',\n    title: '60+',\n    description: 'website created',\n    bg: 'bg-emerald-500',\n  },\n  {\n    id: 'achivement-3',\n    title: '5+',\n    description: 'years of experience',\n    bg: 'bg-pink-500',\n  },\n  {\n    id: 'achivement-4',\n    title: '6+',\n    description: 'component created',\n    bg: 'bg-purple-500',\n  },\n];\n\nexport function CardsStackAchievementsDemo() {\n  return (\n    <CardsStackContainer className=\"min-h-[400vh] place-items-center space-y-8 p-12 text-center \">\n      {ACHIEVEMENTS.map((achievement, index) => (\n        <CardSticky\n          key={achievement.id}\n          incrementY={20}\n          index={index + 2}\n          style={{ rotate: index + 2 }}\n        >\n          <Card\n            className={`flex ${achievement.bg} text-white h-72 w-[420px] flex-col place-content-center justify-evenly p-8 `}\n          >\n            <h1 className=\"text-left text-6xl font-semibold opacity-80\">\n              {achievement.title}\n            </h1>\n            <div className=\"place-items-end text-right\">\n              <h3 className=\"max-w-[10ch] text-wrap  text-4xl font-semibold capitalize tracking-tight\">\n                {achievement.description}\n              </h3>\n            </div>\n          </Card>\n        </CardSticky>\n      ))}\n    </CardsStackContainer>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/cards/cards-stack-achievements.tsx"
    }
  ],
  "type": "registry:block"
}