{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature144",
  "title": "Service Offerings with Arrows",
  "description": "Responsive grid of service cards with descriptions and arrow icons. Ideal for services listing, solutions overview, or offering showcase.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/feature144/feature144.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ServiceItem {\n  title: string;\n  description?: string;\n  href?: string;\n}\n\ninterface ButtonItem {\n  label: string;\n  href?: string;\n  variant?:\n    | \"default\"\n    | \"secondary\"\n    | \"outline\"\n    | \"ghost\"\n    | \"link\"\n    | \"destructive\";\n}\n\ninterface Feature144Props {\n  badge?: { label: string; variant?: \"default\" | \"secondary\" | \"outline\" };\n  heading?: string;\n  description?: string;\n  services?: ServiceItem[];\n  buttons?: ButtonItem[];\n  className?: string;\n}\n\nexport const feature144Demo: Feature144Props = {\n  badge: { label: \"Services\", variant: \"default\" },\n  heading: \"What we offer\",\n  description: \"Comprehensive solutions for your business.\",\n  services: [\n    {\n      title: \"Consulting\",\n      description: \"Strategic guidance from industry experts.\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Development\",\n      description: \"Custom software built for your needs.\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Design\",\n      description: \"Beautiful interfaces that users love.\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Support\",\n      description: \"24/7 assistance when you need it.\",\n      href: \"https://beste.co\",\n    },\n  ],\n  buttons: [],\n};\n\nexport function Feature144({\n  badge,\n  heading,\n  description,\n  services = [],\n  buttons = [],\n  className,\n}: Feature144Props) {\n  if (services.length === 0) return null;\n\n  const count = services.length;\n  const gridCols =\n    count === 1\n      ? \"\"\n      : count === 2\n      ? \"sm:grid-cols-2\"\n      : count % 3 === 0\n      ? \"grid-cols-1 md:grid-cols-3\"\n      : count % 4 === 0\n      ? \"sm:grid-cols-2 lg:grid-cols-4\"\n      : \"sm:grid-cols-2 lg:grid-cols-3\";\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {(badge || heading || description) && (\n          <div className=\"mx-auto mb-12 max-w-3xl text-center\">\n            {badge && (\n              <div className=\"mb-4 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"}>\n                  {badge.label}\n                </Badge>\n              </div>\n            )}\n            {heading && (\n              <h2 className=\"text-3xl font-semibold md:text-5xl\">{heading}</h2>\n            )}\n            {description && (\n              <p className=\"mt-4 text-base md:text-lg text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n\n        <div className={cn(\"grid gap-4\", gridCols)}>\n          {services.map((service, index) => (\n            <Link\n              key={index}\n              href={service.href ?? \"#\"}\n              className=\"group flex items-center justify-between rounded-xl border bg-card p-6 transition-colors hover:bg-muted/50\"\n            >\n              <div>\n                <h3 className=\"font-semibold group-hover:text-primary\">\n                  {service.title}\n                </h3>\n                {service.description && (\n                  <p className=\"mt-1 text-sm text-muted-foreground\">\n                    {service.description}\n                  </p>\n                )}\n              </div>\n              <ArrowRight className=\"size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-1 group-hover:text-primary\" />\n            </Link>\n          ))}\n        </div>\n\n        {buttons.length > 0 && (\n          <div className=\"mt-12 flex flex-wrap justify-center gap-3\">\n            {buttons.map((button, index) => (\n              <Button key={index} variant={button.variant ?? \"default\"} asChild>\n                <Link href={button.href ?? \"#\"}>{button.label}</Link>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature144.tsx"
    }
  ],
  "type": "registry:block"
}