Logo Cloud

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "logo_cloud",
  "display_name": "Logo Cloud",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "heading": {
      "type": "text",
      "pos": 0,
      "display_name": "Heading",
      "description": "Optional section heading"
    },
    "logos": {
      "type": "bloks",
      "pos": 1,
      "display_name": "Logos",
      "description": "Logo items rendered as image components",
      "required": true,
      "restrict_components": true,
      "component_whitelist": [
        "image"
      ]
    },
    "columns": {
      "type": "option",
      "pos": 2,
      "display_name": "Columns",
      "default_value": "5",
      "options": [
        {
          "name": "3 Columns",
          "value": "3"
        },
        {
          "name": "4 Columns",
          "value": "4"
        },
        {
          "name": "5 Columns",
          "value": "5"
        },
        {
          "name": "6 Columns",
          "value": "6"
        }
      ],
      "description": "Number of columns on desktop"
    },
    "grayscale": {
      "type": "boolean",
      "pos": 3,
      "display_name": "Grayscale Logos",
      "default_value": true,
      "description": "Render logos in grayscale until hover"
    }
  },
  "preview_field": "heading"
}

# Logo Cloud

## Purpose
Trusted-by logo section to showcase customers, partners, and integrations.

## Storyblok Schema Fields
- `heading` (text): Optional section heading
- `logos` (bloks, required): Logo items rendered as image components
- `columns` (option): Number of columns on desktop
- `grayscale` (boolean): Render logos in grayscale until hover

## 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 LogoCloudProps {
  // 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/logo-cloud

Trusted-by logo section to showcase customers, partners, and integrations.

## Installation

```bash
bloktastic add @bloktastic/logo-cloud
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| heading | text | No | Optional section heading |
| logos | bloks | Yes | Logo items rendered as image components |
| columns | option | No | Number of columns on desktop |
| grayscale | boolean | No | Render logos in grayscale until hover |

## Notes
- Category: `sections`
- Tags: `logos`, `social-proof`, `partners`, `brands`