CTA Banner

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "cta_banner",
  "display_name": "CTA Banner",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "headline": {
      "type": "text",
      "pos": 0,
      "display_name": "Headline",
      "description": "Banner heading",
      "required": true
    },
    "subline": {
      "type": "textarea",
      "pos": 1,
      "display_name": "Subline",
      "description": "Supporting copy"
    },
    "primary_cta": {
      "type": "bloks",
      "pos": 2,
      "display_name": "Primary CTA",
      "description": "Primary CTA button",
      "required": true,
      "restrict_components": true,
      "component_whitelist": [
        "button"
      ],
      "maximum": 1
    },
    "secondary_cta": {
      "type": "bloks",
      "pos": 3,
      "display_name": "Secondary CTA",
      "description": "Optional secondary CTA button",
      "restrict_components": true,
      "component_whitelist": [
        "button"
      ],
      "maximum": 1
    },
    "style": {
      "type": "option",
      "pos": 4,
      "display_name": "Style",
      "default_value": "gradient",
      "options": [
        {
          "name": "Gradient",
          "value": "gradient"
        },
        {
          "name": "Outline",
          "value": "outline"
        },
        {
          "name": "Solid",
          "value": "solid"
        }
      ],
      "description": "Visual treatment"
    }
  },
  "preview_field": "headline"
}

# CTA Banner

## Purpose
Call-to-action section with compact copy, button, and optional supporting text.

## Storyblok Schema Fields
- `headline` (text, required): Banner heading
- `subline` (textarea): Supporting copy
- `primary_cta` (bloks, required): Primary CTA button
- `secondary_cta` (bloks): Optional secondary CTA button
- `style` (option): Visual treatment

## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.

## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.

## Example Props Structure
```typescript
interface CtaBannerProps {
  // Map Storyblok fields to your frontend props here
}
```

## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.

# @bloktastic/cta-banner

Call-to-action section with compact copy, button, and optional supporting text.

## Installation

```bash
bloktastic add @bloktastic/cta-banner
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| headline | text | Yes | Banner heading |
| subline | textarea | No | Supporting copy |
| primary_cta | bloks | Yes | Primary CTA button |
| secondary_cta | bloks | No | Optional secondary CTA button |
| style | option | No | Visual treatment |

## Notes
- Category: `sections`
- Tags: `cta`, `banner`, `conversion`, `action`