From 44f6c4b11b4f8c7a6ceef2c4455c182ee62cd68e Mon Sep 17 00:00:00 2001
From: Rohit Ghumare <ghumare64@gmail.com>
Date: Sat, 16 May 2026 10:01:11 +0100
Subject: [PATCH] =?UTF-8?q?feat(website):=20hero=20rebuild=20=E2=80=94=20n?=
 =?UTF-8?q?px=20CTA=20+=20inline=20FeaturedIn=20+=20SSR=20star=20count?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five user-reported issues against agent-memory.dev v0.9.16:

1. AGENT/MEMORY title was clamp(54px, 12vw, 160px) — eating ~half the
   viewport on most desktop widths and forcing FeaturedIn below the
   fold. Reduced to clamp(44px, 9vw, 124px). Mobile-stacked variant
   now clamp(40px, 14vw, 72px) — cleaner.

2. Primary CTA was a generic "START IN 30 SECONDS" button that
   anchored to #install. Replaced with a copyable terminal command —
   `$ npx @agentmemory/agentmemory` rendered as a gold-bordered cell
   with "CLICK TO COPY" affordance. Copy → clipboard, transient
   "COPIED" state. Matches what users actually type.

3. FeaturedIn was a standalone section below the fold. Now inlined
   inside the hero (compact mode — no border, no own padding,
   transparent background) so AlphaSignal / Agentic AI Foundation /
   Trendshift validation lands above the fold.

4. Star count was missing from the hero CTA button. The component
   only fetched client-side from unauthenticated github.com/api which
   is rate-limited to ~60 req/hr/IP — first paint had no count, often
   forever on mobile (which is what the user screenshot showed).
   Hero is now an async server component; calls lib/github.ts
   fetchRepoStats (same path Nav already uses), passes the SSR'd
   count into GitHubStarButton via new optional initialStars prop.
   Client-side refetch still fires in useEffect as a best-effort
   refresh.

5. Mobile layout was unverified. Tightened all clamp() values,
   added explicit @media (max-width: 760px) breakpoint that drops
   padding, stacks the title, and reduces the chip size. The new
   HeroNpxCommand has its own mobile breakpoint at 640px that hides
   the "CLICK TO COPY" hint and stretches to full width.

CTA stacks vertically now: copyable command (primary, gold border)
on row 1, then "SEE IT MOVE" + STAR-with-count on row 2. FeaturedIn
strip sits below row 2 as part of the above-the-fold validation.

Build clean. No new deps.
---
 website/app/page.tsx                         |  2 -
 website/components/FeaturedIn.module.css     |  9 +++
 website/components/FeaturedIn.tsx            | 15 ++++-
 website/components/GitHubStarButton.tsx      | 16 +++--
 website/components/Hero.module.css           | 43 ++++++++----
 website/components/Hero.tsx                  | 24 ++++---
 website/components/HeroNpxCommand.module.css | 69 ++++++++++++++++++++
 website/components/HeroNpxCommand.tsx        | 33 ++++++++++
 website/lib/generated-meta.json              |  4 +-
 9 files changed, 186 insertions(+), 29 deletions(-)
 create mode 100644 website/components/HeroNpxCommand.module.css
 create mode 100644 website/components/HeroNpxCommand.tsx

diff --git a/website/app/page.tsx b/website/app/page.tsx
index 026f43d2..e5946910 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -1,7 +1,6 @@
 import { ScrollProgress } from "@/components/ScrollProgress";
 import { Nav } from "@/components/Nav";
 import { Hero } from "@/components/Hero";
-import { FeaturedIn } from "@/components/FeaturedIn";
 import { Stats } from "@/components/Stats";
 import { Primitives } from "@/components/Primitives";
 import { Features } from "@/components/Features";
@@ -21,7 +20,6 @@ export default function Page() {
       <Nav />
       <main id="top">
         <Hero />
-        <FeaturedIn />
         <Stats
           mcpTools={meta.mcpTools}
           hooks={meta.hooks}
diff --git a/website/components/FeaturedIn.module.css b/website/components/FeaturedIn.module.css
index 91b09712..d795576e 100644
--- a/website/components/FeaturedIn.module.css
+++ b/website/components/FeaturedIn.module.css
@@ -4,6 +4,15 @@
   border-top: 1px solid var(--charcoal);
   border-bottom: 1px solid var(--charcoal);
 }
+.wrapCompact {
+  padding: 36px 0 0;
+  background: transparent;
+  border: 0;
+  margin-top: 40px;
+}
+.wrapCompact .eyebrow {
+  margin-bottom: 4px;
+}
 .inner {
   max-width: 1100px;
   margin: 0 auto;
diff --git a/website/components/FeaturedIn.tsx b/website/components/FeaturedIn.tsx
index ca07e70b..cae84332 100644
--- a/website/components/FeaturedIn.tsx
+++ b/website/components/FeaturedIn.tsx
@@ -39,9 +39,20 @@ const ITEMS: Feature[] = [
   },
 ];
 
-export function FeaturedIn() {
+interface FeaturedInProps {
+  // When true, render the bar without the outer `<section>` chrome
+  // (no border, no own padding) so it can be inlined inside the
+  // hero below the CTA stack.
+  compact?: boolean;
+}
+
+export function FeaturedIn({ compact = false }: FeaturedInProps = {}) {
+  const wrapClass = compact ? `${styles.wrap} ${styles.wrapCompact}` : styles.wrap;
   return (
-    <section className={styles.wrap} aria-labelledby="featured-in-title">
+    <section
+      className={wrapClass}
+      aria-labelledby="featured-in-title"
+    >
       <div className={styles.inner}>
         <div id="featured-in-title" className={styles.eyebrow}>
           AS FEATURED IN
diff --git a/website/components/GitHubStarButton.tsx b/website/components/GitHubStarButton.tsx
index 971aa340..36171d82 100644
--- a/website/components/GitHubStarButton.tsx
+++ b/website/components/GitHubStarButton.tsx
@@ -5,6 +5,12 @@ import styles from "./GitHubStarButton.module.css";
 
 interface Props {
   repo: string;
+  // SSR-fed initial count from Nav's server-side fetch. When present
+  // the badge renders the number on first paint; the client-side
+  // refetch below is a best-effort refresh that only fires if it
+  // succeeds (unauthenticated github.com api is rate-limited to
+  // ~60/hr/IP, which is why the count was invisible before).
+  initialStars?: number;
 }
 
 function formatStars(n: number): string {
@@ -15,8 +21,10 @@ function formatStars(n: number): string {
   return String(n);
 }
 
-export function GitHubStarButton({ repo }: Props) {
-  const [stars, setStars] = useState<number | null>(null);
+export function GitHubStarButton({ repo, initialStars }: Props) {
+  const [stars, setStars] = useState<number | null>(
+    typeof initialStars === "number" ? initialStars : null,
+  );
 
   useEffect(() => {
     let cancelled = false;
@@ -52,7 +60,7 @@ export function GitHubStarButton({ repo }: Props) {
           }
         }
       } catch {
-        /* offline / blocked — keep cached or null */
+        /* offline / blocked — keep SSR / cached / null */
       }
     })();
     return () => {
@@ -66,7 +74,7 @@ export function GitHubStarButton({ repo }: Props) {
       target="_blank"
       rel="noopener noreferrer"
       className={`btn btn--ghost ${styles.starBtn}`}
-      aria-label={`Star ${repo} on GitHub`}
+      aria-label={`Star ${repo} on GitHub${stars !== null ? ` — ${stars.toLocaleString()} stars` : ""}`}
     >
       <svg
         aria-hidden
diff --git a/website/components/Hero.module.css b/website/components/Hero.module.css
index 1239a969..a4924801 100644
--- a/website/components/Hero.module.css
+++ b/website/components/Hero.module.css
@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  padding: 120px 24px 80px;
+  padding: 110px 24px 72px;
 }
 .vignette {
   position: absolute;
@@ -32,23 +32,24 @@
   text-align: center;
   max-width: 1200px;
   margin: 0 auto;
+  width: 100%;
 }
 
 .chip {
   display: inline-block;
-  padding: 8px 14px;
+  padding: 7px 13px;
   font-size: 12px;
   letter-spacing: 0.96px;
   color: var(--gold-soft);
   border: 1px solid var(--gold-soft);
   text-transform: uppercase;
-  margin-bottom: 28px;
+  margin-bottom: 22px;
 }
 
 .title {
-  font-size: clamp(54px, 12vw, 160px);
+  font-size: clamp(44px, 9vw, 124px);
   font-weight: 900;
-  line-height: 0.92;
+  line-height: 0.94;
   letter-spacing: -0.02em;
   margin: 0;
   text-transform: uppercase;
@@ -79,24 +80,44 @@
 }
 
 .lede {
-  max-width: 780px;
-  margin: 28px auto 40px;
-  font-size: clamp(14px, 1.4vw, 18px);
+  max-width: 720px;
+  margin: 24px auto 32px;
+  font-size: clamp(13px, 1.2vw, 16px);
   letter-spacing: 0.12px;
   color: var(--mist);
   text-transform: uppercase;
-  line-height: 1.56;
+  line-height: 1.6;
 }
 
 .cta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+}
+.ctaSecondary {
   display: inline-flex;
-  gap: 16px;
+  gap: 12px;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 760px) {
+  .hero {
+    padding: 96px 18px 56px;
+    min-height: 0;
+  }
   .title {
     flex-direction: column;
+    font-size: clamp(40px, 14vw, 72px);
+  }
+  .lede {
+    margin: 20px auto 24px;
+  }
+  .chip {
+    font-size: 10px;
+    padding: 6px 10px;
+    margin-bottom: 18px;
   }
 }
diff --git a/website/components/Hero.tsx b/website/components/Hero.tsx
index b37d1f11..4d8dc430 100644
--- a/website/components/Hero.tsx
+++ b/website/components/Hero.tsx
@@ -1,10 +1,14 @@
 import { MemoryGraph } from "./MemoryGraph";
 import { GitHubStarButton } from "./GitHubStarButton";
+import { HeroNpxCommand } from "./HeroNpxCommand";
+import { FeaturedIn } from "./FeaturedIn";
 import { getProjectMeta } from "@/lib/meta";
+import { fetchRepoStats } from "@/lib/github";
 import styles from "./Hero.module.css";
 
-export function Hero() {
+export async function Hero() {
   const meta = getProjectMeta();
+  const stats = await fetchRepoStats();
   return (
     <section className={styles.hero} aria-labelledby="hero-title">
       <MemoryGraph />
@@ -22,14 +26,18 @@ export function Hero() {
           CAPTURE EVERY SESSION. RECALL IN MILLISECONDS. RUN ANYWHERE.
         </p>
         <div className={styles.cta}>
-          <a href="#install" className="btn btn--accent">
-            START IN 30 SECONDS
-          </a>
-          <a href="#live" className="btn btn--ghost">
-            SEE IT MOVE
-          </a>
-          <GitHubStarButton repo="rohitg00/agentmemory" />
+          <HeroNpxCommand />
+          <div className={styles.ctaSecondary}>
+            <a href="#live" className="btn btn--ghost">
+              SEE IT MOVE
+            </a>
+            <GitHubStarButton
+              repo="rohitg00/agentmemory"
+              initialStars={stats.stars > 0 ? stats.stars : undefined}
+            />
+          </div>
         </div>
+        <FeaturedIn compact />
       </div>
     </section>
   );
diff --git a/website/components/HeroNpxCommand.module.css b/website/components/HeroNpxCommand.module.css
new file mode 100644
index 00000000..06081a0b
--- /dev/null
+++ b/website/components/HeroNpxCommand.module.css
@@ -0,0 +1,69 @@
+.cmd {
+  display: inline-grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 22px;
+  min-width: 460px;
+  max-width: 100%;
+  background: var(--iron);
+  border: 1px solid var(--gold);
+  color: var(--white);
+  font-family: var(--font-mono);
+  font-size: 16px;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
+  text-align: left;
+}
+.cmd:hover {
+  background: #1a1a1f;
+  transform: translateY(-1px);
+}
+.cmd:focus-visible {
+  outline: 2px solid var(--gold);
+  outline-offset: 3px;
+}
+.copied {
+  background: var(--gold);
+  color: var(--ink);
+  border-color: var(--gold);
+}
+.copied .hint {
+  color: var(--ink);
+}
+.prompt {
+  color: var(--gold);
+  font-weight: 700;
+}
+.copied .prompt {
+  color: var(--ink);
+}
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hint {
+  font-size: 10px;
+  letter-spacing: 1.4px;
+  color: var(--ash);
+  text-transform: uppercase;
+  padding-left: 12px;
+  border-left: 1px solid var(--charcoal);
+}
+.copied .hint {
+  border-left-color: rgba(0, 0, 0, 0.2);
+}
+@media (max-width: 640px) {
+  .cmd {
+    min-width: 0;
+    width: 100%;
+    font-size: 13px;
+    padding: 14px 16px;
+    gap: 10px;
+  }
+  .hint {
+    display: none;
+  }
+}
diff --git a/website/components/HeroNpxCommand.tsx b/website/components/HeroNpxCommand.tsx
new file mode 100644
index 00000000..ff57ba87
--- /dev/null
+++ b/website/components/HeroNpxCommand.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import styles from "./HeroNpxCommand.module.css";
+
+const CMD = "npx @agentmemory/agentmemory";
+
+export function HeroNpxCommand() {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(CMD);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* clipboard blocked — keep button visible */
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      className={`${styles.cmd} ${copied ? styles.copied : ""}`}
+      aria-label="Copy install command"
+    >
+      <span className={styles.prompt}>$</span>
+      <span className={styles.text}>{CMD}</span>
+      <span className={styles.hint}>{copied ? "COPIED" : "CLICK TO COPY"}</span>
+    </button>
+  );
+}
diff --git a/website/lib/generated-meta.json b/website/lib/generated-meta.json
index e4af0ebd..98048d8f 100644
--- a/website/lib/generated-meta.json
+++ b/website/lib/generated-meta.json
@@ -1,8 +1,8 @@
 {
-  "version": "0.9.15",
+  "version": "0.9.16",
   "mcpTools": 51,
   "hooks": 12,
   "restEndpoints": 121,
   "testsPassing": 975,
-  "generatedAt": "2026-05-15T18:11:06.382Z"
+  "generatedAt": "2026-05-16T09:00:42.889Z"
 }