From 85055c8154eb2a7061e366f557a6738babdb1123 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 13 May 2026 22:41:18 +0200
Subject: [PATCH] fix(typography): replace generic prose with industrial mdx
 components on content pages

---
 app/[locale]/[slug]/page.tsx            | 23 +++++++++++++++---
 app/[locale]/blog/[slug]/page.tsx       | 25 ++++++++++++++++++--
 app/[locale]/referenzen/[slug]/page.tsx | 31 ++++++++++++++++---------
 app/globals.css                         |  1 +
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx
index 66e2e241c..2a29fc51e 100644
--- a/app/[locale]/[slug]/page.tsx
+++ b/app/[locale]/[slug]/page.tsx
@@ -39,7 +39,24 @@ const mdxComponents = {
   FaqBlock,
   JsonLd,
   Button,
-  Heading,
+  // Standard HTML element mapping for consistent E-TIB typography
+  h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
+  h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,
+  h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
+  h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
+  p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl" {...props} />,
+  ul: (props: any) => <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
+  ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
+  li: (props: any) => (
+    <li className="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-[0.6em] before:w-2 before:h-2 before:bg-primary/50 before:rounded-sm" {...props} />
+  ),
+  a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
+  strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
+  blockquote: (props: any) => (
+    <blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
+  ),
+  hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
+  img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
 };
 
 interface PageProps {
@@ -128,7 +145,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
   return (
     <div className="flex flex-col min-h-screen bg-white">
       {/* Hero Section */}
-      <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
+      <section className="bg-primary-dark text-white pt-40 pb-16 md:pt-48 md:pb-20 min-h-[35vh] flex flex-col justify-end relative overflow-hidden">
         <div className="absolute inset-0 opacity-20">
           <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
         </div>
@@ -156,7 +173,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
         )}
 
         {/* Main content */}
-        <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
+        <div className="w-full">
           <MDXRemote source={pageData.content} components={mdxComponents} />
         </div>
 
diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx
index c72d9057a..e105cf94f 100644
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -18,6 +18,27 @@ import { setRequestLocale } from 'next-intl/server';
 import BlogEngagementTracker from '@/components/analytics/BlogEngagementTracker';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 
+const mdxComponents = {
+  Heading,
+  h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
+  h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,
+  h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
+  h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
+  p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl" {...props} />,
+  ul: (props: any) => <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
+  ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
+  li: (props: any) => (
+    <li className="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-[0.6em] before:w-2 before:h-2 before:bg-primary/50 before:rounded-sm" {...props} />
+  ),
+  a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
+  strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
+  blockquote: (props: any) => (
+    <blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
+  ),
+  hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
+  img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
+};
+
 interface BlogPostProps {
   params: Promise<{
     locale: string;
@@ -185,8 +206,8 @@ export default async function BlogPost({ params }: BlogPostProps) {
             )}
 
             {/* Main content */}
-            <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
-              <MDXRemote source={post.content} />
+            <div className="w-full">
+              <MDXRemote source={post.content} components={mdxComponents} />
             </div>
 
             {/* Power CTA */}
diff --git a/app/[locale]/referenzen/[slug]/page.tsx b/app/[locale]/referenzen/[slug]/page.tsx
index 51576c875..d76574dde 100644
--- a/app/[locale]/referenzen/[slug]/page.tsx
+++ b/app/[locale]/referenzen/[slug]/page.tsx
@@ -59,23 +59,32 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
     notFound();
   }
 
-  // MDX components mapping can be expanded if we use custom components in reference MDX
+  // MDX components mapping for industrial typography
   const mdxComponents = {
-    ul: ({ children }: any) => <ul className="space-y-4 my-8 pl-0 list-none">{children}</ul>,
-    li: ({ children }: any) => (
-      <li className="flex items-start gap-4 p-4 bg-neutral-50 rounded-2xl border border-neutral-100 shadow-sm">
-        <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0 mt-0.5">
-          <div className="w-2.5 h-2.5 rounded-full bg-primary" />
-        </div>
-        <span className="text-lg font-medium text-neutral-800">{children}</span>
-      </li>
+    Heading,
+    h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
+    h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,
+    h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
+    h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
+    p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl" {...props} />,
+    ul: (props: any) => <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
+    ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
+    li: (props: any) => (
+      <li className="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-[0.6em] before:w-2 before:h-2 before:bg-primary/50 before:rounded-sm" {...props} />
     ),
+    a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
+    strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
+    blockquote: (props: any) => (
+      <blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
+    ),
+    hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
+    img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
   };
 
   return (
     <div className="flex flex-col min-h-screen bg-white">
       {/* Hero Section */}
-      <section className="bg-[#050B14] text-white py-20 md:py-32 relative overflow-hidden">
+      <section className="bg-[#050B14] text-white pt-40 pb-16 md:pt-48 md:pb-20 min-h-[35vh] flex flex-col justify-end relative overflow-hidden">
         {reference.frontmatter.featuredImage && (
           <div className="absolute inset-0 z-0">
             <Image
@@ -143,7 +152,7 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
         <div className="max-w-4xl mx-auto">
           <h2 className="text-3xl font-bold text-neutral-dark mb-8">Leistungsumfang & Projektbeschreibung</h2>
           
-          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary">
+          <div className="w-full">
             <MDXRemote source={reference.content} components={mdxComponents} />
           </div>
 
diff --git a/app/globals.css b/app/globals.css
index ef52754de..15679133e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -59,3 +59,4 @@
     cursor: not-allowed;
   }
 }
+/* trigger rebuild */