refactor(spec): move spec page rendering to dedicated layout

src/layouts/SpecLayout.astro

@@ -0,0 +1,56 @@
+---
+import type { CollectionEntry } from "astro:content";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+import BaseLayout from "./BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Hero from "../components/Hero.astro";
+import AboutSection from "../components/AboutSection.astro";
+import SpecSection from "../components/SpecSection.astro";
+import FAQSection from "../components/FAQSection.astro";
+import Footer from "../components/Footer.astro";
+import { parseSpecContent } from "../utils/parseSpecContent";
+
+interface Props {
+  spec: CollectionEntry<"spec">;
+}
+
+const { spec } = Astro.props;
+const version = spec.data.version;
+
+// Read the markdown file
+const filePath = path.join(process.cwd(), "src/content/spec", `${version}.md`);
+const content = fs.readFileSync(filePath, "utf-8");
+
+// Remove frontmatter
+const markdown = content.replace(/^---[\s\S]*?---\n/, "");
+
+// Parse the content into sections (handles markdown -> HTML internally)
+const parsed = await parseSpecContent(markdown, version);
+---
+
+<BaseLayout title={spec.data.title}>
+  <Header version={version} />
+
+  <main>
+    <Hero version={version} svgPath={parsed.svgPath} />
+
+    <AboutSection
+      introduction={parsed.introduction}
+      summary={parsed.summary}
+      license={parsed.license}
+    />
+
+    <SpecSection
+      terminology={parsed.terminology}
+      terminologyTitle={parsed.terminologyTitle}
+      specification={parsed.specification}
+      tocItems={parsed.tocItems}
+    />
+
+    <FAQSection items={parsed.faq} />
+  </main>
+
+  <Footer />
+</BaseLayout>