fix: resolve Unknown Block technicalGrid by rendering blog/home components in MDXContent

components/MDXContent.tsx

@@ -1,5 +1,24 @@
 import React from 'react';
 import { MDXRemote } from 'next-mdx-remote/rsc';
+import { useLocale } from 'next-intl';
+
+// Blog components
+import TechnicalGrid from './blog/TechnicalGrid';
+import Stats from './blog/Stats';
+import VisualLinkPreview from './blog/VisualLinkPreview';
+import StickyNarrative from './blog/StickyNarrative';
+
+// Home components
+import Hero from './home/Hero';
+import ProductCategories from './home/ProductCategories';
+import WhatWeDo from './home/WhatWeDo';
+import RecentPosts from './home/RecentPosts';
+import Experience from './home/Experience';
+import WhyChooseUs from './home/WhyChooseUs';
+import MeetTheTeam from './home/MeetTheTeam';
+import GallerySection from './home/GallerySection';
+import VideoSection from './home/VideoSection';
+import CTA from './home/CTA';
 function ContactSection(props: any) {
   return (
     <div className="p-8 border-2 border-dashed border-primary my-8 text-center text-primary font-bold">
@@ -18,9 +37,46 @@ function HeroSection(props: any) {
 }
 
 function Block(props: any) {
-  return (
-    <div className="p-4 border-2 border-dashed border-gray-300">Unknown Block: {props.type}</div>
-  );
+  const { type, data } = props;
+  const locale = useLocale();
+  switch (type) {
+    // Blog Components
+    case 'technicalGrid':
+      return <TechnicalGrid {...data} />;
+    case 'stats':
+      return <Stats {...data} />;
+    case 'visualLinkPreview':
+      return <VisualLinkPreview {...data} />;
+    case 'stickyNarrative':
+      return <StickyNarrative {...data} />;
+
+    // Home Components
+    case 'homeHero':
+      return <Hero data={data} />;
+    case 'homeProductCategories':
+      return <ProductCategories data={data} />;
+    case 'homeWhatWeDo':
+      return <WhatWeDo data={data} />;
+    case 'homeRecentPosts':
+      return <RecentPosts data={data} locale={locale} />;
+    case 'homeExperience':
+      return <Experience data={data} />;
+    case 'homeWhyChooseUs':
+      return <WhyChooseUs data={data} />;
+    case 'homeMeetTheTeam':
+      return <MeetTheTeam data={data} />;
+    case 'homeGallery':
+      return <GallerySection data={data} />;
+    case 'homeVideo':
+      return <VideoSection data={data} />;
+    case 'homeCTA':
+      return <CTA data={data} />;
+
+    default:
+      return (
+        <div className="p-4 border-2 border-dashed border-gray-300">Unknown Block: {type}</div>
+      );
+  }
 }
 
 const components = {