Skip to content

Commit bdf6417

Browse files
authored
Merge pull request #462 from raifdmueller/main
Sync from fork: landing hero busts the 'install' myth
2 parents c6f74a8 + 77c8c9f commit bdf6417

5 files changed

Lines changed: 103 additions & 7 deletions

File tree

website/src/components/main-content.js

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,63 @@ export function renderMain() {
44
return `
55
<main class="flex-1">
66
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
7-
<section class="mb-8">
8-
<h2 class="text-2xl font-bold text-[var(--color-text)] mb-2" data-i18n="main.heading">
9-
${i18n.t('main.heading')}
10-
</h2>
11-
<p class="text-[var(--color-text-secondary)] mb-4" data-i18n="main.subheading">
12-
${i18n.t('main.subheading')}
7+
<section class="mb-10">
8+
<h1 class="text-3xl sm:text-4xl font-bold text-[var(--color-text)] mb-3 leading-tight" data-i18n="hero.title">
9+
${i18n.t('hero.title')}
10+
</h1>
11+
<p class="text-[var(--color-text-secondary)] mb-2 max-w-3xl" data-i18n="hero.intro">
12+
${i18n.t('hero.intro')}
13+
</p>
14+
<p class="text-[var(--color-text)] font-semibold mb-6 max-w-3xl" data-i18n="hero.introEmphasis">
15+
${i18n.t('hero.introEmphasis')}
16+
</p>
17+
18+
<div class="grid sm:grid-cols-2 gap-4 mb-3">
19+
<div class="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4">
20+
<div class="text-xs uppercase tracking-wide text-[var(--color-text-secondary)] mb-2 font-semibold" data-i18n="hero.withoutLabel">
21+
${i18n.t('hero.withoutLabel')}
22+
</div>
23+
<p class="text-sm text-[var(--color-text-secondary)] leading-relaxed font-mono" data-i18n="hero.withoutText">
24+
${i18n.t('hero.withoutText')}
25+
</p>
26+
</div>
27+
<div class="rounded-lg border-2 border-[var(--color-primary)] bg-[var(--color-bg)] p-4">
28+
<div class="text-xs uppercase tracking-wide text-[var(--color-primary)] mb-2 font-semibold" data-i18n="hero.withAnchorLabel">
29+
${i18n.t('hero.withAnchorLabel')}
30+
</div>
31+
<p class="text-sm text-[var(--color-text)] leading-relaxed font-mono">
32+
<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>
33+
</p>
34+
</div>
35+
</div>
36+
<p class="text-sm text-[var(--color-text-secondary)] italic mb-8 max-w-3xl" data-i18n="hero.expansion">
37+
${i18n.t('hero.expansion')}
1338
</p>
39+
40+
<h2 class="text-lg font-semibold text-[var(--color-text)] mb-3" data-i18n="hero.howToUseTitle">
41+
${i18n.t('hero.howToUseTitle')}
42+
</h2>
43+
<ol class="grid sm:grid-cols-3 gap-3 mb-6">
44+
<li class="flex items-start gap-3 rounded-lg bg-[var(--color-bg-secondary)] p-3">
45+
<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>
46+
<span class="text-sm text-[var(--color-text)]">
47+
<strong data-i18n="hero.step1Title">${i18n.t('hero.step1Title')}</strong> <span data-i18n="hero.step1Desc">${i18n.t('hero.step1Desc')}</span>
48+
</span>
49+
</li>
50+
<li class="flex items-start gap-3 rounded-lg bg-[var(--color-bg-secondary)] p-3">
51+
<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>
52+
<span class="text-sm text-[var(--color-text)]">
53+
<strong data-i18n="hero.step2Title">${i18n.t('hero.step2Title')}</strong> <span data-i18n="hero.step2Desc">${i18n.t('hero.step2Desc')}</span>
54+
</span>
55+
</li>
56+
<li class="flex items-start gap-3 rounded-lg bg-[var(--color-bg-secondary)] p-3">
57+
<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>
58+
<span class="text-sm text-[var(--color-text)]">
59+
<strong data-i18n="hero.step3Title">${i18n.t('hero.step3Title')}</strong> <span data-i18n="hero.step3Desc">${i18n.t('hero.step3Desc')}</span>
60+
</span>
61+
</li>
62+
</ol>
63+
1464
<div class="flex flex-wrap gap-3 text-sm">
1565
<a
1666
href="#/about"
@@ -35,6 +85,12 @@ export function renderMain() {
3585
</svg>
3686
${i18n.t('main.proposeAnchor')}
3787
</a>
88+
<span class="text-gray-300 dark:text-gray-600">|</span>
89+
<a
90+
href="#filters"
91+
class="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline ml-auto"
92+
data-i18n="hero.skipToCatalog"
93+
>${i18n.t('hero.skipToCatalog')}</a>
3894
</div>
3995
</section>
4096

website/src/components/onboarding-modal.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ function buildModalContent() {
7979
// The YouTube video IDs are hardcoded constants above.
8080
const closeLabel = escapeHtml(i18n.t('modal.close'))
8181
const slogan2 = escapeHtml(i18n.t('onboarding.slogan2'))
82+
const text0 = escapeHtml(i18n.t('onboarding.text0'))
8283
const text1 = escapeHtml(i18n.t('onboarding.text1'))
8384
const text2 = escapeHtml(i18n.t('onboarding.text2'))
8485
const text3 = escapeHtml(i18n.t('onboarding.text3'))
@@ -123,6 +124,7 @@ function buildModalContent() {
123124
</div>
124125
125126
<div class="sm:w-1/2 flex flex-col gap-3 text-[var(--color-text)] text-sm leading-relaxed">
127+
<p class="font-semibold border-l-4 border-[var(--color-primary)] pl-3 py-1 bg-[var(--color-bg-secondary)] rounded-r">${text0}</p>
126128
<p>${text1}</p>
127129
<p>${text2}</p>
128130
<p>${text3}</p>

website/src/translations/de.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,24 @@
2525
"contracts.deselectAll": "Alle abwählen",
2626
"main.heading": "Semantic Anchors erkunden",
2727
"main.subheading": "Ein kuratierter Katalog klar definierter Begriffe, Methoden und Frameworks für effektive LLM-Kommunikation.",
28+
"hero.title": "Nichts installieren. Nichts laden. Einfach tippen.",
29+
"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.",
30+
"hero.introEmphasis": "Du installierst sie nicht. Du importierst sie nicht. Du tippst sie.",
31+
"hero.withoutLabel": "Ohne Anker",
32+
"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…",
33+
"hero.withAnchorLabel": "Mit Anker",
34+
"hero.withAnchorTextPrefix": "Refaktoriere diesen Code nach ",
35+
"hero.withAnchorTextAnchor": "Clean Architecture",
36+
"hero.withAnchorTextSuffix": ".",
37+
"hero.expansion": "Die KI erweitert den zweiten Prompt zum ersten — weil Clean Architecture in ihren Trainingsdaten steckt.",
38+
"hero.howToUseTitle": "So benutzt du die Seite",
39+
"hero.step1Title": "Stöbere",
40+
"hero.step1Desc": "im Katalog unten.",
41+
"hero.step2Title": "Kopiere",
42+
"hero.step2Desc": "den Namen des Ankers.",
43+
"hero.step3Title": "Füge ein",
44+
"hero.step3Desc": "in deinen KI-Prompt — fertig.",
45+
"hero.skipToCatalog": "Zum Katalog ↓",
2846
"main.aboutLink": "Über",
2947
"main.proposeAnchor": "Neuen Anker vorschlagen",
3048
"main.documentation": "Dokumentation",
@@ -67,6 +85,7 @@
6785
"modal.share": "Teilen",
6886
"onboarding.slogan1": "Semantic Anchors.",
6987
"onboarding.slogan2": "Ein Wort, und die KI versteht den Rest.",
88+
"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.",
7089
"onboarding.text1": "Stell dir vor, du sagst ein einziges Wort \u2013 und dein Gegen\u00fcber versteht sofort ein ganzes Konzept.",
7190
"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.",
7291
"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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,24 @@
2525
"contracts.deselectAll": "Deselect all",
2626
"main.heading": "Explore Semantic Anchors",
2727
"main.subheading": "A curated catalog of well-defined terms, methodologies, and frameworks for effective LLM communication.",
28+
"hero.title": "No download. No install. Just type.",
29+
"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.",
30+
"hero.introEmphasis": "You don't install them. You don't import them. You type them.",
31+
"hero.withoutLabel": "Without anchor",
32+
"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…",
33+
"hero.withAnchorLabel": "With anchor",
34+
"hero.withAnchorTextPrefix": "Refactor this code following ",
35+
"hero.withAnchorTextAnchor": "Clean Architecture",
36+
"hero.withAnchorTextSuffix": ".",
37+
"hero.expansion": "The LLM expands the second prompt into the first — because Clean Architecture is in its training data.",
38+
"hero.howToUseTitle": "How to use this site",
39+
"hero.step1Title": "Browse",
40+
"hero.step1Desc": "the catalog below.",
41+
"hero.step2Title": "Copy",
42+
"hero.step2Desc": "the anchor name.",
43+
"hero.step3Title": "Paste",
44+
"hero.step3Desc": "it into your AI prompt — that's it.",
45+
"hero.skipToCatalog": "Skip to catalog ↓",
2846
"main.aboutLink": "About",
2947
"main.proposeAnchor": "Propose New Anchor",
3048
"main.documentation": "Documentation",
@@ -67,6 +85,7 @@
6785
"modal.share": "Share",
6886
"onboarding.slogan1": "Semantic Anchors.",
6987
"onboarding.slogan2": "One word, and the AI gets the rest.",
88+
"onboarding.text0": "You don't download or install Semantic Anchors. They live inside any modern AI model \u2014 you just need the right word.",
7089
"onboarding.text1": "Imagine saying just one word \u2013 and your counterpart instantly understands an entire concept.",
7190
"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.",
7291
"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.",

website/tests/e2e/website.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ test.describe('Homepage - Card Grid', () => {
1414

1515
test('should load homepage successfully', async ({ page }) => {
1616
await expect(page).toHaveTitle(/Semantic Anchors/)
17-
await expect(page.locator('h2').first()).toContainText('Semantic Anchors')
17+
await expect(page.locator('main h1').first()).toContainText(/No download|Nichts installieren/)
1818
})
1919

2020
test('should display header with navigation', async ({ page }) => {

0 commit comments

Comments
 (0)