{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section",
  "title": "Hero Section",
  "description": "Hero Section from the Get IT Done design system.",
  "dependencies": [],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/hero-section.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Figma: Hero section 10526:297196 (Breakpoint=Desktop|Mobile; props Eyebrow, Secondary action, Product shot, Headline, Supporting text).\n// Desktop and Mobile are the responsive states of one component, not a prop.\nexport interface HeroSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n  headline: React.ReactNode;\n  supportingText?: React.ReactNode;\n  // Pill above the headline (product name, \"Part of the suite\").\n  eyebrow?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  // Framed product screenshot or placeholder below the actions.\n  productShot?: React.ReactNode;\n  headlineAs?: 'h1' | 'h2';\n  // `inverse` renders the hero on the inverse surface. Default is unchanged.\n  tone?: 'default' | 'inverse';\n}\n\nconst HeroSection = React.forwardRef<HTMLElement, HeroSectionProps>(\n  ({ className, headline, supportingText, eyebrow, primaryAction, secondaryAction, productShot, headlineAs: Headline = 'h1', tone = 'default', ...props }, ref) => (\n    <section ref={ref} className={cn(\n        'flex w-full flex-col items-center gap-10 px-6 py-12 text-center md:px-8 md:py-16',\n        tone === 'inverse' ? 'bg-background-inverse text-text-inverse' : 'bg-background',\n        className,\n      )} {...props}>\n      <div className=\"flex w-full max-w-2xl flex-col items-center gap-6\">\n        {eyebrow ? (\n          <div\n            className={cn(\n              'typography-ui inline-flex items-center gap-2 rounded-full border border-solid px-3 py-1',\n              tone === 'inverse' ? 'border-border-inverse/30 bg-transparent text-text-inverse' : 'border-border bg-card text-text-subtle',\n            )}\n          >\n            {eyebrow}\n          </div>\n        ) : null}\n        <div className=\"flex flex-col items-center gap-4\">\n          <Headline className={cn('typography-display-sm md:typography-display', tone === 'inverse' ? 'text-text-inverse' : 'text-text-default')}>{headline}</Headline>\n          {supportingText ? <p className={cn('typography-lead-lg max-w-hero-copy', tone === 'inverse' ? 'text-text-inverse-subtle' : 'text-text-subtle')}>{supportingText}</p> : null}\n        </div>\n        {primaryAction || secondaryAction ? (\n          <div className=\"flex flex-wrap items-center justify-center gap-3\">\n            {primaryAction}\n            {secondaryAction}\n          </div>\n        ) : null}\n      </div>\n      {productShot ? (\n        <div className=\"w-full max-w-page overflow-hidden rounded-surface border border-solid border-border bg-muted shadow-elevation-raised\">{productShot}</div>\n      ) : null}\n    </section>\n  ),\n);\nHeroSection.displayName = 'HeroSection';\n\nexport { HeroSection };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}