Features, tabs

npx shadcn add @klarhimmel/features-tabs

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FeaturesTabs props={{
          "eyebrow": "Workflow",
          "title": "From first brief to final sign-off",
          "description": "Pick the stage you are in. Each one has the tools that matter and none of the ones that do not.",
          "tabs": [
            {
              "label": "Plan",
              "title": "Turn a brief into a plan in minutes",
              "description": "Start from a template or a blank board. Break the work into stages, assign owners and set dates that everyone can see.",
              "points": [
                "Templates for common project types",
                "Owners and dates on every task",
                "A timeline that updates itself"
              ],
              "media": {
                "src": "",
                "alt": "A project board with three stages"
              }
            },
            {
              "label": "Build",
              "title": "Keep the work and the conversation together",
              "description": "Files, comments and decisions sit on the task, so context never gets lost in a thread.",
              "points": [
                "Comments on files and tasks",
                "Version history that stays readable",
                "Mentions that notify only who they should"
              ],
              "media": {
                "src": "",
                "alt": "A task with comments and an attached file"
              }
            },
            {
              "label": "Review",
              "title": "Approve with one click, not one email chain",
              "description": "Send a review link to a client or a colleague. They comment on the work itself and you see every change request in one place.",
              "points": [
                "Review links without accounts",
                "Change requests as a checklist",
                "A clear record of who approved what"
              ],
              "media": {
                "src": "",
                "alt": "A review screen with an approve button"
              }
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}