{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonal-03",
  "description": "A testimonial card grid.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/testimonal-03/page.tsx",
      "content": "import { TestimonialGridSection } from \"@/registry/blocks/testimonal-03/components/testimonal-03\"\n\nexport default function Testimonals03Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-full\">\n        <TestimonialGridSection />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/testimonial/page.tsx"
    },
    {
      "path": "registry/blocks/testimonal-03/components/testimonal-03.tsx",
      "content": "import Image from \"next/image\"\n\nconst testimonials: TestimonialCardProps[] = [\n  {\n    quote:\n      \"The real-time code suggestions from Pointer feel like having a senior engineer reviewing every line of code as you write. The accuracy of its recommendations has improved our overall code quality, reduced review time.\",\n    name: \"Annette Black\",\n    company: \"Sony\",\n    avatar: \"https://avatar.vercel.sh/annette\",\n    type: \"large-cyan\",\n  },\n  {\n    quote:\n      \"Integrating Pointer into our stack was smooth, and the MCP server connections saved us days of configuration work\",\n    name: \"Dianne Russell\",\n    company: \"McDonald's\",\n    avatar: \"https://avatar.vercel.sh/russell\",\n    type: \"small-dark\",\n  },\n  {\n    quote:\n      \"Pointer’s multi-agent coding feature has been a game changer. We’re fixing complex bugs in hours instead of spending entire sprints on them.\",\n    name: \"Cameron Williamson\",\n    company: \"IBM\",\n    avatar: \"https://avatar.vercel.sh/cameron\",\n    type: \"small-dark\",\n  },\n  {\n    quote:\n      \"We no longer juggle multiple tools. Pointer brought all our integrations together in one place, which simplified our entire workflow.\",\n    name: \"Robert Fox\",\n    company: \"MasterCard\",\n    avatar: \"https://avatar.vercel.sh/robert\",\n    type: \"small-dark\",\n  },\n  {\n    quote:\n      \"We started with the free plan just to test it out, but within a week we upgraded to Pro. Now, we can’t imagine coding without it\",\n    name: \"Darlene Robertson\",\n    company: \"Ferrari\",\n    avatar: \"https://avatar.vercel.sh/darlene\",\n    type: \"small-dark\",\n  },\n  {\n    quote:\n      \"Collaborative coding feels effortless now. With Pointer’s real-time previews, pair programming has become faster and more productive.\",\n    name: \"Cody Fisher\",\n    company: \"Apple\",\n    avatar: \"https://avatar.vercel.sh/cody\",\n    type: \"small-dark\",\n  },\n  {\n    quote:\n      \"Deploying on Vercel with Pointer was not just simple, it felt seamless. We went from coding to seeing our changes live in minutes without worrying about build pipelines or configuration issues.\",\n    name: \"Albert Flores\",\n    company: \"Louis Vuitton\",\n    avatar: \"https://avatar.vercel.sh/louis\",\n    type: \"large-light\",\n  },\n]\n\ninterface TestimonialCardProps {\n  quote: string\n  name: string\n  company: string\n  avatar: string\n  type: \"large-cyan\" | \"large-light\" | \"small-dark\"\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-cyan\") {\n    cardClasses += \" bg-cyan-300\"\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 h-full w-full bg-cover bg-center bg-no-repeat\"\n        style={{\n          backgroundImage:\n            \"url(https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/large-card-background.svg)\",\n          zIndex: 0,\n        }}\n      />\n    )\n  } else if (type === \"large-light\") {\n    cardClasses += \" bg-[rgba(231,236,235,0.12)]\"\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 h-full w-full bg-cover bg-center bg-no-repeat opacity-20\"\n        style={{\n          backgroundImage:\n            \"url(https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/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={`${cardClasses} ${cardWidth} ${cardHeight}`}>\n      {backgroundElements}\n      <div className={`relative z-10 font-normal break-words ${quoteClasses}`}>\n        {quote}\n      </div>\n      <div className=\"relative z-10 flex items-center justify-start gap-3\">\n        <Image\n          src={avatar || \"/placeholder.svg\"}\n          alt={`${name} avatar`}\n          width={avatarSize}\n          height={avatarSize}\n          className={`w-${avatarSize / 4} h-${avatarSize / 4} ${avatarBorderRadius}`}\n          style={{ border: \"1px solid rgba(255, 255, 255, 0.08)\" }}\n        />\n        <div className=\"flex flex-col items-start justify-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 TestimonialGridSection() {\n  return (\n    <section className=\"flex w-full flex-col justify-start overflow-hidden px-5 py-6 md:py-8 lg:py-14\">\n      <div className=\"mx-auto flex w-full max-w-[1100px] flex-col items-start justify-center gap-4 pt-0.5 pb-4 md:flex-row md:gap-4 md:pb-6 lg:gap-6 lg:pb-10\">\n        <div className=\"flex flex-1 flex-col items-start justify-start gap-4 md:gap-4 lg:gap-6\">\n          <TestimonialCard {...testimonials[0]} />\n          <TestimonialCard {...testimonials[1]} />\n        </div>\n        <div className=\"flex flex-1 flex-col items-start justify-start gap-4 md:gap-4 lg:gap-6\">\n          <TestimonialCard {...testimonials[2]} />\n          <TestimonialCard {...testimonials[3]} />\n          <TestimonialCard {...testimonials[4]} />\n        </div>\n        <div className=\"flex flex-1 flex-col items-start justify-start gap-4 md:gap-4 lg:gap-6\">\n          <TestimonialCard {...testimonials[5]} />\n          <TestimonialCard {...testimonials[6]} />\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "testimonials"
  ],
  "type": "registry:block"
}