wip

2026-01-06 13:55:04 +01:00
parent 297de69928
commit f991ea6b9b
393 changed files with 41362 additions and 4811 deletions
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -2,7 +2,6 @@ import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { getPostBySlug, getPostsByLocale, getMediaById, getSiteInfo } from '@/lib/data';
-import { processHTML } from '@/lib/html-compat';
 import { getLocalizedPath } from '@/lib/i18n';
 import { t } from '@/lib/i18n';
 import { SEO } from '@/components/SEO';
@@ -142,8 +141,7 @@ export default async function BlogDetailPage({ params }: PageProps) {
    notFound();
  }

-  // Process HTML content with WordPress compatibility
-  const processedContent = processHTML(post.contentHtml);
+  // Content is already processed during data export

  return (
    <>
@@ -191,7 +189,7 @@ export default async function BlogDetailPage({ params }: PageProps) {
            
            {post.excerptHtml && (
              <p className="text-xl text-gray-600 leading-relaxed">
-                {post.excerptHtml}
+                <ContentRenderer content={post.excerptHtml} />
              </p>
            )}
          </header>
@@ -212,12 +210,13 @@ export default async function BlogDetailPage({ params }: PageProps) {
          })()}

          {/* Article Content */}
-          <div className="mb-12">
-            <ContentRenderer
-              content={processedContent}
-              className="prose prose-lg prose-blue"
-            />
-          </div>
+         <div className="mb-12">
+           <ContentRenderer
+             content={post.contentHtml}
+             className="prose prose-lg prose-blue"
+             parsePatterns={true}
+           />
+         </div>

          {/* Article Footer */}
          <footer className="border-t border-gray-200 pt-8 mt-12">
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -2,7 +2,6 @@ import { notFound } from 'next/navigation';
 import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
 import { Metadata } from 'next';
 import { SEO } from '@/components/SEO';
-import { processHTML } from '@/lib/html-compat';
 import { ContentRenderer } from '@/components/content/ContentRenderer';
 import { Breadcrumbs } from '@/components/content/Breadcrumbs';
 import { Hero } from '@/components/content/Hero';
@@ -61,12 +60,10 @@ export default async function ContactPage({ params }: PageProps) {
  // Get featured image if available
  const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;

-  // Process the content
+  // Content is already processed during data export
  const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
    ? page.contentHtml
    : page.excerptHtml;
-  
-  const processedContent = processHTML(contentToDisplay || '');

  // Breadcrumb items
  const breadcrumbItems = [
@@ -91,7 +88,7 @@ export default async function ContactPage({ params }: PageProps) {
      {featuredImage && (
        <Hero
          title={page.title}
-          subtitle={page.excerptHtml ? processHTML(page.excerptHtml).replace(/<[^>]*>/g, '') : undefined}
+          subtitle={page.excerptHtml ? page.excerptHtml.replace(/<[^>]*>/g, '') : undefined}
          backgroundImage={featuredImage.localPath}
          backgroundAlt={page.title}
          height="md"
@@ -110,7 +107,7 @@ export default async function ContactPage({ params }: PageProps) {
            </h1>
            {page.excerptHtml && (
              <ContentRenderer
-                content={processHTML(page.excerptHtml)}
+                content={page.excerptHtml}
                className="text-lg sm:text-xl text-gray-600 leading-relaxed"
              />
            )}
@@ -118,10 +115,10 @@ export default async function ContactPage({ params }: PageProps) {
        )}

        {/* Content from WordPress */}
-        {processedContent && (
+        {contentToDisplay && (
          <ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8 mb-12" container={true} maxWidth="full">
            <ContentRenderer
-              content={processedContent}
+              content={contentToDisplay}
              className="prose prose-lg max-w-none"
            />
          </ResponsiveWrapper>
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -41,7 +41,7 @@ export default function LocaleLayout({
      <Layout
        locale={locale}
        siteName="KLZ Cables"
-        logo="/media/logo.webp"
+        logo="/media/logo.svg"
      >
        {children}
      </Layout>
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,15 +1,12 @@
 import { notFound } from 'next/navigation';
-import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
-import { Metadata } from 'next';
-import { SEO } from '@/components/SEO';
-import { processHTML } from '@/lib/html-compat';
-import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-import Link from 'next/link';
-import { ResponsiveSection, ResponsiveWrapper, ResponsiveGrid } from '@/components/layout/ResponsiveWrapper';
-import { FeaturedImage } from '@/components/content/FeaturedImage';
-import { Container } from '@/components/ui/Container';
-import { Button } from '@/components/ui/Button';
 import { ContentRenderer } from '@/components/content/ContentRenderer';
+import { FeaturedImage } from '@/components/content/FeaturedImage';
+import { ResponsiveWrapper, ResponsiveSection } from '@/components/layout/ResponsiveWrapper';
+import { LocaleSwitcher } from '@/components/LocaleSwitcher';
+import { SEO } from '@/components/SEO';
+import { Container } from '@/components/ui/Container';
+import { getAllPages, getMediaById, getPageBySlug } from '@/lib/data';
+import { Metadata } from 'next';

 interface PageProps {
  params: {
@@ -73,16 +70,40 @@ export default async function Page({ params }: PageProps) {
    notFound();
  }

-  // Use contentHtml if available, otherwise use excerptHtml
-  // Both should be processed through ContentRenderer which handles shortcodes
-  const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
-    ? page.contentHtml
-    : page.excerptHtml;
+  // Special handling for home page vs other pages
+  const isHomePage = slug === 'home' || actualSlug === 'corporate-3-landing-2' || actualSlug === 'start';
  
-  // Process the content to handle shortcodes and convert to HTML
-  const processedContent = processHTML(contentToDisplay || '');
+  if (isHomePage) {
+    // HOME PAGE: Render content directly without additional wrappers
+    // The content already contains full vc_row structures with backgrounds
+    return (
+      <>
+        <SEO
+          title={page.title}
+          description={page.excerptHtml || ''}
+        />
+        
+        {/* Main content - full width, no containers */}
+        <div className="w-full">
+          <ContentRenderer
+            content={page.contentHtml || page.excerptHtml || ''}
+            className=""
+            parsePatterns={true}
+          />
+        </div>

-  // Get featured image if available
+        {/* Locale switcher at bottom */}
+        <ResponsiveSection padding="responsive" className="bg-gray-50">
+          <Container maxWidth="6xl" centered={true} padding="none">
+            <LocaleSwitcher />
+          </Container>
+        </ResponsiveSection>
+      </>
+    );
+  }
+
+  // STANDARD PAGES: Use the existing layout with hero and containers
+  const contentToDisplay = page.contentHtml || page.excerptHtml;
  const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;

  return (
@@ -114,111 +135,25 @@ export default async function Page({ params }: PageProps) {

      {/* Main Content */}
      <ResponsiveSection padding="responsive" maxWidth="4xl">
+        {/* Title - only show if no featured image */}
        {!featuredImage && (
          <ResponsiveWrapper stackOnMobile={true} centerOnMobile={true} className="mb-8">
            <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
              {page.title}
            </h1>
-            {page.excerptHtml && (
-              <ContentRenderer
-                content={processHTML(page.excerptHtml)}
-                className="text-lg sm:text-xl text-gray-600 leading-relaxed"
-              />
-            )}
          </ResponsiveWrapper>
        )}

-        {processedContent && (
+        {/* Content with pattern parsing */}
+        {contentToDisplay && (
          <ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8" container={true} maxWidth="full">
            <ContentRenderer
-              content={processedContent}
+              content={contentToDisplay}
              className="prose prose-lg max-w-none"
+              parsePatterns={true}
            />
          </ResponsiveWrapper>
        )}
-
-        {/* Navigation Links */}
-        <ResponsiveWrapper className="mt-12" container={true} maxWidth="full">
-          <ResponsiveGrid
-            columns={{ mobile: 1, tablet: 2, desktop: 4 }}
-            gap="responsive"
-            stackMobile={true}
-          >
-            <Link
-              href={`/${locale}/blog`}
-              className="p-4 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 rounded-lg text-center transition-colors touch-target-md"
-            >
-              <div className="font-semibold text-blue-900 text-lg">Blog</div>
-              <div className="text-sm text-blue-700 mt-1">Read our latest posts</div>
-            </Link>
-            <Link
-              href={`/${locale}/products`}
-              className="p-4 bg-green-50 hover:bg-green-100 active:bg-green-200 rounded-lg text-center transition-colors touch-target-md"
-            >
-              <div className="font-semibold text-green-900 text-lg">Products</div>
-              <div className="text-sm text-green-700 mt-1">Browse our catalog</div>
-            </Link>
-            <Link
-              href={`/${locale}/contact`}
-              className="p-4 bg-orange-50 hover:bg-orange-100 active:bg-orange-200 rounded-lg text-center transition-colors touch-target-md"
-            >
-              <div className="font-semibold text-orange-900 text-lg">Contact</div>
-              <div className="text-sm text-orange-700 mt-1">Get in touch</div>
-            </Link>
-            <Link
-              href={`/${locale}/blog`}
-              className="p-4 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 rounded-lg text-center transition-colors touch-target-md"
-            >
-              <div className="font-semibold text-purple-900 text-lg">News</div>
-              <div className="text-sm text-purple-700 mt-1">Latest updates</div>
-            </Link>
-          </ResponsiveGrid>
-        </ResponsiveWrapper>
-      </ResponsiveSection>
-
-      {/* Tailwind CSS Test Section */}
-      <ResponsiveSection padding="responsive" className="bg-gradient-to-r from-blue-50 to-indigo-50">
-        <Container maxWidth="6xl" centered={true} padding="none">
-          <div className="text-center mb-8">
-            <h2 className="text-3xl font-bold text-gray-900 mb-4">Tailwind CSS Test</h2>
-            <p className="text-lg text-gray-600">If you can see styled components below, Tailwind CSS is working correctly!</p>
-          </div>
-          
-          <div className="flex flex-wrap gap-4 justify-center items-center">
-            <Button variant="primary" size="lg">
-              Primary Button
-            </Button>
-            <Button variant="secondary" size="lg">
-              Secondary Button
-            </Button>
-            <Button variant="outline" size="lg">
-              Outline Button
-            </Button>
-            <Button variant="ghost" size="lg">
-              Ghost Button
-            </Button>
-          </div>
-
-          <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white p-6 rounded-lg shadow-md border-2 border-blue-200">
-              <h3 className="text-xl font-bold text-blue-900 mb-2">Card 1</h3>
-              <p className="text-gray-600">This card uses Tailwind shadow, rounded, and border utilities.</p>
-            </div>
-            <div className="bg-white p-6 rounded-lg shadow-lg border-2 border-green-200">
-              <h3 className="text-xl font-bold text-green-900 mb-2">Card 2</h3>
-              <p className="text-gray-600">Different shadow intensity and border color.</p>
-            </div>
-            <div className="bg-white p-6 rounded-xl shadow-xl border-2 border-purple-200">
-              <h3 className="text-xl font-bold text-purple-900 mb-2">Card 3</h3>
-              <p className="text-gray-600">Rounded-xl and shadow-xl for emphasis.</p>
-            </div>
-          </div>
-
-          <div className="mt-8 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800">
-            <p className="font-bold">Success!</p>
-            <p>If you see this styled alert box with proper colors, spacing, and borders, Tailwind CSS is processing correctly.</p>
-          </div>
-        </Container>
      </ResponsiveSection>

      {/* Locale Switcher */}
--- a/app/[locale]/product/page.tsx
+++ b/app/[locale]/product/page.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { getProductBySlug, getAllProducts, getCategoriesByLocale } from '@/lib/data';
 import { getSiteInfo, t, getLocaleFromPath, getLocalizedPath } from '@/lib/i18n';
-import { processHTML } from '@/lib/html-compat';
 import { SEO } from '@/components/SEO';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
 import { ContentRenderer } from '@/components/content/ContentRenderer';
@@ -74,9 +73,9 @@ export default async function ProductDetailPage({ params }: PageProps) {
    notFound();
  }

-  // Process description HTML with WordPress compatibility
-  const processedDescription = product.descriptionHtml ?
-    processHTML(product.descriptionHtml) : '';
+  // Content is already processed during data export
+  const processedDescription = product.descriptionHtml || '';
+  const processedShortDescription = product.shortDescriptionHtml || '';

  // Get related products (same category)
  const allProducts = getAllProducts();
@@ -98,7 +97,7 @@ export default async function ProductDetailPage({ params }: PageProps) {
        type="product"
        images={product.images}
      />
-       
+        
      <div className="bg-white py-12 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Back to products link */}
@@ -176,10 +175,13 @@ export default async function ProductDetailPage({ params }: PageProps) {
                </p>
              )}

-              {product.shortDescriptionHtml && (
-                <p className="text-lg text-gray-600 mb-6">
-                  {product.shortDescriptionHtml}
-                </p>
+              {processedShortDescription && (
+                <div className="text-lg text-gray-600 mb-6">
+                  <ContentRenderer
+                    content={processedShortDescription}
+                    className="text-lg text-gray-600"
+                  />
+                </div>
              )}

              {/* Product Description */}
@@ -189,7 +191,7 @@ export default async function ProductDetailPage({ params }: PageProps) {
                    {t('products.description', locale as 'en' | 'de')}
                  </h3>
                  <ContentRenderer
-                    content={product.descriptionHtml || ''}
+                    content={processedDescription}
                    className="prose prose-sm max-w-none text-gray-600"
                  />
                </div>
@@ -252,9 +254,12 @@ export default async function ProductDetailPage({ params }: PageProps) {
                        {relatedProduct.name}
                      </h3>
                      {relatedProduct.shortDescriptionHtml && (
-                        <p className="text-sm text-gray-600 line-clamp-2 mb-2">
-                          {relatedProduct.shortDescriptionHtml}
-                        </p>
+                        <div className="text-sm text-gray-600 line-clamp-2 mb-2">
+                          <ContentRenderer
+                            content={relatedProduct.shortDescriptionHtml}
+                            className="text-sm text-gray-600"
+                          />
+                        </div>
                      )}
                      <span className="text-xs text-blue-600 font-medium">
                        {t('products.viewDetails', locale as 'en' | 'de')} →