{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works9",
  "title": "How it works",
  "description": "2x2 grid layout with four steps each showing a number, heading, description, and an inline UI mockup card below.",
  "files": [
    {
      "path": "contents/blocks/marketing/how-it-works/9/index.tsx",
      "content": "const steps = [\n  {\n    number: \"01\",\n    title: \"We listen to your story\",\n    description:\n      \"You tell us how you were affected by the outage and how you were impacted financially. We record every detail carefully.\",\n    image: \"https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750\",\n  },\n  {\n    number: \"02\",\n    title: \"We prepare your complaint\",\n    description:\n      \"We build a strong complaint seeking compensation, backed by our experience to give your case the best possible outcome.\",\n    image: \"https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750\",\n  },\n  {\n    number: \"03\",\n    title: \"We manage your complaint\",\n    description:\n      \"We submit your complaint and create a tracking page, keeping you updated at every step and standing by you if needed.\",\n    image: \"https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750\",\n  },\n  {\n    number: \"04\",\n    title: \"You get a resolution\",\n    description:\n      \"The company responds with a formal outcome. We stay with you to ensure the resolution fully meets your expectations.\",\n    image: \"https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750\",\n  },\n];\n\nexport default function HowItWorksSection() {\n  return (\n    <section className=\"w-full bg-background\">\n      <div className=\"mx-auto max-w-5xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8\">\n        <div className=\"grid grid-cols-1 gap-10 sm:grid-cols-2 sm:gap-x-12 sm:gap-y-14\">\n          {steps.map((step) => (\n            <div key={step.number} className=\"flex flex-col\">\n              <p className=\"mb-2 text-sm font-medium text-muted-foreground\">\n                {step.number}\n              </p>\n              <h3 className=\"mb-2 text-xl font-bold text-foreground\">\n                {step.title}\n              </h3>\n              <p className=\"mb-6 text-sm leading-relaxed text-muted-foreground\">\n                {step.description}\n              </p>\n              <div className=\"overflow-hidden rounded-xl border border-border\">\n                <img\n                  src={step.image}\n                  alt={step.title}\n                  className=\"aspect-4/3 w-full object-cover\"\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/how-it-works9.tsx"
    }
  ],
  "type": "registry:block"
}