<!-- source-hash: 3a6d55ae1b91e13e9941c8273186b79b -->
A client-side React section component that renders a responsive grid of feature cards highlighting OpenFrame's open-source value proposition.

## Key Components

### `FeatureCard` (internal)
A styled card component displaying an icon, title, and description. Accepts `FeatureCardProps`:

| Prop | Type | Description |
|------|------|-------------|
| `icon` | `React.ReactNode` | Lucide icon element |
| `title` | `string` | Feature heading |
| `description` | `string` | Feature body text |

### `OpenSourceFeatures` (default export)
The main section component. Renders four hardcoded feature cards in a responsive 1→2→4 column grid:

- **Built on FOSS** — `Terminal` icon
- **Own Your Stack** — `DollarSign` icon
- **Modular by Design** — `Network` icon
- **Community-Powered** — `Users` icon

## Usage Example

```typescript
import OpenSourceFeatures from './open-source-features';

export default function LandingPage() {
  return (
    <main>
      <OpenSourceFeatures />
    </main>
  );
}
```

## Notes

- Marked `"use client"` — requires a Next.js App Router client boundary.
- Icons sourced from `lucide-react` (`Terminal`, `DollarSign`, `Network`, `Users`).
- Section heading style imported from `./layout/page-heading` via `SECTION_HEADING_CLASS`.
- Hover states and transitions handled via Tailwind utility classes (`hover:bg-ods-bg-hover`, `transition-colors`).
- Feature list is statically defined inside the component; to make it data-driven, extract the `features` array to a separate constants file.

**Source:** [`open-source-features.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/open-source-features.tsx)