{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-stack-rotated-recognitions-demo",
  "title": "Stack small cards Demo",
  "description": "Demo showing different usecase of Cards Rotated Stack component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/cards-stack-rotated"
  ],
  "files": [
    {
      "path": "registry/demo/cards/cards-stack-rotated-recognitions/index.tsx",
      "content": "import { Card } from '@/components/systaliko-ui/cards/card';\nimport {\n  CardsContainer,\n  CardTransformed,\n  ContainerScrollRotatedCards,\n} from '@/components/systaliko-ui/cards/cards-stack-rotated';\n\nconst RECOGNITIONS = [\n  {\n    id: 'recognition-1',\n    icon: '🏆',\n    title: 'Awwwards',\n    description: 'Site of the Day',\n    bg: 'bg-blue-700/80',\n    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.',\n  },\n  {\n    id: 'recognition-2',\n    icon: '🚀',\n    title: 'Performance',\n    description: '100% Performance Score',\n    bg: 'bg-emerald-700/80',\n    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.',\n  },\n  {\n    id: 'recognition-3',\n    icon: '🎯',\n    title: 'CSS awaaards',\n    description: 'Honorable Mention',\n    bg: 'bg-indigo-700/80',\n    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.',\n  },\n  {\n    id: 'recognition-4',\n    icon: '🎖',\n    title: 'Most Creative Design',\n    description: 'Awards',\n    bg: 'bg-yellow-700/80',\n    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.',\n  },\n];\n\nexport function CardsStackRotatedRecognitionsDemo() {\n  return (\n    <section className=\"px-8 py-12\">\n      <div>\n        <h2 className=\"text-center text-4xl font-semibold\">Recognitions</h2>\n        <p className=\"mx-auto mt-2 max-w-lg text-center text-sm\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus\n          consequatur reprehenderit.\n        </p>\n      </div>\n      <ContainerScrollRotatedCards className=\"container h-[300vh] \">\n        <div className=\"sticky left-0 top-0 h-svh w-full py-12\">\n          <CardsContainer className=\"mx-auto size-full h-72 w-[440px]\">\n            {RECOGNITIONS.map((recognition, index) => (\n              <CardTransformed\n                arrayLength={RECOGNITIONS.length}\n                key={recognition.id}\n                index={index + 1}\n              >\n                <Card\n                  variant={'glass'}\n                  className={`${recognition.bg} text-white items-start justify-start space-y-4`}\n                >\n                  <div\n                    style={{ perspective: '500px' }}\n                    className=\"flex size-16 items-center justify-center  rounded-sm bg-secondary/50 text-2xl\"\n                  >\n                    <span className=\" translate-z-20\">{recognition.icon}</span>\n                  </div>\n                  <div>\n                    <h4 className=\"text-sm uppercase tracking-wide\">\n                      {recognition.title}\n                    </h4>\n                    <h3 className=\"text-2xl font-bold\">\n                      {recognition.description}\n                    </h3>\n                  </div>\n                  <p className=\"text-white/80\">{recognition.text}</p>\n                </Card>\n              </CardTransformed>\n            ))}\n          </CardsContainer>\n        </div>\n      </ContainerScrollRotatedCards>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/cards/cards-stack-rotated-recognitions.tsx"
    }
  ],
  "type": "registry:block"
}