Landing deep-dive link must read as a CTA #199

New issue

Closed

opened 2026-09-08 15:17:41 +00:00 by crueber · 3 comments

crueber commented

2026-09-08 15:17:41 +00:00

Owner

Landing deep-dive link must read as a CTA, not body text

The "How it works →" link at the bottom of the landing page (next to the Browse repositories CTA) is a bare hover-underline span — it doesn't look like a link or a button, so readers don't know it's clickable.

Fix

Give it an unmistakable CTA treatment consistent with the page: real button styling (match/complement the adjacent Browse repositories button — primary or secondary .btn treatment, not a naked span), visible affordance in both themes, keyboard focus visible. Keep the copy ("How it works →" or better).

Acceptance criteria

The link is obviously clickable at a glance (button treatment, both themes).
node --test green; browser check both themes, zero console errors; no new deps.

# Landing deep-dive link must read as a CTA, not body text The "How it works →" link at the bottom of the landing page (next to the Browse repositories CTA) is a bare hover-underline span — it doesn't look like a link or a button, so readers don't know it's clickable. ## Fix Give it an unmistakable CTA treatment consistent with the page: real button styling (match/complement the adjacent Browse repositories button — primary or secondary `.btn` treatment, not a naked span), visible affordance in both themes, keyboard focus visible. Keep the copy ("How it works →" or better). ## Acceptance criteria - [ ] The link is obviously clickable at a glance (button treatment, both themes). - [ ] `node --test` green; browser check both themes, zero console errors; no new deps.

crueber referenced this issue from a commit

2026-09-08 15:43:07 +00:00

Fix #199: landing deep-dive links get secondary .btn CTA treatment

crueber referenced this issue from a pull request that will close it,

2026-09-08 15:43:12 +00:00

Fix #199: deep-dive CTA buttons #201

crueber commented

2026-09-08 15:43:17 +00:00

Author

Owner

Fixed by #201 (branch fix/issue-199): both deep-dive links are now secondary .btn CTAs; 398/398 node tests green, browser-verified both themes with zero console errors.

crueber commented

2026-09-08 15:50:27 +00:00

Author

Owner

Review of PR #201 (fix/issue-199, commit 3e06b1c) — verified in scratch worktree /tmp/pr201 (since removed):

PASS — both deep-dive links read as CTAs:

web/src/pages/Landing.jsx:70 (hero) + :141 (quickstart bottom): both are now <A class="btn px-4 py-2" href="/how-it-works"> — secondary .btn, non-primary, next to the primary Browse CTA. Obviously clickable in both themes (.btn carries light base + dark: variants, web/src/ui.css:32-34; no new CSS needed).
Layout sane: hero row is centered flex-wrap with the caption as a sibling span; bottom row is flex-wrap gap-3 (Browse primary + How-it-works secondary) with the 'New here? ...' caption below as muted text.
No bare hover:underline spans left for /how-it-works (grep clean; remaining underlines are /setup + /keys — out of scope).
Keyboard focus: global :focus-visible rule (ui.css:18-21) untouched, applies to both anchors.
Test pins meaningful: web/test/unit/landing.test.js new test asserts exactly 2 how-it-works links, each with .btn and without primary, plus absence of the bare-underline variant.
No new deps (diff is 2 files only: Landing.jsx + landing.test.js); no other markup touched; Law 12 clean (docs speak of landing/deep-dive 'links' with no pinned styling — no doc amendment needed); Laws 1/7/8 unaffected.

VERIFY: landing.test.js 8/8 pass; full unit suite 395/395 pass (all files except smoke); smoke.test.js 3 pass with a file-level pending-promise artifact that reproduces identically on main (sandbox has no server on :8080 — pre-existing, not PR-caused); vite build clean (127 modules, exit 0). No browser drive per task instructions — .btn theming + focus verified by source (ui.css dark: variants + global focus rule). Main worktree left untouched.

No fixes needed — nothing pushed.

MERGE RECOMMENDATION: ready to merge.

Review of PR #201 (fix/issue-199, commit 3e06b1c) — verified in scratch worktree /tmp/pr201 (since removed): PASS — both deep-dive links read as CTAs: - web/src/pages/Landing.jsx:70 (hero) + :141 (quickstart bottom): both are now `<A class="btn px-4 py-2" href="/how-it-works">` — secondary .btn, non-primary, next to the primary Browse CTA. Obviously clickable in both themes (.btn carries light base + dark: variants, web/src/ui.css:32-34; no new CSS needed). - Layout sane: hero row is centered flex-wrap with the caption as a sibling span; bottom row is flex-wrap gap-3 (Browse primary + How-it-works secondary) with the 'New here? ...' caption below as muted text. - No bare `hover:underline` spans left for /how-it-works (grep clean; remaining underlines are /setup + /keys — out of scope). - Keyboard focus: global `:focus-visible` rule (ui.css:18-21) untouched, applies to both anchors. - Test pins meaningful: web/test/unit/landing.test.js new test asserts exactly 2 how-it-works <A> links, each with .btn and without primary, plus absence of the bare-underline variant. - No new deps (diff is 2 files only: Landing.jsx + landing.test.js); no other markup touched; Law 12 clean (docs speak of landing/deep-dive 'links' with no pinned styling — no doc amendment needed); Laws 1/7/8 unaffected. VERIFY: landing.test.js 8/8 pass; full unit suite 395/395 pass (all files except smoke); smoke.test.js 3 pass with a file-level pending-promise artifact that reproduces identically on main (sandbox has no server on :8080 — pre-existing, not PR-caused); vite build clean (127 modules, exit 0). No browser drive per task instructions — .btn theming + focus verified by source (ui.css dark: variants + global focus rule). Main worktree left untouched. No fixes needed — nothing pushed. MERGE RECOMMENDATION: ready to merge.

crueber closed this issue

2026-09-08 15:51:00 +00:00

crueber commented

2026-09-08 15:51:00 +00:00

Author

Owner

Fixed by PR #201 (review clean; both links secondary .btn; tests green), merged. Closing.

crueber referenced this issue from a commit

2026-09-08 15:51:01 +00:00

Merge pull request 'Fix #199: deep-dive CTA buttons' (#201) from fix/issue-199 into main

crueber referenced this issue

2026-09-09 12:27:04 +00:00