<!-- source-hash: 86b90e3350490d5e683b6b4b06497f43 -->
A Next.js client component that renders a responsive marketing section showcasing OpenFrame's open-source value propositions as a 4-column feature card grid.

## Key Components

- **`FeatureCard`** — Reusable card component accepting an icon, title, and description; renders with hover transition styling using ODS design tokens
- **`OpenSourceFeatures`** — Main section component that composes the feature grid with a headline and four predefined feature entries
- **`features` array** — Static data defining the four pillars: *Built on FOSS*, *Own Your Stack*, *Modular by Design*, and *Community-Powered*

## Props

### `FeatureCardProps`

| Prop | Type | Description |
|------|------|-------------|
| `icon` | `React.ReactNode` | Lucide icon element rendered in the card header |
| `title` | `string` | Feature headline text |
| `description` | `string` | Supporting body copy |

## Usage Example

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

// Drop into any page layout — no props required
export default function LandingPage() {
  return (
    <main>
      <OpenSourceFeatures />
    </main>
  );
}
```

To add a custom feature card standalone:

```typescript
import { FeatureCard } from '@/components/open-source-features';
import { Shield } from 'lucide-react';

<FeatureCard
  icon={<Shield className="w-6 h-6" />}
  title="Secure by Default"
  description="Auditable code with no vendor lock-in."
/>
```

> **Note:** `FeatureCard` is not a named export by default — export it explicitly if reuse outside this component is needed. The section uses ODS design tokens (`ods-card`, `ods-border`, `ods-accent`) from the OpenFrame design system.