Rotated Cards Stack

<ContainerScroll className="container h-[300vh] ">
  <div className="sticky left-0 top-0 h-svh w-full py-12">
    <CardsContainer className="mx-auto size-full h-[450px] w-[350px]">
      {TESTIMONIALS.map((testimonial, index) => (
        <CardTransformed
          arrayLength={TESTIMONIALS.length}
          key={testimonial.id}
          index={index + 2}
        >
          <CardTestimonial
            testimonialQuote={testimonial.quote}
            testimonialRating={testimonial.rating}
            testimonialAuthor={{
              authorName: testimonial.name,
              avatarUrl: testimonial.avatarUrl,
              description: testimonial.profession,
            }}
            role="article"
            aria-labelledby={`card-${testimonial.id}-title`}
            aria-describedby={`card-${testimonial.id}-content`}
            className="h-[450px] w-[350px] shadow"
          >
            <TestimonialRating className="text-primary" />
            <div className="relative text-center mx-auto w-4/5 text-lg">
              <TestimonialQuote>{testimonial.quote}</TestimonialQuote>
            </div>

            <TestimonialAuthor className="flex items-center gap-4" />
          </CardTestimonial>
        </CardTransformed>
      ))}
    </CardsContainer>
  </div>
</ContainerScroll>