{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature180",
  "title": "Sticky Image Scroller",
  "description": "Two-column layout with sticky image and scrollable feature cards",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/feature180/feature180.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 FeatureItem {\n  icon: LucideIcon;\n  title: string;\n  description: string;\n}\n\ninterface Feature180Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  image?: {\n    src: string;\n    alt: string;\n  };\n  features?: FeatureItem[];\n  className?: string;\n}\n\nexport const feature180Demo: Feature180Props = {\n  badge: { label: \"How It Works\", variant: \"default\" },\n  heading: \"From Idea to Launch in <strong>Record Time</strong>\",\n  description:\n    \"Our end-to-end platform handles the heavy lifting so your team can focus on building what matters most.\",\n  image: {\n    src: \"https://images.unsplash.com/photo-1697133081695-90070de25bc3?w=800&h=900&fit=crop\",\n    alt: \"Platform dashboard\",\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 Feature180({\n  badge,\n  heading,\n  description,\n  image,\n  features = [],\n  className,\n}: Feature180Props) {\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              {image && (\n                <div className=\"relative mt-10 aspect-[4/3] overflow-hidden rounded-md\">\n                  <img\n                    className=\"absolute inset-0 size-full object-cover\"\n                    src={image.src}\n                    alt={image.alt}\n                  />\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Vertical Divider */}\n          <div className=\"hidden w-px bg-border md:block\" />\n\n          {/* Right Column - Cards */}\n          <div className=\"md:w-[55%] md:pl-12\">\n            <div className=\"space-y-4 md:space-y-6\">\n              {features.map((feature, index) => {\n                const Icon = feature.icon;\n                return (\n                  <div key={index} className=\"group/feature180 rounded-md border bg-card p-6\">\n                    <div className=\"flex gap-4\">\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-0.5\">\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                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature180.tsx"
    }
  ],
  "type": "registry:block"
}