wip

2026-01-19 19:09:32 +01:00
parent e8b6b13a3b
commit 5c9b2e3f5a
5 changed files with 173 additions and 205 deletions
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -2,7 +2,6 @@ import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
-import RequestQuoteForm from '@/components/RequestQuoteForm';
 import { Badge, Container, Section } from '@/components/ui';
 import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/mdx';
@@ -66,33 +65,33 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
 const components = {
  ProductTechnicalData,
  ProductTabs,
-  p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-6 font-medium block !mb-6" />,
+  p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium" />,
  h2: (props: any) => (
-    <div className="relative mt-20 mb-10 block !mt-20 !mb-10">
-      <h2 {...props} className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase mb-6 block !mb-6" />
+    <div className="relative mb-16">
+      <h2 {...props} className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase mb-6" />
      <div className="w-20 h-1.5 bg-accent rounded-full" />
    </div>
  ),
-  h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl font-black text-primary mt-16 mb-6 tracking-tight uppercase block !mt-16 !mb-6" />,
-  ul: (props: any) => <ul {...props} className="list-none pl-0 mt-4 mb-8 space-y-4 block !mt-4 !mb-8" />,
+  h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase" />,
+  ul: (props: any) => <ul {...props} className="list-none pl-0 mb-10" />,
  section: (props: any) => <div {...props} className="block" />,
  li: (props: any) => (
-    <li className="flex items-start gap-4 group">
+    <li className="flex items-start gap-4 group mb-4 last:mb-0">
      <div className="mt-2.5 w-2 h-2 rounded-full bg-accent flex-shrink-0 group-hover:scale-125 transition-transform" />
      <span {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed font-medium" />
    </li>
  ),
  strong: (props: any) => <strong {...props} className="font-black text-primary" />,
  table: (props: any) => (
-    <div className="overflow-x-auto my-16 rounded-[32px] border border-neutral-dark/10 shadow-xl bg-white p-1">
+    <div className="overflow-x-auto my-20 rounded-[32px] border border-neutral-dark/10 shadow-xl bg-white p-1">
      <table {...props} className="min-w-full divide-y divide-neutral-dark/10" />
    </div>
  ),
  th: (props: any) => <th {...props} className="px-8 py-6 bg-neutral-light/50 text-left text-[10px] font-black uppercase tracking-[0.25em] text-primary/60" />,
  td: (props: any) => <td {...props} className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl font-medium" />,
-  hr: () => <hr className="my-20 border-t-2 border-neutral-dark/5" />,
+  hr: () => <hr className="my-24 border-t-2 border-neutral-dark/5" />,
  blockquote: (props: any) => (
-    <div className="my-16 p-10 md:p-16 bg-primary-dark rounded-[40px] relative overflow-hidden group">
+    <div className="my-20 p-10 md:p-16 bg-primary-dark rounded-[40px] relative overflow-hidden group">
      <div className="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-accent/20 transition-colors duration-700" />
      <div className="relative z-10 italic text-2xl md:text-4xl text-white/90 leading-relaxed font-black tracking-tight" {...props} />
    </div>
@@ -201,6 +200,30 @@ export default async function ProductPage({ params }: ProductPageProps) {
  const categoryKey = categorySlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
  const categoryTitle = t(`categories.${categoryKey}.title`);

+  const sidebar = (
+    <ProductSidebar 
+      productName={product.frontmatter.title}
+      productImage={product.frontmatter.images?.[0]}
+      datasheetPath={datasheetPath}
+    />
+  );
+
+  const productComponents = {
+    ...components,
+    ProductTabs: (props: any) => <ProductTabs {...props} sidebar={sidebar} />,
+  };
+
+  // Pre-process content to convert raw HTML tags to Markdown so they use our custom components
+  const processedContent = product.content
+    .replace(/<h2[^>]*>(.*?)<\/h2>/g, '\n## $1\n')
+    .replace(/<h3[^>]*>(.*?)<\/h3>/g, '\n### $1\n')
+    .replace(/<p[^>]*>(.*?)<\/p>/g, '\n$1\n')
+    .replace(/<ul[^>]*>(.*?)<\/ul>/gs, '\n$1\n')
+    .replace(/<li[^>]*>(.*?)<\/li>/g, '\n- $1\n')
+    .replace(/<strong[^>]*>(.*?)<\/strong>/g, '**$1**')
+    .replace(/<section[^>]*>/g, '')
+    .replace(/<\/section>/g, '');
+
  return (
    <div className="flex flex-col min-h-screen bg-white relative">
      {/* Product Hero */}
@@ -278,84 +301,37 @@ export default async function ProductPage({ params }: ProductPageProps) {
          )}

          <div className="relative">
-            <div className="space-y-20">
-              {/* Sidebar on Mobile (Above Content) */}
-              <div className="w-full lg:hidden">
-                <div className="space-y-10">
-                  {/* Request Quote Form */}
-                  <div className="bg-white rounded-[40px] shadow-[0_32px_64px_-12px_rgba(0,0,0,0.08)] border border-neutral-dark/5 overflow-hidden">
-                    <div className="bg-primary-dark p-8 md:p-10 text-white relative overflow-hidden">
-                      <div className="absolute top-0 right-0 w-48 h-48 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
-                      <h3 className="text-2xl md:text-3xl font-black mb-3 relative z-10 tracking-tight uppercase">{t('requestQuote')}</h3>
-                      <p className="text-white/50 text-base relative z-10 leading-relaxed font-medium">{t('requestQuoteDesc')}</p>
-                    </div>
-                    <div className="p-8 md:p-10">
-                      <RequestQuoteForm productName={product.frontmatter.title} />
-                    </div>
-                  </div>
-
-                  {/* Datasheet Download */}
-                  {datasheetPath && (
-                    <a 
-                      href={datasheetPath} 
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="block bg-neutral-light/30 rounded-[40px] border border-neutral-dark/5 overflow-hidden group hover:bg-white hover:shadow-2xl transition-all duration-700"
-                    >
-                      <div className="p-8 md:p-10 flex items-center gap-8">
-                        <div className="w-20 h-20 rounded-3xl bg-white shadow-sm flex items-center justify-center flex-shrink-0 group-hover:bg-accent group-hover:text-white transition-all duration-700 text-accent">
-                          <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                          </svg>
-                        </div>
-                        <div className="flex-1">
-                          <h3 className="text-xl font-black text-primary mb-2 uppercase tracking-tight">{t('downloadDatasheet')}</h3>
-                          <p className="text-text-secondary text-sm font-medium leading-relaxed">{t('downloadDatasheetDesc')}</p>
-                        </div>
-                      </div>
-                    </a>
-                  )}
-                </div>
+            <div className="w-full">
+              {/* Main Content Area */}
+              <div className="max-w-none">
+                 <MDXRemote source={processedContent} components={productComponents} />
              </div>

-              <div className="w-full">
-                {/* Main Content Area */}
-                <div className="max-w-none [&_h3]:mt-16 [&_h3]:mb-6 [&_p]:mb-6 [&_ul]:mt-4 [&_ul]:mb-8 [&_li]:mb-4">
-                   <MDXRemote source={product.content} components={components} />
-                </div>
-
-                {/* Structured Data */}
-                <script
-                  type="application/ld+json"
-                  dangerouslySetInnerHTML={{
-                    __html: JSON.stringify({
-                      '@context': 'https://schema.org',
-                      '@type': 'Product',
-                      name: product.frontmatter.title,
-                      description: product.frontmatter.description,
-                      sku: product.frontmatter.sku,
-                      image: product.frontmatter.images?.[0] ? `https://klz-cables.com${product.frontmatter.images[0]}` : undefined,
-                      brand: {
-                        '@type': 'Brand',
-                        name: 'KLZ Cables',
-                      },
-                      offers: {
-                        '@type': 'Offer',
-                        availability: 'https://schema.org/InStock',
-                        priceCurrency: 'EUR',
-                        url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
-                      },
-                    }),
-                  }}
-                />
-              </div>
+              {/* Structured Data */}
+              <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{
+                  __html: JSON.stringify({
+                    '@context': 'https://schema.org',
+                    '@type': 'Product',
+                    name: product.frontmatter.title,
+                    description: product.frontmatter.description,
+                    sku: product.frontmatter.sku,
+                    image: product.frontmatter.images?.[0] ? `https://klz-cables.com${product.frontmatter.images[0]}` : undefined,
+                    brand: {
+                      '@type': 'Brand',
+                      name: 'KLZ Cables',
+                    },
+                    offers: {
+                      '@type': 'Offer',
+                      availability: 'https://schema.org/InStock',
+                      priceCurrency: 'EUR',
+                      url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
+                    },
+                  }),
+                }}
+              />
            </div>
-            
-            <ProductSidebar 
-              productName={product.frontmatter.title}
-              productImage={product.frontmatter.images?.[0]}
-              datasheetPath={datasheetPath}
-            />
          </div>

          {/* Related Products Section */}