{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature178",
  "title": "Sticky Benefits Timeline",
  "description": "Two-column benefits section with sticky left content and scrollable timeline",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/feature178/feature178.tsx",
      "content": "\"use client\";\n\nimport { BarChart3, Globe, type LucideIcon, RefreshCw, Shield, Sparkles, Zap } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TagItem {\n  label: string;\n}\n\ninterface FeatureItem {\n  icon: LucideIcon;\n  title: string;\n  description: string;\n}\n\ninterface Feature178Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  tags?: TagItem[];\n  features?: FeatureItem[];\n  className?: string;\n}\n\nexport const feature178Demo: Feature178Props = {\n  badge: { label: \"Why Choose Us\", variant: \"default\" },\n  heading: \"Ship Faster, Scale Smarter, <strong>Grow Confidently</strong>\",\n  description:\n    \"Everything your team needs to go from idea to production in record time — without sacrificing quality or breaking the budget.\",\n  tags: [\n    { label: \"No-Code Friendly\" },\n    { label: \"SOC 2 Certified\" },\n    { label: \"99.99% Uptime\" },\n    { label: \"Real-Time Sync\" },\n    { label: \"White Label Ready\" },\n  ],\n  features: [\n    {\n      icon: Zap,\n      title: \"Instant Performance Boost\",\n      description:\n        \"See measurable improvements from day one. Our optimized infrastructure delivers sub-100ms response times across every touchpoint.\",\n    },\n    {\n      icon: Shield,\n      title: \"Enterprise-Grade Security\",\n      description:\n        \"SOC 2 Type II certified with end-to-end encryption. Your data stays protected with automatic backups and role-based access controls.\",\n    },\n    {\n      icon: BarChart3,\n      title: \"Actionable Analytics\",\n      description:\n        \"Go beyond vanity metrics. Track real business impact with custom dashboards, cohort analysis, and automated reporting delivered weekly.\",\n    },\n    {\n      icon: RefreshCw,\n      title: \"Seamless Integrations\",\n      description:\n        \"Connect with 200+ tools your team already uses. Two-click setup with Slack, HubSpot, Salesforce, and every major platform.\",\n    },\n    {\n      icon: Globe,\n      title: \"Global Edge Network\",\n      description:\n        \"Serve users in 190+ countries with localized content delivery. Auto-scaling infrastructure handles traffic spikes without breaking a sweat.\",\n    },\n    {\n      icon: Sparkles,\n      title: \"AI-Powered Automation\",\n      description:\n        \"Let intelligent workflows handle the repetitive work. From lead scoring to content optimization, AI keeps your pipeline moving 24/7.\",\n    },\n  ],\n};\n\nexport function Feature178({\n  badge,\n  heading,\n  description,\n  tags = [],\n  features = [],\n  className,\n}: Feature178Props) {\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        <div className=\"flex flex-col gap-12 md:flex-row md:gap-0\">\n          {/* Left Column - Sticky */}\n          <div className=\"md:w-[45%] md:pr-12\">\n            <div className=\"md:sticky md:top-[100px]\">\n              {badge && (\n                <div className=\"mb-6\">\n                  <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n                </div>\n              )}\n              {heading && (\n                <h2\n                  className=\"text-2xl font-bold leading-tight md:text-4xl [&>strong]:text-primary [&>strong]:font-bold\"\n                  dangerouslySetInnerHTML={{ __html: heading }}\n                />\n              )}\n              {description && (\n                <p className=\"mt-6 max-w-md text-base text-muted-foreground md:text-lg\">\n                  {description}\n                </p>\n              )}\n              {tags.length > 0 && (\n                <div className=\"mt-8 flex flex-wrap gap-2\">\n                  {tags.map((tag, index) => (\n                    <span\n                      key={index}\n                      className=\"rounded-full bg-muted px-4 py-1.5 text-sm font-medium text-muted-foreground\"\n                    >\n                      {tag.label}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Vertical Divider */}\n          <div className=\"hidden md:block w-px bg-border\" />\n\n          {/* Right Column */}\n          <div className=\"md:w-[55%] md:pl-12\">\n            <div className=\"space-y-8 md:space-y-12\">\n              {features.map((feature, index) => {\n                const Icon = feature.icon;\n                return (\n                  <div key={index} className=\"flex gap-5\">\n                    <div className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-muted\">\n                      <Icon className=\"size-5 text-foreground\" />\n                    </div>\n                    <div className=\"pt-1\">\n                      <h3 className=\"text-base font-semibold md:text-lg\">{feature.title}</h3>\n                      <p className=\"mt-2 text-sm text-muted-foreground md:text-base\">\n                        {feature.description}\n                      </p>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature178.tsx"
    }
  ],
  "type": "registry:block"
}