Hero Section

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "hero",
  "display_name": "Hero",
  "is_root": true,
  "is_nestable": true,
  "schema": {
    "eyebrow": {
      "type": "text",
      "pos": 0,
      "display_name": "Eyebrow"
    },
    "headline": {
      "type": "text",
      "pos": 1,
      "required": true,
      "display_name": "Headline"
    },
    "subline": {
      "type": "textarea",
      "pos": 2,
      "display_name": "Subline"
    },
    "primary_cta": {
      "type": "bloks",
      "pos": 3,
      "restrict_components": true,
      "component_whitelist": [
        "button"
      ],
      "maximum": 1,
      "display_name": "Primary CTA"
    },
    "secondary_cta": {
      "type": "bloks",
      "pos": 4,
      "restrict_components": true,
      "component_whitelist": [
        "button"
      ],
      "maximum": 1,
      "display_name": "Secondary CTA"
    },
    "background_image": {
      "type": "asset",
      "pos": 5,
      "display_name": "Background Image"
    },
    "layout": {
      "type": "option",
      "pos": 6,
      "default_value": "center",
      "display_name": "Content Layout",
      "options": [
        {
          "name": "Center",
          "value": "center"
        },
        {
          "name": "Left",
          "value": "left"
        },
        {
          "name": "Split",
          "value": "split"
        }
      ]
    },
    "theme": {
      "type": "option",
      "pos": 7,
      "default_value": "light",
      "display_name": "Theme",
      "options": [
        {
          "name": "Light",
          "value": "light"
        },
        {
          "name": "Dark",
          "value": "dark"
        },
        {
          "name": "Teal Gradient",
          "value": "teal-gradient"
        }
      ]
    }
  },
  "preview_field": "headline"
}

# Hero Section Component

## Purpose
Create a high-impact hero section for landing pages with clear visual hierarchy and CTA actions.

## Storyblok Schema Fields
- `eyebrow` (text)
- `headline` (text, required)
- `subline` (textarea)
- `primary_cta` (bloks: button)
- `secondary_cta` (bloks: button)
- `background_image` (asset)
- `layout` (option: center, left, split)
- `theme` (option: light, dark, teal-gradient)

## Visual Requirements
- Use large headline scale and balanced max-width.
- Support three layout variants.
- Keep CTA stack responsive.
- Add subtle decorative background shapes.

## Accessibility
- Semantic section and heading tags.
- CTA buttons must be keyboard reachable.
- Ensure color contrast for overlay text.

## Example Props Structure
```ts
interface HeroProps {
  eyebrow?: string;
  headline: string;
  subline?: string;
  layout?: 'center' | 'left' | 'split';
  theme?: 'light' | 'dark' | 'teal-gradient';
}
```

## Edge Cases
- Missing image: use gradient background fallback.
- No CTAs: center text with stronger spacing.
- Long headline: clamp or wrap without overflow.

# @bloktastic/hero

Full-width hero section with headline, subline, and CTA actions.

## Install

```bash
bloktastic add @bloktastic/hero
```

## Dependencies
- `@bloktastic/button`
- `@bloktastic/image`