{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-feature-sections-steps","type":"registry:block","title":"Steps","files":[{"path":"components/blocks/marketing/feature-sections/steps.tsx","content":"import { useState } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst features = [\n  {\n    title: 'Project Setup',\n    description:\n      'Get started in minutes with our streamlined setup process. No complex configuration required.',\n    image: 'https://placehold.co/1024x768/jpeg?text=Setup',\n    benefits: [\n      'One-click installation',\n      'Pre-configured templates',\n      'Development environment ready',\n      'Instant deployment setup',\n    ],\n  },\n  {\n    title: 'Development',\n    description:\n      'Write code efficiently with modern tools and frameworks that boost your productivity.',\n    image: 'https://placehold.co/1024x768/jpeg?text=Development',\n    benefits: [\n      'Hot reload support',\n      'TypeScript integration',\n      'Component library',\n      'Developer tools',\n    ],\n  },\n  {\n    title: 'Testing',\n    description:\n      'Ensure quality with comprehensive testing tools and automated workflows.',\n    image: 'https://placehold.co/1024x768/jpeg?text=Testing',\n    benefits: [\n      'Unit testing framework',\n      'Integration tests',\n      'E2E testing tools',\n      'Performance testing',\n    ],\n  },\n  {\n    title: 'Deployment',\n    description:\n      'Deploy your applications with confidence using our robust deployment pipeline.',\n    image: 'https://placehold.co/1024x768/jpeg?text=Deployment',\n    benefits: [\n      'One-click deployment',\n      'Rollback support',\n      'Environment management',\n      'Deployment monitoring',\n    ],\n  },\n];\n\nexport default function FeatureSectionSteps() {\n  const [activeFeature, setActiveFeature] = useState(0);\n\n  return (\n    <section className=\"container mx-auto space-y-8 px-4 py-24 md:px-6 2xl:max-w-[1400px]\">\n      <div className=\"space-y-4 text-center\">\n        <h2 className=\"text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl\">\n          From idea to production\n        </h2>\n        <p className=\"text-muted-foreground mx-auto max-w-[700px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed\">\n          Follow our proven process to build and deploy your applications with\n          confidence.\n        </p>\n      </div>\n\n      <div className=\"grid items-start gap-8 lg:grid-cols-[1fr,2fr] lg:gap-12\">\n        <div className=\"space-y-4\">\n          {features.map((feature, index) => (\n            <button\n              key={feature.title}\n              onClick={() => setActiveFeature(index)}\n              className={cn(\n                'w-full rounded-lg px-4 py-4 text-left transition-colors',\n                activeFeature === index\n                  ? 'bg-primary/10 text-primary'\n                  : 'hover:bg-muted'\n              )}\n            >\n              <div className=\"flex items-center gap-4\">\n                <div\n                  className={cn(\n                    'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',\n                    activeFeature === index\n                      ? 'bg-primary text-primary-foreground'\n                      : 'bg-muted-foreground/20 text-muted-foreground'\n                  )}\n                >\n                  {index + 1}\n                </div>\n                <div className=\"flex-1\">\n                  <h3 className=\"font-semibold\">{feature.title}</h3>\n                  <p\n                    className={cn(\n                      'text-sm',\n                      activeFeature === index\n                        ? 'text-primary/80'\n                        : 'text-muted-foreground'\n                    )}\n                  >\n                    {feature.description}\n                  </p>\n                </div>\n              </div>\n            </button>\n          ))}\n        </div>\n\n        <div className=\"bg-muted relative aspect-video overflow-hidden rounded-xl\">\n          <img\n            src={features[activeFeature]!.image}\n            alt={features[activeFeature]!.title}\n            className=\"object-cover object-center\"\n          />\n          <div className=\"from-background/80 to-background/0 absolute inset-0 flex items-end bg-gradient-to-t p-6\">\n            <div className=\"space-y-4\">\n              <h4 className=\"text-lg font-semibold\">Key Benefits</h4>\n              <ul className=\"grid grid-cols-2 gap-x-4 gap-y-2\">\n                {features[activeFeature]!.benefits.map((benefit) => (\n                  <li key={benefit} className=\"flex items-center gap-2 text-sm\">\n                    <div className=\"bg-primary h-1.5 w-1.5 rounded-full\" />\n                    {benefit}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/feature-sections/steps.tsx"}],"description":"Numbered steps that lay out how your product works from start to finish. Drop it on a homepage to turn a process into an easy three or four part story."}