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:

<!-- 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:

<!-- 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:

<!-- 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:

<!-- 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:

<!-- 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:

<!-- 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

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

Usage Examples

// 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