fix(html): resolve validation errors, implement dynamic MDX heading shifting, and improve accessibility

components/blog/MDXComponents.tsx

@@ -24,7 +24,14 @@ export const mdxComponents = {
   StickyNarrative,
   TechnicalGrid,
   ComparisonGrid,
-  h1: () => null,
+  h1: ({ children, ...props }: any) => {
+    const id = props.id || generateHeadingId(getTextContent(children));
+    return (
+      <SplitHeading {...props} id={id} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
+        {children}
+      </SplitHeading>
+    );
+  },
   a: ({ href, children, ...props }: any) => {
     // Special handling for PDF downloads to make them prominent
     if (href?.endsWith('.pdf')) {
@@ -87,17 +94,17 @@ export const mdxComponents = {
   h2: ({ children, ...props }: any) => {
     const id = props.id || generateHeadingId(getTextContent(children));
     return (
-      <SplitHeading {...props} id={id} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
+      <h3 {...props} id={id} className="text-2xl font-bold text-text-primary mt-12 mb-4">
         {children}
-      </SplitHeading>
+      </h3>
     );
   },
   h3: ({ children, ...props }: any) => {
     const id = props.id || generateHeadingId(getTextContent(children));
     return (
-      <h3 {...props} id={id} className="text-2xl font-bold text-text-primary mt-12 mb-4">
+      <h4 {...props} id={id} className="text-xl font-bold text-text-primary mt-10 mb-3">
         {children}
-      </h3>
+      </h4>
     );
   },
   p: ({ children, ...props }: any) => (