Features, grid

npx shadcn add @klarhimmel/features-grid

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import FeaturesGrid from '@/components/klarhimmel/blocks/features-grid';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FeaturesGrid props={{
          "eyebrow": "Features",
          "title": "Everything a small team needs, nothing it does not",
          "description": "A focused set of tools that stay out of the way and keep everyone looking at the same page.",
          "columns": "3",
          "items": [
            {
              "icon": "layers",
              "title": "Shared boards",
              "description": "See every project at a glance and move work forward without a meeting."
            },
            {
              "icon": "zap",
              "title": "Fast by default",
              "description": "Pages open instantly and search answers as you type, even on large workspaces."
            },
            {
              "icon": "shield",
              "title": "Private by design",
              "description": "Your data stays in your workspace. Roles and audit logs are built in."
            },
            {
              "icon": "users",
              "title": "Built for review",
              "description": "Comment on the work itself, request changes and approve with one click."
            },
            {
              "icon": "chart",
              "title": "Clear reporting",
              "description": "Weekly summaries show what shipped, what slipped and what is next."
            },
            {
              "icon": "settings",
              "title": "Fits your process",
              "description": "Rename stages, add fields and automate the handoffs you repeat every week."
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}