{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonials-09","type":"registry:component","title":"Testimonials 09","description":"A modern testimonials grid component with mixed card layouts and professional developer testimonials. Features a three-column masonry-style grid with different sized testimonial cards, large teal and light background variants, small dark cards, and realistic developer testimonials from tech companies. Includes responsive design, customer avatars, company branding, and customizable background elements. Perfect for developer tools, SaaS platforms, and tech companies showcasing customer success stories with professional presentation.","files":[{"path":"src/registry/blocks/marketing/social-proof/testimonials/testimonials-09.tsx","content":"\"use client\";\n\nimport Image from \"next/image\";\n\nimport { cn } from \"@/registry/lib/utils\";\n\nexport interface Testimonials09Props {\n  className?: string;\n}\n\nconst content = {\n  header: {\n    title: \"Loved by developers worldwide\",\n    subtitle:\n      \"See how development teams are building faster, collaborating better, and deploying with confidence using our platform.\",\n  },\n  testimonials: [\n    {\n      quote:\n        \"The AI-powered code suggestions feel like having a senior developer pair programming with you. Our code quality has improved significantly, and we're catching issues before they reach production.\",\n      name: \"Sarah Chen\",\n      company: \"Spotify\",\n      avatar: \"https://randomuser.me/api/portraits/women/44.jpg\",\n      type: \"large-teal\",\n    },\n    {\n      quote:\n        \"Setting up our development environment used to take hours. Now it's done in minutes with zero configuration headaches.\",\n      name: \"Marcus Johnson\",\n      company: \"Tesla\",\n      avatar: \"https://randomuser.me/api/portraits/men/15.jpg\",\n      type: \"small-dark\",\n    },\n    {\n      quote:\n        \"Multi-agent debugging has revolutionized how we tackle complex issues. What used to take days now gets resolved in hours.\",\n      name: \"Elena Rodriguez\",\n      company: \"Netflix\",\n      avatar: \"https://randomuser.me/api/portraits/women/25.jpg\",\n      type: \"small-dark\",\n    },\n    {\n      quote:\n        \"We consolidated six different development tools into one platform. Our workflow is cleaner and our team is more productive than ever.\",\n      name: \"David Kim\",\n      company: \"Stripe\",\n      avatar: \"https://randomuser.me/api/portraits/men/32.jpg\",\n      type: \"small-dark\",\n    },\n    {\n      quote:\n        \"Started with the free tier to test it out, but we upgraded to Enterprise within two weeks. It's become essential to our development process.\",\n      name: \"Jennifer Walsh\",\n      company: \"Airbnb\",\n      avatar: \"https://randomuser.me/api/portraits/women/78.jpg\",\n      type: \"small-dark\",\n    },\n    {\n      quote:\n        \"Real-time collaboration has transformed our remote team dynamics. Code reviews happen faster and pair programming feels natural again.\",\n      name: \"Alex Thompson\",\n      company: \"GitHub\",\n      avatar: \"https://randomuser.me/api/portraits/men/67.jpg\",\n      type: \"small-dark\",\n    },\n    {\n      quote:\n        \"Our deployment pipeline went from complex and error-prone to seamless and reliable. We ship features with confidence knowing everything just works.\",\n      name: \"Maria Santos\",\n      company: \"Shopify\",\n      avatar: \"https://randomuser.me/api/portraits/women/68.jpg\",\n      type: \"large-light\",\n    },\n  ],\n};\n\ninterface TestimonialCardProps {\n  quote: string;\n  name: string;\n  company: string;\n  avatar: string;\n  type: string;\n}\n\nconst TestimonialCard = ({\n  quote,\n  name,\n  company,\n  avatar,\n  type,\n}: TestimonialCardProps) => {\n  const isLargeCard = type.startsWith(\"large\");\n  const avatarSize = isLargeCard ? 48 : 36;\n  const avatarBorderRadius = isLargeCard\n    ? \"rounded-[41px]\"\n    : \"rounded-[30.75px]\";\n  const padding = isLargeCard ? \"p-6\" : \"p-[30px]\";\n\n  let cardClasses = `flex flex-col justify-between items-start overflow-hidden rounded-[10px] shadow-[0px_2px_4px_rgba(0,0,0,0.08)] relative ${padding}`;\n  let quoteClasses = \"\";\n  let nameClasses = \"\";\n  let companyClasses = \"\";\n  let backgroundElements = null;\n  let cardHeight = \"\";\n  const cardWidth = \"w-full md:w-[384px]\";\n\n  if (type === \"large-teal\") {\n    cardClasses += \" bg-primary\";\n    quoteClasses += \" text-primary-foreground text-2xl font-medium leading-8\";\n    nameClasses += \" text-primary-foreground text-base font-normal leading-6\";\n    companyClasses +=\n      \" text-primary-foreground/60 text-base font-normal leading-6\";\n    cardHeight = \"h-[502px]\";\n    backgroundElements = (\n      <div\n        className=\"absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat\"\n        style={{\n          backgroundImage: \"url('/images/large-card-background.svg')\",\n          zIndex: 0,\n        }}\n      />\n    );\n  } else if (type === \"large-light\") {\n    cardClasses += \" bg-primary/10\";\n    quoteClasses += \" text-foreground text-2xl font-medium leading-8\";\n    nameClasses += \" text-foreground text-base font-normal leading-6\";\n    companyClasses += \" text-muted-foreground text-base font-normal leading-6\";\n    cardHeight = \"h-[502px]\";\n    backgroundElements = (\n      <div\n        className=\"absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat opacity-20\"\n        style={{\n          backgroundImage: \"url('/images/large-card-background.svg')\",\n          zIndex: 0,\n        }}\n      />\n    );\n  } else {\n    cardClasses +=\n      \" bg-card outline outline-1 outline-border outline-offset-[-1px]\";\n    quoteClasses += \" text-foreground/80 text-[17px] font-normal leading-6\";\n    nameClasses += \" text-foreground text-sm font-normal leading-[22px]\";\n    companyClasses +=\n      \" text-muted-foreground text-sm font-normal leading-[22px]\";\n    cardHeight = \"h-[244px]\";\n  }\n\n  return (\n    <div className={cn(cardClasses, cardWidth, cardHeight)}>\n      {backgroundElements}\n      <div\n        className={cn(\"relative z-10 font-normal break-words\", quoteClasses)}\n      >\n        {quote}\n      </div>\n      <div className=\"relative z-10 flex justify-start items-center gap-3\">\n        <Image\n          src={avatar || \"/placeholder.svg\"}\n          alt={`${name} avatar`}\n          width={avatarSize}\n          height={avatarSize}\n          className={cn(\n            `w-${avatarSize / 4} h-${avatarSize / 4}`,\n            avatarBorderRadius,\n          )}\n          style={{ border: \"1px solid rgba(255, 255, 255, 0.08)\" }}\n        />\n        <div className=\"flex flex-col justify-start items-start gap-0.5\">\n          <div className={nameClasses}>{name}</div>\n          <div className={companyClasses}>{company}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport function Testimonials09({ className }: Testimonials09Props) {\n  return (\n    <section\n      className={cn(\n        \"w-full px-5 overflow-hidden flex flex-col justify-start py-6 md:py-8 lg:py-14\",\n        className,\n      )}\n    >\n      <div className=\"self-stretch py-6 md:py-8 lg:py-14 flex flex-col justify-center items-center gap-2\">\n        <div className=\"flex flex-col justify-start items-center gap-4\">\n          <h2 className=\"text-center text-foreground text-3xl md:text-4xl lg:text-[40px] font-semibold leading-tight md:leading-tight lg:leading-[40px]\">\n            {content.header.title}\n          </h2>\n          <p className=\"self-stretch text-center text-muted-foreground text-sm md:text-sm lg:text-base font-medium leading-[18.20px] md:leading-relaxed lg:leading-relaxed\">\n            {content.header.subtitle}\n          </p>\n        </div>\n      </div>\n      <div className=\"w-full pt-0.5 pb-4 md:pb-6 lg:pb-10 flex flex-col md:flex-row justify-center items-start gap-4 md:gap-4 lg:gap-6 max-w-[1100px] mx-auto\">\n        <div className=\"flex-1 flex flex-col justify-start items-start gap-4 md:gap-4 lg:gap-6\">\n          <TestimonialCard {...content.testimonials[0]} />\n          <TestimonialCard {...content.testimonials[1]} />\n        </div>\n        <div className=\"flex-1 flex flex-col justify-start items-start gap-4 md:gap-4 lg:gap-6\">\n          <TestimonialCard {...content.testimonials[2]} />\n          <TestimonialCard {...content.testimonials[3]} />\n          <TestimonialCard {...content.testimonials[4]} />\n        </div>\n        <div className=\"flex-1 flex flex-col justify-start items-start gap-4 md:gap-4 lg:gap-6\">\n          <TestimonialCard {...content.testimonials[5]} />\n          <TestimonialCard {...content.testimonials[6]} />\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}