{
  "name": "testimonials/auto-scroll",
  "type": "registry:component",
  "description": "Auto scrolling testimonial rail",
  "files": [
    {
      "path": "example/Testimonials/SectionTestimonials_AutoScroll.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\n\ninterface Testimonial {\n  message: string;\n  name: string;\n  role: string;\n}\n\nconst testimonials: Testimonial[] = [\n  {\n    message: 'Pablo makes web development feel like magic.',\n    name: 'Los',\n    role: 'Product Engineer',\n  },\n  {\n    message: 'Pablo helps me localize content for Brazil.',\n    name: 'Pedro',\n    role: 'Digital Strategist',\n  },\n  {\n    message: 'Pablo is my engineering tutor with practice problems.',\n    name: 'Quinn',\n    role: 'Engineering Student',\n  },\n  {\n    message: 'Pablo helped me pick the right SaaS tools.',\n    name: 'Mohamed',\n    role: 'Graphic Designer',\n  },\n  {\n    message: 'Pablo cuts the busywork. Sources in minutes.',\n    name: 'Vitus',\n    role: 'Student Journalist',\n  },\n];\n---\n\n<section class=\"testimonials-section relative overflow-hidden\">\n  <BackgroundEffect\n    gradientType=\"var(--gradient-top-fade-linear)\"\n    patternType=\"none\"\n    noiseType=\"none\"\n  />\n\n  <div class=\"container\">\n    <div class=\"mb-10 text-center\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Testimonials\n      </div>\n      <h2 class=\"h2 mb-4\">\n        What People Say About <span class=\"sp-emphasis\">Pablo</span>\n      </h2>\n      <p\n        class=\"text-fg-sub mx-auto max-w-3xl text-lg md:text-xl\"\n\n      >\n        Discover how Pablo is transforming the way people build websites\n      </p>\n    </div>\n  </div>\n\n  <div class=\"relative -ml-[calc(50vw-50%)] w-screen\">\n    <div class=\"scroll-rail-wrapper pb-8\">\n      <div class=\"scroll-rail-track\">\n        {\n          testimonials.map((testimonial) => (\n            <article\n              class=\"testimonial-card card-base rounded-card\"\n              data-scheme=\"card-primary\"\n            >\n              <blockquote class=\"text-fg font-base\">\n                {testimonial.message}\n              </blockquote>\n              <div class=\"testimonial-author\">\n                <div class=\"flex-1\">\n                  <p class=\"text-sm\">{testimonial.name}</p>\n                  <p class=\"text-fg-sub text-sm\">{testimonial.role}</p>\n                </div>\n              </div>\n            </article>\n          ))\n        }\n        {\n          testimonials.map((testimonial) => (\n            <article\n              class=\"testimonial-card card-base rounded-card\"\n              data-scheme=\"card-primary\"\n            >\n              <blockquote class=\"text-fg font-base\">\n                {testimonial.message}\n              </blockquote>\n              <div class=\"testimonial-author\">\n                <div class=\"flex-1\">\n                  <p class=\"text-sm\">{testimonial.name}</p>\n                  <p class=\"text-fg-sub text-sm\">{testimonial.role}</p>\n                </div>\n              </div>\n            </article>\n          ))\n        }\n      </div>\n    </div>\n  </div>\n</section>\n\n<style>\n  @reference \"tailwindcss\";\n\n  .testimonials-section {\n    width: 100%;\n  }\n\n  .card-base {\n    position: relative;\n    overflow: hidden;\n    background: var(--sp-bg);\n  }\n\n  .card-base::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: var(--background-image-noise);\n    background-size: 200px;\n    opacity: 0.05;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .scroll-rail-wrapper {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .scroll-rail-track {\n    display: flex;\n    gap: 1.25rem;\n    animation: scroll-left 30s linear infinite;\n    will-change: transform;\n  }\n\n  .scroll-rail-track:hover {\n    animation-play-state: paused;\n  }\n\n  @keyframes scroll-left {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(-50%);\n    }\n  }\n\n  .testimonial-card {\n    flex-shrink: 0;\n    width: 20rem;\n    aspect-ratio: 1.2 / 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 2rem;\n  }\n\n  .testimonial-author {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n  }\n\n  @media (max-width: 768px) {\n    .testimonial-card {\n      width: 18rem;\n      padding: 1.5rem;\n    }\n  }\n</style>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "scroll-rail"
  ]
}