Merge pull request 'feat(home): add a first-person byline under the hero search' (#97) from feat/hero-byline into main

Reviewed-on: #97

nextjs-app/components/HomeView.module.css

@@ -189,6 +189,43 @@
   }
 }
 
+/*
+ * The one line in the first person, so it is set apart from the marketing copy
+ * around it without shouting: display face, a step down in size, and a short
+ * brand rule instead of a bullet or an emoji.
+ *
+ * No italic — Manrope ships no italic in the loaded weights, so font-style
+ * would be synthesised into a slant. Same reason .heroEmph sets font-style
+ * back to normal.
+ */
+.heroByline {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 1.25rem 0 0;
+  font-family: var(--font-display);
+  font-size: var(--step--1);
+  font-weight: 500;
+  font-style: normal;
+  color: var(--text-secondary);
+}
+
+.heroByline::before {
+  content: '';
+  flex: 0 0 auto;
+  width: 1.25rem;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--brand);
+}
+
+@media (max-width: 640px) {
+  .heroByline {
+    margin-top: 1rem;
+    font-size: var(--step--2);
+  }
+}
+
 .heroEyebrow {
   display: inline-flex;
   align-items: center;

nextjs-app/components/HomeView.tsx

@@ -464,6 +464,19 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
               geoError={geoError}
             />
 
+            {/*
+              Sits under the search rather than in the footer on purpose: this
+              is the one line on the page written in the first person, and it
+              earns its place at the moment someone is deciding whether to
+              trust a site full of government statistics. In the footer it
+              would be true and unread.
+
+              It is deliberately the only such claim — the page's other trust
+              signals are all about the data's provenance, which is checkable.
+              This one is about who made it, which is not, so it is stated
+              once, plainly, and never repeated.
+            */}
+            <p className={styles.heroByline}>Built for parents, by a parent.</p>
           </div>
 
           {/*