mirror of
https://github.com/rohitg00/agentmemory.git
synced 2026-09-14 20:16:33 +08:00
Rohit Ghumare
f1fbea3c08
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.
124 lines
2.1 KiB
CSS
124 lines
2.1 KiB
CSS
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
padding: 110px 24px 72px;
|
|
}
|
|
.vignette {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at center,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.7) 75%,
|
|
rgba(0, 0, 0, 0.95) 100%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0.3) 0%,
|
|
rgba(0, 0, 0, 0) 30%,
|
|
rgba(0, 0, 0, 0) 70%,
|
|
rgba(0, 0, 0, 0.4) 100%
|
|
);
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-block;
|
|
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: 22px;
|
|
}
|
|
|
|
.title {
|
|
font-size: clamp(44px, 9vw, 124px);
|
|
font-weight: 900;
|
|
line-height: 0.94;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.05em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.word {
|
|
display: inline-block;
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
animation: slideIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
|
}
|
|
.word:nth-child(2) {
|
|
animation-delay: 120ms;
|
|
}
|
|
.accent {
|
|
color: var(--gold);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.lede {
|
|
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.6;
|
|
}
|
|
|
|
.cta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
width: 100%;
|
|
}
|
|
.ctaSecondary {
|
|
display: inline-flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|