A client-side React component providing styled benefit/feature cards with multiple visual variants and a responsive grid layout container. ## Key Components ### `BenefitCard` Renders a single benefit card with an optional icon, title, and description. Supports three visual variants: | Variant | Description | |---|---| | `default` | Light background with standard body typography | | `dark` | Transparent background with monospace heading and shadow | | `auth-figma` | Transparent with larger padding and heading-scale typography | **Props:** - `icon` — optional React node rendered before the text content - `title` — required card heading - `description` — required supporting text - `variant` — visual style (`'default'` | `'dark'` | `'auth-figma'`) - `className` — additional Tailwind classes ### `BenefitCardGrid` A responsive grid container that wraps multiple `BenefitCard` instances and automatically applies divider borders between items. **Props:** - `children` — one or more `BenefitCard` nodes - `columns` — grid column count: `2` | `3` | `4` (default: `2`) - `className` — additional Tailwind classes ## Usage Example ```typescript import { BenefitCard, BenefitCardGrid } from './benefit-card' import { ShieldIcon } from 'lucide-react' export function Features() { return ( } title="Secure by Default" description="End-to-end encryption across all endpoints." variant="default" /> } title="AI-Powered" description="Mingo AI resolves tickets before they escalate." variant="dark" /> ) } ```