{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "testimonial-marquee-scroll",
  "title": "Testimonial — Marquee Scroll",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/testimonial-marquee-scroll/TestimonialMarqueeScroll.vue",
      "content": "<script setup lang=\"ts\">\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 rowOne = quotes.slice(0, 4)\nconst rowTwo = quotes.slice(4)\n</script>\n\n<template>\n  <section data-slot=\"testimonial-marquee-scroll\" class=\"bg-background overflow-hidden\">\n    <div class=\"mx-auto max-w-6xl px-6 pt-20 lg:pt-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">What people say</Badge>\n        <h2 class=\"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 class=\"marquee relative mt-10 space-y-4 pb-20 lg:pb-28\">\n      <div v-for=\"(row, index) in [rowOne, rowTwo]\" :key=\"index\" class=\"marquee__row\">\n        <div class=\"marquee__track\" :class=\"index === 1 ? 'marquee__track--reverse' : ''\">\n          <!-- Duplicated once so the loop has an identical second half to scroll into. -->\n          <Card v-for=\"(entry, i) in [...row, ...row]\" :key=\"`${entry.author}-${i}`\" class=\"w-80 shrink-0\">\n            <CardContent class=\"p-5\">\n              <blockquote class=\"text-sm leading-relaxed\">“{{ entry.quote }}”</blockquote>\n              <div class=\"mt-4 flex items-center gap-3\">\n                <Avatar class=\"size-8\">\n                  <AvatarFallback class=\"text-xs\">{{ entry.initials }}</AvatarFallback>\n                </Avatar>\n                <div class=\"min-w-0\">\n                  <p class=\"truncate text-xs font-medium\">{{ entry.author }}</p>\n                  <p class=\"text-muted-foreground truncate text-xs\">{{ entry.role }}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n/* Keyframes and the edge mask cannot be expressed as utilities; everything else\n   stays in the template. Matches the approach in logo-ticker-infinite. */\n@keyframes marquee-scroll {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n.marquee {\n  mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);\n}\n\n.marquee__row {\n  overflow: hidden;\n}\n\n.marquee__track {\n  display: flex;\n  width: max-content;\n  gap: 1rem;\n  animation: marquee-scroll 46s linear infinite;\n}\n\n.marquee__track--reverse {\n  animation-direction: reverse;\n}\n\n.marquee__row:hover .marquee__track {\n  animation-play-state: paused;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .marquee__track {\n    animation: none;\n  }\n  .marquee__row {\n    overflow-x: auto;\n  }\n}\n</style>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/TestimonialMarqueeScroll.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/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"
}