Rebuild Visual XSharp language website with Vue and Kotlin Spring; add leopard identity, bilingual docs, forum placeholder, site-only API, strict CSP, 21 frontend tests, deployment runbooks, and preserve legacy ViGet redirect during maintenance

12 files changed, 1610 insertions, 2250 deletions

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 0000000..d13addf
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,88 @@
+<!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink, RouterView } from "vue-router";
+import { locale, theme } from "./preferences";
+
+const labels = {
+  "en-US": {
+    home: "Home",
+    overview: "Overview",
+    start: "Getting started",
+    forum: "Forum",
+    source: "Source",
+    theme: "Switch color theme",
+    language: "Language",
+    status: "In active development",
+    footer: "A Progmasoft project. Visual X# is an independent language identity.",
+  },
+  "de-DE": {
+    home: "Startseite",
+    overview: "Überblick",
+    start: "Erste Schritte",
+    forum: "Forum",
+    source: "Quellcode",
+    theme: "Farbschema wechseln",
+    language: "Sprache",
+    status: "In aktiver Entwicklung",
+    footer: "Ein Progmasoft-Projekt. Visual X# hat eine eigenständige Sprachidentität.",
+  },
+} as const;
+const copy = computed(() => labels[locale.value]);
+
+function toggleTheme() {
+  theme.value = theme.value === "dark" ? "light" : "dark";
+}
+</script>
+
+<template>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <div class="site-shell">
+    <header class="site-header">
+      <RouterLink class="brand" to="/" :aria-label="`Visual X# ${copy.home}`">
+        <img src="/visual-xsharp-mark.svg" width="31" height="31" alt="" />
+        <span>Visual X#</span>
+      </RouterLink>
+      <nav class="primary-nav" aria-label="Primary navigation">
+        <RouterLink to="/">{{ copy.home }}</RouterLink>
+        <RouterLink to="/docs/overview">{{ copy.overview }}</RouterLink>
+        <RouterLink to="/docs/getting-started">{{ copy.start }}</RouterLink>
+        <a href="https://forum.xsharp-lang.xyz/">{{ copy.forum }}</a>
+      </nav>
+      <div class="header-tools">
+        <label class="language-control">
+          <span class="sr-only">{{ copy.language }}</span>
+          <select v-model="locale" :aria-label="copy.language">
+            <option value="en-US">EN</option>
+            <option value="de-DE">DE</option>
+          </select>
+        </label>
+        <button class="icon-button" type="button" :aria-label="copy.theme" @click="toggleTheme">
+          {{ theme === "dark" ? "☀" : "◐" }}
+        </button>
+        <a
+          class="source-link"
+          href="https://github.com/Progmasoft/visual-xsharp"
+          target="_blank"
+          rel="noopener noreferrer"
+          >{{ copy.source }} ↗</a
+        >
+      </div>
+    </header>
+    <main id="main"><RouterView /></main>
+    <footer class="site-footer">
+      <div>
+        <span class="footer-wordmark">Visual X#</span>
+        <p>{{ copy.footer }}</p>
+      </div>
+      <div class="footer-links">
+        <RouterLink to="/docs/overview">{{ copy.overview }}</RouterLink
+        ><a href="https://github.com/Progmasoft/visual-xsharp/tree/main/Spec">Specification</a
+        ><a href="https://github.com/Progmasoft/website">Website source</a>
+      </div>
+      <small>© 2026 Progmasoft</small>
+    </footer>
+  </div>
+</template>
diff --git a/frontend/src/components/Icon.astro b/frontend/src/components/Icon.astro
deleted file mode 100644
index 6231dbb..0000000
--- a/frontend/src/components/Icon.astro
+++ /dev/null
@@ -1,48 +0,0 @@
----
-// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
-// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1
-
-interface Props {
-  name:
-    | "arrow"
-    | "braces"
-    | "check"
-    | "chip"
-    | "github"
-    | "layers"
-    | "modules"
-    | "native"
-    | "registers"
-    | "terminal";
-  label?: string;
-}
-
-const { name, label } = Astro.props;
-const paths = {
-  arrow: '<path d="m5 12 14-14m-9 0h9v9"/>',
-  braces: '<path d="M9 3H7a2 2 0 0 0-2 2v4l-2 3 2 3v4a2 2 0 0 0 2 2h2M15 3h2a2 2 0 0 1 2 2v4l2 3-2 3v4a2 2 0 0 1-2 2h-2"/>',
-  check: '<path d="m4 12 5 5L20 6"/>',
-  chip: '<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 1v3m6-3v3M9 20v3m6-3v3M1 9h3m-3 6h3m16-6h3m-3 6h3M10 10h4v4h-4z"/>',
-  github:
-    '<path d="M15 22v-3.9c.04-1-.35-1.96-1.1-2.6 3.6-.4 7.4-1.77 7.4-8A6.2 6.2 0 0 0 19.65 3 5.8 5.8 0 0 0 19.5 1S18.15.55 15 2.65a15.4 15.4 0 0 0-8 0C3.85.55 2.5 1 2.5 1a5.8 5.8 0 0 0-.15 2A6.2 6.2 0 0 0 .7 7.5c0 6.22 3.8 7.6 7.4 8-.73.63-1.1 1.55-1.1 2.5V22"/><path d="M7 19c-3 .9-3-1.5-4.2-2"/>',
-  layers: '<path d="m12 3-9 5 9 5 9-5-9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/>',
-  modules: '<rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="8.5" y="14" width="7" height="7" rx="2"/><path d="M10 6.5h4M6.5 10v2l4 2M17.5 10v2l-4 2"/>',
-  native: '<rect x="3" y="4" width="18" height="16" rx="3"/><path d="m9 8 4 4-4 4m5 0h3"/>',
-  registers: '<path d="M4 6h16M4 12h16M4 18h16"/><circle cx="8" cy="6" r="2"/><circle cx="16" cy="12" r="2"/><circle cx="11" cy="18" r="2"/>',
-  terminal: '<rect x="3" y="4" width="18" height="16" rx="3"/><path d="m7 9 3 3-3 3m6 0h4"/>',
-} satisfies Record<Props["name"], string>;
----
-
-<svg
-  class="icon"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  stroke-width="1.75"
-  role={label ? "img" : undefined}
-  aria-hidden={label ? undefined : "true"}
-  aria-label={label}
-  set:html={paths[name]}
-></svg>
diff --git a/frontend/src/layouts/SiteLayout.astro b/frontend/src/layouts/SiteLayout.astro
deleted file mode 100644
index e3afbda..0000000
--- a/frontend/src/layouts/SiteLayout.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
-// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1
-
-import "../styles/global.css";
-
-interface Props {
-  title: string;
-  description: string;
-  canonical: string;
-}
-
-const { title, description, canonical } = Astro.props;
----
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content={description} />
-    <meta name="robots" content="index, follow" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#0c111b" />
-    <link rel="icon" type="image/png" href="/xsharp-logo.png" />
-    <link rel="preload" href="/fonts/AlfaSlabOne-Regular.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="/fonts/FiraSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="canonical" href={canonical} />
-    <title>{title}</title>
-  </head>
-  <body>
-    <slot />
-  </body>
-</html>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
new file mode 100644
index 0000000..6de4819
--- /dev/null
+++ b/frontend/src/main.ts
@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
+// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1
+
+import { createApp, watch } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import App from "./App.vue";
+import HomePage from "./pages/HomePage.vue";
+import OverviewPage from "./pages/OverviewPage.vue";
+import GettingStartedPage from "./pages/GettingStartedPage.vue";
+import { locale } from "./preferences";
+import { applyPageMetadata } from "./seo";
+import "./styles/site.css";
+
+const router = createRouter({
+  history: createWebHistory(),
+  scrollBehavior: () => ({ top: 0 }),
+  routes: [
+    { path: "/", component: HomePage },
+    { path: "/docs/overview", component: OverviewPage },
+    {
+      path: "/docs/getting-started",
+      component: GettingStartedPage,
+    },
+    { path: "/:pathMatch(.*)*", redirect: "/" },
+  ],
+});
+
+router.afterEach((to) => applyPageMetadata(to.path, locale.value));
+watch(locale, (value) => applyPageMetadata(router.currentRoute.value.path, value));
+
+createApp(App).use(router).mount("#app");
diff --git a/frontend/src/pages/GettingStartedPage.vue b/frontend/src/pages/GettingStartedPage.vue
new file mode 100644
index 0000000..78a6889
--- /dev/null
+++ b/frontend/src/pages/GettingStartedPage.vue
@@ -0,0 +1,203 @@
+<!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { locale } from "../preferences";
+
+const text = {
+  "en-US": {
+    section: "DOCUMENTATION / GETTING STARTED",
+    title: "Start with the source",
+    lead: "Visual X# is in active development. For now, the repository is the reliable entry point for building the compiler and checking which language features run end to end.",
+    step1: "1. Get the repository",
+    step1Text:
+      "Clone the compiler repository with its submodules. Use a supported Windows 10/11 or recent macOS development host.",
+    step2: "2. Check the toolchain",
+    step2Text:
+      "The repository's Go development command checks local requirements. The compiler uses GHC2024 for its Haskell front end, Clang/LLVM for C++20 native stages, Bazel for native builds, and Temurin JDK 25 for the project DSL.",
+    platform:
+      "The supported development hosts are Windows 10/11 and macOS Sequoia/Tahoe. On Windows, standalone LLVM clang-cl and LLD are used with Windows SDK and MSVC CRT/STL libraries. On macOS, install the Xcode Command Line Tools; the full Xcode application is not required.",
+    toolchainHelp:
+      "If the check reports missing tools, the optional bootstrap can install prerequisites through the host package manager. Open a new terminal afterward so PATH changes take effect. LLVM_ROOT may point to the LLVM development installation prefix; do not put a machine-specific path in project files.",
+    bootstrap: "Optional host bootstrap",
+    step3: "3. Build and test",
+    step3Text:
+      "Build the native compiler and run its native contract suites. The Go command orchestrates the checks; Bazel remains the owner of the C++20 build graph. Cabal and Gradle handle their Haskell and Kotlin boundaries.",
+    step4: "4. Read and check a real program",
+    step4Text:
+      "The HelloWorld example uses a class method as the entry point. Visual X# does not use a top-level function as its program entry. Check the exact source file, then build it using the current compiler subset.",
+    fileCheck: "Check a single source file",
+    fileBuild: "Build a native executable",
+    subset:
+      "The accepted source subset is narrower than the full public specification. A successful build is stronger evidence for a particular program than a syntax example in the specification; a successful test run is stronger evidence for a feature family.",
+    step5: "5. Follow the public contract",
+    step5Text:
+      "Use the public specification for intended language semantics and the repository's Documents for implementation and tooling details. The compiler's -Help output describes the flags accepted by the installed binary.",
+    links: [
+      {
+        title: "Language specification",
+        detail: "Syntax and semantic contracts, including valid and invalid examples.",
+        href: "https://github.com/Progmasoft/visual-xsharp/tree/main/Spec",
+      },
+      {
+        title: "Building guide",
+        detail: "Official hosts, toolchain discovery, and native build targets.",
+        href: "https://github.com/Progmasoft/visual-xsharp/blob/main/Documents/BUILDING.md",
+      },
+      {
+        title: "CLI reference",
+        detail: "Current commands, flags, artifact behavior, and implementation status.",
+        href: "https://github.com/Progmasoft/visual-xsharp/blob/main/Documents/CLI.md",
+      },
+      {
+        title: "Example programs",
+        detail: "Source examples next to C# 13, C++20, and Java 21 counterparts.",
+        href: "https://github.com/Progmasoft/visual-xsharp/tree/main/Examples",
+      },
+    ],
+    note: "Implementation status",
+    noteText:
+      "A spec example is not proof of compiler support. Run repository tests and consult current implementation notes before relying on a feature. Binary downloads and a stable installation flow are not promised yet.",
+    more: "Understand the design",
+    spec: "Public specification",
+    examples: "More examples",
+  },
+  "de-DE": {
+    section: "DOKUMENTATION / ERSTE SCHRITTE",
+    title: "Mit dem Quellcode beginnen",
+    lead: "Visual X# wird aktiv entwickelt. Das Repository ist derzeit der zuverlässige Einstieg, um den Compiler zu bauen und den tatsächlich funktionierenden Sprachumfang zu prüfen.",
+    step1: "1. Repository holen",
+    step1Text:
+      "Klonen Sie das Compiler-Repository mit seinen Submodulen. Unterstützt werden Windows 10/11 und aktuelle macOS-Entwicklungsrechner.",
+    step2: "2. Toolchain prüfen",
+    step2Text:
+      "Der Go-Entwicklungsbefehl prüft lokale Voraussetzungen. Das Frontend verwendet GHC2024, die nativen C++20-Stufen Clang/LLVM und Bazel; die Projekt-DSL nutzt Temurin JDK 25.",
+    platform:
+      "Unterstützte Entwicklungsrechner sind Windows 10/11 und macOS Sequoia/Tahoe. Unter Windows werden eigenständiges LLVM clang-cl und LLD mit Windows SDK sowie MSVC-CRT/STL-Bibliotheken verwendet. Unter macOS genügen die Xcode Command Line Tools; die vollständige Xcode-Anwendung ist nicht erforderlich.",
+    toolchainHelp:
+      "Falls Werkzeuge fehlen, kann der optionale Bootstrap die Voraussetzungen über den Paketmanager installieren. Öffnen Sie danach ein neues Terminal, damit PATH-Änderungen greifen. LLVM_ROOT darf auf das LLVM-Entwicklungspaket zeigen; schreiben Sie keinen rechnerbezogenen Pfad in Projektdateien.",
+    bootstrap: "Optionaler Host-Bootstrap",
+    step3: "3. Bauen und testen",
+    step3Text:
+      "Bauen Sie den nativen Compiler und führen Sie die nativen Vertragstests aus. Der Go-Befehl koordiniert die Prüfungen; Bazel besitzt weiterhin den C++20-Buildgraphen. Cabal und Gradle betreuen Haskell und Kotlin.",
+    step4: "4. Ein echtes Programm lesen und prüfen",
+    step4Text:
+      "Im HelloWorld-Beispiel ist eine Klassenmethode der Einstiegspunkt. Eine Top-Level-Funktion ist kein Programmeinstieg in Visual X#. Prüfen Sie die Quelldatei und bauen Sie sie mit dem derzeit unterstützten Compilerumfang.",
+    fileCheck: "Eine Quelldatei prüfen",
+    fileBuild: "Eine native Anwendung bauen",
+    subset:
+      "Der unterstützte Quellcode-Teilumfang ist kleiner als die vollständige öffentliche Spezifikation. Ein erfolgreicher Build ist für ein konkretes Programm ein stärkerer Beleg als ein Syntaxbeispiel; ein erfolgreicher Testlauf ist für eine Funktionsgruppe aussagekräftiger.",
+    step5: "5. Den öffentlichen Vertrag nachlesen",
+    step5Text:
+      "Die öffentliche Spezifikation beschreibt die beabsichtigte Sprachsemantik; die Dokumente im Repository erklären Implementierung und Werkzeuge. Die -Help-Ausgabe des installierten Compilers zeigt die tatsächlich akzeptierten Optionen.",
+    links: [
+      {
+        title: "Sprachspezifikation",
+        detail: "Syntax und Semantik mit gültigen und ungültigen Beispielen.",
+        href: "https://github.com/Progmasoft/visual-xsharp/tree/main/Spec",
+      },
+      {
+        title: "Build-Anleitung",
+        detail: "Offizielle Hosts, Toolchain-Suche und native Build-Ziele.",
+        href: "https://github.com/Progmasoft/visual-xsharp/blob/main/Documents/BUILDING.md",
+      },
+      {
+        title: "CLI-Referenz",
+        detail: "Aktuelle Befehle, Optionen, Artefakte und Implementierungsstand.",
+        href: "https://github.com/Progmasoft/visual-xsharp/blob/main/Documents/CLI.md",
+      },
+      {
+        title: "Beispielprogramme",
+        detail: "Beispiele neben Fassungen in C# 13, C++20 und Java 21.",
+        href: "https://github.com/Progmasoft/visual-xsharp/tree/main/Examples",
+      },
+    ],
+    note: "Implementierungsstand",
+    noteText:
+      "Ein Spezifikationsbeispiel beweist keine Compiler-Unterstützung. Prüfen Sie Tests und aktuelle Implementierungshinweise, bevor Sie eine Funktion voraussetzen. Stabile Downloads werden noch nicht versprochen.",
+    more: "Entwurf verstehen",
+    spec: "Öffentliche Spezifikation",
+    examples: "Weitere Beispiele",
+  },
+} as const;
+const c = computed(() => text[locale.value]);
+const hello = `namespace Examples.HelloWorld;
+
+public class HelloWorld {
+    public static void Main() {
+        String language = "Visual X#";
+        Console.Println("Hello from " + language + "!");
+    }
+}`;
+</script>
+
+<template>
+  <div class="doc-layout section-wrap">
+    <aside class="doc-sidebar">
+      <span class="kicker">VISUAL X#</span
+      ><RouterLink to="/docs/overview">{{
+        locale === "de-DE" ? "Überblick" : "Overview"
+      }}</RouterLink
+      ><RouterLink to="/docs/getting-started" aria-current="page">{{
+        locale === "de-DE" ? "Erste Schritte" : "Getting started"
+      }}</RouterLink
+      ><a href="https://github.com/Progmasoft/visual-xsharp/tree/main/Spec">Specification ↗</a>
+    </aside>
+    <article class="doc-content">
+      <span class="kicker">{{ c.section }}</span>
+      <h1>{{ c.title }}</h1>
+      <p class="doc-lead">{{ c.lead }}</p>
+      <h2>{{ c.step1 }}</h2>
+      <p>{{ c.step1Text }}</p>
+      <pre
+        class="doc-code"
+      ><code>git clone --recurse-submodules https://github.com/Progmasoft/visual-xsharp.git</code></pre>
+      <h2>{{ c.step2 }}</h2>
+      <p>{{ c.step2Text }}</p>
+      <p>{{ c.platform }}</p>
+      <pre class="doc-code"><code>go run scripts/develop.go doctor</code></pre>
+      <h3>{{ c.bootstrap }}</h3>
+      <p>{{ c.toolchainHelp }}</p>
+      <pre class="doc-code"><code>go run scripts/prebuild.go check
+go run scripts/prebuild.go install</code></pre>
+      <h2>{{ c.step3 }}</h2>
+      <p>{{ c.step3Text }}</p>
+      <pre class="doc-code"><code>go run scripts/develop.go build
+go run scripts/develop.go test</code></pre>
+      <h2>{{ c.step4 }}</h2>
+      <p>{{ c.step4Text }}</p>
+      <pre class="doc-code"><code>{{ hello }}</code></pre>
+      <h3>{{ c.fileCheck }}</h3>
+      <pre class="doc-code"><code>vxs check -File Examples/HelloWorld/HelloWorld.vxs</code></pre>
+      <h3>{{ c.fileBuild }}</h3>
+      <pre class="doc-code"><code>vxs build -File Examples/HelloWorld/HelloWorld.vxs</code></pre>
+      <p>{{ c.subset }}</p>
+      <h2>{{ c.step5 }}</h2>
+      <p>{{ c.step5Text }}</p>
+      <pre class="doc-code"><code>vxs -Help
+vxs build -Help</code></pre>
+      <div class="doc-resource-list">
+        <a v-for="link in c.links" :key="link.href" :href="link.href">
+          <strong>{{ link.title }} <span aria-hidden="true">↗</span></strong>
+          <span>{{ link.detail }}</span>
+        </a>
+      </div>
+      <div class="doc-note">
+        <h3>{{ c.note }}</h3>
+        <p>{{ c.noteText }}</p>
+      </div>
+      <div class="doc-actions">
+        <RouterLink class="button button-primary" to="/docs/overview">{{ c.more }} →</RouterLink
+        ><a class="inline-link" href="https://github.com/Progmasoft/visual-xsharp/tree/main/Spec"
+          >{{ c.spec }} ↗</a
+        ><a
+          class="inline-link"
+          href="https://github.com/Progmasoft/visual-xsharp/tree/main/Examples"
+          >{{ c.examples }} ↗</a
+        >
+      </div>
+    </article>
+  </div>
+</template>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
new file mode 100644
index 0000000..ac11833
--- /dev/null
+++ b/frontend/src/pages/HomePage.vue
@@ -0,0 +1,212 @@
+<!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { locale } from "../preferences";
+
+const translations = {
+  "en-US": {
+    eyebrow: "A language for building with clarity",
+    title: "Make the whole program understandable.",
+    intro:
+      "Visual X# aims to pair expressive source code with explicit ownership, a visible compiler pipeline, and native output. It is being built in the open; the specification describes the intended language, while implementation coverage is still growing.",
+    start: "Start reading",
+    overview: "Why Visual X#?",
+    github: "Follow development",
+    stage: "Language and compiler in active development",
+    why: "Why Visual X#?",
+    whyIntro:
+      "Good tools should let you reason about what your code means, what it owns, and what the compiler does next.",
+    features: [
+      {
+        number: "01",
+        title: "Readable source, explicit meaning",
+        text: "The language specification separates syntax from semantic rules, with examples that mark valid and invalid forms. Fewer hidden assumptions make large codebases easier to discuss.",
+      },
+      {
+        number: "02",
+        title: "Ownership is a language concern",
+        text: "Reference, value, and copy-on-write types are distinguished; AARC and explicit intermediate operations are part of the compiler design. This is a direction under implementation, not a claim of finished runtime coverage.",
+      },
+      {
+        number: "03",
+        title: "A compiler you can inspect",
+        text: "Parsing, name resolution, type checking, Core, Xpp, and Xmm have separate responsibilities. The path to LLVM and a native executable is visible rather than a black box.",
+      },
+    ],
+    codeTitle: "A familiar starting point",
+    codeCaption:
+      "The first program is deliberately ordinary. The design depth appears as programs grow.",
+    statusLabel: "CURRENT STATE",
+    statusTitle: "A design you can inspect. A compiler still growing.",
+    statusLead:
+      "The specification and the implementation have different jobs. We keep both visible so you can tell an intended rule from a feature you can run today.",
+    statusItems: [
+      {
+        title: "Read the contract",
+        body: "The public Spec records the language grammar and semantics, including examples that distinguish valid and invalid forms. It can describe behavior ahead of compiler support.",
+        link: "Open the specification",
+        href: "https://github.com/Progmasoft/visual-xsharp/tree/main/Spec",
+      },
+      {
+        title: "Check the implementation",
+        body: "The current compiler, its component tests, and the CLI reference show which source paths and outputs work now. For a new feature, test a small program before relying on it.",
+        link: "Read the CLI reference",
+        href: "https://github.com/Progmasoft/visual-xsharp/blob/main/Documents/CLI.md",
+      },
+      {
+        title: "Follow the work",
+        body: "The repository contains the language, native compiler stages, project tooling, examples, and development documents. This site is a guide into that work, not a claim of a finished toolchain.",
+        link: "Visit the repository",
+        href: "https://github.com/Progmasoft/visual-xsharp",
+      },
+    ],
+    journey: "Explore the language",
+    journeyText:
+      "Read the overview for the design, then follow the getting-started guide for the current toolchain. We label work in progress honestly.",
+    disclaimer:
+      "Status: evolving language and compiler. Examples in the specification may describe intended behavior ahead of complete compiler support.",
+  },
+  "de-DE": {
+    eyebrow: "Eine Sprache für nachvollziehbare Software",
+    title: "Das ganze Programm verstehen.",
+    intro:
+      "Visual X# verbindet ausdrucksstarken Quellcode mit explizitem Ownership, einer nachvollziehbaren Compiler-Pipeline und nativer Ausgabe. Die Entwicklung erfolgt offen; die Spezifikation beschreibt das Ziel, während die Implementierung noch wächst.",
+    start: "Dokumentation lesen",
+    overview: "Warum Visual X#?",
+    github: "Entwicklung verfolgen",
+    stage: "Sprache und Compiler in aktiver Entwicklung",
+    why: "Warum Visual X#?",
+    whyIntro:
+      "Gute Werkzeuge helfen zu verstehen, was Code bedeutet, wem Daten gehören und was der Compiler als Nächstes tut.",
+    features: [
+      {
+        number: "01",
+        title: "Lesbarer Code, klare Bedeutung",
+        text: "Die Spezifikation trennt Syntax und Semantik und kennzeichnet gültige wie ungültige Beispiele. Weniger versteckte Annahmen erleichtern Diskussionen über große Codebasen.",
+      },
+      {
+        number: "02",
+        title: "Ownership gehört zur Sprache",
+        text: "Referenz-, Wert- und Copy-on-Write-Typen sind unterschieden; AARC und explizite Zwischenschritte gehören zum Compilerentwurf. Die Laufzeitunterstützung ist noch im Aufbau.",
+      },
+      {
+        number: "03",
+        title: "Ein nachvollziehbarer Compiler",
+        text: "Parsing, Namensauflösung, Typprüfung, Core, Xpp und Xmm haben getrennte Aufgaben. Der Weg zu LLVM und einer nativen Anwendung bleibt sichtbar.",
+      },
+    ],
+    codeTitle: "Ein vertrauter Anfang",
+    codeCaption:
+      "Das erste Programm ist bewusst einfach. Die Tiefe des Entwurfs zeigt sich bei größeren Programmen.",
+    statusLabel: "AKTUELLER STAND",
+    statusTitle: "Ein nachvollziehbarer Entwurf. Ein Compiler im Aufbau.",
+    statusLead:
+      "Spezifikation und Implementierung haben unterschiedliche Aufgaben. Wir zeigen beide, damit geplante Regeln nicht mit heute ausführbaren Funktionen verwechselt werden.",
+    statusItems: [
+      {
+        title: "Den Vertrag lesen",
+        body: "Die öffentliche Spec beschreibt Grammatik und Semantik, auch mit gültigen und ungültigen Beispielen. Sie kann der vollständigen Compiler-Unterstützung voraus sein.",
+        link: "Spezifikation öffnen",
+        href: "https://github.com/Progmasoft/visual-xsharp/tree/main/Spec",
+      },
+      {
+        title: "Die Implementierung prüfen",
+        body: "Compiler, Komponententests und CLI-Referenz zeigen, welche Quellcodepfade und Ausgaben heute funktionieren. Probieren Sie eine neue Funktion zuerst in einem kleinen Programm aus.",
+        link: "CLI-Referenz lesen",
+        href: "https://github.com/Progmasoft/visual-xsharp/blob/main/Documents/CLI.md",
+      },
+      {
+        title: "Die Entwicklung verfolgen",
+        body: "Das Repository enthält Sprache, native Compilerstufen, Projektwerkzeuge, Beispiele und Entwicklerdokumentation. Diese Seite führt dorthin, statt eine fertige Toolchain zu versprechen.",
+        link: "Repository besuchen",
+        href: "https://github.com/Progmasoft/visual-xsharp",
+      },
+    ],
+    journey: "Die Sprache entdecken",
+    journeyText:
+      "Der Überblick erklärt den Entwurf; die Anleitung zum Einstieg zeigt die aktuelle Toolchain. Unfertige Teile kennzeichnen wir offen.",
+    disclaimer:
+      "Status: Sprache und Compiler entwickeln sich weiter. Beispiele in der Spezifikation können dem derzeitigen Implementierungsstand voraus sein.",
+  },
+} as const;
+const c = computed(() => translations[locale.value]);
+const example = `namespace Examples.HelloWorld;
+
+public class HelloWorld {
+    public static void Main() {
+        String language = "Visual X#";
+        Console.Println("Hello from " + language + "!");
+    }
+}`;
+</script>
+
+<template>
+  <section class="hero section-wrap">
+    <img class="hero-logo" src="/visual-xsharp.svg" width="520" height="293" alt="Visual X# logo" />
+    <div class="hero-copy">
+      <div class="eyebrow">{{ c.eyebrow }}</div>
+      <h1>{{ c.title }}</h1>
+      <p class="hero-intro">{{ c.intro }}</p>
+      <div class="hero-actions">
+        <RouterLink class="button button-primary" to="/docs/getting-started"
+          >{{ c.start }} <span aria-hidden="true">→</span></RouterLink
+        ><RouterLink class="button button-quiet" to="/docs/overview">{{ c.overview }}</RouterLink>
+      </div>
+      <p class="release-note">{{ c.stage }}</p>
+    </div>
+  </section>
+  <section class="why-section section-wrap" aria-labelledby="why-heading">
+    <div class="section-lead">
+      <span class="kicker">01 / PRINCIPLES</span>
+      <h2 id="why-heading">{{ c.why }}</h2>
+      <p>{{ c.whyIntro }}</p>
+    </div>
+    <div class="feature-list">
+      <article v-for="feature in c.features" :key="feature.number" class="feature-row">
+        <small>{{ feature.number }}</small>
+        <h3>{{ feature.title }}</h3>
+        <p>{{ feature.text }}</p>
+      </article>
+    </div>
+  </section>
+  <section class="example-section section-wrap" aria-labelledby="example-heading">
+    <div class="example-copy">
+      <span class="kicker">02 / SOURCE</span>
+      <h2 id="example-heading">{{ c.codeTitle }}</h2>
+      <p>{{ c.codeCaption }}</p>
+      <RouterLink class="inline-link" to="/docs/overview">{{ c.overview }} →</RouterLink>
+    </div>
+    <div class="code-card">
+      <div class="code-bar"><span>HelloWorld.vxs</span></div>
+      <pre><code>{{ example }}</code></pre>
+    </div>
+  </section>
+  <section class="status-section section-wrap" aria-labelledby="status-heading">
+    <div class="section-lead">
+      <span class="kicker">{{ c.statusLabel }}</span>
+      <h2 id="status-heading">{{ c.statusTitle }}</h2>
+      <p>{{ c.statusLead }}</p>
+    </div>
+    <div class="status-list">
+      <article v-for="item in c.statusItems" :key="item.title">
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.body }}</p>
+        <a class="inline-link" :href="item.href"
+          >{{ item.link }} <span aria-hidden="true">↗</span></a
+        >
+      </article>
+    </div>
+  </section>
+  <section class="journey section-wrap">
+    <div>
+      <span class="kicker">03 / NEXT STEPS</span>
+      <h2>{{ c.journey }}</h2>
+      <p>{{ c.journeyText }}</p>
+    </div>
+    <RouterLink class="button button-primary" to="/docs/overview">{{ c.overview }} →</RouterLink>
+  </section>
+  <p class="status-disclaimer section-wrap">{{ c.disclaimer }}</p>
+</template>
diff --git a/frontend/src/pages/OverviewPage.vue b/frontend/src/pages/OverviewPage.vue
new file mode 100644
index 0000000..55529c6
--- /dev/null
+++ b/frontend/src/pages/OverviewPage.vue
@@ -0,0 +1,312 @@
+<!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { locale } from "../preferences";
+
+const text = {
+  "en-US": {
+    section: "DOCUMENTATION / OVERVIEW",
+    title: "What Visual X# is trying to solve",
+    lead: "Visual X# is designed around a simple question: can expressive code remain understandable when ownership, types, and native compilation matter? This page explains the direction, not a promise that every feature is finished.",
+    goals: "Design goals",
+    modelHeading: "A few language choices",
+    modelIntro:
+      "These are design contracts described by the public specification. Check the compiler's current coverage before treating a contract as a usable production feature.",
+    model: [
+      {
+        title: "A class owns the entry point",
+        body: "A program starts in a parameterless public static void Main() method on the configured entry class. The class may live in any source file; its namespace does not have to mirror folders.",
+      },
+      {
+        title: "Types carry ownership consequences",
+        body: "Value types remain value types only when every nested generic argument is a value type. A reference type anywhere in the generic structure makes the result a reference type.",
+      },
+      {
+        title: "One standard library surface",
+        body: "System namespaces own core facilities such as console I/O, arrays, text, and math. A standard library namespace is not a separately declared package dependency.",
+      },
+      {
+        title: "Native output, without pretending the pipeline is finished",
+        body: "The compiler has a source-to-native path for its implemented subset. The target is broader semantic coverage, verified intermediate boundaries, and reliable diagnostics as the language grows.",
+      },
+    ],
+    pipelineHeading: "The compiler has visible boundaries",
+    pipelineIntro:
+      "The architecture is intentionally divided so each stage can reject malformed input and preserve what the previous stage established.",
+    pipeline: [
+      {
+        title: "Source and syntax",
+        body: "The Haskell lexer and parser produce a parsed AST while retaining source locations for diagnostics.",
+      },
+      {
+        title: "Names and types",
+        body: "Renaming, name resolution, and type checking produce distinct resolved and typed AST forms.",
+      },
+      {
+        title: "Language semantics",
+        body: "Desugaring and Core optimizations operate before the private CorePrep adapter.",
+      },
+      {
+        title: "