feat(home): add landing-page hero busting the install myth

Returning users and AI demos surfaced a recurring misconception:
visitors thought Semantic Anchors are something you download or
install. They are not — they are vocabulary you type into a prompt.

This commit adds an explainer hero on top of the home page and
expands the first-visit onboarding modal with the same myth-busting
sentence:

- New hero section with three blocks:
  1. Headline 'No download. No install. Just type.' + plain-text intro
     and bold emphasis line.
  2. Side-by-side Without / With anchor prompt example using
     Clean Architecture as the anchor.
  3. Three-step 'How to use this site' (Browse → Copy → Paste) and
     a 'Skip to catalog' anchor link.
- About / Propose New Anchor links move below the hero.
- Onboarding modal: new 'text0' line ('You don't download or install
  Semantic Anchors. They live inside any modern AI model — you just
  need the right word.') rendered as a primary callout above the
  existing copy.
- All strings live in en.json and de.json; HTML inline emphasis is
  done at the template level so i18n stays text-only and safe.

Author: raifdmueller

website/src/components/main-content.js

@@ -4,13 +4,63 @@ export function renderMain() {
   return `
     <main class="flex-1">
       <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <section class="mb-8">
-          <h2 class="text-2xl font-bold text-[var(--color-text)] mb-2" data-i18n="main.heading">
-            ${i18n.t('main.heading')}
-          </h2>
-          <p class="text-[var(--color-text-secondary)] mb-4" data-i18n="main.subheading">
-            ${i18n.t('main.subheading')}
+        <section class="mb-10">
+          <h1 class="text-3xl sm:text-4xl font-bold text-[var(--color-text)] mb-3 leading-tight" data-i18n="hero.title">
+            ${i18n.t('hero.title')}
+          </h1>
+          <p class="text-[var(--color-text-secondary)] mb-2 max-w-3xl" data-i18n="hero.intro">
+            ${i18n.t('hero.intro')}
+          </p>
+          <p class="text-[var(--color-text)] font-semibold mb-6 max-w-3xl" data-i18n="hero.introEmphasis">
+            ${i18n.t('hero.introEmphasis')}
+          </p>
+
+          <div class="grid sm:grid-cols-2 gap-4 mb-3">
+            <div class="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4">
+              <div class="text-xs uppercase tracking-wide text-[var(--color-text-secondary)] mb-2 font-semibold" data-i18n="hero.withoutLabel">
+                ${i18n.t('hero.withoutLabel')}
+              </div>
+              <p class="text-sm text-[var(--color-text-secondary)] leading-relaxed font-mono" data-i18n="hero.withoutText">
+                ${i18n.t('hero.withoutText')}
+              </p>
+            </div>
+            <div class="rounded-lg border-2 border-[var(--color-primary)] bg-[var(--color-bg)] p-4">
+              <div class="text-xs uppercase tracking-wide text-[var(--color-primary)] mb-2 font-semibold" data-i18n="hero.withAnchorLabel">
+                ${i18n.t('hero.withAnchorLabel')}
+              </div>
+              <p class="text-sm text-[var(--color-text)] leading-relaxed font-mono">
+                <span data-i18n="hero.withAnchorTextPrefix">${i18n.t('hero.withAnchorTextPrefix')}</span><strong data-i18n="hero.withAnchorTextAnchor">${i18n.t('hero.withAnchorTextAnchor')}</strong><span data-i18n="hero.withAnchorTextSuffix">${i18n.t('hero.withAnchorTextSuffix')}</span>
+              </p>
+            </div>
+          </div>
+          <p class="text-sm text-[var(--color-text-secondary)] italic mb-8 max-w-3xl" data-i18n="hero.expansion">
+            ${i18n.t('hero.expansion')}
           </p>
+
+          <h2 class="text-lg font-semibold text-[var(--color-text)] mb-3" data-i18n="hero.howToUseTitle">
+            ${i18n.t('hero.howToUseTitle')}
+          </h2>
+          <ol class="grid sm:grid-cols-3 gap-3 mb-6">
+            <li class="flex items-start gap-3 rounded-lg bg-[var(--color-bg-secondary)] p-3">
+              <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-[var(--color-primary)] text-white text-sm font-bold">1</span>
+              <span class="text-sm text-[var(--color-text)]">
+                <strong data-i18n="hero.step1Title">${i18n.t('hero.step1Title')}</strong> <span data-i18n="hero.step1Desc">${i18n.t('hero.step1Desc')}</span>
+              </span>
+            </li>
+            <li class="flex items-start gap-3 rounded-lg bg-[var(--color-bg-secondary)] p-3">
+              <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-[var(--color-primary)] text-white text-sm font-bold">2</span>
+              <span class="text-sm text-[var(--color-text)]">
+                <strong data-i18n="hero.step2Title">${i18n.t('hero.step2Title')}</strong> <span data-i18n="hero.step2Desc">${i18n.t('hero.step2Desc')}</span>
+              </span>
+            </li>
+            <li class="flex items-start gap-3 rounded-lg bg-[var(--color-bg-secondary)] p-3">
+              <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-[var(--color-primary)] text-white text-sm font-bold">3</span>
+              <span class="text-sm text-[var(--color-text)]">
+                <strong data-i18n="hero.step3Title">${i18n.t('hero.step3Title')}</strong> <span data-i18n="hero.step3Desc">${i18n.t('hero.step3Desc')}</span>
+              </span>
+            </li>
+          </ol>
+
           <div class="flex flex-wrap gap-3 text-sm">
             <a
               href="#/about"
@@ -35,6 +85,12 @@ export function renderMain() {
               </svg>
               ${i18n.t('main.proposeAnchor')}
             </a>
+            <span class="text-gray-300 dark:text-gray-600">|</span>
+            <a
+              href="#filters"
+              class="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline ml-auto"
+              data-i18n="hero.skipToCatalog"
+            >${i18n.t('hero.skipToCatalog')}</a>
           </div>
         </section>
 

website/src/components/onboarding-modal.js

@@ -79,6 +79,7 @@ function buildModalContent() {
   // The YouTube video IDs are hardcoded constants above.
   const closeLabel = escapeHtml(i18n.t('modal.close'))
   const slogan2 = escapeHtml(i18n.t('onboarding.slogan2'))
+  const text0 = escapeHtml(i18n.t('onboarding.text0'))
   const text1 = escapeHtml(i18n.t('onboarding.text1'))
   const text2 = escapeHtml(i18n.t('onboarding.text2'))
   const text3 = escapeHtml(i18n.t('onboarding.text3'))
@@ -123,6 +124,7 @@ function buildModalContent() {
           </div>
 
           <div class="sm:w-1/2 flex flex-col gap-3 text-[var(--color-text)] text-sm leading-relaxed">
+            <p class="font-semibold border-l-4 border-[var(--color-primary)] pl-3 py-1 bg-[var(--color-bg-secondary)] rounded-r">${text0}</p>
             <p>${text1}</p>
             <p>${text2}</p>
             <p>${text3}</p>

website/src/translations/de.json

@@ -25,6 +25,24 @@
   "contracts.deselectAll": "Alle abwählen",
   "main.heading": "Semantic Anchors erkunden",
   "main.subheading": "Ein kuratierter Katalog klar definierter Begriffe, Methoden und Frameworks für effektive LLM-Kommunikation.",
+  "hero.title": "Nichts installieren. Nichts laden. Einfach tippen.",
+  "hero.intro": "Semantic Anchors sind Wörter — etablierte Begriffe wie Clean Architecture, Cockburn Use Cases oder MECE — die in jedem modernen LLM ein präzises Konzept aktivieren.",
+  "hero.introEmphasis": "Du installierst sie nicht. Du importierst sie nicht. Du tippst sie.",
+  "hero.withoutLabel": "Ohne Anker",
+  "hero.withoutText": "Bitte refaktoriere diesen Code unter Berücksichtigung der Dependency Rule, mit Entitäten im Kern, Frameworks am Rand, Use Cases dazwischen, I/O getrennt von Fachlogik, Datenbank über Interfaces isoliert…",
+  "hero.withAnchorLabel": "Mit Anker",
+  "hero.withAnchorTextPrefix": "Refaktoriere diesen Code nach ",
+  "hero.withAnchorTextAnchor": "Clean Architecture",
+  "hero.withAnchorTextSuffix": ".",
+  "hero.expansion": "Die KI erweitert den zweiten Prompt zum ersten — weil Clean Architecture in ihren Trainingsdaten steckt.",
+  "hero.howToUseTitle": "So benutzt du die Seite",
+  "hero.step1Title": "Stöbere",
+  "hero.step1Desc": "im Katalog unten.",
+  "hero.step2Title": "Kopiere",
+  "hero.step2Desc": "den Namen des Ankers.",
+  "hero.step3Title": "Füge ein",
+  "hero.step3Desc": "in deinen KI-Prompt — fertig.",
+  "hero.skipToCatalog": "Zum Katalog ↓",
   "main.aboutLink": "Über",
   "main.proposeAnchor": "Neuen Anker vorschlagen",
   "main.documentation": "Dokumentation",
@@ -67,6 +85,7 @@
   "modal.share": "Teilen",
   "onboarding.slogan1": "Semantic Anchors.",
   "onboarding.slogan2": "Ein Wort, und die KI versteht den Rest.",
+  "onboarding.text0": "Semantic Anchors l\u00e4dst du nicht herunter und installierst sie nicht. Sie stecken bereits in jedem modernen KI-Modell \u2014 du brauchst nur das richtige Wort.",
   "onboarding.text1": "Stell dir vor, du sagst ein einziges Wort \u2013 und dein Gegen\u00fcber versteht sofort ein ganzes Konzept.",
   "onboarding.text2": "Ein Semantic Anchor ist ein etablierter Begriff, der ein ganzes Wissensgebiet aktiviert. Wie ein Anker, der ein Schiff an einem festen Punkt h\u00e4lt \u2013 so verankert ein Semantic Anchor dein Gespr\u00e4ch an einem pr\u00e4zisen Konzept.",
   "onboarding.text3": "Das funktioniert, weil KI-Modelle auf Millionen von Texten trainiert wurden. Begriffe wie MECE, Clean Architecture oder Feynman-Technik l\u00f6sen sofort tiefes Kontextwissen aus.",

website/src/translations/en.json

@@ -25,6 +25,24 @@
   "contracts.deselectAll": "Deselect all",
   "main.heading": "Explore Semantic Anchors",
   "main.subheading": "A curated catalog of well-defined terms, methodologies, and frameworks for effective LLM communication.",
+  "hero.title": "No download. No install. Just type.",
+  "hero.intro": "Semantic Anchors are words — established terms like Clean Architecture, Cockburn Use Cases or MECE — that activate rich, well-defined concepts inside any modern LLM.",
+  "hero.introEmphasis": "You don't install them. You don't import them. You type them.",
+  "hero.withoutLabel": "Without anchor",
+  "hero.withoutText": "Please refactor this code keeping the dependency rule in mind, with entities at the center, frameworks at the edge, and use cases in between, separating I/O concerns from domain logic, and isolating the database via interfaces…",
+  "hero.withAnchorLabel": "With anchor",
+  "hero.withAnchorTextPrefix": "Refactor this code following ",
+  "hero.withAnchorTextAnchor": "Clean Architecture",
+  "hero.withAnchorTextSuffix": ".",
+  "hero.expansion": "The LLM expands the second prompt into the first — because Clean Architecture is in its training data.",
+  "hero.howToUseTitle": "How to use this site",
+  "hero.step1Title": "Browse",
+  "hero.step1Desc": "the catalog below.",
+  "hero.step2Title": "Copy",
+  "hero.step2Desc": "the anchor name.",
+  "hero.step3Title": "Paste",
+  "hero.step3Desc": "it into your AI prompt — that's it.",
+  "hero.skipToCatalog": "Skip to catalog ↓",
   "main.aboutLink": "About",
   "main.proposeAnchor": "Propose New Anchor",
   "main.documentation": "Documentation",
@@ -67,6 +85,7 @@
   "modal.share": "Share",
   "onboarding.slogan1": "Semantic Anchors.",
   "onboarding.slogan2": "One word, and the AI gets the rest.",
+  "onboarding.text0": "You don't download or install Semantic Anchors. They live inside any modern AI model \u2014 you just need the right word.",
   "onboarding.text1": "Imagine saying just one word \u2013 and your counterpart instantly understands an entire concept.",
   "onboarding.text2": "A Semantic Anchor is an established term that activates an entire body of knowledge. Like an anchor holding a ship in place \u2013 a Semantic Anchor pins your conversation to a precise concept.",
   "onboarding.text3": "This works because AI models were trained on millions of texts. Terms like MECE, Clean Architecture, or the Feynman Technique instantly trigger deep contextual knowledge.",