{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-marquee-scroll",
  "title": "Testimonial — Marquee Scroll",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/testimonial-marquee-scroll/TestimonialMarqueeScroll.tsx",
      "content": "'use client'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst quotes = [\n  { quote: 'Close starts from a reconciled position now.', author: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },\n  {\n    quote: 'The request queue went away and stayed away.',\n    author: 'Daniel Brooks',\n    role: 'Head of Analytics',\n    initials: 'DB',\n  },\n  {\n    quote: 'One pipeline definition, two teams, no argument.',\n    author: 'Priya Raman',\n    role: 'RevOps Director',\n    initials: 'PR',\n  },\n  {\n    quote: 'We deleted eleven spreadsheets in one quarter.',\n    author: 'Marcus Ellery',\n    role: 'Staff Engineer',\n    initials: 'ME',\n  },\n  {\n    quote: 'Auditors get a change log instead of a folder.',\n    author: 'Sophie Lindqvist',\n    role: 'Controller',\n    initials: 'SL',\n  },\n  { quote: 'Permissions finally match the org chart.', author: 'Tom Fairbanks', role: 'IT Director', initials: 'TF' },\n  {\n    quote: 'Nobody has written a bespoke extract since March.',\n    author: 'Anna Reyes',\n    role: 'Data Lead',\n    initials: 'AR',\n  },\n  { quote: 'Forecast review is about the forecast again.', author: 'Grace Whitlock', role: 'CFO', initials: 'GW' },\n]\n\nconst rows = [quotes.slice(0, 4), quotes.slice(4)]\n\nexport function TestimonialMarqueeScroll() {\n  return (\n    <section data-slot=\"testimonial-marquee-scroll\" className=\"bg-background overflow-hidden\">\n      <div className=\"mx-auto max-w-6xl px-6 pt-20 lg:pt-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">What people say</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Eight hundred teams, unprompted</h2>\n        </div>\n      </div>\n\n      {/* Edge masks fade the rows into the page so cards never end mid-cut. */}\n      <div className=\"marquee relative mt-10 space-y-4 pb-20 lg:pb-28\">\n        {rows.map((row, index) => (\n          <div key={index} className=\"marquee__row\">\n            <div className={`marquee__track ${index === 1 ? 'marquee__track--reverse' : ''}`}>\n              {/* Duplicated once so the loop has an identical second half to scroll into. */}\n              {[...row, ...row].map((entry, i) => (\n                <Card key={`${entry.author}-${i}`} className=\"w-80 shrink-0\">\n                  <CardContent className=\"p-5\">\n                    <blockquote className=\"text-sm leading-relaxed\">“{entry.quote}”</blockquote>\n                    <div className=\"mt-4 flex items-center gap-3\">\n                      <Avatar className=\"size-8\">\n                        <AvatarFallback className=\"text-xs\">{entry.initials}</AvatarFallback>\n                      </Avatar>\n                      <div className=\"min-w-0\">\n                        <p className=\"truncate text-xs font-medium\">{entry.author}</p>\n                        <p className=\"text-muted-foreground truncate text-xs\">{entry.role}</p>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Keyframes and the edge mask cannot be expressed as utilities; everything\n          else stays in the markup. Matches logo-ticker-infinite. */}\n      <style>{`\n        @keyframes marquee-scroll {\n          0% { transform: translateX(0); }\n          100% { transform: translateX(-50%); }\n        }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee {\n          mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);\n        }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__row { overflow: hidden; }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__track {\n          display: flex;\n          width: max-content;\n          gap: 1rem;\n          animation: marquee-scroll 46s linear infinite;\n        }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__track--reverse { animation-direction: reverse; }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__row:hover .marquee__track { animation-play-state: paused; }\n        @media (prefers-reduced-motion: reduce) {\n          [data-slot=\"testimonial-marquee-scroll\"] .marquee__track { animation: none; }\n          [data-slot=\"testimonial-marquee-scroll\"] .marquee__row { overflow-x: auto; }\n        }\n      `}</style>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/TestimonialMarqueeScroll.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Two counter-scrolling marquee rows of quote cards that pause on hover and stop entirely under reduced-motion, with edge masks fading the cards into the page.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "testimonial"
}