# How it works

> Two column grid of four steps without a section heading, each showing a step number, a title, a short description and a bordered image below the text.

A shadcn/ui block from the [@shadcnuikit](https://shadcnuikit.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnuikit/how-it-works9).

- Page, with a live preview: https://shadcn.exchange/r/shadcnuikit/how-it-works9
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnuikit/how-it-works9-light-37c65a240cbc2538.png
- Registry item: https://shadcnuikit.com/r/how-it-works9.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnuikit.com/r/how-it-works9.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `contents/blocks/marketing/how-it-works/9/index.tsx`

```tsx
import Image from "next/image";

const steps = [
  {
    number: "01",
    title: "We listen to your story",
    description:
      "You tell us how you were affected by the outage and how you were impacted financially. We record every detail carefully.",
    image:
      "https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750",
  },
  {
    number: "02",
    title: "We prepare your complaint",
    description:
      "We build a strong complaint seeking compensation, backed by our experience to give your case the best possible outcome.",
    image:
      "https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750",
  },
  {
    number: "03",
    title: "We manage your complaint",
    description:
      "We submit your complaint and create a tracking page, keeping you updated at every step and standing by you if needed.",
    image:
      "https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750",
  },
  {
    number: "04",
    title: "You get a resolution",
    description:
      "The company responds with a formal outcome. We stay with you to ensure the resolution fully meets your expectations.",
    image:
      "https://images.unsplash.com/photo-1633409361618-c73427e4e206?q=80&w=750",
  },
];

export default function HowItWorksSection() {
  return (
    <section className="bg-background w-full">
      <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 sm:gap-x-12 sm:gap-y-14">
          {steps.map((step) => (
            <div key={step.number} className="flex flex-col">
              <p className="text-muted-foreground mb-2 text-sm font-medium">
                {step.number}
              </p>
              <h3 className="text-foreground mb-2 text-xl font-bold">
                {step.title}
              </h3>
              <p className="text-muted-foreground mb-6 text-sm leading-relaxed">
                {step.description}
              </p>
              <div className="border-border overflow-hidden rounded-xl border">
                <Image
                  src={step.image}
                  alt={step.title}
                  width={750}
                  height={563}
                  className="aspect-4/3 w-full object-cover"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```