{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "services-image-grid-01",
  "title": "Services Image Grid",
  "description": "An intro with a heading, a short pitch, and one outline action beside five image cards that fade when you point at them",
  "dependencies": [
    "motion@13"
  ],
  "registryDependencies": [
    "https://ui.cortexcn.dev/r/utils.json",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/services-image-grid-01/components/services-image-grid.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\n\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { Card, CardAction, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\n// Cortexcn item \"services-image-grid-01\", revision 11ba78f5975e, MIT license.\n// https://ui.cortexcn.dev/r/v/services-image-grid-01/11ba78f5975e.json\n\ninterface ServicesAction {\n  label: string;\n  href: string;\n}\n\nexport interface ServiceItem {\n  title: string;\n  href: string;\n  image: { src: string; alt: string };\n}\n\nexport interface ServicesImageGridProps {\n  heading?: string;\n  description?: string;\n  action?: ServicesAction;\n  /** The first two are tall cards; the rest sit three to a row beneath them. */\n  services?: ServiceItem[];\n  className?: string;\n}\n\n/** The flower paintings from the Cortexcn site. */\nconst ART_BASE = \"https://www.cortexcn.dev/images/ui-home\";\n\nconst DEFAULT_SERVICES: ServiceItem[] = [\n  {\n    title: \"Landing pages\",\n    href: \"#\",\n    image: {\n      src: `${ART_BASE}/watercolor-wildflowers.webp`,\n      alt: \"A watercolor of tall wildflowers in soft blue and gold\",\n    },\n  },\n  {\n    title: \"Websites\",\n    href: \"#\",\n    image: {\n      src: `${ART_BASE}/wildflower-meadow.webp`,\n      alt: \"A painted meadow of wildflowers bending in the wind\",\n    },\n  },\n  {\n    title: \"Web applications\",\n    href: \"#\",\n    image: {\n      src: `${ART_BASE}/blue-white-flowers.webp`,\n      alt: \"A painting of white flowers against a pale blue sky\",\n    },\n  },\n  {\n    title: \"E-commerce stores\",\n    href: \"#\",\n    image: {\n      src: `${ART_BASE}/pastel-daisies.webp`,\n      alt: \"A painting of daisies in pastel greens and creams\",\n    },\n  },\n  {\n    title: \"AI pipelines\",\n    href: \"#\",\n    image: {\n      src: `${ART_BASE}/white-blossoms.webp`,\n      alt: \"A painting of white blossoms on a leafy branch\",\n    },\n  },\n];\n\n/** How many services lead the grid as tall cards. */\nconst FEATURED_COUNT = 2;\n\nfunction ArrowUpRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\"size-4\", className)}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M7 7h10v10M7 17 17 7\" />\n    </svg>\n  );\n}\n\nfunction ServiceCard({\n  service,\n  featured,\n}: {\n  service: ServiceItem;\n  featured: boolean;\n}) {\n  return (\n    <motion.a\n      className=\"group block rounded-xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50\"\n      href={service.href}\n      transition={{ duration: 0.2, ease: \"easeOut\" }}\n      whileHover={{ opacity: 0.8 }}\n    >\n      <Card\n        className={cn(\"relative py-0\", featured ? \"aspect-3/4\" : \"aspect-4/3\")}\n      >\n        {/* biome-ignore lint/performance/noImgElement: framework-agnostic registry block */}\n        <img\n          alt={service.image.alt}\n          className=\"absolute inset-0 size-full object-cover\"\n          decoding=\"async\"\n          height={featured ? 1067 : 450}\n          loading=\"lazy\"\n          src={service.image.src}\n          width={featured ? 800 : 600}\n        />\n        {/* Keeps the title readable on light photos. */}\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-x-0 top-0 h-1/2 bg-linear-to-b from-black/60 to-transparent\"\n        />\n        <CardHeader className={cn(\"relative\", featured ? \"p-6\" : \"p-4\")}>\n          <CardTitle\n            className={cn(\n              \"pr-4 font-semibold text-white\",\n              featured ? \"text-base\" : \"text-sm\",\n            )}\n          >\n            {service.title}\n          </CardTitle>\n          <CardAction>\n            <ArrowUpRightIcon\n              className={cn(\n                \"text-white transition-transform duration-200 ease-out motion-safe:group-hover:scale-110\",\n                featured ? \"size-6\" : \"size-5\",\n              )}\n            />\n          </CardAction>\n        </CardHeader>\n      </Card>\n    </motion.a>\n  );\n}\n\nexport function ServicesImageGrid({\n  heading = \"What we build\",\n  description = \"Landing pages, websites, and full web apps, designed and built by one small team. Tell us what you need and get a written quote.\",\n  action = { label: \"View all services\", href: \"#\" },\n  services = DEFAULT_SERVICES,\n  className,\n}: ServicesImageGridProps) {\n  return (\n    <section className={cn(\"px-6 py-24 sm:py-32\", className)}>\n      <div className=\"mx-auto grid max-w-6xl gap-10 lg:grid-cols-3\">\n        <div className=\"flex flex-col justify-between gap-8\">\n          <div className=\"flex flex-col gap-4\">\n            <h2 className=\"text-balance font-semibold text-4xl tracking-tight md:text-5xl\">\n              {heading}\n            </h2>\n            <p className=\"max-w-xs text-muted-foreground leading-relaxed\">\n              {description}\n            </p>\n          </div>\n          <a\n            className={cn(\n              buttonVariants({ variant: \"outline\" }),\n              \"w-fit gap-1.5 px-4\",\n            )}\n            href={action.href}\n          >\n            {action.label}\n            <ArrowUpRightIcon />\n          </a>\n        </div>\n\n        <ul className=\"grid gap-4 sm:grid-cols-6 lg:col-span-2\">\n          {services.map((service, index) => {\n            const featured = index < FEATURED_COUNT;\n            return (\n              <li\n                className={featured ? \"sm:col-span-3\" : \"sm:col-span-2\"}\n                key={service.title}\n              >\n                <ServiceCard featured={featured} service={service} />\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/services-image-grid.tsx"
    }
  ],
  "type": "registry:block",
  "author": "Cortexcn (https://ui.cortexcn.dev)",
  "meta": {
    "license": "MIT",
    "revision": "11ba78f5975e"
  }
}