<!-- source-hash: 8bdfd0b0bb8aed0edd883e829a021abf -->
A client-side React section component that renders a numbered list of value propositions explaining the benefits of the OpenFrame/Flamingo platform.

## Key Components

### `WhyItMattersItem` (internal)
A list item component rendering a single value proposition with:
- **Props:** `number` (display numeral), `title`, `description`, `isLast` (controls bottom border visibility)
- Responsive layout: stacked on mobile (`flex-col`), side-by-side on desktop (`md:flex-row`)
- Hover highlight via `hover:bg-ods-bg-hover`

### `WhyItMatters` (default export)
The parent section component containing four hardcoded value propositions:

| # | Title | Description |
|---|-------|-------------|
| 1 | Cut Costs | Eliminate vendor fees with proven open-source alternatives |
| 2 | Stay in Control | Full visibility and data ownership |
| 3 | Build What You Need | Customize without vendor limitations |
| 4 | Scale Freely | Designed for multi-tenant MSP environments |

## Usage Example

```vue
<!-- Drop into any page layout as a standalone section -->
```

```typescript
import WhyItMatters from '@/components/why-it-matters';

export default function LandingPage() {
  return (
    <main>
      {/* other sections */}
      <WhyItMatters />
    </main>
  );
}
```

## Notes

- Uses `"use client"` directive — requires a Next.js App Router client boundary
- Styling relies on ODS design tokens (`ods-bg`, `ods-card`, `ods-border`, `ods-accent`, `ods-text-primary`) — ensure the ODS theme is configured in Tailwind
- `SECTION_HEADING_CLASS` is imported from [`./layout/page-heading`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/layout/page-heading.ts) for consistent section heading typography
- Content is currently static; extract `items` to props or a CMS if copy needs to vary per page