{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-04",
  "title": "Testimonials 04",
  "description": "A simple testimonial block",
  "registryDependencies": [
    "avatar",
    "button",
    "https://www.shadcnui-blocks.com/r/marquee.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/testimonials-04/components/testimonials.tsx",
      "content": "import Link from \"next/link\";\nimport type { ComponentProps } from \"react\";\nimport { Avatar, AvatarFallback } from \"@/registry/bases/radix/ui/avatar\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Marquee } from \"@/registry/bases/radix/ui/marquee\";\n\nconst testimonials = [\n  {\n    id: 1,\n    name: \"John Doe\",\n    designation: \"Software Engineer\",\n    company: \"TechCorp\",\n    testimonial:\n      \"This product has completely transformed the way we work. The efficiency and ease of use are unmatched!\",\n    avatar: \"https://randomuser.me/api/portraits/men/1.jpg\",\n  },\n  {\n    id: 2,\n    name: \"Sophia Lee\",\n    designation: \"Data Analyst\",\n    company: \"InsightTech\",\n    testimonial:\n      \"This tool has saved me hours of work! The analytics and reporting features are incredibly powerful.\",\n    avatar: \"https://randomuser.me/api/portraits/women/6.jpg\",\n  },\n  {\n    id: 3,\n    name: \"Michael Johnson\",\n    designation: \"UX Designer\",\n    company: \"DesignPro\",\n    testimonial:\n      \"An amazing tool that simplifies complex tasks. Highly recommended for professionals in the industry.\",\n    avatar: \"https://randomuser.me/api/portraits/men/3.jpg\",\n  },\n  {\n    id: 4,\n    name: \"Emily Davis\",\n    designation: \"Marketing Specialist\",\n    company: \"BrandBoost\",\n    testimonial:\n      \"I've seen a significant improvement in our team's productivity since we started using this service.\",\n    avatar: \"https://randomuser.me/api/portraits/women/4.jpg\",\n  },\n  {\n    id: 5,\n    name: \"Daniel Martinez\",\n    designation: \"Full-Stack Developer\",\n    company: \"CodeCrafters\",\n    testimonial:\n      \"The best investment we've made! The support team is also super responsive and helpful.\",\n    avatar: \"https://randomuser.me/api/portraits/men/5.jpg\",\n  },\n  {\n    id: 6,\n    name: \"Jane Smith\",\n    designation: \"Product Manager\",\n    company: \"InnovateX\",\n    testimonial:\n      \"The user experience is top-notch! The interface is clean, intuitive, and easy to navigate.\",\n    avatar: \"https://randomuser.me/api/portraits/women/2.jpg\",\n  },\n];\n\nconst Testimonials = () => (\n  <div className=\"px-6 py-20\">\n    <h2 className=\"text-center font-medium text-4xl tracking-[-0.04em] md:text-[2.75rem]\">\n      Success Stories\n    </h2>\n    <p className=\"mt-3.5 text-center text-muted-foreground text-xl tracking-[-0.015em] md:text-2xl\">\n      Real stories from people who use and love our product every day\n    </p>\n    <div className=\"mask-x-from-80% mt-14\">\n      <Marquee className=\"[--duration:60s]\" pauseOnHover>\n        <TestimonialList />\n      </Marquee>\n      <Marquee className=\"mt-0 [--duration:60s]\" pauseOnHover reverse>\n        <TestimonialList />\n      </Marquee>\n    </div>\n  </div>\n);\n\nconst TestimonialList = () =>\n  testimonials.map((testimonial) => (\n    <div\n      className=\"min-w-96 max-w-sm rounded-xl bg-accent p-6\"\n      key={testimonial.id}\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <Avatar className=\"size-10\">\n            <AvatarFallback className=\"bg-primary font-medium text-primary-foreground text-xl\">\n              {testimonial.name.charAt(0)}\n            </AvatarFallback>\n          </Avatar>\n          <div>\n            <p className=\"font-medium\">{testimonial.name}</p>\n            <p className=\"text-muted-foreground text-sm\">\n              {testimonial.designation}\n            </p>\n          </div>\n        </div>\n        <Button asChild size=\"icon\" variant=\"ghost\">\n          <Link href=\"#\" target=\"_blank\">\n            <TwitterLogo className=\"h-4 w-4\" />\n          </Link>\n        </Button>\n      </div>\n      <p className=\"mt-5 text-[17px]\">{testimonial.testimonial}</p>\n    </div>\n  ));\n\nconst TwitterLogo = (props: ComponentProps<\"svg\">) => (\n  <svg\n    role=\"img\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>X</title>\n    <path\n      d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport default Testimonials;\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/testimonials-04/components/ui/marquee.tsx",
      "content": "import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface MarqueeProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional CSS class name to apply custom styles\n   */\n  className?: string;\n  /**\n   * Whether to reverse the animation direction\n   * @default false\n   */\n  reverse?: boolean;\n  /**\n   * Whether to pause the animation on hover\n   * @default false\n   */\n  pauseOnHover?: boolean;\n  /**\n   * Content to be displayed in the marquee\n   */\n  children: React.ReactNode;\n  /**\n   * Whether to animate vertically instead of horizontally\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Number of times to repeat the content\n   * @default 4\n   */\n  repeat?: number;\n}\n\nexport function Marquee({\n  className,\n  reverse = false,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 4,\n  ...props\n}: MarqueeProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]\",\n        {\n          \"flex-row\": !vertical,\n          \"flex-col\": vertical,\n        },\n        className\n      )}\n    >\n      {Array(repeat)\n        .fill(0)\n        .map((_, i) => (\n          <div\n            className={cn(\"flex shrink-0 justify-around [gap:var(--gap)]\", {\n              \"animate-marquee flex-row\": !vertical,\n              \"animate-marquee-vertical flex-col\": vertical,\n              \"group-hover:[animation-play-state:paused]\": pauseOnHover,\n              \"[animation-direction:reverse]\": reverse,\n            })}\n            key={i}\n          >\n            {children}\n          </div>\n        ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}