{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-03",
  "title": "Feature 03",
  "description": "Two-column image grid showcasing product features with visual screenshots and short descriptions. Use it to let your interface speak for itself while giving context for each feature shown.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-03/feature.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { ArrowUpRight } from \"lucide-react\";\n\ninterface FeatureItem {\n  badge: string;\n  title: string;\n  description: string;\n  img?: string;\n  button?: { text: string; url: string };\n}\n\ninterface Feature03Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  features?: FeatureItem[];\n  className?: string;\n}\n\nconst Feature03 = ({\n  label = \"Features\",\n  title = \"Everything You Need to Build Faster\",\n  description = \"Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.\",\n  features = [\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp\",\n      badge: \"Copy & Paste Ready\",\n      title: \"Copy & Paste Ready Everything You Need to Build Faster\",\n      description:\n        \"All components are ready to use. Just copy the code and paste it into your project. All components are ready to use. Just copy the code and paste it into your project.\",\n      button: { text: \"Browse Components\", url: \"#\" },\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-2.webp\",\n      badge: \"Fully Customizable\",\n      title: \"Fully Customizable\",\n      description:\n        \"Built with Tailwind CSS, every component is fully customizable to match your brand. Built with Tailwind CSS, every component is fully customizable to match your brand.\",\n      button: { text: \"View Docs\", url: \"#\" },\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp\",\n      badge: \"TypeScript First\",\n      title: \"TypeScript First\",\n      description:\n        \"Written in TypeScript with full type safety and IntelliSense support for better DX. Written in TypeScript with full type safety and IntelliSense support for better DX.\",\n      button: { text: \"Get Started\", url: \"#\" },\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-4.webp\",\n      badge: \"Accessible by Default\",\n      title: \"Accessible by Default\",\n      description:\n        \"Built on Radix UI primitives, all components follow WAI-ARIA guidelines.\",\n      button: { text: \"Learn More\", url: \"#\" },\n    },\n  ],\n  className,\n}: Feature03Props) => {\n  return (\n    <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n      <div className=\"mx-auto flex max-w-5xl flex-col items-center gap-2 text-center\">\n        {label && (\n          <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n            {label}\n          </p>\n        )}\n        <h2 className=\"text-3xl leading-tight font-medium tracking-tight md:text-4xl lg:text-5xl\">\n          {title}\n        </h2>\n        {description && (\n          <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n        )}\n      </div>\n\n      <div className=\"mx-auto mt-16 flex max-w-5xl flex-col gap-16 md:mt-24 md:gap-24\">\n        {features.map((feature, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"flex flex-col items-center gap-16 overflow-hidden md:flex-row\",\n              index % 2 !== 0 && \"md:flex-row-reverse\",\n            )}\n          >\n            <div className=\"aspect-video w-full overflow-hidden rounded-md border border-border bg-muted/30 md:w-1/2\">\n              {feature.img && (\n                <img\n                  src={feature.img}\n                  alt={feature.title}\n                  className=\"size-full object-cover\"\n                />\n              )}\n            </div>\n            <div className=\"flex w-full flex-col gap-4 md:w-1/2\">\n              <p className=\"text-sm font-semibold text-muted-foreground uppercase\">\n                {feature.badge}\n              </p>\n              <h3 className=\"text-2xl font-medium md:text-3xl\">\n                {feature.title}\n              </h3>\n              <p className=\"text-muted-foreground\">{feature.description}</p>\n              {feature.button && (\n                <Button className=\"w-fit\" variant=\"outline\" asChild>\n                  <a href={feature.button.url}>\n                    {feature.button.text}\n                    <ArrowUpRight className=\"size-4\" />\n                  </a>\n                </Button>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n};\n\nexport default Feature03;\n",
      "type": "registry:component",
      "target": "components/feature-03.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-03.webp",
    "imageDark": "/r/previews/feature-03-dark.webp",
    "prose": {
      "about": "Feature 03 is a two-column image grid that pairs product screenshots with short feature titles and descriptions. Each row places a screenshot on one side and descriptive text on the other, alternating alignment for visual rhythm. Built with Next.js Image and shadcn/ui layout utilities, it lazy-loads each screenshot and respects both light and dark mode. The component accepts an array of feature objects with image, title, and description fields.",
      "whenToUse": [
        "Products with distinct UI screens or dashboards where showing the interface is more persuasive than describing it",
        "Feature sections that come after a brief overview and need to go deeper on individual capabilities",
        "SaaS landing pages where competitors rely on bullet lists and you want a more visual alternative",
        "Any page where a sequence of feature explanations benefits from alternating image-text layout"
      ],
      "notes": "Use real product screenshots at 1200×800px or similar for crisp rendering. Avoid using placeholder images in production — the visual quality of the screenshots determines the quality of this section."
    }
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}