{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-stack-rotated-demo",
  "title": "Cards Stack Rotated Demo",
  "description": "Demo showing Cards Stack Rotated component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/cards-stack-rotated",
    "https://systaliko-ui.vercel.app/r/card-testimonial"
  ],
  "files": [
    {
      "path": "registry/demo/cards/cards-stack-rotated/index.tsx",
      "content": "'use client';\n\nimport {\n  CardTestimonial,\n  TestimonialAuthor,\n  TestimonialQuote,\n  TestimonialRating,\n} from '@/components/systaliko-ui/cards/card-testimonial';\nimport {\n  CardsContainer,\n  CardTransformed,\n  ContainerScrollRotatedCards,\n} from '@/components/systaliko-ui/cards/cards-stack-rotated';\nimport * as React from 'react';\n\nconst TESTIMONIALS = [\n  {\n    id: 'testimonial-3',\n    name: 'Youcef Bnm.',\n    profession: 'Frontend Developer',\n    rating: 5,\n    quote:\n      'Their innovative solutions and quick turnaround time made our collaboration incredibly successful. Highly recommended!',\n    avatarUrl:\n      'https://lh3.googleusercontent.com/a/ACg8ocKV3NNwtqyu8_gbuVEDARpyUpTuFtb_XPAIETgsD3wbXx4F4xlE=s576-c-no',\n  },\n  {\n    id: 'testimonial-1',\n    name: 'Jessica H.',\n    profession: 'Web Designer',\n    rating: 4.5,\n    quote:\n      \"The attention to detail and user experience in their work is exceptional. I'm thoroughly impressed with the final product.\",\n    avatarUrl:\n      'https://plus.unsplash.com/premium_photo-1690407617542-2f210cf20d7e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D',\n  },\n  {\n    id: 'testimonial-2',\n    name: 'Lisa M.',\n    profession: 'UX Designer',\n    rating: 5,\n    quote:\n      'Working with them was a game-changer for our project. Their expertise and professionalism exceeded our expectations.',\n    avatarUrl:\n      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D',\n  },\n  {\n    id: 'testimonial-4',\n    name: 'Jane D.',\n    profession: 'UI/UX Designer',\n    rating: 4.5,\n    quote:\n      'The quality of work and communication throughout the project was outstanding. They delivered exactly what we needed.',\n    avatarUrl:\n      'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDN8fHxlbnwwfHx8fHw%3D',\n  },\n];\n\nexport function CardsStackRotatedDemo() {\n  return (\n    <section className=\"py-12 px-6\">\n      <div>\n        <h3 className=\"text-center text-4xl font-semibold\">Testimonials</h3>\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-[450px] w-[350px]\">\n            {TESTIMONIALS.map((testimonial, index) => (\n              <CardTransformed\n                arrayLength={TESTIMONIALS.length}\n                key={testimonial.id}\n                index={index + 2}\n              >\n                <CardTestimonial\n                  testimonialQuote={testimonial.quote}\n                  testimonialRating={testimonial.rating}\n                  testimonialAuthor={{\n                    authorName: testimonial.name,\n                    avatarUrl: testimonial.avatarUrl,\n                    description: testimonial.profession,\n                  }}\n                  variant={'glass'}\n                  role=\"article\"\n                  aria-labelledby={`card-${testimonial.id}-title`}\n                  aria-describedby={`card-${testimonial.id}-content`}\n                  className=\"h-[450px] w-[350px] justify-center items-center\"\n                >\n                  <TestimonialRating className=\"text-primary\" />\n                  <div className=\"relative text-center mx-auto w-4/5 text-lg\">\n                    <TestimonialQuote>{testimonial.quote}</TestimonialQuote>\n                  </div>\n\n                  <TestimonialAuthor className=\"flex items-center gap-4\" />\n                </CardTestimonial>\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.tsx"
    }
  ],
  "type": "registry:block"
}