diff --git a/frontend/public/hosts/talac/sitemap.xml b/frontend/public/hosts/talac/sitemap.xml
index 47937fa..9697332 100644
--- a/frontend/public/hosts/talac/sitemap.xml
+++ b/frontend/public/hosts/talac/sitemap.xml
@@ -2,6 +2,11 @@
 <!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://talac.tala.run/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
   <url>
     <loc>https://talac.tala.run/docs/command-line</loc>
     <changefreq>monthly</changefreq>
diff --git a/frontend/public/hosts/tazel/sitemap.xml b/frontend/public/hosts/tazel/sitemap.xml
index 6623a07..c2bb90d 100644
--- a/frontend/public/hosts/tazel/sitemap.xml
+++ b/frontend/public/hosts/tazel/sitemap.xml
@@ -2,6 +2,11 @@
 <!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://tazel.tala.run/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
   <url>
     <loc>https://tazel.tala.run/docs/commands</loc>
     <changefreq>monthly</changefreq>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0f2ae03..79a418b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,7 +6,8 @@ import { computed } from "vue";
 import { RouterLink, RouterView } from "vue-router";
 import { localeLabels } from "./locales";
 import { locale, supportedLocales, theme } from "./preferences";
-import { forumUrl, site, siteHome, siteUrl, type Site } from "./site";
+import { contentRoutes } from "./content/routes";
+import { forumUrl, site, siteHome, siteTopics, siteUrl, type Site } from "./site";
 
 const labels = {
   "en-US": {
@@ -70,6 +71,14 @@ const siblings = (["language", "talac", "tazel"] as const)
     href: siteUrl(other, siteHome[other], hostname),
   }));
 
+// Talac and Tazel list their documentation topics in the header, by the names their sidebars use.
+const topicLinks = computed(() =>
+  siteTopics[site].map((path) => {
+    const route = contentRoutes[site].find((candidate) => candidate.path === path);
+    return { path, label: route ? route.topic[locale.value].nav : path };
+  }),
+);
+
 function toggleTheme() {
   theme.value = theme.value === "dark" ? "light" : "dark";
 }
@@ -79,17 +88,22 @@ function toggleTheme() {
   <a class="skip-link" href="#main">Skip to content</a>
   <div class="site-shell">
     <header class="site-header">
-      <RouterLink class="brand" :to="siteHome[site]" :aria-label="`${brand} ${copy.home}`">
+      <RouterLink class="brand" to="/" :aria-label="`${brand} ${copy.home}`">
         <img src="/tala-mark.svg" width="31" height="31" alt="" />
         <span>{{ brand }}</span>
       </RouterLink>
+      <span class="status-badge">{{ copy.status }}</span>
       <nav class="primary-nav" aria-label="Primary navigation">
         <template v-if="site === 'language'">
-          <RouterLink to="/">{{ copy.home }}</RouterLink>
           <RouterLink to="/docs/overview">{{ copy.overview }}</RouterLink>
           <RouterLink to="/docs/getting-started">{{ copy.start }}</RouterLink>
           <RouterLink to="/docs/syntax">{{ copy.syntax }}</RouterLink>
         </template>
+        <template v-else>
+          <RouterLink v-for="topic in topicLinks" :key="topic.path" :to="topic.path">{{
+            topic.label
+          }}</RouterLink>
+        </template>
         <a v-for="sibling in siblings" :key="sibling.href" :href="sibling.href">{{
           sibling.label
         }}</a>
diff --git a/frontend/src/components/WhyTabs.vue b/frontend/src/components/WhyTabs.vue
new file mode 100644
index 0000000..3e0a04d
--- /dev/null
+++ b/frontend/src/components/WhyTabs.vue
@@ -0,0 +1,97 @@
+<!-- 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, ref, watch } from "vue";
+import type { WhyTab } from "../content/landing";
+
+/**
+ * A row of tabs over one code panel. Each tab shows one strength with a short caption and a sample that the
+ * compiler repository checks. The arrow keys, Home and End move between tabs, as the ARIA tabs pattern asks.
+ */
+const props = defineProps<{
+  tabs: readonly WhyTab[];
+  copyLabel: string;
+  copiedLabel: string;
+  id: string;
+}>();
+
+const selected = ref(0);
+const copied = ref(false);
+const current = computed(() => props.tabs[selected.value] ?? props.tabs[0]);
+const buttons = ref<HTMLButtonElement[]>([]);
+
+watch(
+  () => props.tabs,
+  () => {
+    selected.value = 0;
+  },
+);
+
+function select(index: number, focus = false) {
+  const count = props.tabs.length;
+  selected.value = (index + count) % count;
+  copied.value = false;
+  if (focus) buttons.value[selected.value]?.focus();
+}
+
+function onKey(event: KeyboardEvent) {
+  const moves: Record<string, () => number> = {
+    ArrowRight: () => selected.value + 1,
+    ArrowLeft: () => selected.value - 1,
+    Home: () => 0,
+    End: () => props.tabs.length - 1,
+  };
+  const move = moves[event.key];
+  if (!move) return;
+  event.preventDefault();
+  select(move(), true);
+}
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(current.value.code);
+    copied.value = true;
+  } catch {
+    copied.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="why-tabs">
+    <div class="why-tablist" role="tablist" @keydown="onKey">
+      <button
+        v-for="(tab, index) in tabs"
+        :id="`${id}-tab-${index}`"
+        :key="tab.label"
+        ref="buttons"
+        role="tab"
+        type="button"
+        :aria-selected="index === selected"
+        :aria-controls="`${id}-panel`"
+        :tabindex="index === selected ? 0 : -1"
+        @click="select(index)"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <div
+      :id="`${id}-panel`"
+      class="why-panel"
+      role="tabpanel"
+      :aria-labelledby="`${id}-tab-${selected}`"
+    >
+      <p class="why-caption">{{ current.caption }}</p>
+      <div class="why-code" dir="ltr">
+        <div class="why-code-bar">
+          <span>{{ current.file }}</span>
+          <button type="button" class="why-copy" @click="copy">
+            {{ copied ? copiedLabel : copyLabel }}
+          </button>
+        </div>
+        <pre><code>{{ current.code }}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/content/landing.ts b/frontend/src/content/landing.ts
new file mode 100644
index 0000000..e43861a
--- /dev/null
+++ b/frontend/src/content/landing.ts
@@ -0,0 +1,752 @@
+// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
+// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1
+
+import type { Locale } from "../locales";
+import type { Site } from "../site";
+
+/** One tab of a "Why" section: a strength, a sentence about it and a sample that shows it. */
+export type WhyTab = { label: string; caption: string; file: string; code: string };
+
+/** The first page of a site in one language. */
+export type LandingText = {
+  title: string;
+  description: string;
+  headline: string;
+  lead: string;
+  primary: { label: string; to: string };
+  secondary: { label: string; to: string };
+  whyHeading: string;
+  tabs: readonly WhyTab[];
+  nextHeading: string;
+  next: readonly { label: string; href: string }[];
+  copy: string;
+  copied: string;
+};
+
+// The Tala samples are the programs of Examples/ in the compiler repository, from the namespace line on; a test
+// compares them. Each sample on these pages was built and run with talac 0.6.0, and the terminal samples are
+// what it printed.
+export const helloWorld = `namespace Examples.HelloWorld;
+
+public class HelloWorld {
+    public static void Main() {
+        String language = "Tala";
+        Console.Println("Hello from " + language + "!");
+    }
+}`;
+
+export const primeNumbers = `namespace Examples.PrimeNumbers;
+
+public class PrimeNumbers {
+    private static bool IsPrime(int candidate) {
+        if (candidate < 2) {
+            return false;
+        }
+
+        int divisor = 2;
+        while (divisor * divisor <= candidate) {
+            if (candidate % divisor == 0) {
+                return false;
+            }
+            divisor++;
+        }
+        return true;
+    }
+
+    public static void Main() {
+        int candidate = 2;
+        while (candidate <= 50) {
+            if (IsPrime(candidate)) {
+                Console.Println(candidate);
+            }
+            candidate++;
+        }
+    }
+}`;
+
+export const gcd = `namespace Examples.GCD;
+
+public class GCD {
+    -- Euclid's algorithm is a compact example of loop-carried state.
+    public static int Compute(int left, int right) {
+        int a = left;
+        int b = right;
+        while (b \\= 0) {
+            int remainder = a % b;
+            a = b;
+            b = remainder;
+        }
+        return a;
+    }
+
+    public static void Main() {
+        Console.Printfn("gcd(1071, 462) = %d", Compute(1071, 462));
+    }
+}`;
+
+// Not an example of the compiler repository: the smallest program that shows an argument evaluated by need.
+export const lazyArguments = `namespace Examples.Lazy;
+
+public class Lazy {
+    -- An argument is evaluated when the body needs it, and only then.
+    public static int Choose(bool first, int left, int right) {
+        if (first) {
+            return left;
+        }
+        return right;
+    }
+
+    public static void Main() {
+        int zero = 0;
+        -- The second argument would divide by zero; it is never needed.
+        Console.Println(Choose(true, 42, 1 / zero));
+    }
+}`;
+
+const gcdIr = `$ talac GCD.tala --entry=Examples.GCD.GCD --emit=llvm-ir -O2
+talac: wrote 'GCD.ll' from verified Core through CorePrep, Xpp, Xmm and LLVM
+
+define i64 @Examples.GCD.Compute.2(i64 %0, i64 %1) local_unnamed_addr #0 {
+block.0:
+  %not.equal.not7 = icmp eq i64 %1, 0
+  br i1 %not.equal.not7, label %block.3, label %block.5
+
+block.3:                                          ; preds = %block.5, %block.0
+  %r3.0.lcssa = phi i64 [ %0, %block.0 ], [ %r4.08, %block.5 ]
+  ret i64 %r3.0.lcssa
+
+block.5:                                          ; preds = %block.0, %block.5
+  %r3.09 = phi i64 [ %r4.08, %block.5 ], [ %0, %block.0 ]
+  %r4.08 = phi i64 [ %rem, %block.5 ], [ %1, %block.0 ]
+  %2 = icmp eq i64 %r3.09, -9223372036854775808
+  %3 = icmp eq i64 %r4.08, -1
+  %quotient.wraps = and i1 %3, %2
+  %divisor = select i1 %quotient.wraps, i64 1, i64 %r4.08
+  %rem = srem i64 %r3.09, %divisor
+  %not.equal.not = icmp eq i64 %rem, 0
+  br i1 %not.equal.not, label %block.3, label %block.5
+}`;
+
+const talacOneCommand = `$ talac GCD.tala --entry=Examples.GCD.GCD
+talac: linked native executable 'GCD.exe'
+$ .\\GCD.exe
+gcd(1071, 462) = 21`;
+const talacCheck = `$ talac GCD.tala --entry=Examples.GCD.GCD --emit=metadata
+talac: compiler artifact 'GCD.tala' is valid through its requested pipeline boundary
+talac: wrote 'GCD.talameta'
+$ cat GCD.talameta
+talameta 1
+compiler 0.6.0
+entry Examples.GCD.GCD
+input GCD.tala`;
+const talacStages = `$ talac GCD.tala --entry=Examples.GCD.GCD --emit=core
+talac: wrote 'GCD.core'
+$ talac GCD.tala --entry=Examples.GCD.GCD --emit=xpp
+talac: wrote verified Xpp artifact 'GCD.xpp'
+$ talac GCD.tala --entry=Examples.GCD.GCD --emit=xmm
+talac: wrote verified Xmm artifact 'GCD.xmm'
+$ talac GCD.tala --entry=Examples.GCD.GCD --emit=llvm-ir
+talac: wrote 'GCD.ll' from verified Core through CorePrep, Xpp, Xmm and LLVM`;
+const talacDiagnostic = `$ talac Broken.tala --entry=Demo.Program
+Broken.tala:5:9: TAT0002: binding initializer has the wrong type
+talac: frontend: Broken.tala:5:9: TAT0002: binding initializer has the wrong type
+
+-- Broken.tala, line 5:
+--         int count = "three";`;
+
+const tazelProject = `project {
+  name = "Example"
+  version = "0.1.0"
+}
+
+compiler {
+  buildMode = BuildMode.RELEASE
+  warnings = Warnings.ALL
+}
+
+sources {
+  executable {
+    entry = "Example.Program"
+  }
+}`;
+const tazelCommands = `tazel check
+tazel build
+tazel run -- --port 8080
+tazel fmt -- --check
+tazel lint -- --fix`;
+const tazelTargets = `tazel build --vipkg Server
+tazel build -e Client -e Admin
+tazel lint --workspace -- --fix`;
+const tazelGraph = `$ tazel lock graph
+Demo
+├── Publisher.Json 1.1.0 [by feature Json]
+├── Publisher.Name 1.0.0
+├── Local.vipkg (local)
+└── [test]
+    └── Publisher.Name 2.0.0`;
+const tazelHints = `$ tazel biuld
+error: 'biuld' is not a command of tazel; write tazel help for the commands
+ hint: did you mean tazel build? So close the keys almost had it.`;
+const languageTazel = `${tazelProject}
+
+// tazel build
+// tazel run`;
+
+type TabWords<K extends string> = Record<K, { label: string; caption: string }>;
+
+function languageTabs(
+  words: TabWords<"simple" | "loops" | "lazy" | "inspect" | "tazel">,
+): WhyTab[] {
+  return [
+    { ...words.simple, file: "HelloWorld.tala", code: helloWorld },
+    { ...words.loops, file: "PrimeNumbers.tala", code: primeNumbers },
+    { ...words.lazy, file: "Lazy.tala", code: lazyArguments },
+    { ...words.inspect, file: "terminal", code: gcdIr },
+    { ...words.tazel, file: "BUILD.kts", code: languageTazel },
+  ];
+}
+
+function talacTabs(
+  words: TabWords<"one" | "check" | "stages" | "native" | "diagnostics">,
+): WhyTab[] {
+  return [
+    { ...words.one, file: "terminal", code: talacOneCommand },
+    { ...words.check, file: "terminal", code: talacCheck },
+    { ...words.stages, file: "terminal", code: talacStages },
+    { ...words.native, file: "terminal", code: gcdIr },
+    { ...words.diagnostics, file: "terminal", code: talacDiagnostic },
+  ];
+}
+
+function tazelTabs(
+  words: TabWords<"project" | "commands" | "targets" | "graph" | "hints">,
+): WhyTab[] {
+  return [
+    { ...words.project, file: "BUILD.kts", code: tazelProject },
+    { ...words.commands, file: "terminal", code: tazelCommands },
+    { ...words.targets, file: "terminal", code: tazelTargets },
+    { ...words.graph, file: "terminal", code: tazelGraph },
+    { ...words.hints, file: "terminal", code: tazelHints },
+  ];
+}
+
+const repository = "https://github.com/Progmasoft/tala";
+
+export const landing: Record<Site, Record<Locale, LandingText>> = {
+  language: {
+    "en-US": {
+      title: "Tala — Make the whole program understandable",
+      description:
+        "Meet Tala: a native programming language built around readable source, explicit ownership, and an inspectable compiler pipeline.",
+      headline: "Make the whole program understandable.",
+      lead: "Tala is a native language with readable source, explicit ownership and a compiler whose every stage you can look at.",
+      primary: { label: "Get started", to: "/docs/getting-started" },
+      secondary: { label: "Read the overview", to: "/docs/overview" },
+      whyHeading: "Why Tala?",
+      tabs: languageTabs({
+        simple: {
+          label: "Simple",
+          caption: "A class holds the entry point, and the first program says what it does.",
+        },
+        loops: {
+          label: "Loops and conditions",
+          caption: "while, if and return read the way they run; \\= means not equal.",
+        },
+        lazy: {
+          label: "Lazy by default",
+          caption:
+            "An argument is evaluated when the body needs it. This program prints 42 and never divides by zero.",
+        },
+        inspect: {
+          label: "A compiler you can inspect",
+          caption:
+            "Talac shows what it made of your code: here, the LLVM IR of the gcd loop of an example program.",
+        },
+        tazel: {
+          label: "Builds with Tazel",
+          caption: "A Kotlin project file and one command for each job.",
+        },
+      }),
+      nextHeading: "Next",
+      next: [
+        { label: "Syntax", href: "/docs/syntax" },
+        { label: "Specification", href: `${repository}/tree/main/Spec` },
+        { label: "Examples", href: `${repository}/tree/main/Examples` },
+      ],
+      copy: "Copy",
+      copied: "Copied",
+    },
+    "de-DE": {
+      title: "Tala — Das ganze Programm verstehen",
+      description:
+        "Tala ist eine native Programmiersprache mit lesbarem Quellcode, explizitem Ownership und nachvollziehbarer Compiler-Pipeline.",
+      headline: "Das ganze Programm verstehen.",
+      lead: "Tala ist eine native Sprache mit lesbarem Quellcode, explizitem Ownership und einem Compiler, dessen Stufen man alle einsehen kann.",
+      primary: { label: "Erste Schritte", to: "/docs/getting-started" },
+      secondary: { label: "Zum Überblick", to: "/docs/overview" },
+      whyHeading: "Warum Tala?",
+      tabs: languageTabs({
+        simple: {
+          label: "Einfach",
+          caption:
+            "Eine Klasse enthält den Einstiegspunkt, und das erste Programm sagt, was es tut.",
+        },
+        loops: {
+          label: "Schleifen und Bedingungen",
+          caption: "while, if und return lesen sich, wie sie laufen; \\= heißt ungleich.",
+        },
+        lazy: {
+          label: "Standardmäßig lazy",
+          caption:
+            "Ein Argument wird ausgewertet, wenn der Rumpf es braucht. Dieses Programm gibt 42 aus und teilt nie durch null.",
+        },
+        inspect: {
+          label: "Ein Compiler zum Hineinsehen",
+          caption:
+            "Talac zeigt, was er aus Ihrem Code gemacht hat: hier das LLVM-IR der gcd-Schleife eines Beispielprogramms.",
+        },
+        tazel: {
+          label: "Bauen mit Tazel",
+          caption: "Eine Projektdatei in Kotlin und ein Befehl für jede Aufgabe.",
+        },
+      }),
+      nextHeading: "Weiter",
+      next: [
+        { label: "Syntax", href: "/docs/syntax" },
+        { label: "Spezifikation", href: `${repository}/tree/main/Spec` },
+        { label: "Beispiele", href: `${repository}/tree/main/Examples` },
+      ],
+      copy: "Kopieren",
+      copied: "Kopiert",
+    },
+    "ru-RU": {
+      title: "Tala — Сделать понятной всю программу",
+      description:
+        "Tala — нативный язык программирования с читаемым исходным кодом, явным владением и прозрачным конвейером компилятора.",
+      headline: "Сделать понятной всю программу.",
+      lead: "Tala — нативный язык с читаемым кодом, явным владением и компилятором, каждую стадию которого можно увидеть.",
+      primary: { label: "Начать", to: "/docs/getting-started" },
+      secondary: { label: "Обзор языка", to: "/docs/overview" },
+      whyHeading: "Почему Tala?",
+      tabs: languageTabs({
+        simple: {
+          label: "Просто",
+          caption: "Точка входа — в классе, а первая программа говорит, что делает.",
+        },
+        loops: {
+          label: "Циклы и условия",
+          caption: "while, if и return читаются так, как выполняются; \\= означает «не равно».",
+        },
+        lazy: {
+          label: "Ленивый по умолчанию",
+          caption:
+            "Аргумент вычисляется, когда он нужен телу. Эта программа печатает 42 и никогда не делит на ноль.",
+        },
+        inspect: {
+          label: "Компилятор, который видно",
+          caption:
+            "Talac показывает, во что он превратил код: здесь LLVM IR цикла gcd из программы-примера.",
+        },
+        tazel: {
+          label: "Сборка с Tazel",
+          caption: "Файл проекта на Kotlin и одна команда на каждую задачу.",
+        },
+      }),
+      nextHeading: "Дальше",
+      next: [
+        { label: "Синтаксис", href: "/docs/syntax" },
+        { label: "Спецификация", href: `${repository}/tree/main/Spec` },
+        { label: "Примеры", href: `${repository}/tree/main/Examples` },
+      ],
+      copy: "Копировать",
+      copied: "Скопировано",
+    },
+    "he-IL": {
+      title: "Tala — להפוך את התוכנית כולה למובנת",
+      description:
+        "הכירו את Tala: שפת תכנות שמהודרת לקוד מכונה והבנויה סביב קוד מקור קריא, בעלות מפורשת ותהליך הידור שאפשר לבחון.",
+      headline: "להפוך את התוכנית כולה למובנת.",
+      lead: "Tala היא שפה נייטיב עם קוד קריא, בעלות מפורשת ומהדר שאפשר לראות כל שלב שלו.",
+      primary: { label: "צעדים ראשונים", to: "/docs/getting-started" },
+      secondary: { label: "לסקירה", to: "/docs/overview" },
+      whyHeading: "למה Tala?",
+      tabs: languageTabs({
+        simple: {
+          label: "פשוטה",
+          caption: "מחלקה מחזיקה את נקודת הכניסה, והתוכנית הראשונה אומרת מה היא עושה.",
+        },
+        loops: {
+          label: "לולאות ותנאים",
+          caption: "‏while, ‏if ו-return נקראים כפי שהם רצים; ‎\\= פירושו שונה.",
+        },
+        lazy: {
+          label: "עצלה כברירת מחדל",
+          caption:
+            "ארגומנט מחושב כשגוף המתודה צריך אותו. התוכנית הזאת מדפיסה 42 ואף פעם לא מחלקת באפס.",
+        },
+        inspect: {
+          label: "מהדר שאפשר לראות",
+          caption: "‏Talac מראה מה הוא עשה מהקוד: כאן, ה-LLVM IR של לולאת gcd מתוכנית לדוגמה.",
+        },
+        tazel: {
+          label: "בנייה עם Tazel",
+          caption: "קובץ פרויקט ב-Kotlin ופקודה אחת לכל משימה.",
+        },
+      }),
+      nextHeading: "המשך",
+      next: [
+        { label: "תחביר", href: "/docs/syntax" },
+        { label: "מפרט", href: `${repository}/tree/main/Spec` },
+        { label: "דוגמאות", href: `${repository}/tree/main/Examples` },
+      ],
+      copy: "העתקה",
+      copied: "הועתק",
+    },
+  },
+  talac: {
+    "en-US": {
+      title: "Talac — The Tala compiler",
+      description:
+        "Talac compiles Tala to a native program, checks a program without building it, and writes every stage of the pipeline on request.",
+      headline: "From source to a native program, one stage at a time.",
+      lead: "Talac is the compiler of Tala: one command builds a native program, and every stage on the way is yours to look at.",
+      primary: { label: "Command line", to: "/docs/command-line" },
+      secondary: { label: "Outputs", to: "/docs/outputs" },
+      whyHeading: "Why Talac?",
+      tabs: talacTabs({
+        one: {
+          label: "One command",
+          caption: "Sources in, a native executable out, named after the first input.",
+        },
+        check: {
+          label: "Check without building",
+          caption:
+            "--emit=metadata runs every verifier and writes a short record instead of a program.",
+        },
+        stages: {
+          label: "Every stage",
+          caption:
+            "Core, Xpp, Xmm and LLVM IR can each be written out, and each is verified before it is.",
+        },
+        native: {
+          label: "Native code",
+          caption:
+            "LLVM optimizes the verified Xmm; -O2 turned the gcd loop of an example into this.",
+        },
+        diagnostics: {
+          label: "Diagnostics",
+          caption: "An error names its file, line, column and a stable code.",
+        },
+      }),
+      nextHeading: "Next",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Tazel", href: "https://tazel.tala.run/" },
+        { label: "Source", href: `${repository}/tree/main/Talac` },
+      ],
+      copy: "Copy",
+      copied: "Copied",
+    },
+    "de-DE": {
+      title: "Talac — Der Compiler von Tala",
+      description:
+        "Talac übersetzt Tala in ein natives Programm, prüft ein Programm, ohne es zu bauen, und schreibt auf Wunsch jede Stufe der Pipeline.",
+      headline: "Vom Quellcode zum nativen Programm, Stufe für Stufe.",
+      lead: "Talac ist der Compiler von Tala: Ein Befehl baut ein natives Programm, und jede Stufe auf dem Weg können Sie einsehen.",
+      primary: { label: "Kommandozeile", to: "/docs/command-line" },
+      secondary: { label: "Ausgaben", to: "/docs/outputs" },
+      whyHeading: "Warum Talac?",
+      tabs: talacTabs({
+        one: {
+          label: "Ein Befehl",
+          caption:
+            "Quellen hinein, eine native ausführbare Datei heraus, benannt nach der ersten Eingabe.",
+        },
+        check: {
+          label: "Prüfen ohne Bauen",
+          caption:
+            "--emit=metadata führt jeden Verifier aus und schreibt statt eines Programms einen kurzen Eintrag.",
+        },
+        stages: {
+          label: "Jede Stufe",
+          caption:
+            "Core, Xpp, Xmm und LLVM-IR lassen sich einzeln schreiben, und jede wird vorher verifiziert.",
+        },
+        native: {
+          label: "Nativer Code",
+          caption:
+            "LLVM optimiert das verifizierte Xmm; -O2 hat die gcd-Schleife eines Beispiels so übersetzt.",
+        },
+        diagnostics: {
+          label: "Diagnosen",
+          caption: "Ein Fehler nennt Datei, Zeile, Spalte und einen festen Code.",
+        },
+      }),
+      nextHeading: "Weiter",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Tazel", href: "https://tazel.tala.run/" },
+        { label: "Quellcode", href: `${repository}/tree/main/Talac` },
+      ],
+      copy: "Kopieren",
+      copied: "Kopiert",
+    },
+    "ru-RU": {
+      title: "Talac — Компилятор Tala",
+      description:
+        "Talac компилирует Tala в нативную программу, проверяет программу без сборки и по запросу записывает каждую стадию конвейера.",
+      headline: "От исходного кода к нативной программе, стадия за стадией.",
+      lead: "Talac — компилятор Tala: одна команда собирает нативную программу, а каждую стадию по пути можно посмотреть.",
+      primary: { label: "Командная строка", to: "/docs/command-line" },
+      secondary: { label: "Результаты", to: "/docs/outputs" },
+      whyHeading: "Почему Talac?",
+      tabs: talacTabs({
+        one: {
+          label: "Одна команда",
+          caption:
+            "На входе исходники, на выходе нативный исполняемый файл с именем первого входа.",
+        },
+        check: {
+          label: "Проверка без сборки",
+          caption:
+            "--emit=metadata запускает все верификаторы и вместо программы записывает короткую запись.",
+        },
+        stages: {
+          label: "Каждая стадия",
+          caption:
+            "Core, Xpp, Xmm и LLVM IR можно записать по отдельности, и каждая сначала проверяется.",
+        },
+        native: {
+          label: "Нативный код",
+          caption: "LLVM оптимизирует проверенный Xmm; с -O2 цикл gcd из примера стал таким.",
+        },
+        diagnostics: {
+          label: "Диагностика",
+          caption: "Ошибка называет файл, строку, столбец и постоянный код.",
+        },
+      }),
+      nextHeading: "Дальше",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Tazel", href: "https://tazel.tala.run/" },
+        { label: "Исходный код", href: `${repository}/tree/main/Talac` },
+      ],
+      copy: "Копировать",
+      copied: "Скопировано",
+    },
+    "he-IL": {
+      title: "Talac — המהדר של Tala",
+      description:
+        "‏Talac מהדר את Tala לתוכנית נייטיב, בודק תוכנית בלי לבנות אותה, וכותב לפי בקשה כל שלב בצינור.",
+      headline: "מקוד מקור לתוכנית נייטיב, שלב אחר שלב.",
+      lead: "‏Talac הוא המהדר של Tala: פקודה אחת בונה תוכנית נייטיב, ואת כל שלב בדרך אפשר לראות.",
+      primary: { label: "שורת הפקודה", to: "/docs/command-line" },
+      secondary: { label: "פלטים", to: "/docs/outputs" },
+      whyHeading: "למה Talac?",
+      tabs: talacTabs({
+        one: {
+          label: "פקודה אחת",
+          caption: "קבצי מקור נכנסים, קובץ הרצה נייטיב יוצא, בשם הקלט הראשון.",
+        },
+        check: {
+          label: "בדיקה בלי בנייה",
+          caption: "‎--emit=metadata מריץ כל מאמת וכותב רשומה קצרה במקום תוכנית.",
+        },
+        stages: {
+          label: "כל שלב",
+          caption: "אפשר לכתוב כל אחד מ-Core, ‏Xpp, ‏Xmm ו-LLVM IR, וכל אחד מאומת לפני כן.",
+        },
+        native: {
+          label: "קוד נייטיב",
+          caption: "‏LLVM מבצע אופטימיזציה ל-Xmm המאומת; עם ‎-O2 לולאת gcd מדוגמה הפכה לזה.",
+        },
+        diagnostics: {
+          label: "אבחונים",
+          caption: "שגיאה מציינת קובץ, שורה, עמודה וקוד קבוע.",
+        },
+      }),
+      nextHeading: "המשך",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Tazel", href: "https://tazel.tala.run/" },
+        { label: "קוד מקור", href: `${repository}/tree/main/Talac` },
+      ],
+      copy: "העתקה",
+      copied: "הועתק",
+    },
+  },
+  tazel: {
+    "en-US": {
+      title: "Tazel — The build system of Tala",
+      description:
+        "Tazel builds, runs, formats and lints Tala projects from a Kotlin project file, and keeps their dependencies in a lockfile.",
+      headline: "One project file. One command for each job.",
+      lead: "Tazel reads a Kotlin project file and starts Talac, talafmt and talalint for you. The name joins Tala and Bazel.",
+      primary: { label: "Commands", to: "/docs/commands" },
+      secondary: { label: "The project file", to: "/docs/project-file" },
+      whyHeading: "Why Tazel?",
+      tabs: tazelTabs({
+        project: {
+          label: "Kotlin project file",
+          caption:
+            "BUILD.kts is a Kotlin script with a typed DSL, so an editor completes and checks it.",
+        },
+        commands: {
+          label: "Everyday commands",
+          caption:
+            "check, build, run, fmt and lint; what follows -- goes to the program or the tool.",
+        },
+        targets: {
+          label: "Selecting targets",
+          caption: "Work on one ViPkg, one executable or a whole workspace.",
+        },
+        graph: {
+          label: "Lockfile and graph",
+          caption:
+            "Dependencies are recorded in LOCK.sqlite3; lock graph shows them and who uses what.",
+        },
+        hints: {
+          label: "Helpful errors",
+          caption: "A mistyped command, flag or name gets a hint with what was probably meant.",
+        },
+      }),
+      nextHeading: "Next",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Talac", href: "https://talac.tala.run/" },
+        { label: "Source", href: `${repository}/tree/main/Tazel` },
+      ],
+      copy: "Copy",
+      copied: "Copied",
+    },
+    "de-DE": {
+      title: "Tazel — Das Build-System von Tala",
+      description:
+        "Tazel baut, startet, formatiert und prüft Tala-Projekte aus einer Kotlin-Projektdatei und hält ihre Abhängigkeiten in einer Lockdatei fest.",
+      headline: "Eine Projektdatei. Ein Befehl für jede Aufgabe.",
+      lead: "Tazel liest eine Projektdatei in Kotlin und startet Talac, talafmt und talalint für Sie. Der Name verbindet Tala und Bazel.",
+      primary: { label: "Befehle", to: "/docs/commands" },
+      secondary: { label: "Die Projektdatei", to: "/docs/project-file" },
+      whyHeading: "Warum Tazel?",
+      tabs: tazelTabs({
+        project: {
+          label: "Projektdatei in Kotlin",
+          caption:
+            "BUILD.kts ist ein Kotlin-Skript mit typisierter DSL, also ergänzt und prüft es ein Editor.",
+        },
+        commands: {
+          label: "Alltägliche Befehle",
+          caption:
+            "check, build, run, fmt und lint; was nach -- folgt, geht an das Programm oder das Werkzeug.",
+        },
+        targets: {
+          label: "Ziele auswählen",
+          caption: "An einem ViPkg, einer ausführbaren Datei oder einem ganzen Workspace arbeiten.",
+        },
+        graph: {
+          label: "Lockdatei und Graph",
+          caption:
+            "Abhängigkeiten stehen in LOCK.sqlite3; lock graph zeigt sie und wer was verwendet.",
+        },
+        hints: {
+          label: "Hilfreiche Fehler",
+          caption:
+            "Ein vertippter Befehl, eine Option oder ein Name bekommt einen Hinweis auf das Gemeinte.",
+        },
+      }),
+      nextHeading: "Weiter",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Talac", href: "https://talac.tala.run/" },
+        { label: "Quellcode", href: `${repository}/tree/main/Tazel` },
+      ],
+      copy: "Kopieren",
+      copied: "Kopiert",
+    },
+    "ru-RU": {
+      title: "Tazel — Система сборки Tala",
+      description:
+        "Tazel собирает, запускает, форматирует и проверяет проекты Tala по файлу проекта на Kotlin и хранит их зависимости в lock-файле.",
+      headline: "Один файл проекта. Одна команда на каждую задачу.",
+      lead: "Tazel читает файл проекта на Kotlin и сам запускает Talac, talafmt и talalint. Название соединяет Tala и Bazel.",
+      primary: { label: "Команды", to: "/docs/commands" },
+      secondary: { label: "Файл проекта", to: "/docs/project-file" },
+      whyHeading: "Почему Tazel?",
+      tabs: tazelTabs({
+        project: {
+          label: "Файл проекта на Kotlin",
+          caption:
+            "BUILD.kts — скрипт Kotlin с типизированным DSL, поэтому редактор дополняет и проверяет его.",
+        },
+        commands: {
+          label: "Повседневные команды",
+          caption:
+            "check, build, run, fmt и lint; всё после -- передаётся программе или инструменту.",
+        },
+        targets: {
+          label: "Выбор целей",
+          caption:
+            "Работа с одним ViPkg, одним исполняемым файлом или целым рабочим пространством.",
+        },
+        graph: {
+          label: "Lock-файл и граф",
+          caption:
+            "Зависимости записаны в LOCK.sqlite3; lock graph показывает их и кто что использует.",
+        },
+        hints: {
+          label: "Понятные ошибки",
+          caption:
+            "Команда, параметр или имя с опечаткой получают подсказку о том, что имелось в виду.",
+        },
+      }),
+      nextHeading: "Дальше",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Talac", href: "https://talac.tala.run/" },
+        { label: "Исходный код", href: `${repository}/tree/main/Tazel` },
+      ],
+      copy: "Копировать",
+      copied: "Скопировано",
+    },
+    "he-IL": {
+      title: "Tazel — מערכת הבנייה של Tala",
+      description:
+        "Tazel בונה, מריץ, מעצב ובודק פרויקטים של Tala מקובץ פרויקט ב-Kotlin, ושומר את התלויות שלהם בקובץ נעילה.",
+      headline: "קובץ פרויקט אחד. פקודה אחת לכל משימה.",
+      lead: "Tazel קורא קובץ פרויקט ב-Kotlin ומפעיל בשבילכם את Talac, ‏talafmt ו-talalint. השם מחבר את Tala ואת Bazel.",
+      primary: { label: "פקודות", to: "/docs/commands" },
+      secondary: { label: "קובץ הפרויקט", to: "/docs/project-file" },
+      whyHeading: "למה Tazel?",
+      tabs: tazelTabs({
+        project: {
+          label: "קובץ פרויקט ב-Kotlin",
+          caption: "‏BUILD.kts הוא סקריפט Kotlin עם DSL בעל טיפוסים, כך שעורך משלים ובודק אותו.",
+        },
+        commands: {
+          label: "פקודות יומיומיות",
+          caption: "‏check, ‏build, ‏run, ‏fmt ו-lint; מה שאחרי ‎-- עובר לתוכנית או לכלי.",
+        },
+        targets: {
+          label: "בחירת יעדים",
+          caption: "עבודה על ViPkg אחד, על קובץ הרצה אחד או על סביבת עבודה שלמה.",
+        },
+        graph: {
+          label: "קובץ נעילה וגרף",
+          caption: "התלויות נרשמות ב-LOCK.sqlite3; ‏lock graph מציג אותן ומי משתמש במה.",
+        },
+        hints: {
+          label: "שגיאות מועילות",
+          caption: "פקודה, אפשרות או שם עם שגיאת הקלדה מקבלים רמז למה שהתכוונתם.",
+        },
+      }),
+      nextHeading: "המשך",
+      next: [
+        { label: "Tala", href: "https://tala.run/" },
+        { label: "Talac", href: "https://talac.tala.run/" },
+        { label: "קוד מקור", href: `${repository}/tree/main/Tazel` },
+      ],
+      copy: "העתקה",
+      copied: "הועתק",
+    },
+  },
+};
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9a5d204..c67898f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -6,24 +6,25 @@ import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router"
 import App from "./App.vue";
 import { contentRoutes } from "./content/routes";
 import DocPage from "./pages/DocPage.vue";
-import HomePage from "./pages/HomePage.vue";
+import LandingPage from "./pages/LandingPage.vue";
 import OverviewPage from "./pages/OverviewPage.vue";
 import GettingStartedPage from "./pages/GettingStartedPage.vue";
 import { locale } from "./preferences";
 import { applyPageMetadata } from "./seo";
-import { site, siteHome } from "./site";
+import { site } from "./site";
 import "./styles/site.css";
 
-// tala.run has its home page and two pages built by hand; the documentation of Talac and Tazel, on their own
-// hosts, is rendered from content and opens on its first topic.
-const pages: RouteRecordRaw[] =
-  site === "language"
+// Every site opens on its own landing page. tala.run also has two pages built by hand; the rest of the
+// documentation of each site is rendered from content.
+const pages: RouteRecordRaw[] = [
+  { path: "/", component: LandingPage },
+  ...(site === "language"
     ? [
-        { path: "/", component: HomePage },
         { path: "/docs/overview", component: OverviewPage },
         { path: "/docs/getting-started", component: GettingStartedPage },
       ]
-    : [{ path: "/", redirect: siteHome[site] }];
+    : []),
+];
 const documentation: RouteRecordRaw[] = contentRoutes[site].map((route) => ({
   path: route.path,
   component: DocPage,
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
deleted file mode 100644
index 67ab06e..0000000
--- a/frontend/src/pages/HomePage.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<!-- 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 { arrow, locale } from "../preferences";
-
-const translations = {
-  "en-US": {
-    eyebrow: "A language for building with clarity",
-    title: "Make the whole program understandable.",
-    intro:
-      "Tala 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 Tala?",
-    github: "Follow development",
-    stage: "Language and compiler in active development",
-    why: "Why Tala?",
-    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/tala/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/tala/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/tala",
-      },
-    ],
-    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:
-      "Tala 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 Tala?",
-    github: "Entwicklung verfolgen",
-    stage: "Sprache und Compiler in aktiver Entwicklung",
-    why: "Warum Tala?",
-    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/tala/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/tala/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/tala",
-      },
-    ],
-    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.",
-  },
-  "ru-RU": {
-    eyebrow: "Язык для ясной разработки",
-    title: "Сделать понятной всю программу.",
-    intro:
-      "Tala стремится соединить выразительный исходный код с явным владением, прозрачным конвейером компилятора и нативным результатом. Он создаётся открыто: спецификация описывает задуманный язык, а охват реализации пока растёт.",
-    start: "Начать чтение",
-    overview: "Почему Tala?",
-    github: "Следить за разработкой",
-    stage: "Язык и компилятор в активной разработке",
-    why: "Почему Tala?",
-    whyIntro:
-      "Хорошие инструменты помогают рассуждать о том, что означает ваш код, чем он владеет и что компилятор сделает дальше.",
-    features: [
-      {
-        number: "01",
-        title: "Читаемый код, явный смысл",
-        text: "Спецификация языка отделяет синтаксис от семантических правил и помечает в примерах допустимые и недопустимые формы. Чем меньше скрытых допущений, тем проще обсуждать большие кодовые базы.",
-      },
-      {
-        number: "02",
-        title: "Владение — часть языка",
-        text: "Ссылочные типы, типы-значения и типы с копированием при записи различаются; AARC и явные промежуточные операции входят в проект компилятора. Это направление в процессе реализации, а не заявление о готовой поддержке во время выполнения.",
-      },
-      {
-        number: "03",
-        title: "Компилятор, который можно изучить",
-        text: "У разбора, разрешения имён, проверки типов, Core, Xpp и Xmm отдельные обязанности. Путь к LLVM и нативному исполняемому файлу виден, а не скрыт в чёрном ящике.",
-      },
-    ],
-    codeTitle: "Знакомая отправная точка",
-    codeCaption:
-      "Первая программа намеренно обычна. Глубина замысла проявляется по мере роста программ.",
-    statusLabel: "ТЕКУЩЕЕ СОСТОЯНИЕ",
-    statusTitle: "Проект, который можно изучить. Компилятор, который ещё растёт.",
-    statusLead:
-      "У спецификации и реализации разные задачи. Мы показываем обе, чтобы задуманное правило можно было отличить от возможности, которую уже можно запустить.",
-    statusItems: [
-      {
-        title: "Прочитайте контракт",
-        body: "Публичная спецификация фиксирует грамматику и семантику языка, включая примеры, различающие допустимые и недопустимые формы. Она может описывать поведение раньше, чем его поддержит компилятор.",
-        link: "Открыть спецификацию",
-        href: "https://github.com/Progmasoft/tala/tree/main/Spec",
-      },
-      {
-        title: "Проверьте реализацию",
-        body: "Текущий компилятор, тесты его компонентов и справочник по CLI показывают, какие пути исходного кода и результаты работают сейчас. Новую возможность сначала проверьте на небольшой программе.",
-        link: "Читать справочник по CLI",
-        href: "https://github.com/Progmasoft/tala/blob/main/Documents/CLI.md",
-      },
-      {
-        title: "Следите за работой",
-        body: "В репозитории находятся язык, нативные стадии компилятора, инструменты проектов, примеры и документы для разработчиков. Этот сайт — путеводитель по этой работе, а не заявление о готовом наборе инструментов.",
-        link: "Перейти в репозиторий",
-        href: "https://github.com/Progmasoft/tala",
-      },
-    ],
-    journey: "Познакомьтесь с языком",
-    journeyText:
-      "Прочитайте обзор, чтобы понять замысел, затем следуйте руководству по началу работы с текущим набором инструментов. Незавершённое мы честно помечаем.",
-    disclaimer:
-      "Статус: язык и компилятор развиваются. Примеры в спецификации могут описывать задуманное поведение раньше его полной поддержки компилятором.",
-  },
-  "he-IL": {
-    eyebrow: "שפה לבנייה מתוך בהירות",
-    title: "להפוך את התוכנית כולה למובנת.",
-    intro:
-      "Tala שואפת לשלב קוד מקור אקספרסיבי עם בעלות מפורשת, תהליך הידור גלוי ופלט בקוד מכונה. היא נבנית בפתיחות: המפרט מתאר את השפה המיועדת, וכיסוי המימוש עדיין הולך וגדל.",
-    start: "להתחיל לקרוא",
-    overview: "למה Tala?",
-    github: "למעקב אחר הפיתוח",
-    stage: "השפה והמהדר בפיתוח פעיל",
-    why: "למה Tala?",
-    whyIntro: "כלים טובים צריכים לאפשר לך להבין מה הקוד שלך אומר, מה בבעלותו ומה המהדר יעשה בהמשך.",
-    features: [
-      {
-        number: "01",
-        title: "קוד קריא, משמעות מפורשת",
-        text: "מפרט השפה מפריד בין תחביר לכללים סמנטיים, עם דוגמאות שמסמנות צורות תקינות ושגויות. פחות הנחות נסתרות מקלות על דיון בבסיסי קוד גדולים.",
-      },
-      {
-        number: "02",
-        title: "בעלות היא עניין של השפה",
-        text: "יש הבחנה בין טיפוסי הפניה, טיפוסי ערך וטיפוסי העתקה־בעת־כתיבה; AARC ופעולות ביניים מפורשות הם חלק מתכנון המהדר. זהו כיוון שנמצא במימוש, לא הצהרה על תמיכה מוגמרת בזמן ריצה.",
-      },
-      {
-        number: "03",
-        title: "מהדר שאפשר לבחון",
-        text: "לניתוח התחבירי, לפענוח השמות, לבדיקת הטיפוסים, ל-Core, ל-Xpp ול-Xmm יש תחומי אחריות נפרדים. הדרך אל LLVM ואל קובץ הרצה בקוד מכונה גלויה ואינה קופסה שחורה.",
-      },
-    ],
-    codeTitle: "נקודת התחלה מוכרת",
-    codeCaption: "התוכנית הראשונה רגילה בכוונה. עומק התכנון מתגלה ככל שהתוכניות גדלות.",
-    statusLabel: "המצב הנוכחי",
-    statusTitle: "תכנון שאפשר לבחון. מהדר שעדיין גדל.",
-    statusLead:
-      "למפרט ולמימוש תפקידים שונים. אנחנו מציגים את שניהם כדי שאפשר יהיה להבחין בין כלל מתוכנן לבין יכולת שאפשר להריץ כבר היום.",
-    statusItems: [
-      {
-        title: "לקרוא את החוזה",
-        body: "המפרט הציבורי מתעד את הדקדוק והסמנטיקה של השפה, כולל דוגמאות שמבחינות בין צורות תקינות לשגויות. הוא יכול לתאר התנהגות לפני שהמהדר תומך בה.",
-        link: "לפתיחת המפרט",
-        href: "https://github.com/Progmasoft/tala/tree/main/Spec",
-      },
-      {
-        title: "לבדוק את המימוש",
-        body: "המהדר הנוכחי, בדיקות הרכיבים שלו ומדריך ה-CLI מראים אילו נתיבי קוד מקור ואילו תוצרים עובדים כעת. לפני שמסתמכים על יכולת חדשה, כדאי לבדוק אותה בתוכנית קטנה.",
-        link: "לקריאת מדריך ה-CLI",
-        href: "https://github.com/Progmasoft/tala/blob/main/Documents/CLI.md",
-      },
-      {
-        title: "לעקוב אחר העבודה",
-        body: "המאגר מכיל את השפה, את שלבי ה-native של המהדר, את כלי הפרויקט, דוגמאות ומסמכי פיתוח. האתר הזה הוא מדריך אל העבודה הזאת, לא הצהרה על שרשרת כלים מוגמרת.",
-        link: "למאגר",
-        href: "https://github.com/Progmasoft/tala",
-      },
-    ],
-    journey: "להכיר את השפה",
-    journeyText:
-      "קראו את הסקירה כדי להבין את התכנון, ואז המשיכו למדריך הצעדים הראשונים עם שרשרת הכלים הנוכחית. עבודה שטרם הושלמה מסומנת ביושר.",
-    disclaimer:
-      "מצב: שפה ומהדר מתפתחים. דוגמאות במפרט עשויות לתאר התנהגות מתוכננת לפני שקיימת לה תמיכה מלאה במהדר.",
-  },
-} as const;
-const c = computed(() => translations[locale.value]);
-const example = `namespace Examples.HelloWorld;
-
-public class HelloWorld {
-    public static void Main() {
-        String language = "Tala";
-        Console.Println("Hello from " + language + "!");
-    }
-}`;
-</script>
-
-<template>
-  <section class="hero section-wrap">
-    <img class="hero-logo" src="/tala.svg" width="520" height="293" alt="Tala 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">{{ arrow }}</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 }} {{ arrow }}</RouterLink>
-    </div>
-    <div class="code-card">
-      <div class="code-bar"><span>HelloWorld.tala</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 }} {{ arrow }}</RouterLink
-    >
-  </section>
-  <p class="status-disclaimer section-wrap">{{ c.disclaimer }}</p>
-</template>
diff --git a/frontend/src/pages/LandingPage.vue b/frontend/src/pages/LandingPage.vue
new file mode 100644
index 0000000..777f137
--- /dev/null
+++ b/frontend/src/pages/LandingPage.vue
@@ -0,0 +1,58 @@
+<!-- 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 WhyTabs from "../components/WhyTabs.vue";
+import { landing } from "../content/landing";
+import { locale } from "../preferences";
+import { site } from "../site";
+
+/**
+ * The first page of a site: one headline, two ways in, the "Why" tabs and a short row of next links. The state of
+ * the project is said once, in the header, rather than in every paragraph.
+ */
+const text = computed(() => landing[site][locale.value]);
+const brand = { language: "Tala", talac: "Talac", tazel: "Tazel" }[site];
+</script>
+
+<template>
+  <div class="landing">
+    <section class="landing-hero">
+      <p class="landing-brand">{{ brand }}</p>
+      <h1>{{ text.headline }}</h1>
+      <p class="landing-lead">{{ text.lead }}</p>
+      <div class="landing-actions">
+        <RouterLink class="button button-primary" :to="text.primary.to">{{
+          text.primary.label
+        }}</RouterLink>
+        <RouterLink class="button button-quiet" :to="text.secondary.to">{{
+          text.secondary.label
+        }}</RouterLink>
+      </div>
+    </section>
+
+    <section class="landing-why" aria-labelledby="why-heading">
+      <h2 id="why-heading">{{ text.whyHeading }}</h2>
+      <WhyTabs
+        :id="`why-${site}`"
+        :tabs="text.tabs"
+        :copy-label="text.copy"
+        :copied-label="text.copied"
+      />
+    </section>
+
+    <section class="landing-next" aria-labelledby="next-heading">
+      <h2 id="next-heading">{{ text.nextHeading }}</h2>
+      <ul>
+        <li v-for="link in text.next" :key="link.href">
+          <RouterLink v-if="link.href.startsWith('/')" :to="link.href"
+            >{{ link.label }} →</RouterLink
+          >
+          <a v-else :href="link.href">{{ link.label }} ↗</a>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/seo.ts b/frontend/src/seo.ts
index 02e08fe..c101d5a 100644
--- a/frontend/src/seo.ts
+++ b/frontend/src/seo.ts
@@ -1,12 +1,13 @@
 // SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
 // SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1
 
+import { landing } from "./content/landing.ts";
 import { contentRoutes } from "./content/routes.ts";
 import type { Locale } from "./locales";
-import { site, siteHome, siteHosts, type Site } from "./site.ts";
+import { site, siteHosts, type Site } from "./site.ts";
 
-/** The pages of the language site that are built by hand rather than from content. */
-export type PublicRoute = "/" | "/docs/overview" | "/docs/getting-started";
+/** The documentation pages of the language site that are built by hand rather than from content. */
+export type PublicRoute = "/docs/overview" | "/docs/getting-started";
 
 type PageMetadata = {
   title: string;
@@ -15,11 +16,6 @@ type PageMetadata = {
 
 const metadata: Record<Locale, Record<PublicRoute, PageMetadata>> = {
   "en-US": {
-    "/": {
-      title: "Tala — Make the whole program understandable",
-      description:
-        "Meet Tala: a native programming language built around readable source, explicit ownership, and an inspectable compiler pipeline.",
-    },
     "/docs/overview": {
       title: "Overview · Tala",
       description:
@@ -32,11 +28,6 @@ const metadata: Record<Locale, Record<PublicRoute, PageMetadata>> = {
     },
   },
   "de-DE": {
-    "/": {
-      title: "Tala — Das ganze Programm verstehen",
-      description:
-        "Tala ist eine native Programmiersprache mit lesbarem Quellcode, explizitem Ownership und nachvollziehbarer Compiler-Pipeline.",
-    },
     "/docs/overview": {
       title: "Überblick · Tala",
       description:
@@ -49,11 +40,6 @@ const metadata: Record<Locale, Record<PublicRoute, PageMetadata>> = {
     },
   },
   "ru-RU": {
-    "/": {
-      title: "Tala — Сделать понятной всю программу",
-      description:
-        "Tala — нативный язык программирования с читаемым исходным кодом, явным владением и прозрачным конвейером компилятора.",
-    },
     "/docs/overview": {
       title: "Обзор · Tala",
       description:
@@ -66,11 +52,6 @@ const metadata: Record<Locale, Record<PublicRoute, PageMetadata>> = {
     },
   },
   "he-IL": {
-    "/": {
-      title: "Tala — להפוך את התוכנית כולה למובנת",
-      description:
-        "הכירו את Tala: שפת תכנות שמהודרת לקוד מכונה והבנויה סביב קוד מקור קריא, בעלות מפורשת ותהליך הידור שאפשר לבחון.",
-    },
     "/docs/overview": {
       title: "סקירה · Tala",
       description:
@@ -95,19 +76,21 @@ export function pageMetadata(
   locale: Locale,
   current: Site = site,
 ): PageMetadata & { canonicalPath: string } {
+  if (path === "/") {
+    const page = landing[current][locale];
+    return { title: page.title, description: page.description, canonicalPath: "/" };
+  }
   const content = contentRoutes[current].find((route) => route.path === path);
   if (content) {
     const page = content.topic[locale];
     return { title: page.title, description: page.description, canonicalPath: path };
   }
-  if (current === "language") {
-    // Unknown routes are redirected by the router. Their brief transitional state
-    // must not generate a canonical URL to an unlisted public page.
-    const canonicalPath: PublicRoute =
-      path === "/docs/overview" || path === "/docs/getting-started" ? path : "/";
-    return { ...metadata[locale][canonicalPath], canonicalPath };
+  // Unknown routes are redirected by the router. Their brief transitional state must not generate a canonical
+  // URL to an unlisted public page, so they are described as the landing page.
+  if (current === "language" && (path === "/docs/overview" || path === "/docs/getting-started")) {
+    return { ...metadata[locale][path], canonicalPath: path };
   }
-  return pageMetadata(siteHome[current], locale, current);
+  return pageMetadata("/", locale, current);
 }
 
 export function applyPageMetadata(path: string, locale: Locale): void {
diff --git a/frontend/src/site.ts b/frontend/src/site.ts
index 2e10d67..23a73dd 100644
--- a/frontend/src/site.ts
+++ b/frontend/src/site.ts
@@ -15,11 +15,11 @@ export const siteHosts: Record<Site, string> = {
 
 export const forumUrl = "https://forum.tala.run/";
 
-/** The first page of each site. */
+/** The first page of each site: its landing page. */
 export const siteHome: Record<Site, string> = {
   language: "/",
-  talac: "/docs/command-line",
-  tazel: "/docs/commands",
+  talac: "/",
+  tazel: "/",
 };
 
 /** The documentation topics of each site, in the order the sidebar lists them. */
diff --git a/frontend/src/styles/site.css b/frontend/src/styles/site.css
index 96a1a0c..7695a64 100644
--- a/frontend/src/styles/site.css
+++ b/frontend/src/styles/site.css
@@ -185,32 +185,6 @@ p {
 .inline-link:hover {
   text-decoration: underline;
 }
-
-.hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
-  align-items: center;
-  gap: 60px;
-  min-height: 520px;
-  padding-top: 60px;
-  padding-bottom: 75px;
-}
-.hero-logo {
-  display: block;
-  grid-column: 2;
-  grid-row: 1;
-  width: 100%;
-  height: auto;
-  margin: 0;
-  object-fit: contain;
-  object-position: center;
-}
-.hero-copy {
-  grid-column: 1;
-  grid-row: 1;
-  min-width: 0;
-}
-.eyebrow,
 .kicker {
   color: var(--accent);
   font:
@@ -220,19 +194,6 @@ p {
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
-.hero h1 {
-  margin: 17px 0 17px;
-  font-size: clamp(38px, 4.4vw, 55px);
-  line-height: 1.12;
-  letter-spacing: -0.045em;
-}
-.hero-intro {
-  max-width: 590px;
-  margin: 0;
-  color: var(--muted);
-  font-size: 16px;
-}
-.hero-actions,
 .doc-actions {
   display: flex;
   align-items: center;
@@ -268,92 +229,11 @@ p {
 .button-quiet:hover {
   border-color: var(--accent);
 }
-.release-note {
-  margin-top: 20px;
-  color: var(--quiet);
-  font-size: 12px;
-}
-
-.why-section {
-  padding-top: 66px;
-  padding-bottom: 78px;
-  border-top: 1px solid var(--border);
-}
-.section-lead {
-  max-width: 660px;
-}
-.section-lead h2,
-.example-copy h2,
-.journey h2 {
-  margin: 11px 0;
-  font-size: clamp(30px, 3.3vw, 40px);
-  line-height: 1.2;
-  letter-spacing: -0.035em;
-}
-.section-lead p,
-.example-copy p,
-.journey p {
-  color: var(--muted);
-}
-.feature-list {
-  margin-top: 36px;
-}
-.feature-row {
-  display: grid;
-  grid-template-columns: 55px minmax(170px, 260px) minmax(0, 1fr);
-  gap: 25px;
-  padding: 24px 0;
-  border-top: 1px solid var(--border);
-}
-.feature-row small {
-  color: var(--accent);
-  font:
-    600 12px ui-monospace,
-    Consolas,
-    monospace;
-}
-.feature-row h3 {
-  margin: 0;
-  font-size: 19px;
-  line-height: 1.35;
-}
-.feature-row p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 14px;
-}
-
-.example-section {
-  display: grid;
-  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
-  gap: 60px;
-  align-items: center;
-  padding-top: 78px;
-  padding-bottom: 80px;
-  border-top: 1px solid var(--border);
-}
 .inline-link {
   color: var(--accent);
   font-size: 13px;
   font-weight: 700;
 }
-.code-card {
-  min-width: 0;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  background: var(--panel);
-}
-.code-bar {
-  padding: 10px 18px;
-  border-bottom: 1px solid var(--border);
-  color: var(--quiet);
-  font:
-    12px ui-monospace,
-    Consolas,
-    monospace;
-}
-.code-card pre,
 .doc-code {
   overflow-x: auto;
   margin: 0;
@@ -363,57 +243,6 @@ p {
     Consolas,
     monospace;
 }
-.journey {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 30px;
-  padding-top: 54px;
-  padding-bottom: 54px;
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-}
-.status-section {
-  padding-top: 76px;
-  padding-bottom: 75px;
-  border-top: 1px solid var(--border);
-}
-.status-section h2 {
-  margin: 11px 0;
-  font-size: clamp(30px, 3.3vw, 40px);
-  line-height: 1.2;
-  letter-spacing: -0.035em;
-}
-.status-section .section-lead p {
-  color: var(--muted);
-}
-.status-list {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 28px;
-  margin-top: 33px;
-}
-.status-list article {
-  padding-top: 19px;
-  border-top: 1px solid var(--border);
-}
-.status-list h3 {
-  font-size: 17px;
-}
-.status-list p {
-  color: var(--muted);
-  font-size: 14px;
-}
-.journey p {
-  max-width: 660px;
-  margin-bottom: 0;
-}
-.status-disclaimer {
-  padding-top: 23px;
-  padding-bottom: 38px;
-  color: var(--quiet);
-  font-size: 12px;
-}
 
 .doc-layout {
   display: grid;
@@ -606,46 +435,6 @@ p {
     grid-template-columns: 1fr;
     gap: 4px;
   }
-  .hero {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 0;
-  }
-  .hero-logo {
-    grid-column: 1;
-    grid-row: 1;
-    width: min(100%, 380px);
-    margin: 0 auto;
-  }
-  .hero-copy {
-    grid-column: 1;
-    grid-row: 2;
-  }
-}
-@media (max-width: 650px) {
-  .hero {
-    min-height: 0;
-    padding-top: 24px;
-    padding-bottom: 70px;
-  }
-  .feature-row {
-    grid-template-columns: 38px minmax(0, 1fr);
-    gap: 7px 15px;
-  }
-  .feature-row p {
-    grid-column: 2;
-  }
-  .example-section {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 24px;
-  }
-  .journey {
-    align-items: start;
-    flex-direction: column;
-  }
-  .status-list {
-    grid-template-columns: 1fr;
-    gap: 14px;
-  }
 }
 @media (prefers-reduced-motion: reduce) {
   *,
@@ -676,3 +465,149 @@ p {
   direction: ltr;
   unicode-bidi: isolate;
 }
+
+/* Landing pages: one headline, two ways in, the Why tabs and a row of next links. */
+.landing {
+  width: min(100% - 48px, 960px);
+  margin: 0 auto;
+}
+.landing-hero {
+  padding: 88px 0 56px;
+}
+.landing-brand {
+  margin-bottom: 14px;
+  color: var(--accent);
+  font-size: 15px;
+  font-weight: 600;
+}
+.landing-hero h1 {
+  max-width: 16ch;
+  margin-bottom: 20px;
+  font-size: clamp(36px, 6vw, 58px);
+  line-height: 1.06;
+  letter-spacing: -0.02em;
+}
+.landing-lead {
+  max-width: 60ch;
+  margin-bottom: 30px;
+  color: var(--muted);
+  font-size: 19px;
+}
+.landing-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.landing-why,
+.landing-next {
+  padding: 40px 0;
+}
+.landing-why h2,
+.landing-next h2 {
+  margin-bottom: 20px;
+  font-size: 28px;
+}
+.why-tablist {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--border);
+  scrollbar-width: thin;
+}
+.why-tablist button {
+  flex: none;
+  padding: 10px 14px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 15px;
+}
+.why-tablist button:hover {
+  color: var(--text);
+}
+.why-tablist button[aria-selected="true"] {
+  border-bottom-color: var(--accent);
+  color: var(--text);
+  font-weight: 600;
+}
+.why-panel {
+  padding-top: 18px;
+}
+.why-caption {
+  max-width: 70ch;
+  margin-bottom: 16px;
+  color: var(--muted);
+}
+.why-code {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+}
+.why-code-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+  color: var(--quiet);
+  font-size: 13px;
+}
+.why-copy {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 12px;
+}
+.why-copy:hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+.why-code pre {
+  margin: 0;
+  padding: 18px;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.landing-next ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 28px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.landing-next a {
+  color: var(--accent);
+}
+.landing-next a:hover {
+  text-decoration: underline;
+}
+.status-badge {
+  padding: 3px 9px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--quiet);
+  font-size: 12px;
+  white-space: nowrap;
+}
+@media (max-width: 720px) {
+  .landing {
+    width: calc(100% - 32px);
+  }
+  .landing-hero {
+    padding: 48px 0 32px;
+  }
+  .landing-lead {
+    font-size: 17px;
+  }
+  .status-badge {
+    display: none;
+  }
+}
diff --git a/frontend/tests/site-integrity.test.mjs b/frontend/tests/site-integrity.test.mjs
index 922c03d..51a422b 100644
--- a/frontend/tests/site-integrity.test.mjs
+++ b/frontend/tests/site-integrity.test.mjs
@@ -26,10 +26,12 @@ test("every site publishes exactly its own pages in its sitemap", () => {
     "https://tala.run/docs/syntax",
   ]);
   assert.deepEqual(locations("public/hosts/talac/sitemap.xml"), [
+    "https://talac.tala.run/",
     "https://talac.tala.run/docs/command-line",
     "https://talac.tala.run/docs/outputs",
   ]);
   assert.deepEqual(locations("public/hosts/tazel/sitemap.xml"), [
+    "https://tazel.tala.run/",
     "https://tazel.tala.run/docs/commands",
     "https://tazel.tala.run/docs/project-file",
   ]);
@@ -93,7 +95,8 @@ test("the social image is a 1280 by 640 PNG suitable for the page metadata", ()
 test("the site has no retired public login or registry links", () => {
   const sources = [
     "src/App.vue",
-    "src/pages/HomePage.vue",
+    "src/pages/LandingPage.vue",
+    "src/content/landing.ts",
     "src/pages/OverviewPage.vue",
     "src/pages/GettingStartedPage.vue",
   ];
@@ -122,26 +125,22 @@ test("every linked repository path used by the guides exists when compiler sourc
   }
 });
 
-test("the site example is copied from the compiler repository when available", (context) => {
+test("the site examples are copied from the compiler repository when available", async (context) => {
   const compilerRoot = join(websiteRoot, "..");
-  const examplePath = join(compilerRoot, "Examples/HelloWorld/HelloWorld.tala");
-  if (!existsSync(examplePath)) {
+  if (!existsSync(join(compilerRoot, "Examples/HelloWorld/HelloWorld.tala"))) {
     context.skip("standalone website checkout has no sibling compiler repository");
     return;
   }
-  const source = readFileSync(examplePath, "utf8");
-  const program = source
-    .slice(source.indexOf("namespace Examples.HelloWorld;"))
-    .replaceAll("\r\n", "\n")
-    .trim();
-  const pages = ["src/pages/HomePage.vue", "src/pages/GettingStartedPage.vue"];
-  for (const page of pages) {
-    const content = read(page);
-    assert.ok(
-      content.replaceAll("\r\n", "\n").includes(program),
-      `${page} diverged from the compiler example`,
-    );
-  }
+  const program = (name) => {
+    const source = readFileSync(join(compilerRoot, `Examples/${name}/${name}.tala`), "utf8");
+    return source.slice(source.indexOf("namespace ")).replaceAll("\r\n", "\n").trim();
+  };
+  const samples = await import("../src/content/landing.ts");
+  assert.equal(samples.helloWorld, program("HelloWorld"), "the HelloWorld tab diverged");
+  assert.equal(samples.primeNumbers, program("PrimeNumbers"), "the PrimeNumbers tab diverged");
+  assert.equal(samples.gcd, program("GCD"), "the GCD sample diverged");
+  const guide = read("src/pages/GettingStartedPage.vue").replaceAll("\r\n", "\n");
+  assert.ok(guide.includes(program("HelloWorld")), "the guide diverged from the compiler example");
 });
 
 test("maintenance mode preserves the legacy redirect without opening the language site", () => {
@@ -267,7 +266,7 @@ test("navigation, router, and sitemap agree on the public language pages", () =>
 
 test("every public link in the page shell uses the correct project identity", () => {
   const shell = read("src/App.vue");
-  const home = read("src/pages/HomePage.vue");
+  const home = read("src/content/landing.ts");
   const overview = read("src/pages/OverviewPage.vue");
   const guide = read("src/pages/GettingStartedPage.vue");
   const combined = [shell, home, overview, guide].join("\n");
diff --git a/frontend/tests/sites.test.mjs b/frontend/tests/sites.test.mjs
index 6999d55..d417dbc 100644
--- a/frontend/tests/sites.test.mjs
+++ b/frontend/tests/sites.test.mjs
@@ -67,8 +67,8 @@ test("every topic a sidebar lists is a page of its site", () => {
       assert.ok(sidebar.every((entry) => entry.label.length > 0 && !entry.label.startsWith("/")));
     }
   }
-  assert.equal(siteHome.talac, siteTopics.talac[0]);
-  assert.equal(siteHome.tazel, siteTopics.tazel[0]);
+  // Every site opens on its own landing page rather than on a documentation topic.
+  assert.deepEqual(siteHome, { language: "/", talac: "/", tazel: "/" });
 });
 
 test("every topic is written in every language with the same code in each", () => {
@@ -134,7 +134,8 @@ test("each site names its pages and points canonical URLs at its own host", () =
   assert.equal(talac.title, "Ausgaben · Talac");
   assert.equal(talac.canonicalPath, "/docs/outputs");
   const tazel = pageMetadata("/", "en-US", "tazel");
-  assert.equal(tazel.canonicalPath, "/docs/commands");
+  assert.equal(tazel.canonicalPath, "/");
+  assert.equal(tazel.title, "Tazel — The build system of Tala");
   assert.equal(pageMetadata("/docs/syntax", "ru-RU", "language").title, "Синтаксис · Tala");
   assert.equal(pageMetadata("/docs/outputs", "en-US", "language").canonicalPath, "/");
   assert.deepEqual(siteHosts, {