{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-marquee-brands",
  "type": "registry:component",
  "title": "Hero marquee brands",
  "description": "A hero headline above an endlessly scrolling marquee of brand names for social proof. The loop stops when reduced motion is requested by the user.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-marquee-brands.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-marquee-brands.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nconst BRANDS = [\"Northwind\", \"Acme\", \"Vercel-ish\", \"Linear-ish\", \"Stripe-ish\", \"Notion-ish\", \"Figma-ish\", \"Raycast\"]\n\nfunction HeroMarqueeBrands({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-marquee-brands\"\n      data-tier=\"premium\"\n      className={cn(\"overflow-hidden rounded-2xl border border-border bg-surface\", className)}\n    >\n      <div className=\"mx-auto max-w-3xl px-4 pt-14 pb-8 text-center sm:px-6 sm:pt-20 sm:pb-10\">\n        <motion.h1\n          initial={reduce ? false : { opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          className=\"text-[clamp(1.75rem,3.5vw+1rem,3rem)] font-medium tracking-[-0.028em] text-fg\"\n        >\n          Trusted by teams who ship\n        </motion.h1>\n        <p className=\"mx-auto mt-3 max-w-md text-sm text-fg-muted\">\n          Brand marquee for social proof without the blur soup.\n        </p>\n        <div className=\"mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center\">\n          <Button className=\"w-full sm:w-auto\">Get the kit</Button>\n          <Button variant=\"outline\" className=\"w-full sm:w-auto\">Talk to us</Button>\n        </div>\n      </div>\n      <div className=\"w-full min-w-0 max-w-full overflow-hidden border-t border-border bg-sunken py-4\">\n        <motion.div\n          className=\"flex w-max gap-10 px-6 text-sm font-medium text-fg\"\n          animate={reduce ? undefined : { x: [\"0%\", \"-50%\"] }}\n          transition={{ duration: 28, repeat: Infinity, ease: \"linear\" }}\n        >\n          {[...BRANDS, ...BRANDS].map((b, i) => (\n            <span key={`${b}-${i}`} className=\"whitespace-nowrap\">{b}</span>\n          ))}\n        </motion.div>\n      </div>\n    </section>\n  )\n}\nexport { HeroMarqueeBrands }\n"
    }
  ]
}