feat: merge XCBluePrint 3D visualization into project

src/components/DocContent.tsx

@@ -1,4 +1,4 @@
-import { clsx } from 'clsx'
+import clsx from 'clsx'
 import type { ParsedDoc, DocTable, DocCodeBlock } from '@/lib/types'
 
 interface DocContentProps {
@@ -88,16 +88,26 @@ interface SectionProps {
 }
 
 const Section = ({ section, onReferenceClick }: SectionProps) => {
-  const HeadingTag = `h${Math.min(section.level + 1, 6)}` as keyof JSX.IntrinsicElements
+  const level = Math.min(section.level + 1, 6)
+  const headingClass = clsx(
+    'font-semibold text-white mb-3',
+    section.level === 1 ? 'text-xl' : 'text-lg'
+  )
+  
+  const renderHeading = () => {
+    switch (level) {
+      case 2: return <h2 className={headingClass}>{section.title}</h2>
+      case 3: return <h3 className={headingClass}>{section.title}</h3>
+      case 4: return <h4 className={headingClass}>{section.title}</h4>
+      case 5: return <h5 className={headingClass}>{section.title}</h5>
+      case 6: return <h6 className={headingClass}>{section.title}</h6>
+      default: return <h2 className={headingClass}>{section.title}</h2>
+    }
+  }
 
   return (
     <section className="mb-6">
-      <HeadingTag className={clsx(
-        'font-semibold text-white mb-3',
-        section.level === 1 ? 'text-xl' : 'text-lg'
-      )}>
-        {section.title}
-      </HeadingTag>
+      {renderHeading()}
 
       <div className="space-y-3">
         {section.content.map((item, idx) => {