feat(web): add "How it works" section to marketing landing page

[kbreiwick]

Summary

Adds a new "How it works" section to the marketing landing page
(apps/web) to help visitors quickly understand the OpenStatus workflow.

What changed

• Created apps/web/src/components/marketing/how-it-works.tsx
• Imported and placed the section in apps/web/src/app/(marketing)/page.tsx
  between the Hero section and the Features section

Type of change

• Bug fix
• New feature (non-breaking)
• Documentation update
• Refactoring

Details

The section includes 3 steps:

1. Add your monitors
2. Get notified instantly
3. Share your status page

Built using the existing stack: Next.js + Tailwind CSS + shadcn/ui + lucide-react.
Fully responsive and dark/light mode compatible.

Screenshots

Checklist

• Follows existing coding conventions and style guide
• Uses existing shadcn/ui components
• Dark/light mode compatible
• Mobile responsive
• No new dependencies added

[vercel]

@vercel[bot] is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
openstatus-dashboard	Skipped		Mar 7, 2026 6:02pm
openstatus-status-page	Skipped		Mar 7, 2026 6:02pm

[mxkaske]

Hey @kbreiwick

Our marketing content intentionally written in our *.mdx to be able to keep it easy to change, avoid over engineering by thinking about new design decisions, and avoid too many custom components.

I'd suggest: instead of creating a new component where we have to rethink a bit about CI, something like in home.mdx:

<Grid cols={3}>
  <div>
    1. ...
  </div>
  <div>
    2. ...
  </div>
  <div>
    3. ...
  </div>
</Grid>