{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"features-04","type":"registry:component","title":"Features 04","description":"A step-by-step process features section with numbered steps, benefit lists, and call-to-action buttons. Features 3 numbered process steps with icons, descriptions, benefit lists with checkmarks, connection lines between steps, and responsive design with mobile-friendly layout. Perfect for onboarding flows, implementation processes, service methodology, and showcasing step-by-step workflows with clear progression indicators.","dependencies":["lucide-react"],"registryDependencies":["badge","button","card"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/features/features-04.tsx","content":"\"use client\";\n\nimport {\n  ArrowRight,\n  CheckCircle2,\n  Lightbulb,\n  type LucideIcon,\n  Rocket,\n  Zap,\n} from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\n\nexport interface StepItem {\n  number: string;\n  icon: LucideIcon;\n  title: string;\n  description: string;\n  benefits: string[];\n  color: string;\n  iconColor: string;\n}\n\nexport interface Features04Props {\n  className?: string;\n}\n\nconst steps: StepItem[] = [\n  {\n    number: \"01\",\n    icon: Lightbulb,\n    title: \"Discover\",\n    description:\n      \"Identify your needs and explore our platform's capabilities through a personalized demo.\",\n    benefits: [\n      \"Personalized platform tour\",\n      \"Needs assessment consultation\",\n      \"Custom solution recommendations\",\n    ],\n    color: \"bg-blue-500/10 text-blue-500 border-blue-500/20\",\n    iconColor: \"text-blue-500\",\n  },\n  {\n    number: \"02\",\n    icon: Rocket,\n    title: \"Implement\",\n    description:\n      \"Quick setup with our guided onboarding process and dedicated implementation team.\",\n    benefits: [\n      \"30-minute setup process\",\n      \"Data migration assistance\",\n      \"Configuration templates\",\n    ],\n    color: \"bg-purple-500/10 text-purple-500 border-purple-500/20\",\n    iconColor: \"text-purple-500\",\n  },\n  {\n    number: \"03\",\n    icon: Zap,\n    title: \"Optimize\",\n    description:\n      \"Maximize results with advanced features, integrations, and continuous optimization.\",\n    benefits: [\n      \"Performance analytics\",\n      \"Workflow automation\",\n      \"Regular strategy reviews\",\n    ],\n    color: \"bg-green-500/10 text-green-500 border-green-500/20\",\n    iconColor: \"text-green-500\",\n  },\n];\n\nconst header = {\n  badgeText: \"Simple 3-Step Process\",\n  title: \"Your journey to success starts here\",\n  subtitle:\n    \"We've simplified the implementation process to get you from sign-up to success in record time. Our proven methodology ensures a smooth transition and rapid results.\",\n};\n\nconst cta = {\n  primaryButtonText: \"Start Your Journey\",\n  secondaryButtonText: \"Schedule a Demo\",\n  footerText: \"Join over 10,000 companies already growing with our platform\",\n};\n\nconst showConnectionLine = true;\n\nexport function Features04({ className }: Features04Props) {\n  const handlePrimaryAction = () => {\n    console.log(\"Primary action clicked\");\n  };\n\n  const handleSecondaryAction = () => {\n    console.log(\"Secondary action clicked\");\n  };\n\n  if (steps.length === 0) {\n    return (\n      <section\n        className={`py-24 bg-gradient-to-b from-background to-muted/20 ${\n          className || \"\"\n        }`}\n      >\n        <div className=\"container px-4 mx-auto\">\n          <div className=\"text-center\">\n            <div className=\"p-8\">\n              <Lightbulb className=\"h-12 w-12 text-muted-foreground mx-auto mb-4\" />\n              <p className=\"text-muted-foreground\">No steps to display</p>\n            </div>\n          </div>\n        </div>\n      </section>\n    );\n  }\n\n  return (\n    <section\n      className={cn(\n        \"py-24 bg-gradient-to-b from-background to-muted/20\",\n        className,\n      )}\n    >\n      <div className=\"container px-4 mx-auto\">\n        <div className=\"max-w-3xl mx-auto text-center mb-16\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            {header.badgeText}\n          </Badge>\n          <h2 className=\"text-3xl md:text-4xl font-bold mb-6\">\n            {header.title}\n          </h2>\n          <p className=\"text-lg text-muted-foreground\">{header.subtitle}</p>\n        </div>\n\n        <div className=\"relative\">\n          {showConnectionLine && (\n            <div className=\"absolute left-1/2 top-0 bottom-0 w-0.5 bg-border -translate-x-1/2 hidden md:block\" />\n          )}\n\n          <div className=\"space-y-20 md:space-y-0 md:grid md:grid-cols-3 md:gap-8\">\n            {steps.map((step, index) => (\n              <div key={index} className=\"relative\">\n                <div className=\"flex justify-center mb-6\">\n                  <div\n                    className={`flex items-center justify-center w-16 h-16 rounded-full border-2 ${step.color} font-bold text-xl relative z-10 bg-background`}\n                  >\n                    {step.number}\n                  </div>\n                </div>\n\n                <Card className=\"border-border hover:shadow-lg transition-all duration-300 h-full\">\n                  <CardContent className=\"p-6 md:p-8 text-center\">\n                    <div\n                      className={`inline-flex p-3 rounded-full ${step.color} mb-6`}\n                    >\n                      <step.icon className={`h-6 w-6 ${step.iconColor}`} />\n                    </div>\n\n                    <h3 className=\"text-xl font-bold mb-3\">{step.title}</h3>\n                    <p className=\"text-muted-foreground mb-6\">\n                      {step.description}\n                    </p>\n\n                    <ul className=\"space-y-3 text-left mb-6\">\n                      {step.benefits.map((benefit, i) => (\n                        <li key={i} className=\"flex items-start\">\n                          <CheckCircle2 className=\"h-5 w-5 text-primary mr-2 flex-shrink-0 mt-0.5\" />\n                          <span>{benefit}</span>\n                        </li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n\n                {index < steps.length - 1 && (\n                  <div className=\"hidden md:flex absolute top-1/2 -right-4 transform -translate-y-1/2 z-10\">\n                    <ArrowRight className=\"h-8 w-8 text-muted-foreground\" />\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"mt-20 text-center\">\n          <div className=\"inline-flex flex-col sm:flex-row gap-4 mb-6\">\n            <Button size=\"lg\" className=\"group\" onClick={handlePrimaryAction}>\n              {cta.primaryButtonText}\n              <ArrowRight className=\"ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform\" />\n            </Button>\n            <Button variant=\"outline\" size=\"lg\" onClick={handleSecondaryAction}>\n              {cta.secondaryButtonText}\n            </Button>\n          </div>\n          <p className=\"text-sm text-muted-foreground\">{cta.footerText}</p>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}