feat: complete MDX migration, stabilize environment & verify via E2E tests

Former-commit-id: ec3e64156a2e182535cbdcf0d975cd54603a517d

app/[locale]/[slug]/page.tsx

@@ -4,10 +4,23 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getPageBySlug } from '@/lib/pages';
 import { mapSlugToFileSlug, mapFileSlugToTranslated } from '@/lib/slugs';
-import PayloadRichText from '@/components/PayloadRichText';
+import { MDXRemote } from 'next-mdx-remote/rsc';
 import { SITE_URL } from '@/lib/schema';
 import TrackedLink from '@/components/analytics/TrackedLink';
 
+// Import components used in MDX
+import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
+import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
+import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
+import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
+
+const mdxComponents = {
+  HomeHero,
+  HomeSubCompanyTiles,
+  HomeCompetenceBentoGrid,
+  HomeReferencesSlider,
+};
+
 interface PageProps {
   params: Promise<{
     locale: string;
@@ -72,18 +85,20 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
     notFound();
   }
 
-  // Redirect if accessed via a different locale's slug
+  // Redirect logic removed to simplify for now, as slugs match file names
+  /*
   const fileSlug = await mapSlugToFileSlug(pageData.slug || slug, locale);
   const correctSlug = await mapFileSlugToTranslated(fileSlug, locale);
   if (correctSlug && correctSlug !== slug) {
     redirect(`/${locale}/${correctSlug}`);
   }
+  */
 
   // Full-bleed pages render blocks edge-to-edge without the generic article wrapper
   if (pageData.frontmatter.layout === 'fullBleed') {
     return (
       <div className="flex flex-col min-h-screen">
-        <PayloadRichText data={pageData.content} className="" />
+        <MDXRemote source={pageData.content} components={mdxComponents} />
       </div>
     );
   }
@@ -120,9 +135,9 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
             </div>
           )}
 
-          {/* Main content with shared blog components */}
+          {/* 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">
-            <PayloadRichText data={pageData.content} />
+            <MDXRemote source={pageData.content} components={mdxComponents} />
           </div>
 
           {/* Support Section */}