complete i18n migration to /[locale]/ with EN+ES content

Full rewrite of the docs site under app/[locale]/ with next-intl
in localePrefix:"always" mode. Every page now exists at both
/en/<path> and /es/<path>; the root / shows a meta-refresh + JS
redirect to /<defaultLocale>/ so GitHub Pages serves something
on the apex URL.

Highlights:
- 107 doc pages migrated to file-per-page JSON namespaces under
  messages/en/ and messages/es/. Spanish content is fully
  translated (no copy-of-English placeholders).
- New documentation for the Active Suppressions section in the
  Settings tab and the per-event Dismiss dropdown in the Health
  Monitor modal.
- New screenshots: dismiss-duration-dropdown.png and an updated
  health-suppression-settings.png.
- Pagefind integrated for client-side search; index is built on
  every CI deploy (not committed).
- RSS feeds: per-locale at /<locale>/rss.xml plus root /rss.xml
  for backward compat.
- Removed the dead app/[locale]/guides/[slug]/ route — every
  guide now has its own static page and no markdown source
  remains.
- Fixed orphan link /guides/nvidia -> /guides/nvidia-manual in
  docs/hardware/nvidia-host.
- Removed obsolete components (footer2, calendar, drawer).

Verified locally with `npm ci && npm run build`: 2804 files in
out/, 231 pages indexed by pagefind, root redirect intact, both
locale roots and the new Active Suppressions docs render OK.

web/app/[locale]/docs/create-vm/page.tsx

@@ -0,0 +1,237 @@
+import type { Metadata } from "next"
+import { getTranslations, getMessages, setRequestLocale } from "next-intl/server"
+import { Link } from "@/i18n/navigation"
+import Image from "next/image"
+import { ExternalLink, HardDrive, MonitorCog, Laptop } from "lucide-react"
+import { DocHeader } from "@/components/ui/doc-header"
+import { Callout } from "@/components/ui/callout"
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "docs.createVm.meta" })
+  return {
+    title: t("title"),
+    description: t("description"),
+    keywords: [
+      "proxmox create vm",
+      "proxmox synology vm",
+      "proxmox windows vm",
+      "proxmox truenas vm",
+      "proxmox unraid vm",
+      "proxmox openmediavault",
+      "proxmox vm wizard",
+      "proxmox nas vm",
+      "proxmox dsm",
+      "proxmenux create vm",
+    ],
+    alternates: { canonical: "https://proxmenux.com/docs/create-vm" },
+    openGraph: {
+      title: t("ogTitle"),
+      description: t("ogDescription"),
+      type: "article",
+      url: "https://proxmenux.com/docs/create-vm",
+      images: [
+        {
+          url: "/vm/vm-creation-menu.png",
+          width: 1200,
+          height: 630,
+          alt: t("ogImageAlt"),
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("twitterTitle"),
+      description: t("twitterDescription"),
+    },
+  }
+}
+
+type Route = {
+  key: string
+  title: string
+  icon: string
+  href: string
+  accent: string
+  iconBg: string
+  description: string
+  bullets: string[]
+}
+type StringItem = string
+type ScriptRowData = { path: string; role: string }
+type RelatedItem = { href: string; label: string; tail?: string }
+
+const ICONS: Record<string, React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false" }>> = {
+  HardDrive,
+  MonitorCog,
+  Laptop,
+}
+
+function ScriptRow({ path, role }: { path: string; role: string }) {
+  return (
+    <tr>
+      <td className="px-4 py-2">
+        <a
+          className="inline-flex items-center gap-1.5 text-blue-600 hover:underline"
+          href={`https://github.com/MacRimi/ProxMenux/blob/main/scripts/${path}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="font-mono">{path}</span>
+          <ExternalLink className="h-3.5 w-3.5 shrink-0 opacity-70" />
+        </a>
+      </td>
+      <td className="px-4 py-2 text-gray-700">{role}</td>
+    </tr>
+  )
+}
+
+export default async function CreateVMOverviewPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations({ locale, namespace: "docs.createVm" })
+
+  const messages = (await getMessages({ locale })) as unknown as {
+    docs: { createVm: {
+      families: { routes: Route[] }
+      afterPick: { items: StringItem[] }
+      scripts: { rows: ScriptRowData[] }
+      related: { items: RelatedItem[] }
+    } }
+  }
+  const routes = messages.docs.createVm.families.routes
+  const afterPickItems = messages.docs.createVm.afterPick.items
+  const scriptRows = messages.docs.createVm.scripts.rows
+  const relatedItems = messages.docs.createVm.related.items
+
+  const code = (chunks: React.ReactNode) => <code>{chunks}</code>
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+  const em = (chunks: React.ReactNode) => <em>{chunks}</em>
+  const osxLink = (chunks: React.ReactNode) => (
+    <a
+      href="https://osx-proxmox.com"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-blue-700 hover:underline inline-flex items-center gap-1"
+    >
+      {chunks}
+      <ExternalLink className="w-3 h-3" />
+    </a>
+  )
+
+  return (
+    <div>
+      <DocHeader
+        title={t("header.title")}
+        description={t("header.description")}
+        section={t("header.section")}
+        estimatedMinutes={2}
+        scriptPath="menus/create_vm_menu.sh"
+      />
+
+      <Callout variant="info" title={t("intro.title")}>
+        {t("intro.body")}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("opening.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("opening.body", { strong })}
+      </p>
+
+      <Image
+        src="/vm/vm-creation-menu.png"
+        alt={t("opening.imageAlt")}
+        width={900}
+        height={500}
+        className="rounded shadow-lg my-6"
+      />
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("families.heading")}</h2>
+      <p className="mb-6 text-gray-800 leading-relaxed">{t("families.intro")}</p>
+
+      <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-3 mb-8 not-prose">
+        {routes.map((route) => {
+          const Icon = ICONS[route.icon] || HardDrive
+          return (
+            <Link
+              key={route.key}
+              href={route.href}
+              className={`rounded-lg border-2 p-5 ${route.accent} flex flex-col transition-shadow hover:shadow-md`}
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <span className={`inline-flex h-9 w-9 items-center justify-center rounded-full ${route.iconBg}`}>
+                  <Icon className="h-5 w-5" aria-hidden="true" />
+                </span>
+                <h3 className="text-lg font-semibold text-gray-900 m-0">{route.title}</h3>
+              </div>
+              <p className="text-sm text-gray-800 mb-3">{route.description}</p>
+              <ul className="space-y-1 text-sm text-gray-700 list-disc pl-5 mb-0 marker:text-gray-400">
+                {route.bullets.map((b, i) => (
+                  <li key={i}>{b}</li>
+                ))}
+              </ul>
+            </Link>
+          )
+        })}
+      </div>
+
+      <Callout variant="info" title={t("community.title")}>
+        {t.rich("community.intro", { em, strong })}
+        <ul className="mt-3 list-disc list-inside space-y-1">
+          <li>{t.rich("community.macosRich", { strong, osxLink })}</li>
+          <li>{t.rich("community.othersRich", { strong })}</li>
+        </ul>
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("afterPick.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("afterPick.intro")}</p>
+      <ol className="list-decimal list-inside mb-4 text-gray-800 leading-relaxed space-y-2">
+        {afterPickItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`afterPick.items.${idx}`, { strong, code })}</li>
+        ))}
+      </ol>
+
+      <Callout variant="tip" title={t("afterPick.tipTitle")}>
+        {t.rich("afterPick.tipBody", { code })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("scripts.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("scripts.intro")}</p>
+      <div className="overflow-x-auto rounded-md border border-gray-200">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("scripts.headerScript")}</th>
+              <th className="px-4 py-2 font-semibold">{t("scripts.headerRole")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {scriptRows.map((row) => (
+              <ScriptRow key={row.path} path={row.path} role={row.role} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
+      <ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
+        {relatedItems.map((item) => (
+          <li key={item.href}>
+            <Link href={item.href} className="text-blue-600 hover:underline">
+              {item.label}
+            </Link>
+            {item.tail}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

web/app/[locale]/docs/create-vm/synology/page.tsx

@@ -0,0 +1,363 @@
+"use client"
+
+import Image from "next/image"
+import {
+  Wrench,
+  Target,
+  CheckCircle,
+  Github,
+  Server,
+  HardDrive,
+  Download,
+  Settings,
+  Cpu,
+  Zap,
+  Sliders,
+  ExternalLink,
+} from "lucide-react"
+import { useState } from "react"
+import { useTranslations, useMessages } from "next-intl"
+
+type LoaderKey = "arc" | "rr" | "tinycore"
+
+type StepMedia = { htmlBefore?: string; src: string; alt: string; caption: string }
+type Step = {
+  id: string
+  title: string
+  intro: string
+  outro?: string
+  loaders: Record<LoaderKey, StepMedia[]>
+}
+type LoaderLink = { name: string; url: string }
+type ConfigRow = { param: string; value?: string; options?: string }
+type DocLink = { label: string; url: string }
+
+function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
+  return (
+    <div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
+      <div className="w-full rounded-md overflow-hidden">
+        <Image
+          src={src || "/placeholder.svg"}
+          alt={alt}
+          width={768}
+          height={0}
+          style={{ height: "auto" }}
+          className="object-contain w-full"
+          sizes="(max-width: 768px) 100vw, 768px"
+        />
+      </div>
+      <span className="mt-2 text-sm text-gray-600">{caption}</span>
+    </div>
+  )
+}
+
+function StepNumber({ number }: { number: number }) {
+  return (
+    <div
+      className="inline-flex items-center justify-center w-8 h-8 mr-3 text-white bg-blue-500 rounded-full"
+      aria-hidden="true"
+    >
+      <span className="text-sm font-bold">{number}</span>
+    </div>
+  )
+}
+
+export default function Page() {
+  const [activeLoader, setActiveLoader] = useState<LoaderKey>("arc")
+  const t = useTranslations("docs.createVm.synology")
+
+  const messages = useMessages() as unknown as {
+    docs: { createVm: { synology: {
+      intro: { loaders: LoaderLink[]; simplifies: string[] }
+      config: { defaultRows: ConfigRow[]; advancedRows: ConfigRow[] }
+      diskSelection: { virtualItems: string[]; physicalItems: string[] }
+      vmCreation: { items: string[] }
+      steps: Step[]
+      tips: { docLinks: DocLink[] }
+    } } }
+  }
+  const introLoaders = messages.docs.createVm.synology.intro.loaders
+  const simplifies = messages.docs.createVm.synology.intro.simplifies
+  const defaultRows = messages.docs.createVm.synology.config.defaultRows
+  const advancedRows = messages.docs.createVm.synology.config.advancedRows
+  const virtualItems = messages.docs.createVm.synology.diskSelection.virtualItems
+  const physicalItems = messages.docs.createVm.synology.diskSelection.physicalItems
+  const vmCreationItems = messages.docs.createVm.synology.vmCreation.items
+  const steps = messages.docs.createVm.synology.steps
+  const docLinks = messages.docs.createVm.synology.tips.docLinks
+
+  const code = (chunks: React.ReactNode) => <code>{chunks}</code>
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">{t("title")}</h1>
+
+      <section className="mb-10">
+        <h2 className="text-2xl font-semibold mb-4 flex items-center">
+          <Server className="h-6 w-6 mr-2 text-blue-500" />
+          {t("intro.heading")}
+        </h2>
+        <p className="mb-4">{t("intro.intro")}</p>
+        <ul className="list-disc pl-5 mb-4">
+          {introLoaders.map((l) => (
+            <li key={l.name}>
+              <a
+                href={l.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline inline-flex items-center gap-1"
+              >
+                {l.name}
+                <ExternalLink className="w-3 h-3" />
+              </a>{" "}
+            </li>
+          ))}
+          <li>{t("intro.customLoader")}</li>
+        </ul>
+
+        <p className="mb-4">{t("intro.simplifiesIntro")}</p>
+        <ul className="list-disc pl-5 mb-4">
+          {simplifies.map((item, i) => (
+            <li key={i}>{item}</li>
+          ))}
+        </ul>
+
+        <div className="mt-8">
+          <h3 className="text-xl font-semibold mb-3 flex items-center">
+            <Settings className="h-5 w-5 mr-2 text-blue-500" />
+            {t("config.heading")}
+          </h3>
+          <p className="mb-3">{t("config.intro")}</p>
+
+          <h4 className="text-lg font-medium mt-12 mb-2 flex items-center">
+            <Zap className="h-5 w-5 mr-2 text-green-500" />
+            {t("config.defaultHeading")}
+          </h4>
+          <p className="mb-3">{t("config.defaultIntro")}</p>
+
+          <div className="overflow-x-auto mb-4">
+            <table className="min-w-full bg-white border border-gray-200">
+              <thead>
+                <tr>
+                  <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left">{t("config.headerParam")}</th>
+                  <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left">{t("config.headerValue")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {defaultRows.map((row) => (
+                  <tr key={row.param}>
+                    <td className="py-2 px-4 border-b border-gray-200">{row.param}</td>
+                    <td className="py-2 px-4 border-b border-gray-200">{row.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <p className="mb-4">{t("config.defaultOutro")}</p>
+
+          <h4 className="text-lg font-medium mt-12 mb-2 flex items-center">
+            <Sliders className="h-5 w-5 mr-2 text-orange-500" />
+            {t("config.advancedHeading")}
+          </h4>
+          <p className="mb-3">{t("config.advancedIntro")}</p>
+
+          <div className="overflow-x-auto mb-4">
+            <table className="min-w-full bg-white border border-gray-200">
+              <thead>
+                <tr>
+                  <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left">{t("config.headerParam")}</th>
+                  <th className="py-2 px-4 border-b border-gray-200 bg-gray-50 text-left">{t("config.headerOptions")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {advancedRows.map((row) => (
+                  <tr key={row.param}>
+                    <td className="py-2 px-4 border-b border-gray-200">{row.param}</td>
+                    <td className="py-2 px-4 border-b border-gray-200">{row.options}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <h3 className="text-xl font-semibold mb-3 flex items-center">
+            <HardDrive className="h-5 w-5 mr-2 text-blue-500" />
+            {t("diskSelection.heading")}
+          </h3>
+          <p className="mb-3">{t("diskSelection.intro")}</p>
+
+          <h4 className="text-lg font-medium mt-4 mb-2">{t("diskSelection.virtualHeading")}</h4>
+          <ul className="list-disc pl-5 mb-4">
+            {virtualItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`diskSelection.virtualItems.${idx}`, { strong })}</li>
+            ))}
+          </ul>
+
+          <h4 className="text-lg font-medium mt-4 mb-2">{t("diskSelection.physicalHeading")}</h4>
+          <ul className="list-disc pl-5 mb-4">
+            {physicalItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`diskSelection.physicalItems.${idx}`, { strong })}</li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="mt-8">
+          <h3 className="text-xl font-semibold mb-3 flex items-center">
+            <Download className="h-5 w-5 mr-2 text-blue-500" />
+            {t("loaderInstall.heading")}
+          </h3>
+          <p className="mb-3">{t("loaderInstall.intro1")}</p>
+          <p className="mb-4">
+            {t.rich("loaderInstall.intro2Rich", { strong })}
+          </p>
+          <p className="mb-4">
+            {t.rich("loaderInstall.customRich", { strong, code })}
+          </p>
+          <p className="mt-12 mb-4"></p>
+          <p>{t("loaderInstall.uploadIntro")}</p>
+
+          <ImageWithCaption
+            src="https://macrimi.github.io/ProxMenux/vm/synology/add_loader.png"
+            alt={t("loaderInstall.imageAlt")}
+            caption={t("loaderInstall.imageCaption")}
+          />
+        </div>
+
+        <div className="mt-16">
+          <h3 className="text-xl font-semibold mb-3 flex items-center">
+            <Cpu className="h-5 w-5 mr-2 text-blue-500" />
+            {t("vmCreation.heading")}
+          </h3>
+          <p className="mb-3">{t("vmCreation.intro")}</p>
+          <ul className="list-disc pl-5 mb-4">
+            {vmCreationItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`vmCreation.items.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-2xl font-semibold mt-24 mb-4 flex items-center">
+          <Wrench className="h-6 w-6 mr-2 text-blue-500" />
+          {t("stepGuide.heading")}
+        </h2>
+        <p className="mb-4">{t("stepGuide.intro")}</p>
+
+        <div className="bg-blue-50 p-4 rounded-lg mb-6">
+          <h3 className="text-lg font-semibold mb-2">{t("stepGuide.selectorHeading")}</h3>
+          <div className="flex space-x-4">
+            {(["arc", "rr", "tinycore"] as LoaderKey[]).map((key) => (
+              <button
+                key={key}
+                onClick={() => setActiveLoader(key)}
+                className={`px-4 py-2 rounded-md font-medium ${
+                  activeLoader === key
+                    ? "bg-blue-500 text-white"
+                    : "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+                }`}
+              >
+                {t(`stepGuide.loaderButtons.${key}`)}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {steps.map((step, stepIdx) => {
+        const media = step.loaders[activeLoader] || []
+        return (
+          <section key={step.id} className="mb-12 border-b pb-8">
+            <h2 className="text-xl font-semibold mb-4 flex items-center" id={step.id}>
+              <StepNumber number={stepIdx + 1} />
+              {step.title}
+            </h2>
+            <p className="mb-4">{step.intro}</p>
+
+            <div className="mt-6">
+              <div className="flex flex-col space-y-8">
+                {media.map((m, idx) => (
+                  <div key={idx}>
+                    {m.htmlBefore && (
+                      <p className="mt-16 mb-2">
+                        {t.rich(`steps.${stepIdx}.loaders.${activeLoader}.${idx}.htmlBefore`, { strong, code })}
+                      </p>
+                    )}
+                    <ImageWithCaption src={m.src} alt={m.alt} caption={m.caption} />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {step.outro && <p className="mt-4">{step.outro}</p>}
+          </section>
+        )
+      })}
+
+      <section className="mb-8">
+        <h2 className="text-xl font-semibold mb-4 flex items-center">
+          <CheckCircle className="h-6 w-6 mr-3 text-green-500" />
+          {t("dsmInstall.heading")}
+        </h2>
+        <p className="mb-4">{t("dsmInstall.intro")}</p>
+        <div className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm mb-4">
+          <code>https://finds.synology.com</code>
+        </div>
+        <p className="mb-6">{t("dsmInstall.afterCode")}</p>
+        <div className="flex flex-col space-y-8">
+          <ImageWithCaption
+            src="https://macrimi.github.io/ProxMenux/vm/synology/install_DSM.png"
+            alt={t("dsmInstall.setupAlt")}
+            caption={t("dsmInstall.setupCaption")}
+          />
+          <p className="mt-8 mb-8">{t("dsmInstall.patience")}</p>
+          <ImageWithCaption
+            src="https://macrimi.github.io/ProxMenux/vm/synology/finish_install_DSM.png"
+            alt={t("dsmInstall.finishAlt")}
+            caption={t("dsmInstall.finishCaption")}
+          />
+        </div>
+      </section>
+
+      <section className="mb-8">
+        <h2 className="text-2xl font-semibold mt-20 mb-4 flex items-center">
+          <Target className="h-6 w-6 mr-2 text-blue-500" />
+          {t("tips.heading")}
+        </h2>
+        <ul className="list-disc pl-5 space-y-4">
+          <li>{t("tips.introItem")}</li>
+
+          <div className="flex flex-wrap gap-4 mt-2">
+            {docLinks.map((dl) => (
+              <a
+                key={dl.url}
+                href={dl.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
+              >
+                <Github className="h-5 w-5 mr-2" />
+                {dl.label}
+              </a>
+            ))}
+          </div>
+
+          <li>{t("tips.olderModels")}</li>
+
+          <div className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4">
+            <p className="font-semibold">{t("tips.updateLabel")}</p>
+            <p>{t("tips.updateBody")}</p>
+          </div>
+
+          <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4">
+            <p className="font-semibold">{t("tips.importantLabel")}</p>
+            <p>{t("tips.importantBody")}</p>
+          </div>
+        </ul>
+      </section>
+    </div>
+  )
+}

web/app/[locale]/docs/create-vm/system-linux/page.tsx

@@ -0,0 +1,333 @@
+import type { Metadata } from "next"
+import { getTranslations, getMessages, setRequestLocale } from "next-intl/server"
+import { Link } from "@/i18n/navigation"
+import Image from "next/image"
+import { Server, HardDrive } from "lucide-react"
+import { DocHeader } from "@/components/ui/doc-header"
+import { Callout } from "@/components/ui/callout"
+import CopyableCode from "@/components/CopyableCode"
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemLinux.meta" })
+  return {
+    title: t("title"),
+    description: t("description"),
+    openGraph: {
+      title: t("ogTitle"),
+      description: t("ogDescription"),
+      type: "article",
+      url: "https://macrimi.github.io/ProxMenux/docs/create-vm/system-linux",
+      images: [
+        {
+          url: "/vm/menu_linux.png",
+          width: 1200,
+          height: 630,
+          alt: t("ogImageAlt"),
+        },
+      ],
+    },
+  }
+}
+
+type ConfigRow = { param: string; value?: string; valueRich?: string; options?: string; optionsRich?: string }
+type Distro = { name: string; variants: string[] }
+type StringItem = string
+type RelatedItem = { href: string; label: string; tail?: string }
+
+export default async function SystemLinuxPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemLinux" })
+
+  const messages = (await getMessages({ locale })) as unknown as {
+    docs: { createVm: { systemLinux: {
+      config: { defaultRows: ConfigRow[]; advancedRows: ConfigRow[] }
+      storagePlan: { virtualDiskItems: StringItem[]; importDiskItems: StringItem[]; pciItems: StringItem[] }
+      installOptions: { distros: Distro[] }
+      endToEnd: { items: StringItem[] }
+      postInstall: { trimItems: StringItem[] }
+      related: { items: RelatedItem[] }
+    } } }
+  }
+  const defaultRows = messages.docs.createVm.systemLinux.config.defaultRows
+  const advancedRows = messages.docs.createVm.systemLinux.config.advancedRows
+  const virtualDiskItems = messages.docs.createVm.systemLinux.storagePlan.virtualDiskItems
+  const importDiskItems = messages.docs.createVm.systemLinux.storagePlan.importDiskItems
+  const pciItems = messages.docs.createVm.systemLinux.storagePlan.pciItems
+  const distros = messages.docs.createVm.systemLinux.installOptions.distros
+  const endToEndItems = messages.docs.createVm.systemLinux.endToEnd.items
+  const trimItems = messages.docs.createVm.systemLinux.postInstall.trimItems
+  const relatedItems = messages.docs.createVm.systemLinux.related.items
+
+  const code = (chunks: React.ReactNode) => <code>{chunks}</code>
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+  const em = (chunks: React.ReactNode) => <em>{chunks}</em>
+  const gpuLink = (chunks: React.ReactNode) => (
+    <a href="/docs/hardware/gpu-vm-passthrough" className="text-blue-600 hover:underline">{chunks}</a>
+  )
+
+  return (
+    <div>
+      <DocHeader
+        title={t("header.title")}
+        description={t("header.description")}
+        section={t("header.section")}
+        estimatedMinutes={15}
+        scriptPath="vm/select_linux_iso.sh"
+      />
+
+      <Callout variant="info" title={t("intro.title")}>
+        {t("intro.body")}
+      </Callout>
+
+      <div className="flex flex-col items-center my-6">
+        <div className="w-full max-w-[768px] overflow-hidden rounded-md border border-gray-200">
+          <Image
+            src="/vm/menu_linux.png"
+            alt={t("image.alt")}
+            width={768}
+            height={0}
+            style={{ height: "auto" }}
+            className="w-full object-contain"
+            sizes="(max-width: 768px) 100vw, 768px"
+          />
+        </div>
+        <span className="mt-2 text-sm text-gray-600">{t("image.caption")}</span>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("config.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("config.intro")}</p>
+
+      <h3 className="text-xl font-semibold mt-6 mb-3 text-gray-900">{t("config.defaultHeading")}</h3>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerValue")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {defaultRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">
+                  {row.valueRich ? t.rich(`config.defaultRows.${idx}.valueRich`, { code }) : row.value}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h3 className="text-xl font-semibold mt-8 mb-3 text-gray-900">{t("config.advancedHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t("config.advancedIntro")}</p>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerOptions")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {advancedRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">
+                  {row.optionsRich ? t.rich(`config.advancedRows.${idx}.optionsRich`, { code }) : row.options}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("storagePlan.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("storagePlan.body", { strong })}
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.virtualDiskTitle")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {virtualDiskItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.virtualDiskItems.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.importDiskTitle")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {importDiskItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.importDiskItems.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 md:col-span-2">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.pciTitle")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {pciItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.pciItems.${idx}`, { em, code })}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <Callout variant="info" title={t("storagePlan.resetTitle")}>
+        {t.rich("storagePlan.resetBody", { strong })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("gpu.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("gpu.body", { gpuLink })}
+      </p>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("autoFeatures.heading")}</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.efiTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t("autoFeatures.efiBody")}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.isoTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t.rich("autoFeatures.isoBody", { code })}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.guestTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t("autoFeatures.guestBody")}</p>
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("installOptions.heading")}</h2>
+
+      <section className="mt-6">
+        <div className="flex items-center gap-3 mb-3">
+          <Server className="h-8 w-8 text-blue-500" />
+          <h3 className="text-xl font-semibold text-gray-900 m-0">{t("installOptions.officialHeading")}</h3>
+        </div>
+        <p className="mb-4 text-gray-800 leading-relaxed">
+          {t.rich("installOptions.officialBody", { code })}
+        </p>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 my-4">
+          {distros.map((d) => (
+            <div key={d.name} className="rounded-md border border-gray-200 bg-white p-3">
+              <div className="text-sm font-semibold text-gray-900">{d.name}</div>
+              <ul className="mt-1 text-xs text-gray-600 space-y-0.5">
+                {d.variants.map((v) => (
+                  <li key={v}>{v}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4">
+          <div className="flex flex-col items-center">
+            <div className="w-full max-w-[768px] overflow-hidden rounded-md border border-gray-200">
+              <Image src="/vm/distro_linux.png" alt={t("installOptions.officialImageAlt")} width={768} height={0} style={{ height: "auto" }} className="w-full object-contain" sizes="(max-width: 768px) 100vw, 768px" />
+            </div>
+            <span className="mt-2 text-sm text-gray-600">{t("installOptions.officialImageCaption")}</span>
+          </div>
+        </div>
+      </section>
+
+      <section className="mt-10">
+        <div className="flex items-center gap-3 mb-3">
+          <HardDrive className="h-8 w-8 text-blue-500" />
+          <h3 className="text-xl font-semibold text-gray-900 m-0">{t("installOptions.localHeading")}</h3>
+        </div>
+        <p className="mb-4 text-gray-800 leading-relaxed">
+          {t.rich("installOptions.localBody", { code })}
+        </p>
+        <div className="flex flex-col items-center">
+          <div className="w-full max-w-[768px] overflow-hidden rounded-md border border-gray-200">
+            <Image src="/vm/local-store.png" alt={t("installOptions.localImageAlt")} width={768} height={0} style={{ height: "auto" }} className="w-full object-contain" sizes="(max-width: 768px) 100vw, 768px" />
+          </div>
+          <span className="mt-2 text-sm text-gray-600">{t("installOptions.localImageCaption")}</span>
+        </div>
+      </section>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("endToEnd.heading")}</h2>
+      <ol className="list-decimal pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {endToEndItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`endToEnd.items.${idx}`, { code })}</li>
+        ))}
+      </ol>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("postInstall.heading")}</h2>
+
+      <h3 className="text-lg font-semibold mt-6 mb-3 text-gray-900">{t("postInstall.guestAgentHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t("postInstall.guestAgentBody")}</p>
+
+      <div className="space-y-4 mb-6">
+        <div>
+          <p className="text-sm font-semibold text-gray-900 mb-1">{t("postInstall.debian")}</p>
+          <CopyableCode code={`sudo apt update && sudo apt install qemu-guest-agent -y
+sudo systemctl enable --now qemu-guest-agent`} />
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-gray-900 mb-1">{t("postInstall.fedora")}</p>
+          <CopyableCode code={`sudo dnf install qemu-guest-agent -y
+sudo systemctl enable --now qemu-guest-agent`} />
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-gray-900 mb-1">{t("postInstall.arch")}</p>
+          <CopyableCode code={`sudo pacman -S qemu-guest-agent
+sudo systemctl enable --now qemu-guest-agent`} />
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-gray-900 mb-1">{t("postInstall.opensuse")}</p>
+          <CopyableCode code={`sudo zypper install qemu-guest-agent
+sudo systemctl enable --now qemu-guest-agent`} />
+        </div>
+      </div>
+
+      <h3 className="text-lg font-semibold mt-8 mb-3 text-gray-900">{t("postInstall.virtioHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">
+        {t.rich("postInstall.virtioBody", { code })}
+      </p>
+      <Callout variant="warning" title={t("postInstall.virtioWarnTitle")}>
+        {t("postInstall.virtioWarnBody")}
+      </Callout>
+
+      <h3 className="text-lg font-semibold mt-8 mb-3 text-gray-900">{t("postInstall.trimHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">
+        {t.rich("postInstall.trimBody", { code })}
+      </p>
+      <ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {trimItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`postInstall.trimItems.${idx}`, { code })}</li>
+        ))}
+      </ul>
+
+      <h3 className="text-lg font-semibold mt-8 mb-3 text-gray-900">{t("postInstall.balloonHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">
+        {t.rich("postInstall.balloonBody", { code })}
+      </p>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
+      <ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
+        {relatedItems.map((item) => (
+          <li key={item.href}>
+            <Link href={item.href} className="text-blue-600 hover:underline">
+              {item.label}
+            </Link>
+            {item.tail}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

web/app/[locale]/docs/create-vm/system-nas/page.tsx

@@ -0,0 +1,193 @@
+import type { Metadata } from "next"
+import { getTranslations, getMessages, setRequestLocale } from "next-intl/server"
+import { Link } from "@/i18n/navigation"
+import Image from "next/image"
+import { ArrowRight, ExternalLink, HardDrive, Database, Server, MonitorIcon, Github } from "lucide-react"
+import { DocHeader } from "@/components/ui/doc-header"
+import { Callout } from "@/components/ui/callout"
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemNas.meta" })
+  return {
+    title: t("title"),
+    description: t("description"),
+    openGraph: {
+      title: t("ogTitle"),
+      description: t("ogDescription"),
+      type: "article",
+      url: "https://macrimi.github.io/ProxMenux/docs/create-vm/system-nas",
+      images: [
+        {
+          url: "/vm/system-nas-menu.png",
+          width: 1200,
+          height: 630,
+          alt: t("ogImageAlt"),
+        },
+      ],
+    },
+  }
+}
+
+type NASCard = {
+  name: string
+  tagline: string
+  icon: string
+  base: string
+  fileSystem: string
+  href: string
+  flow: "loader" | "auto-iso" | "dedicated"
+  external?: boolean
+}
+type RelatedItem = { href: string; label: string; tail?: string }
+
+const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  HardDrive,
+  Database,
+  Server,
+  MonitorIcon,
+}
+
+const FLOW_CLS: Record<string, string> = {
+  loader: "bg-purple-100 text-purple-800 border-purple-200",
+  "auto-iso": "bg-blue-100 text-blue-800 border-blue-200",
+  dedicated: "bg-indigo-100 text-indigo-800 border-indigo-200",
+}
+
+export default async function SystemNASPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemNas" })
+
+  const messages = (await getMessages({ locale })) as unknown as {
+    docs: { createVm: { systemNas: {
+      supported: { cards: NASCard[] }
+      related: { items: RelatedItem[] }
+    } } }
+  }
+  const cards = messages.docs.createVm.systemNas.supported.cards
+  const relatedItems = messages.docs.createVm.systemNas.related.items
+
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+  const umbrelLink = (chunks: React.ReactNode) => (
+    <a
+      href="https://community-scripts.github.io/ProxmoxVE/scripts?id=umbrel-os-vm"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-blue-600 hover:underline inline-flex items-center gap-1 ml-1"
+    >
+      <Github className="h-3.5 w-3.5" /> {chunks}
+    </a>
+  )
+
+  return (
+    <div>
+      <DocHeader
+        title={t("header.title")}
+        description={t("header.description")}
+        section={t("header.section")}
+        estimatedMinutes={3}
+        scriptPath="vm/select_nas_iso.sh"
+      />
+
+      <Callout variant="info" title={t("intro.title")}>
+        {t("intro.body")}
+      </Callout>
+
+      <div className="flex flex-col items-center my-6">
+        <div className="w-full max-w-[768px] overflow-hidden rounded-md border border-gray-200">
+          <Image
+            src="/vm/system-nas-menu.png"
+            alt={t("image.alt")}
+            width={768}
+            height={0}
+            style={{ height: "auto" }}
+            className="w-full object-contain"
+            sizes="(max-width: 768px) 100vw, 768px"
+          />
+        </div>
+        <span className="mt-2 text-sm text-gray-600">{t("image.caption")}</span>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("supported.heading")}</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        {cards.map((card) => {
+          const Icon = ICONS[card.icon] || HardDrive
+          const flowLabel = t(`flowBadges.${card.flow}`)
+          const cls = "group block rounded-lg border border-gray-200 bg-white p-5 transition-all hover:border-blue-300 hover:shadow-md"
+          const inner = (
+            <div className="flex items-start gap-4">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600">
+                <Icon className="h-5 w-5" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <h3 className="text-base font-semibold text-gray-900">{card.name}</h3>
+                <p className="mt-1 text-sm text-gray-600 leading-relaxed">{card.tagline}</p>
+                <div className="mt-3 flex flex-wrap gap-1.5">
+                  <span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${FLOW_CLS[card.flow]}`}>
+                    {flowLabel}
+                  </span>
+                </div>
+                <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-600">
+                  <div>
+                    <dt className="font-semibold text-gray-700">{t("labels.base")}</dt>
+                    <dd>{card.base}</dd>
+                  </div>
+                  <div>
+                    <dt className="font-semibold text-gray-700">{t("labels.fileSystem")}</dt>
+                    <dd>{card.fileSystem}</dd>
+                  </div>
+                </dl>
+                <span className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:text-blue-700">
+                  {t("labels.viewDetails")}
+                  {card.external ? (
+                    <ExternalLink className="h-3.5 w-3.5" />
+                  ) : (
+                    <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+                  )}
+                </span>
+              </div>
+            </div>
+          )
+          return card.external ? (
+            <a key={card.name} href={card.href} target="_blank" rel="noopener noreferrer" className={cls}>
+              {inner}
+            </a>
+          ) : (
+            <Link key={card.name} href={card.href} className={cls}>
+              {inner}
+            </Link>
+          )
+        })}
+      </div>
+
+      <Callout variant="info" title={t("umbrel.title")}>
+        {t.rich("umbrel.bodyRich", { strong, umbrelLink })}
+      </Callout>
+
+      <Callout variant="tip" title={t("zfsMem.title")}>
+        {t.rich("zfsMem.bodyRich", { strong })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
+      <ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
+        {relatedItems.map((item) => (
+          <li key={item.href}>
+            <Link href={item.href} className="text-blue-600 hover:underline">
+              {item.label}
+            </Link>
+            {item.tail}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

web/app/[locale]/docs/create-vm/system-nas/synology/page.tsx

@@ -0,0 +1,427 @@
+"use client"
+
+import Image from "next/image"
+import { Link } from "@/i18n/navigation"
+import { useState } from "react"
+import { Github, ExternalLink } from "lucide-react"
+import { useTranslations, useMessages } from "next-intl"
+import { DocHeader } from "@/components/ui/doc-header"
+import { Callout } from "@/components/ui/callout"
+
+type LoaderKey = "arc" | "rr" | "tinycore"
+
+type LoaderLink = { name: string; url: string }
+type DefaultRow = { param: string; valueRich: string }
+type AdvancedRow = { param: string; optionsRich: string }
+type ItemAltCaption = { alt: string; caption: string }
+type DocLink = { label: string; url: string }
+type RelatedItem = { href: string; label: string; tail: string }
+
+export default function SynologyPage() {
+  const [activeLoader, setActiveLoader] = useState<LoaderKey>("arc")
+  const t = useTranslations("docs.createVm.systemNas.synology")
+  const messages = useMessages() as unknown as {
+    docs: {
+      createVm: {
+        systemNas: {
+          synology: {
+            supportedLoaders: { loaders: LoaderLink[] }
+            config: { defaultRowsRich: DefaultRow[]; advancedRowsRich: AdvancedRow[] }
+            storagePlan: { virtualItemsRich: string[]; importItemsRich: string[]; pciItemsRich: string[] }
+            vmCreation: { itemsRich: string[] }
+            step3: { arc: ItemAltCaption[]; rr: ItemAltCaption[]; tinycore: ItemAltCaption[] }
+            step4: { rr: ItemAltCaption[]; tinycore: ItemAltCaption[] }
+            tips: { docLinks: DocLink[] }
+            related: { itemsRich: RelatedItem[] }
+          }
+        }
+      }
+    }
+  }
+  const s = messages.docs.createVm.systemNas.synology
+  const loaders = s.supportedLoaders.loaders
+  const defaultRows = s.config.defaultRowsRich
+  const advancedRows = s.config.advancedRowsRich
+  const virtualItems = s.storagePlan.virtualItemsRich
+  const importItems = s.storagePlan.importItemsRich
+  const pciItems = s.storagePlan.pciItemsRich
+  const vmCreationItems = s.vmCreation.itemsRich
+  const step3Arc = s.step3.arc
+  const step3Rr = s.step3.rr
+  const step3Tc = s.step3.tinycore
+  const step4Rr = s.step4.rr
+  const step4Tc = s.step4.tinycore
+  const docLinks = s.tips.docLinks
+  const relatedItems = s.related.itemsRich
+
+  const code = (chunks: React.ReactNode) => <code>{chunks}</code>
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+  const em = (chunks: React.ReactNode) => <em>{chunks}</em>
+  const gpuLink = (chunks: React.ReactNode) => (
+    <a href="/docs/hardware/gpu-vm-passthrough" className="text-blue-600 hover:underline">
+      {chunks}
+    </a>
+  )
+
+  return (
+    <div>
+      <DocHeader
+        title={t("header.title")}
+        description={t("header.description")}
+        section={t("header.section")}
+        estimatedMinutes={30}
+        scriptPath="vm/synology.sh"
+      />
+
+      <Callout variant="info" title={t("whatThisDoes.title")}>
+        {t.rich("whatThisDoes.bodyRich", { strong })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("supportedLoaders.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("supportedLoaders.intro")}</p>
+      <ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {loaders.map((l) => (
+          <li key={l.url}>
+            <a
+              href={l.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline inline-flex items-center gap-1"
+            >
+              {l.name} <ExternalLink className="h-3 w-3" />
+            </a>
+          </li>
+        ))}
+        <li>{t.rich("supportedLoaders.customRich", { strong, code })}</li>
+      </ul>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("config.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("config.intro")}</p>
+
+      <h3 className="text-xl font-semibold mt-6 mb-3 text-gray-900">{t("config.defaultHeading")}</h3>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerValue")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {defaultRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">{t.rich(`config.defaultRowsRich.${idx}.valueRich`, { code })}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h3 className="text-xl font-semibold mt-8 mb-3 text-gray-900">{t("config.advancedHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t("config.advancedIntro")}</p>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerOptions")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {advancedRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">{t.rich(`config.advancedRowsRich.${idx}.optionsRich`, { code })}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("storagePlan.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("storagePlan.introRich", { strong })}</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.virtualHeading")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {virtualItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.virtualItemsRich.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.importHeading")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {importItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.importItemsRich.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 md:col-span-2">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.pciHeading")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {pciItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.pciItemsRich.${idx}`, { code, em })}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <Callout variant="info" title={t("storagePlan.resetCalloutTitle")}>
+        {t.rich("storagePlan.resetCalloutBodyRich", { strong })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("gpu.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("gpu.bodyRich", { link: gpuLink })}</p>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("loaderInstall.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("loaderInstall.intro1Rich", { strong })}</p>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("loaderInstall.intro2Rich", { strong, code })}</p>
+      <p className="mb-2 text-gray-800 leading-relaxed">{t("loaderInstall.uploadIntro")}</p>
+      <ImageCaption src="/vm/synology/add_loader.png" alt={t("loaderInstall.imageAlt")} caption={t("loaderInstall.imageCaption")} />
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("vmCreation.heading")}</h2>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t.rich("vmCreation.introRich", { code })}</p>
+      <ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {vmCreationItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`vmCreation.itemsRich.${idx}`, { code, strong })}</li>
+        ))}
+      </ul>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("stepByStep.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("stepByStep.intro")}</p>
+
+      <Callout variant="warning" title={t("stepByStep.warnCalloutTitle")}>
+        {t("stepByStep.warnCalloutBody")}
+      </Callout>
+
+      <div className="flex flex-wrap gap-2 my-6">
+        {(["arc", "rr", "tinycore"] as LoaderKey[]).map((k) => (
+          <button
+            key={k}
+            onClick={() => setActiveLoader(k)}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeLoader === k
+                ? "bg-blue-600 text-white"
+                : "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+            }`}
+          >
+            {t(`loaderLabels.${k}`)}
+          </button>
+        ))}
+      </div>
+
+      <StepSection n={1} title={t("step1.title")} stepLabel={t("stepBadge")}>
+        <p className="mb-4 text-gray-800 leading-relaxed">{t("step1.intro")}</p>
+
+        {activeLoader === "arc" && (
+          <div className="flex flex-col space-y-8">
+            <p className="text-gray-800 leading-relaxed">{t.rich("step1.arc.webRich", { strong, code })}</p>
+            <ImageCaption src="/vm/synology/arc/arc_1_0_1.png" alt={t("step1.arc.webAlt")} caption={t("step1.arc.webCaption")} />
+            <p className="text-gray-800 leading-relaxed">{t.rich("step1.arc.termRich", { strong })}</p>
+            <ImageCaption src="/vm/synology/arc/arc_1_1_1.png" alt={t("step1.arc.termAlt")} caption={t("step1.arc.termCaption")} />
+          </div>
+        )}
+
+        {activeLoader === "rr" && (
+          <div className="flex flex-col space-y-8">
+            <p className="text-gray-800 leading-relaxed">{t.rich("step1.rr.webRich", { strong, code })}</p>
+            <ImageCaption src="/vm/synology/rr/rr_2_0_2.png" alt={t("step1.rr.webAlt")} caption={t("step1.rr.webCaption")} />
+            <p className="text-gray-800 leading-relaxed">{t.rich("step1.rr.termRich", { strong, code })}</p>
+            <ImageCaption src="/vm/synology/rr/rr_2_1_1.png" alt={t("step1.rr.termAlt")} caption={t("step1.rr.termCaption")} />
+          </div>
+        )}
+
+        {activeLoader === "tinycore" && (
+          <div className="flex flex-col space-y-8">
+            <p className="text-gray-800 leading-relaxed">{t.rich("step1.tinycore.webRich", { strong, code })}</p>
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_0_1.png" alt={t("step1.tinycore.webAlt")} caption={t("step1.tinycore.webCaption")} />
+            <p className="text-gray-800 leading-relaxed">{t.rich("step1.tinycore.termRich", { strong })}</p>
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_1_1.png" alt={t("step1.tinycore.termAlt")} caption={t("step1.tinycore.termCaption")} />
+          </div>
+        )}
+      </StepSection>
+
+      <StepSection n={2} title={t("step2.title")} stepLabel={t("stepBadge")}>
+        <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("step2.introRich", { strong })}</p>
+        {activeLoader === "arc" && (
+          <ImageCaption src="/vm/synology/arc/arc_1_2_1.png" alt={t("step2.arc.alt")} caption={t("step2.arc.caption")} />
+        )}
+        {activeLoader === "rr" && (
+          <ImageCaption src="/vm/synology/rr/rr_2_2_1.png" alt={t("step2.rr.alt")} caption={t("step2.rr.caption")} />
+        )}
+        {activeLoader === "tinycore" && (
+          <ImageCaption src="/vm/synology/tinycore/tinycore_3_2_1.png" alt={t("step2.tinycore.alt")} caption={t("step2.tinycore.caption")} />
+        )}
+      </StepSection>
+
+      <StepSection n={3} title={t("step3.title")} stepLabel={t("stepBadge")}>
+        <p className="mb-4 text-gray-800 leading-relaxed">{t("step3.intro")}</p>
+        {activeLoader === "arc" && (
+          <div className="flex flex-col space-y-10">
+            <ImageCaption src="/vm/synology/arc/arc_1_3_1.png" alt={step3Arc[0].alt} caption={step3Arc[0].caption} />
+            <ImageCaption src="/vm/synology/arc/arc_1_3_2.png" alt={step3Arc[1].alt} caption={step3Arc[1].caption} />
+          </div>
+        )}
+        {activeLoader === "rr" && (
+          <div className="flex flex-col space-y-10">
+            <ImageCaption src="/vm/synology/rr/rr_2_3_1.png" alt={step3Rr[0].alt} caption={step3Rr[0].caption} />
+            <ImageCaption src="/vm/synology/rr/rr_2_3_2.png" alt={step3Rr[1].alt} caption={step3Rr[1].caption} />
+            <ImageCaption src="/vm/synology/rr/rr_2_3_3.png" alt={step3Rr[2].alt} caption={step3Rr[2].caption} />
+          </div>
+        )}
+        {activeLoader === "tinycore" && (
+          <div className="flex flex-col space-y-10">
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_3_1.png" alt={step3Tc[0].alt} caption={step3Tc[0].caption} />
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_3_2.png" alt={step3Tc[1].alt} caption={step3Tc[1].caption} />
+          </div>
+        )}
+      </StepSection>
+
+      <StepSection n={4} title={t("step4.title")} stepLabel={t("stepBadge")}>
+        <p className="mb-4 text-gray-800 leading-relaxed">{t("step4.intro")}</p>
+        {activeLoader === "arc" && (
+          <div className="flex flex-col space-y-10">
+            <p className="text-gray-800 leading-relaxed">{t.rich("step4.arc.autoRich", { strong })}</p>
+            <ImageCaption src="/vm/synology/arc/arc_1_4_1.png" alt={t("step4.arc.autoAlt")} caption={t("step4.arc.autoCaption")} />
+            <p className="text-gray-800 leading-relaxed">{t("step4.arc.manualRich")}</p>
+            <ImageCaption src="/vm/synology/arc/arc_1_4_2.png" alt={t("step4.arc.manualAlt")} caption={t("step4.arc.manualCaption")} />
+            <ImageCaption src="/vm/synology/arc/arc_1_4_3.png" alt={t("step4.arc.snMacAlt")} caption={t("step4.arc.snMacCaption")} />
+            <ImageCaption src="/vm/synology/arc/arc_1_4_4.png" alt={t("step4.arc.portmapAlt")} caption={t("step4.arc.portmapCaption")} />
+            <ImageCaption src="/vm/synology/arc/arc_1_4_5.png" alt={t("step4.arc.addonsAlt")} caption={t("step4.arc.addonsCaption")} />
+          </div>
+        )}
+        {activeLoader === "rr" && (
+          <div className="flex flex-col space-y-10">
+            <ImageCaption src="/vm/synology/rr/rr_2_4_1.png" alt={step4Rr[0].alt} caption={step4Rr[0].caption} />
+            <ImageCaption src="/vm/synology/rr/rr_2_4_2.png" alt={step4Rr[1].alt} caption={step4Rr[1].caption} />
+            <ImageCaption src="/vm/synology/rr/rr_2_4_3.png" alt={step4Rr[2].alt} caption={step4Rr[2].caption} />
+          </div>
+        )}
+        {activeLoader === "tinycore" && (
+          <div className="flex flex-col space-y-10">
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_4_1.png" alt={step4Tc[0].alt} caption={step4Tc[0].caption} />
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_4_2.png" alt={step4Tc[1].alt} caption={step4Tc[1].caption} />
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_4_3.png" alt={step4Tc[2].alt} caption={step4Tc[2].caption} />
+            <ImageCaption src="/vm/synology/tinycore/tinycore_3_4_4.png" alt={step4Tc[3].alt} caption={step4Tc[3].caption} />
+          </div>
+        )}
+      </StepSection>
+
+      <StepSection n={5} title={t("step5.title")} stepLabel={t("stepBadge")}>
+        <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("step5.introRich", { strong })}</p>
+        {activeLoader === "arc" && (
+          <ImageCaption src="/vm/synology/arc/arc_1_5_1.png" alt={t("step5.arc.alt")} caption={t("step5.arc.caption")} />
+        )}
+        {activeLoader === "rr" && (
+          <ImageCaption src="/vm/synology/rr/rr_2_5_1.png" alt={t("step5.rr.alt")} caption={t("step5.rr.caption")} />
+        )}
+        {activeLoader === "tinycore" && (
+          <ImageCaption src="/vm/synology/tinycore/tinycore_3_5_1.png" alt={t("step5.tinycore.alt")} caption={t("step5.tinycore.caption")} />
+        )}
+      </StepSection>
+
+      <StepSection n={6} title={t("step6.title")} stepLabel={t("stepBadge")}>
+        <p className="mb-4 text-gray-800 leading-relaxed">{t("step6.intro")}</p>
+        {activeLoader === "arc" && (
+          <ImageCaption src="/vm/synology/arc/arc_1_6_1.png" alt={t("step6.arc.alt")} caption={t("step6.arc.caption")} />
+        )}
+        {activeLoader === "rr" && (
+          <ImageCaption src="/vm/synology/rr/rr_2_6_1.png" alt={t("step6.rr.alt")} caption={t("step6.rr.caption")} />
+        )}
+        {activeLoader === "tinycore" && (
+          <ImageCaption src="/vm/synology/tinycore/tinycore_3_6_1.png" alt={t("step6.tinycore.alt")} caption={t("step6.tinycore.caption")} />
+        )}
+      </StepSection>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("dsmInstall.heading")}</h2>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t("dsmInstall.intro")}</p>
+      <pre className="bg-gray-100 p-3 rounded-md overflow-x-auto text-sm font-mono mb-4">
+        <code>https://finds.synology.com</code>
+      </pre>
+      <p className="mb-6 text-gray-800 leading-relaxed">{t("dsmInstall.afterCode")}</p>
+      <div className="flex flex-col space-y-10">
+        <ImageCaption src="/vm/synology/install_DSM.png" alt={t("dsmInstall.setupAlt")} caption={t("dsmInstall.setupCaption")} />
+        <p className="text-gray-800 leading-relaxed">{t("dsmInstall.patience")}</p>
+        <ImageCaption src="/vm/synology/finish_install_DSM.png" alt={t("dsmInstall.finishAlt")} caption={t("dsmInstall.finishCaption")} />
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("tips.heading")}</h2>
+
+      <Callout variant="tip" title={t("tips.recentTitle")}>
+        {t("tips.recentBody")}
+      </Callout>
+
+      <Callout variant="info" title={t("tips.updateTitle")}>
+        {t("tips.updateBody")}
+      </Callout>
+
+      <Callout variant="warning" title={t("tips.warnTitle")}>
+        {t("tips.warnBody")}
+      </Callout>
+
+      <h3 className="text-lg font-semibold mt-8 mb-3 text-gray-900">{t("tips.docsHeading")}</h3>
+      <div className="flex flex-wrap gap-2">
+        {docLinks.map((dl) => (
+          <a
+            key={dl.url}
+            href={dl.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
+          >
+            <Github className="h-4 w-4 mr-2" />
+            {dl.label}
+          </a>
+        ))}
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
+      <ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
+        {relatedItems.map((item) => (
+          <li key={item.href}>
+            <Link href={item.href} className="text-blue-600 hover:underline">
+              {item.label}
+            </Link>
+            {item.tail}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function ImageCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
+  return (
+    <div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
+      <div className="w-full overflow-hidden rounded-md border border-gray-200">
+        <Image
+          src={src}
+          alt={alt}
+          width={768}
+          height={0}
+          style={{ height: "auto" }}
+          className="w-full object-contain"
+          sizes="(max-width: 768px) 100vw, 768px"
+        />
+      </div>
+      <span className="mt-2 text-sm text-gray-600">{caption}</span>
+    </div>
+  )
+}
+
+function StepSection({ n, title, stepLabel, children }: { n: number; title: string; stepLabel: string; children: React.ReactNode }) {
+  return (
+    <section className="mt-10 border-b border-gray-200 pb-8">
+      <div className="flex items-center gap-3 mb-4">
+        <span className="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-0.5 text-xs font-semibold text-blue-800">
+          {stepLabel} {n}
+        </span>
+        <h3 className="text-xl font-semibold text-gray-900 m-0">{title}</h3>
+      </div>
+      {children}
+    </section>
+  )
+}

web/app/[locale]/docs/create-vm/system-nas/system-nas-others/page.tsx

@@ -0,0 +1,338 @@
+import type { Metadata } from "next"
+import { getTranslations, getMessages, setRequestLocale } from "next-intl/server"
+import { Link } from "@/i18n/navigation"
+import Image from "next/image"
+import { ExternalLink, Database, Server, HardDrive, MonitorIcon } from "lucide-react"
+import { DocHeader } from "@/components/ui/doc-header"
+import { Callout } from "@/components/ui/callout"
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemNas.systemNasOthers.meta" })
+  return {
+    title: t("title"),
+    description: t("description"),
+    openGraph: {
+      title: t("ogTitle"),
+      description: t("ogDescription"),
+      type: "article",
+      url: "https://macrimi.github.io/ProxMenux/docs/create-vm/system-nas/system-nas-others",
+      images: [
+        {
+          url: "/vm/system-nas-menu.png",
+          width: 1200,
+          height: 630,
+          alt: t("ogImageAlt"),
+        },
+      ],
+    },
+  }
+}
+
+type DefaultRow = { param: string; valueRich: string }
+type AdvancedRow = { param: string; optionsRich: string }
+type RelatedItem = { href: string; label: string; tail: string }
+type SystemEntry = {
+  id: string
+  title: string
+  icon: string
+  officialName: string
+  officialUrl: string
+  description: string
+  specs: string[]
+  shellImg?: string
+  webImg?: string
+  shellAlt?: string
+  webAlt?: string
+}
+
+const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  Database,
+  Server,
+  HardDrive,
+  MonitorIcon,
+}
+
+export default async function OtherNASSystemsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemNas.systemNasOthers" })
+  const messages = (await getMessages({ locale })) as unknown as {
+    docs: {
+      createVm: {
+        systemNas: {
+          systemNasOthers: {
+            config: { defaultRowsRich: DefaultRow[]; advancedRowsRich: AdvancedRow[] }
+            storagePlan: { virtualItemsRich: string[]; importItemsRich: string[]; pciItemsRich: string[] }
+            endToEnd: { itemsRich: string[] }
+            systems: Record<string, SystemEntry>
+            related: { itemsRich: RelatedItem[] }
+          }
+        }
+      }
+    }
+  }
+  const o = messages.docs.createVm.systemNas.systemNasOthers
+  const defaultRows = o.config.defaultRowsRich
+  const advancedRows = o.config.advancedRowsRich
+  const virtualItems = o.storagePlan.virtualItemsRich
+  const importItems = o.storagePlan.importItemsRich
+  const pciItems = o.storagePlan.pciItemsRich
+  const endToEndItems = o.endToEnd.itemsRich
+  const systemOrder = ["truenasScale", "truenasCore", "openmediavault", "xigmanas", "rockstor", "zimaos"]
+  const relatedItems = o.related.itemsRich
+
+  const code = (chunks: React.ReactNode) => <code>{chunks}</code>
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+  const em = (chunks: React.ReactNode) => <em>{chunks}</em>
+  const note = (chunks: React.ReactNode) => <span className="text-xs text-gray-500">{chunks}</span>
+  const gpuLink = (chunks: React.ReactNode) => (
+    <a href="/docs/hardware/gpu-vm-passthrough" className="text-blue-600 hover:underline">
+      {chunks}
+    </a>
+  )
+
+  return (
+    <div>
+      <DocHeader
+        title={t("header.title")}
+        description={t("header.description")}
+        section={t("header.section")}
+        estimatedMinutes={15}
+        scriptPath="vm/select_nas_iso.sh"
+      />
+
+      <Callout variant="info" title={t("intro.title")}>
+        {t.rich("intro.bodyRich", { code })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("config.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("config.intro")}</p>
+
+      <h3 className="text-xl font-semibold mt-6 mb-3 text-gray-900">{t("config.defaultHeading")}</h3>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerValue")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {defaultRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">{t.rich(`config.defaultRowsRich.${idx}.valueRich`, { code, note })}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h3 className="text-xl font-semibold mt-8 mb-3 text-gray-900">{t("config.advancedHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t("config.advancedIntro")}</p>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerOptions")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {advancedRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">{t.rich(`config.advancedRowsRich.${idx}.optionsRich`, { code })}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <Callout variant="tip" title={t("config.zfsCalloutTitle")}>
+        {t("config.zfsCalloutBody")}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("storagePlan.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("storagePlan.intro")}</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.virtualHeading")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {virtualItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.virtualItemsRich.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.importHeading")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {importItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.importItemsRich.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 md:col-span-2">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.pciHeading")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {pciItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.pciItemsRich.${idx}`, { code, em })}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <Callout variant="info" title={t("storagePlan.resetCalloutTitle")}>
+        {t.rich("storagePlan.resetCalloutBodyRich", { strong })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("gpu.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t.rich("gpu.bodyRich", { link: gpuLink })}</p>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("autoFeatures.heading")}</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.efiTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t("autoFeatures.efiBody")}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.isoTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t.rich("autoFeatures.isoBodyRich", { code })}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.guestTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t("autoFeatures.guestBody")}</p>
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("endToEnd.heading")}</h2>
+      <ol className="list-decimal pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {endToEndItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`endToEnd.itemsRich.${idx}`, { code })}</li>
+        ))}
+      </ol>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-6 text-gray-900">{t("perSystem.heading")}</h2>
+
+      {systemOrder.map((key) => {
+        const sys = o.systems[key]
+        const Icon = ICONS[sys.icon] ?? Database
+        return (
+          <NASSection
+            key={sys.id}
+            id={sys.id}
+            title={sys.title}
+            icon={<Icon className="h-6 w-6 text-blue-500" />}
+            officialName={sys.officialName}
+            officialUrl={sys.officialUrl}
+            description={sys.description}
+            specs={sys.specs}
+            shellImg={sys.shellImg}
+            webImg={sys.webImg}
+            shellAlt={sys.shellAlt}
+            webAlt={sys.webAlt}
+            shellLabel={t("perSystem.shellLabel")}
+            webLabel={t("perSystem.webLabel")}
+          />
+        )
+      })}
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
+      <ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
+        {relatedItems.map((item) => (
+          <li key={item.href}>
+            <Link href={item.href} className="text-blue-600 hover:underline">
+              {item.label}
+            </Link>
+            {item.tail}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+interface NASSectionProps {
+  id: string
+  title: string
+  icon: React.ReactNode
+  officialName: string
+  officialUrl: string
+  description: string
+  specs: string[]
+  shellImg?: string
+  webImg?: string
+  shellAlt?: string
+  webAlt?: string
+  shellLabel: string
+  webLabel: string
+}
+
+function NASSection({
+  id,
+  title,
+  icon,
+  officialName,
+  officialUrl,
+  description,
+  specs,
+  shellImg,
+  webImg,
+  shellAlt,
+  webAlt,
+  shellLabel,
+  webLabel,
+}: NASSectionProps) {
+  return (
+    <section id={id} className="mt-10 scroll-mt-24 border-b border-gray-200 pb-8">
+      <h3 className="text-xl font-semibold mb-3 flex items-center flex-wrap gap-2 text-gray-900">
+        {icon}
+        <span>{title}</span>
+        <a
+          href={officialUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="ml-2 text-sm font-normal text-blue-600 hover:underline inline-flex items-center gap-1"
+        >
+          {officialName} <ExternalLink className="h-3.5 w-3.5" />
+        </a>
+      </h3>
+      <p className="mb-4 text-gray-800 leading-relaxed">{description}</p>
+      <ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {specs.map((s, i) => (
+          <li key={i}>{s}</li>
+        ))}
+      </ul>
+      {(shellImg || webImg) && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+          {shellImg && (
+            <div>
+              <h4 className="text-sm font-medium text-gray-700 mb-2">{shellLabel}</h4>
+              <div className="overflow-hidden rounded-md border border-gray-200">
+                <Image src={shellImg} alt={shellAlt ?? `${title} shell interface`} width={600} height={400} className="w-full object-contain" />
+              </div>
+            </div>
+          )}
+          {webImg && (
+            <div>
+              <h4 className="text-sm font-medium text-gray-700 mb-2">{webLabel}</h4>
+              <div className="overflow-hidden rounded-md border border-gray-200">
+                <Image src={webImg} alt={webAlt ?? `${title} web interface`} width={600} height={400} className="w-full object-contain" />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  )
+}

web/app/[locale]/docs/create-vm/system-windows/page.tsx

@@ -0,0 +1,314 @@
+import type { Metadata } from "next"
+import { getTranslations, getMessages, setRequestLocale } from "next-intl/server"
+import { Link } from "@/i18n/navigation"
+import Image from "next/image"
+import { ExternalLink, Server } from "lucide-react"
+import { DocHeader } from "@/components/ui/doc-header"
+import { Callout } from "@/components/ui/callout"
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemWindows.meta" })
+  return {
+    title: t("title"),
+    description: t("description"),
+    openGraph: {
+      title: t("ogTitle"),
+      description: t("ogDescription"),
+      type: "article",
+      url: "https://macrimi.github.io/ProxMenux/docs/create-vm/system-windows",
+      images: [
+        {
+          url: "/vm/menu_windows.png",
+          width: 1200,
+          height: 630,
+          alt: t("ogImageAlt"),
+        },
+      ],
+    },
+  }
+}
+
+type ConfigRow = { param: string; value?: string; valueRich?: string; options?: string; optionsRich?: string }
+type StringItem = string
+type VirtioStep = { title: string; body?: string; bodyRich?: string; img: string; caption: string }
+type RelatedItem = { href: string; label: string; tail?: string }
+
+export default async function SystemWindowsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations({ locale, namespace: "docs.createVm.systemWindows" })
+
+  const messages = (await getMessages({ locale })) as unknown as {
+    docs: { createVm: { systemWindows: {
+      config: { defaultRows: ConfigRow[]; advancedRows: ConfigRow[] }
+      storagePlan: { virtualDiskItems: StringItem[]; importDiskItems: StringItem[]; pciItems: StringItem[] }
+      installOptions: { uupItems: StringItem[] }
+      endToEnd: { items: StringItem[] }
+      virtio: { steps: VirtioStep[] }
+      related: { items: RelatedItem[] }
+    } } }
+  }
+  const defaultRows = messages.docs.createVm.systemWindows.config.defaultRows
+  const advancedRows = messages.docs.createVm.systemWindows.config.advancedRows
+  const virtualDiskItems = messages.docs.createVm.systemWindows.storagePlan.virtualDiskItems
+  const importDiskItems = messages.docs.createVm.systemWindows.storagePlan.importDiskItems
+  const pciItems = messages.docs.createVm.systemWindows.storagePlan.pciItems
+  const uupItems = messages.docs.createVm.systemWindows.installOptions.uupItems
+  const endToEndItems = messages.docs.createVm.systemWindows.endToEnd.items
+  const virtioSteps = messages.docs.createVm.systemWindows.virtio.steps
+  const relatedItems = messages.docs.createVm.systemWindows.related.items
+
+  const code = (chunks: React.ReactNode) => <code>{chunks}</code>
+  const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
+  const em = (chunks: React.ReactNode) => <em>{chunks}</em>
+  const gpuLink = (chunks: React.ReactNode) => (
+    <a href="/docs/hardware/gpu-vm-passthrough" className="text-blue-600 hover:underline">{chunks}</a>
+  )
+
+  return (
+    <div>
+      <DocHeader
+        title={t("header.title")}
+        description={t("header.description")}
+        section={t("header.section")}
+        estimatedMinutes={20}
+        scriptPath="vm/select_windows_iso.sh"
+      />
+
+      <Callout variant="info" title={t("intro.title")}>
+        {t.rich("intro.body", { code })}
+      </Callout>
+
+      <div className="flex flex-col items-center my-6">
+        <div className="w-full max-w-[768px] overflow-hidden rounded-md border border-gray-200">
+          <Image
+            src="/vm/menu_windows.png"
+            alt={t("image.alt")}
+            width={768}
+            height={0}
+            style={{ height: "auto" }}
+            className="w-full object-contain"
+            sizes="(max-width: 768px) 100vw, 768px"
+          />
+        </div>
+        <span className="mt-2 text-sm text-gray-600">{t("image.caption")}</span>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("config.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("config.intro")}</p>
+
+      <h3 className="text-xl font-semibold mt-6 mb-3 text-gray-900">{t("config.defaultHeading")}</h3>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerValue")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {defaultRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">
+                  {row.valueRich ? t.rich(`config.defaultRows.${idx}.valueRich`, { code }) : row.value}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h3 className="text-xl font-semibold mt-8 mb-3 text-gray-900">{t("config.advancedHeading")}</h3>
+      <p className="mb-3 text-gray-800 leading-relaxed">{t("config.advancedIntro")}</p>
+      <div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-gray-700">
+            <tr>
+              <th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
+              <th className="px-4 py-2 font-semibold">{t("config.headerOptions")}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 text-gray-800">
+            {advancedRows.map((row, idx) => (
+              <tr key={row.param}>
+                <td className="px-4 py-2">{row.param}</td>
+                <td className="px-4 py-2">
+                  {row.optionsRich ? t.rich(`config.advancedRows.${idx}.optionsRich`, { code }) : row.options}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <Callout variant="warning" title={t("config.tpmWarnTitle")}>
+        {t("config.tpmWarnBody")}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("storagePlan.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("storagePlan.body", { strong })}
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.virtualDiskTitle")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {virtualDiskItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.virtualDiskItems.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.importDiskTitle")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {importDiskItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.importDiskItems.${idx}`, { code })}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 md:col-span-2">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.pciTitle")}</h3>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
+            {pciItems.map((_, idx) => (
+              <li key={idx}>{t.rich(`storagePlan.pciItems.${idx}`, { em, code })}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <Callout variant="info" title={t("storagePlan.resetTitle")}>
+        {t.rich("storagePlan.resetBody", { strong })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("gpu.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("gpu.body", { gpuLink })}
+      </p>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("autoFeatures.heading")}</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.efiTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t("autoFeatures.efiBody")}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.tpmTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t("autoFeatures.tpmBody")}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.isoTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t.rich("autoFeatures.isoBody", { code, em })}</p>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-2">{t("autoFeatures.guestTitle")}</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{t.rich("autoFeatures.guestBody", { code })}</p>
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("installOptions.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">{t("installOptions.intro")}</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 flex items-center justify-center rounded-md bg-blue-50">
+              <Image src="https://uupdump.net/static/uupdump/1.1.0/img/logo.svg" alt={t("installOptions.uupLogoAlt")} width={40} height={40} className="object-contain" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 m-0">{t("installOptions.uupTitle")}</h3>
+          </div>
+          <p className="text-sm text-gray-700 leading-relaxed mb-4">
+            {t.rich("installOptions.uupBody", { strong })}
+          </p>
+          <ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1 mb-4">
+            {uupItems.map((_, idx) => (
+              <li key={idx}>{t(`installOptions.uupItems.${idx}`)}</li>
+            ))}
+          </ul>
+          <Link href="/docs/utils/UUp-Dump-ISO-Creator" className="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline">
+            {t("installOptions.uupLearnMore")}
+            <ExternalLink className="h-3.5 w-3.5" />
+          </Link>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 flex items-center justify-center rounded-md bg-blue-50 text-blue-600">
+              <Server className="h-7 w-7" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 m-0">{t("installOptions.localTitle")}</h3>
+          </div>
+          <p className="text-sm text-gray-700 leading-relaxed mb-4">
+            {t.rich("installOptions.localBody", { code })}
+          </p>
+          <div className="mt-4 overflow-hidden rounded-md border border-gray-200">
+            <Image src="/vm/local-store-windows.png" alt={t("installOptions.localImageAlt")} width={600} height={400} className="w-full object-contain" />
+          </div>
+          <p className="mt-2 text-xs text-gray-600">{t("installOptions.localImageCaption")}</p>
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("endToEnd.heading")}</h2>
+      <ol className="list-decimal pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {endToEndItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`endToEnd.items.${idx}`, { code })}</li>
+        ))}
+      </ol>
+
+      <h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("virtio.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("virtio.body", { code })}
+      </p>
+
+      <Callout variant="warning" title={t("virtio.warnTitle")}>
+        {t.rich("virtio.warnBody", { code })}
+      </Callout>
+
+      {virtioSteps.map((step, idx) => (
+        <section key={idx} className="mt-8 border-b border-gray-200 pb-8">
+          <div className="flex items-center gap-3 mb-3">
+            <span className="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-0.5 text-xs font-semibold text-blue-800">
+              {t("virtio.stepLabel")} {idx + 1}
+            </span>
+            <h3 className="text-lg font-semibold text-gray-900 m-0">{step.title}</h3>
+          </div>
+          <p className="mb-4 text-gray-800 leading-relaxed">
+            {step.bodyRich ? t.rich(`virtio.steps.${idx}.bodyRich`, { strong, code }) : step.body}
+          </p>
+          <div className="flex flex-col items-center">
+            <div className="w-full max-w-[768px] overflow-hidden rounded-md border border-gray-200">
+              <Image src={step.img} alt={step.caption} width={768} height={0} style={{ height: "auto" }} className="w-full object-contain" sizes="(max-width: 768px) 100vw, 768px" />
+            </div>
+            <span className="mt-2 text-sm text-gray-600">{step.caption}</span>
+          </div>
+        </section>
+      ))}
+
+      <Callout variant="tip" title={t("virtio.tipTitle")}>
+        {t.rich("virtio.tipBody", { code })}
+      </Callout>
+
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
+      <ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
+        {relatedItems.map((item) => (
+          <li key={item.href}>
+            <Link href={item.href} className="text-blue-600 hover:underline">
+              {item.label}
+            </Link>
+            {item.tail}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}