Feature Card Grid with Hover Effects

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature162.tsx instead.

Usage

The file also exports feature162Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature162, feature162Demo } from "@/components/blocks/feature/feature162";

export default function Page() {
  return <Feature162 {...feature162Demo} />;
}

Props

Types

interface Feature162Card {
  icon: LucideIcon;
  title: string;
  description: string;
}

Behavior notes

• Fully static Server Component, no client-side state.
• Hover effect is pure CSS: the icon container scales up (group-hover:scale-110) and swaps from a tinted to a filled background via a transition, no JavaScript involved.
• Copy and icon choices lean into a wellness/health-program framing per the brief, but the block itself is generic enough to relabel for any six-benefit showcase.