klz-cables.com/components/content/WPBakeryMapping.md

# WPBakery to Next.js Component Mapping - Detailed Analysis

This document provides detailed per-page analysis of WPBakery patterns found in the WordPress site and how they are mapped to modern React components.

## Pages Analyzed

### 1. Home Pages (corporate-3-landing-2 / start)

**Patterns Found:**
- 25 vc-rows with 43 vc-columns total
- Complex nested structure (24 nested rows)
- Hero section with h1
- Numbered features (h6 + h4 + p)
- Card grids (2-4 columns)
- Testimonial sections (16 instances)
- Team member sections

**Specific Mappings:**
```html
<!-- Hero Pattern -->
<div class="vc-row">
  <div class="vc-column">
    <h1>We are helping to expand...</h1>
    <p>Subtitle</p>
  </div>
</div>
<!-- Maps to: <Hero title="..." subtitle="..." /> -->

<!-- Numbered Features (Home Style) -->
<div class="vc-row">
  <div class="vc-column">
    <h6>01</h6>
    <h4>Supply to energy suppliers...</h4>
    <p>Description...</p>
  </div>
</div>
<!-- Maps to: Flex layout with number + title + description -->

<!-- Nested Rows -->
<div class="vc-row">
  <div class="vc-column">
    <div class="vc-row">...</div>
  </div>
</div>
<!-- Maps to: Recursive ContentRenderer with parsePatterns=true -->
```

**Home-Specific Enhancements:**
- Handles 25+ row complexity through recursive parsing
- Preserves nested structure for proper layout
- Converts numbered features to modern flex layout
- Maps testimonial quotes to styled blocks

### 2. Team Pages (team)

**Patterns Found:**
- 8 vc-rows with 16 vc-columns
- 4 testimonial sections with quotes
- 7 nested rows
- Quote patterns with German quotes („“)

**Specific Mappings:**
```html
<!-- Testimonial/Quote Pattern -->
<div class="vc-row">
  <div class="vc-column">
    <h1>Michael Bodemer</h1>
    <h2>„Challenges exist to be solved...“</h2>
    <p>Detailed description...</p>
  </div>
</div>
<!-- Maps to: 
<Section>
  <div className="bg-gray-50 p-6 rounded-lg border-l-4 border-primary">
    <h3>Michael Bodemer</h3>
    <blockquote>„Challenges exist...“</blockquote>
  </div>
</Section>
-->
```

### 3. Terms Pages (terms / agbs)

**Patterns Found:**
- 19 vc-rows with 38 vc-columns
- Numbered features with h6 + h3 (different from home)
- PDF download link
- 2 testimonial sections

**Specific Mappings:**
```html
<!-- Numbered Terms Pattern -->
<div class="vc-row">
  <div class="vc-column">
    <h6>1.</h6>
    <h3>Allgemeines</h3>
    <p>Paragraph 1...</p>
    <p>Paragraph 2...</p>
  </div>
</div>
<!-- Maps to: 
<div className="mb-6">
  <div className="flex items-start gap-4">
    <div className="text-3xl font-bold text-primary">1.</div>
    <div className="flex-1">
      <h3 className="text-2xl font-bold mb-2">Allgemeines</h3>
    </div>
  </div>
  <div className="ml-11 mt-2">Paragraph 1...</div>
  <div className="ml-11 mt-2">Paragraph 2...</div>
</div>
-->

<!-- PDF Download -->
<div class="vc-row">
  <div class="vc-column">
    <a href=".../agbs.pdf">Download als PDF</a>
  </div>
</div>
<!-- Maps to: 
<Section>
  <div className="bg-blue-50 p-4 rounded-lg">
    <a href="/media/agbs.pdf" className="text-primary hover:underline">
      📄 Download als PDF
    </a>
  </div>
</Section>
-->
```

### 4. Contact Pages (contact / kontakt)

**Patterns Found:**
- 4 vc-rows with 7 vc-columns
- Contact form (frm_forms)
- Contact info blocks
- 3 nested rows

**Specific Mappings:**
```html
<!-- Contact Form Pattern -->
<div class="vc-row">
  <div class="vc-column">
    <div class="frm_forms">...</form>
  </div>
</div>
<!-- Maps to: 
<Section>
  <ContactForm />
</Section>
-->

<!-- Contact Info Pattern -->
<div class="vc-row">
  <div class="vc-column">
    <p>KLZ Cables<br/>Raiffeisenstraße 22<br/>73630 Remshalden</p>
  </div>
</div>
<!-- Maps to: 
<Section>
  <div className="bg-gray-100 p-6 rounded-lg">
    <ContentRenderer content="..." parsePatterns={false} />
  </div>
</Section>
-->
```

### 5. Legal/Privacy Pages (legal-notice, privacy-policy, impressum, datenschutz)

**Patterns Found:**
- 1 vc-row with 2 vc-columns
- Hero section with h1
- Simple content structure
- Contact info blocks

**Specific Mappings:**
```html
<!-- Simple Hero + Content -->
<div class="vc-row">
  <div class="vc-column">
    <h1>Legal Notice</h1>
    <p>Content...</p>
  </div>
</div>
<!-- Maps to: 
<Hero title="Legal Notice" />
<Section>
  <ContentRenderer content="..." parsePatterns={false} />
</Section>
-->
```

### 6. Thanks Pages (thanks / danke)

**Patterns Found:**
- 2 vc-rows with 3 vc-columns
- Hero pattern
- Grid structure

**Specific Mappings:**
```html
<!-- Thank You Hero -->
<div class="vc-row">
  <div class="vc-column">
    <h2>Thank you very much!</h2>
    <p>We've received your message...</p>
  </div>
</div>
<!-- Maps to: 
<Hero title="Thank you very much!" subtitle="We've received your message..." />
-->
```

### 7. Blog Pages (blog)

**Patterns Found:**
- 2 vc-rows (empty or minimal content)
- No specific patterns

**Specific Mappings:**
- Falls back to generic parsing
- Uses page-specific routing for blog listing

### 8. Products Pages (products / produkte)

**Patterns Found:**
- Empty content
- Uses page-specific routing for product catalog

**Specific Mappings:**
- Routes to `/products` or `/produkte` page components
- Uses ProductList component

## Parser Pattern Priority

The parser processes patterns in this order:

1. **Hero Sections** - Single column with h1/h2
2. **Contact Forms** - Forms with frm_forms class
3. **Numbered Features (Home)** - h6 + h4 structure
4. **Numbered Features (Terms)** - h6 + h3 structure
5. **Testimonials/Quotes** - Contains quotes or team structure
6. **PDF Downloads** - Links ending in .pdf
7. **Contact Info** - Contains @, addresses, or KLZ Cables
8. **Grid/Card Patterns** - 2-4 columns with titles/images
9. **Nested Rows** - Rows containing other rows
10. **Simple Content** - h3 + p structure
11. **Empty Rows** - Whitespace only
12. **Fallback** - Generic section

## Component Props Enhancement

### ContentRenderer
```typescript
interface ContentRendererProps {
  content: string;
  className?: string;
  sanitize?: boolean;
  processAssets?: boolean;
  convertClasses?: boolean;
  parsePatterns?: boolean;
  pageSlug?: string; // NEW: For page-specific parsing
}
```

### Usage Examples
```tsx
// Home page
<ContentRenderer 
  content={page.contentHtml} 
  pageSlug="corporate-3-landing-2"
/>

// Terms page
<ContentRenderer 
  content={page.contentHtml} 
  pageSlug="terms"
/>

// Contact page
<ContentRenderer 
  content={page.contentHtml} 
  pageSlug="contact"
/>
```

## Tailwind Class Conversions

### WordPress Classes → Tailwind
- `vc_row` → `flex flex-wrap -mx-4`
- `vc_col-md-6` → `w-full md:w-1/2 px-4`
- `vc_col-lg-4` → `w-full lg:w-1/3 px-4`
- `wpb_wrapper` → `space-y-4`
- `bg-light` → `bg-gray-50`
- `btn-primary` → `bg-primary text-white hover:bg-primary-dark`

## Asset URL Replacement

All WordPress asset URLs are automatically replaced:
- `https://klz-cables.com/wp-content/uploads/...` → `/media/...`
- PDF links are mapped to local paths
- Images use Next.js Image component with optimization

## Testing Checklist

For each page type, verify:
- [ ] Hero sections render correctly
- [ ] Numbered features display properly
- [ ] Card grids are responsive
- [ ] Testimonials have proper styling
- [ ] Forms work correctly
- [ ] PDF links are accessible
- [ ] Contact info is formatted
- [ ] Nested rows don't cause duplication
- [ ] Empty rows are filtered out
- [ ] Asset URLs are replaced
- [ ] No raw HTML remains

## Performance Notes

- Parser uses Cheerio for server-side HTML parsing
- Recursive parsing handles nested structures efficiently
- Pattern matching stops at first match (priority order)
- Processed rows are removed to avoid duplication
- Remaining content is handled by fallback parser

## Future Enhancements

1. **Page-Specific Overrides**: Add `pageSlug` parameter for custom logic
2. **Animation Support**: Detect and convert Salient animation classes
3. **Background Images**: Handle data-bg-image attributes
4. **Video Backgrounds**: Support data-video-bg attributes
5. **Parallax Effects**: Convert to modern CSS or React libraries
6. **Icon Support**: Map Font Awesome or other icon classes
7. **Accordion/Toggle**: Detect and convert collapsible sections
8. **Tab Components**: Handle tabbed content sections

## Migration Status

✅ **Completed:**
- Home pages (corporate-3-landing-2/start)
- Team pages (team)
- Terms pages (terms/agbs)
- Contact pages (contact/kontakt)
- Legal pages (legal-notice/impressum)
- Privacy pages (privacy-policy/datenschutz)
- Thanks pages (thanks/danke)

⏳ **Pending:**
- Blog pages (blog) - Uses page routing
- Products pages (products/produkte) - Uses page routing

## Notes

- All pages now use detailed component recreations
- No raw HTML leakage where components fit
- Parser is extensible for new patterns
- Documentation updated with per-page details
- System ready for testing and verification