{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature195",
  "title": "Four Cards With Centered Icon",
  "description": "Four equal feature cards on a clean background, each with a large circular icon badge above a bold h3 title. Ideal for outlining the steps or pillars of a service offering.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/feature195/feature195.tsx",
      "content": "\"use client\";\n\nimport { ClipboardCheck, FileText, Gem, type LucideIcon, PointerIcon } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FeatureItem {\n  icon: LucideIcon;\n  title: string;\n}\n\ninterface Feature195Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  features?: FeatureItem[];\n  className?: string;\n}\n\nexport const feature195Demo: Feature195Props = {\n  heading: \"Let us Guide you Through Your Digital Transformation\",\n  features: [\n    {\n      icon: FileText,\n      title: \"Understanding Your Unique Requirements\",\n    },\n    {\n      icon: Gem,\n      title: \"Digital Strategy Powered By Nebim's Expertise\",\n    },\n    {\n      icon: ClipboardCheck,\n      title: \"Fast Implementation\",\n    },\n    {\n      icon: PointerIcon,\n      title: \"Effortless Operations\",\n    },\n  ],\n};\n\nexport function Feature195({\n  badge,\n  heading,\n  description,\n  features = [],\n  className,\n}: Feature195Props) {\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 md:mb-16\">\n            {badge && (\n              <div className=\"mb-4 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n              </div>\n            )}\n            {heading && (\n              <h2 className=\"text-3xl font-bold tracking-tight text-balance md:text-5xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"mt-4 text-base text-balance text-muted-foreground md:text-lg\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n\n        <div className=\"grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-4\">\n          {features.map((feature, index) => {\n            const Icon = feature.icon;\n            return (\n              <div\n                key={index}\n                className=\"flex flex-col items-center gap-10 rounded-md border bg-card p-8 text-center md:p-10\"\n              >\n                <div className=\"flex size-20 items-center justify-center rounded-full bg-muted\">\n                  <Icon className=\"size-9 text-foreground\" strokeWidth={1.75} />\n                </div>\n                <h3 className=\"text-lg font-semibold text-balance md:text-xl\">{feature.title}</h3>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature195.tsx"
    }
  ],
  "type": "registry:block"
}