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

components/RequestQuoteForm.tsx

@@ -78,6 +78,9 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     }
   };
 
+  const emailId = React.useId();
+  const requestId = React.useId();
+
   if (status === 'success') {
     return (
       <div
@@ -164,9 +167,12 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
       <div className="space-y-2 !mt-0">
         <div className="space-y-1 !mt-0">
+          <label htmlFor={emailId} className="sr-only">
+            {t('email')}
+          </label>
           <Input
             type="email"
-            id="quote-email"
+            id={emailId}
             required
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -177,8 +183,11 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         </div>
 
         <div className="space-y-1 !mt-0">
+          <label htmlFor={requestId} className="sr-only">
+            {t('message')}
+          </label>
           <Textarea
-            id="quote-request"
+            id={requestId}
             required
             rows={3}
             value={request}

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) => (

components/blog/SplitHeading.tsx

@@ -8,15 +8,17 @@ interface SplitHeadingProps {
   id?: string;
 }
 
-export default function SplitHeading({ children, className = '', id }: SplitHeadingProps) {
+export default function SplitHeading({
+  children,
+  className = '',
+  id,
+  level: Level = 'h2',
+}: SplitHeadingProps & { level?: any }) {
   return (
-    <div 
-      id={id}
-      className={className}
-    >
-      <h2 className="text-xl md:text-2xl font-bold leading-tight text-text-primary">
+    <div id={id} className={className}>
+      <Level className="text-xl md:text-2xl font-bold leading-tight text-text-primary">
         {children}
-      </h2>
+      </Level>
     </div>
   );
 }