From f05996aa2b6723faa96190a9d17edc79178f22ea Mon Sep 17 00:00:00 2001
From: Kody Sale <kody.sale@gmail.com>
Date: Thu, 11 Jun 2026 08:41:21 -0700
Subject: [PATCH] Point How it works at the assessment section and carry the
 basePath.

---
 components/landing/Landing.tsx   | 4 ++--
 components/layout/SiteHeader.tsx | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/landing/Landing.tsx b/components/landing/Landing.tsx
index 8f82e6c..8df85a1 100644
--- a/components/landing/Landing.tsx
+++ b/components/landing/Landing.tsx
@@ -452,7 +452,7 @@ function LGap() {
 
 function LFail() {
   return (
-    <Box as="section" css={s.section} id="how">
+    <Box as="section" css={s.section}>
       <Box css={s.wrap}>
         <Box css={s.sectionHead}>
           <Eyebrow as="p" css={{ margin: "0 0 16px" }}>Why it matters</Eyebrow>
@@ -501,7 +501,7 @@ function LFail() {
 
 function LRead() {
   return (
-    <Box as="section" css={{ ...s.section, ...s.sectionBand }}>
+    <Box as="section" css={{ ...s.section, ...s.sectionBand }} id="how">
       <Box css={s.wrap}>
         <Box css={s.sectionHead}>
           <Eyebrow as="p" css={{ margin: "0 0 16px" }}>The assessment</Eyebrow>
diff --git a/components/layout/SiteHeader.tsx b/components/layout/SiteHeader.tsx
index 11556d5..93934f1 100644
--- a/components/layout/SiteHeader.tsx
+++ b/components/layout/SiteHeader.tsx
@@ -83,12 +83,11 @@ type SiteHeaderProps = {
 
 /** Shared site header — the landing nav, reused across the landing, assessment,
     and methodology. The "Assess your validator" CTA hides on /assess (you're
-    already there); "How it works" jumps to the landing's section from inner pages. */
+    already there); "How it works" links to the landing's #how section (via
+    next/link so it carries the basePath). */
 export function SiteHeader({ contentWidth = 1140 }: SiteHeaderProps) {
   const router = useRouter();
-  const onLanding = router.pathname === "/";
   const onAssess = router.pathname === "/assess";
-  const howHref = onLanding ? "#how" : "/#how";
 
   return (
     <Box as="nav" css={bar}>
@@ -107,7 +106,7 @@ export function SiteHeader({ contentWidth = 1140 }: SiteHeaderProps) {
         </BrandLink>
         <TopSpacer />
         <Box css={links}>
-          <Box as="a" href={howHref} css={navLink}>
+          <Box as={NextLink} href="/#how" css={navLink}>
             How it works
           </Box>
           <TopNavLink href={METHODOLOGY_PATH}>Methodology</TopNavLink>