{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-13",
  "title": "Testimonials 13",
  "description": "A simple testimonials block",
  "files": [
    {
      "path": "src/registry/blocks/radix/testimonials-13/components/testimonials.tsx",
      "content": "import Link from \"next/link\";\nimport type { ComponentProps } from \"react\";\nimport {\n  Logo01,\n  Logo02,\n  Logo03,\n  Logo04,\n  Logo05,\n  Logo06,\n} from \"@/components/logos\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/bases/radix/ui/avatar\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Marquee } from \"@/registry/bases/radix/ui/marquee\";\nimport { cn } from \"@/lib/utils\";\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:\n      \"https://images.pexels.com/photos/3785079/pexels-photo-3785079.jpeg?auto=compress&cs=tinysrgb&w=600\",\n    logo: Logo01,\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:\n      \"https://images.pexels.com/photos/1520760/pexels-photo-1520760.jpeg?auto=compress&cs=tinysrgb&w=600\",\n    logo: Logo02,\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:\n      \"https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600\",\n    logo: Logo03,\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:\n      \"https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=600\",\n    logo: Logo04,\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:\n      \"https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=600\",\n    logo: Logo05,\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:\n      \"https://images.pexels.com/photos/2613260/pexels-photo-2613260.jpeg?auto=compress&cs=tinysrgb&w=600\",\n    logo: Logo06,\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 space-y-px border bg-muted\">\n      <Marquee className=\"py-0 [--duration:60s] [--gap:0px]\" pauseOnHover>\n        <TestimonialList />\n      </Marquee>\n    </div>\n  </div>\n);\n\nconst TestimonialList = ({ className, ...props }: ComponentProps<\"div\">) =>\n  testimonials.map((testimonial) => (\n    <div\n      className=\"-mx-1 flex w-full max-w-sm flex-col odd:flex-col-reverse\"\n      key={testimonial.id}\n    >\n      <div\n        className={cn(\"rounded-xl border bg-background shadow-xs/3\", className)}\n        {...props}\n      >\n        <div className=\"p-6\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-10\">\n                <AvatarImage\n                  className=\"object-cover\"\n                  src={testimonial.avatar}\n                />\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      </div>\n      <div className=\"mask-y-from-75% mask-x-from-75% relative flex h-42 w-96 items-center justify-center p-6\">\n        <testimonial.logo className=\"h-20 w-50 text-muted-foreground\" />\n\n        <div\n          className=\"absolute inset-0 isolate -z-1 opacity-15\"\n          style={{\n            backgroundImage: `\n        linear-gradient(to right, var(--color-muted-foreground) 1px, transparent 1px),\n        linear-gradient(to bottom, var(--color-muted-foreground) 1px, transparent 1px)\n      `,\n            backgroundSize: \"20px 20px\",\n            backgroundPosition: \"0 0, 0 0\",\n            maskImage: `\n        repeating-linear-gradient(\n          to right,\n          black 0px,\n          black 3px,\n          transparent 3px,\n          transparent 8px\n        ),\n        repeating-linear-gradient(\n          to bottom,\n          black 0px,\n          black 3px,\n          transparent 3px,\n          transparent 8px\n        )\n      `,\n            WebkitMaskImage: `\n        repeating-linear-gradient(\n          to right,\n          black 0px,\n          black 3px,\n          transparent 3px,\n          transparent 8px\n        ),\n        repeating-linear-gradient(\n          to bottom,\n          black 0px,\n          black 3px,\n          transparent 3px,\n          transparent 8px\n        )\n      `,\n            maskComposite: \"intersect\",\n            WebkitMaskComposite: \"source-in\",\n          }}\n        />\n      </div>\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-13/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"
}