marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(landing): honest high-end redesign — kill fake social proof, brand gradient identity, final CTA, mobile fixes

Browse Source 
- removed fabricated fork counts/'verified' badges, 'our customers ship
  today' copy, pseudo client logo marks and stale v0.1 badge (zero-user
  product must not fake traction)
- new proof-by-specificity band: verifiable links to /docs/oauth, /status,
  /security instead of testimonial cosplay
- identity: indigo-to-cyan brand gradient, indigo-tinted elevated surfaces,
  mono section kickers, terminal-chrome hero rotator, gradient h-11 CTA
- how-it-works as connected pipeline; new final CTA band (page no longer
  ends on FAQ); footer upgraded to 4-column product/resources/legal
- lib/pricing.ts single tier source for pricing page + landing teaser;
  annual-billing FAQ claim softened to truth (no annual checkout exists)
- hero video preload=metadata + IntersectionObserver play (2.6MB off the
  critical path); 44px touch targets; mobile menu: Guides link, CTA,
  scroll-lock, escape/outside-tap close

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SXUwmPVRTD8AKQtio6gCN5
This commit is contained in:
Marco Sadjadi
2026-07-08 23:00:25 +02:00
parent cba45402ce
commit 17056d0b30
8 changed files with 627 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/web/components/hero-step-rotator.tsx
View File

@@ -174,9 +174,19 @@ export function HeroStepRotator() {
y: glowDy,
}}
/>
{/* Terminal chrome: traffic lights + filename tab. The tile IS
the product's aesthetic (build logs, configs), so it should
look like a real terminal window, not a generic card. */}
<div className="relative flex items-center justify-between border-b border-[--color-border] px-4 py-2.5">
<span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
{current.label}
<span className="flex items-center gap-3">
<span aria-hidden className="flex gap-1.5">
<span className="size-2.5 rounded-full bg-[#ff5f57]/80" />
<span className="size-2.5 rounded-full bg-[#febc2e]/80" />
<span className="size-2.5 rounded-full bg-[#28c840]/80" />
</span>
<span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
{current.label}
</span>
</span>
<span className="mono text-[10.5px] tracking-[0.16em] text-[--color-accent]">
{current.badge}
@@ -189,23 +199,28 @@ export function HeroStepRotator() {
</AnimatePresence>
</div>
{/* Step indicator — accent dot is wider + glows so the active step
reads at a glance. Buttons stay clickable so users can jump. */}
<div className="flex items-center gap-2" role="tablist" aria-label="Hero flow steps">
{/* Step indicator — the visible dot stays small, but each button
carries generous padding so the effective touch target is ≥44px.
Plain buttons with aria-current (not a tablist — no arrow-key
semantics to honour, they're simple jump buttons). */}
<div className="flex items-center" aria-label="Hero flow steps">
{STEPS.map((s, i) => (
<button
key={s.badge}
type="button"
role="tab"
aria-selected={i === step}
aria-current={i === step}
aria-label={`Jump to ${s.badge}`}
onClick={() => setStep(i)}
className={`h-1.5 rounded-full transition-all duration-300 ${
i === step
? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
: 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
}`}
/>
className="flex min-h-11 min-w-11 items-center justify-center"
>
<span
className={`h-1.5 rounded-full transition-all duration-300 ${
i === step
? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
: 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
}`}
/>
</button>
))}
</div>
</div>