payload-contracts/docs/BLOCK_CATALOG.md

# Block Catalog

All 43 CMS blocks available for frontend implementation.
Auto-generated reference — see `src/types/blocks.ts` for exact TypeScript types.

## How to Use

```typescript
import type { Block, BlockByType } from '@c2s/payload-contracts/types'

// Get a specific block type
type HeroBlock = BlockByType<'hero-block'>

// Switch on block type (discriminated union)
function renderBlock(block: Block) {
  switch (block.blockType) {
    case 'hero-block': return <Hero {...block} />
    case 'text-block': return <Text {...block} />
    // ...
  }
}
```

## Core Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 1 | `hero-block` | Hero | title, subtitle, image, ctaButtons, style, overlay |
| 2 | `hero-slider-block` | Hero Slider | slides[], autoplay, animation, interval |
| 3 | `image-slider-block` | Image Slider | images[], layout, columns |
| 4 | `text-block` | Text | content (richText), alignment, maxWidth |
| 5 | `image-text-block` | Image + Text | image, content, imagePosition, ratio |
| 6 | `card-grid-block` | Card Grid | cards[], columns, layout |
| 7 | `quote-block` | Quote | quote, author, role, image, style |
| 8 | `cta-block` | Call to Action | title, description, buttons[], style |
| 9 | `contact-form-block` | Contact Form | form (relationship), layout |
| 10 | `timeline-block` | Timeline | entries (from Timeline collection) |
| 11 | `divider-block` | Divider | style, spacing, color |
| 12 | `video-block` | Video | videoUrl, poster, autoplay, aspectRatio |

## Content Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 13 | `posts-list-block` | Posts List | postType, layout, limit, showExcerpt, showDate |
| 14 | `testimonials-block` | Testimonials | displayMode, layout, autoplay |
| 15 | `newsletter-block` | Newsletter | title, description, buttonText |
| 16 | `process-steps-block` | Process Steps | steps[], layout, numbering |
| 17 | `faq-block` | FAQ | displayMode, categories, layout, schema (JSON-LD) |
| 18 | `team-block` | Team | displayMode, roles, layout, columns |
| 19 | `services-block` | Services | displayMode, categories, layout |

## Blogging Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 20 | `author-bio-block` | Author Bio | author (relationship), showSocial |
| 21 | `related-posts-block` | Related Posts | limit, layout, strategy |
| 22 | `share-buttons-block` | Share Buttons | platforms[], layout |
| 23 | `toc-block` | Table of Contents | style, maxDepth |

## Team Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 24 | `team-filter-block` | Team Filter | roles[], layout, filterLayout |
| 25 | `org-chart-block` | Org Chart | maxDepth, layout, direction, nodeStyle |

## Feature Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 26 | `locations-block` | Locations | type, selectedLocations, layout, map |
| 27 | `logo-grid-block` | Logo Grid | logos[], layout, columns, slider |
| 28 | `stats-block` | Stats | stats[], layout, columns, animation |
| 29 | `jobs-block` | Jobs | displayMode, layout, columns, filters |
| 30 | `downloads-block` | Downloads | displayMode, layout, columns, filters |
| 31 | `map-block` | Map | center, zoom, markers, mapStyle |

## Interactive Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 32 | `events` | Events | displayMode, layout, columns, showImage |
| 33 | `pricing` | Pricing | plans[], layout, highlightPopular |
| 34 | `tabs` | Tabs | tabs[], tabStyle, defaultTab |
| 35 | `accordion` | Accordion | items[], style, iconPosition, layout |
| 36 | `comparison` | Comparison | items[], features[], layout |

## Tenant-Specific Blocks

| # | Slug | Name | Tenant | Key Fields |
|---|------|------|--------|------------|
| 37 | `before-after` | Before/After | porwoll | pairs[], sliderStyle |

## BlogWoman Blocks

| # | Slug | Name | Key Fields |
|---|------|------|------------|
| 38 | `favorites-block` | Favorites | displayMode, layout, columns, filterCategory |
| 39 | `series-block` | Series | displayMode, layout, columns |
| 40 | `series-detail-block` | Series Detail | series (relationship), showHero |
| 41 | `video-embed-block` | Video Embed | videoUrl, aspectRatio, privacyMode |
| 42 | `featured-content-block` | Featured Content | items[], layout |

## YouTube Script Block (not in page layout)

| # | Slug | Name | Used In |
|---|------|------|---------|
| 43 | `script-section` | Script Section | yt-script-templates |

## Common Patterns

All blocks share these optional fields (via block config):
- `title` — Section heading
- `subtitle` — Section subheading
- `description` — Rich text description
- `backgroundColor` — Background color variant
- `spacing` — Top/bottom padding control
- `id` — Unique block ID (auto-generated)

## Block Groups by Frontend

### blogwoman.de (~17 blocks)
Core (hero, text, image-text, cta, video, divider) + Content (posts-list, testimonials, newsletter, faq) + BlogWoman-specific (favorites, series, series-detail, video-embed, featured-content) + Blogging (author-bio, related-posts, share-buttons)

### porwoll.de (~15 blocks)
Core (hero, hero-slider, image-slider, text, image-text, card-grid, quote, cta, contact-form, video, divider) + Feature (before-after, testimonials, faq) + Team (team)

### complexcaresolutions.de (~20 blocks)
Core + Content + Team (team, team-filter, services, org-chart) + Feature (locations, logo-grid, stats, jobs, downloads)