From 43c431a793affe2fa41ead816268d6af760f72d0 Mon Sep 17 00:00:00 2001
From: Leitwolf11 <238872178+Leitwolf11@users.noreply.github.com>
Date: Sun, 18 Oct 2026 01:45:32 +0300
Subject: [PATCH] Give each site a calm landing page with a "Why" section

tala.run, talac.tala.run and tazel.tala.run now each open on a landing page
of their own. talac.tala.run and tazel.tala.run used to redirect "/" to
their first documentation topic. Every landing page has one headline, two
ways in, a "Why Tala?", "Why Talac?" or "Why Tazel?" section of tabs over
one code panel, and a short row of next links. The tabs follow the ARIA
tabs pattern: arrow keys, Home and End move between them. The code panel
stays left to right on the Hebrew pages and has a copy button.

Every sample is something that works today. The Tala tabs show
HelloWorld and PrimeNumbers, which are copies of Examples/ (a test compares
them), a small program that shows an argument evaluated by need, the
LLVM IR that talac -O2 made of the gcd loop of Examples/GCD, and a Tazel
project file. The Talac tabs show the terminal output of talac 0.6.0 for
one command, --emit=metadata, each --emit stage, the optimized IR and a
type error. The Tazel tabs show the project file, the everyday commands,
target selection, lock graph and a did-you-mean hint. Of the fifteen
programs in Examples/, talac 0.6.0 builds four (HelloWorld, GCD,
PrimeNumbers, CollatzTrace), so the classes, generators and pattern
matching of the others are not shown yet.

The old home page said in nearly every paragraph that the work was
unfinished, linked "Why Tala?" three times, and numbered its sections. It
is gone. The state of the project is said once, as a small badge beside
the name in the header. The header no longer repeats a Home link, since
the name leads home. On talac and tazel it lists their documentation
topics. Styles that only the old home page used are removed.

The titles and descriptions of "/" come from the landing content of each
site, and the talac and tazel sitemaps list "/". The tests follow:
siteHome is "/" everywhere, the tazel canonical path is "/", and the
example comparison reads the landing samples.
---
 frontend/public/hosts/talac/sitemap.xml |   5 +
 frontend/public/hosts/tazel/sitemap.xml |   5 +
 frontend/src/App.vue                    |  20 +-
 frontend/src/components/WhyTabs.vue     |  97 +++
 frontend/src/content/landing.ts         | 752 ++++++++++++++++++++++++
 frontend/src/main.ts                    |  17 +-
 frontend/src/pages/HomePage.vue         | 336 -----------
 frontend/src/pages/LandingPage.vue      |  58 ++
 frontend/src/seo.ts                     |  43 +-
 frontend/src/site.ts                    |   6 +-
 frontend/src/styles/site.css            | 357 +++++------
 frontend/tests/site-integrity.test.mjs  |  35 +-
 frontend/tests/sites.test.mjs           |   7 +-
 13 files changed, 1126 insertions(+), 612 deletions(-)
 create mode 100644 frontend/src/components/WhyTabs.vue
 create mode 100644 frontend/src/content/landing.ts
 delete mode 100644 frontend/src/pages/HomePage.vue
 create mode 100644 frontend/src/pages/LandingPage.vue

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, {