Give each site a calm landing page with a "Why" section

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>

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>

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>

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>