Three coordinated tweaks to the landing-page above-the-fold:
1. **Hero padding restored to py-14/sm:py-20/md:py-28** (was py-12/14/16).
Compressing it for the scroll-cue position fight made the hero feel
cramped and gave the ParticleHero background less room to breathe.
With the cue moved out (see #3), there's no reason to shrink the hero.
2. **Step rotator switches to carousel-style horizontal slide.** The
AnimatePresence transition was a fade+y-shift cross-fade — clean but
sequential. Now the leaving card slides left out (x:-220) while the
entering card slides right in (x:220→0), both coexisting in the same
3D-space and inheriting the same mouse-tilt. The container gets
`min-h-[240px]` so the absolutely-positioned cards have layout to
anchor to (claude_desktop_config.json is the tallest at 7 lines).
Reduced-motion still gets the opacity-only cross-fade — sliding
content sideways is exactly the kind of motion that preference is
meant to suppress.
3. **`<ScrollCue>` extracted into its own client component**, fixed-
positioned at viewport bottom (bottom-5) with a frosted pill style.
Fades to opacity:0 once `window.scrollY > 80`, so it doesn't shadow
the rest of the page. Lives next to `<section>` in page.tsx rather
than inside the hero — that way it anchors to the loadscreen's
natural bottom edge whether the hero is short or tall.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Restructures the landing page above-the-fold into two distinct sections:
1. **Hero — left copy + cycling tile, no static stack of three blocks**
New `<HeroStepRotator>` (Framer Motion client component) shows ONE
tile centred in the column, cycling prompt.txt → build.log →
claude_desktop_config.json every 3.5s. Auto-advance pauses on hover
and exposes a 3-dot tablist so users can jump to any step. The active
dot grows wide with an accent glow.
Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a
radial glow that translates toward the cursor — both driven by motion
values, so the transforms stay on the GPU compositor instead of
re-rendering on every mousemove. `useReducedMotion()` strips the
tilt + glow translation and collapses the page transition to an
instant cross-fade (the rotation itself still advances — it's content,
not decoration).
Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video
section below is teased above the fold. New scroll cue ("see it run"
+ animated chevron) sits at the bottom of the hero, anchored to
#flow.
2. **Flow video — full-width edge-to-edge under the hero (new section)**
The hero.mp4 / hero.webm pair moves out of the "How it works"
section into its own #flow section. No max-w wrapper — it spans the
viewport with `w-full aspect-video`, so on a 1080p monitor the video
gets the full 1920px width. Adds a subtle radial vignette so the
black edges blend into the page chrome.
3. **"How it works" — now lean**
Video removed (it's the flow section now). Just the three textual
cards as supporting copy.
Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes
typecheck + Next.js production build with no new warnings; LCP path is
untouched since the rotator is client-hydrated after first paint and
Framer Motion is tree-shaken to the components we import.
Note: visitors with `prefers-reduced-motion: reduce` will still see the
video's poster instead of autoplay — Chrome blocks the network fetch
entirely for autoplay media when reduced-motion is set. The flow video
remains visible for the rest, and the step rotator continues to cycle
its content (with instant cross-fade instead of slide+scale).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
PageSpeed Insights mobile reported LCP element render delay of 2.3s
on the hero — the largest visible element is the build.log <pre> with
"> Generating spec... OK ..." text. TTFB is 0ms (CF cache hit), so the
delay was pure client-side: Lighthouse waited for the JS bundle to
parse and the 'use client' CodeBlock boundary to hydrate before it
considered the element "rendered."
CodeBlock pulls in lucide-react (Copy/Check icons) plus a useState
boundary just for the copy button. Above the fold on marketing, none
of that is needed — the user just needs to see the snippet.
Split:
- New `static-code-block.tsx`: server component, no 'use client',
no icons, no copy button. Pure SSR markup that paints with the HTML.
- Marketing landing now uses StaticCodeBlock for all three hero
snippets (prompt.txt / build.log / claude_desktop_config.json).
- Interactive CodeBlock stays in use for dashboard pages where users
actually want to copy snippets.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two related polish items:
1. Remove the global blue Preview banner from app/layout.tsx and delete
the SiteBanner component. The component's own comment said "Remove
once the service is open for production use" — Stripe live billing,
OAuth, and per-runner TLS are all wired now, so the pre-launch notice
is misleading.
2. Mobile-responsive treatment for the standalone /templates page (it
lives outside (dashboard) layout, so it didn't inherit the new
mobile chrome from the dashboard pass):
- Top header tightened: "/templates" breadcrumb + Dashboard link +
"+ New server" pill all hidden on mobile (the avatar UserMenu +
bottom MobileActionBar cover those paths).
- Logged-in users now get the same MobileActionBar tab-bar at the
bottom (Market tab active), giving consistent app-shell across
dashboard pages.
- Filter row stacks vertically on mobile with search on top (thumb
reach), then a horizontally-scrollable chip row for scope / sort /
category so segmented controls don't squeeze below their min-width.
- h1 scales 32px → 24px on mobile; padding tightened to px-4 py-8.
- main gets pb-24 when logged in so cards clear the tab bar.
Logged-out marketplace browsing keeps the simpler marketing chrome
(Logo + "Start building" CTA) — no tab-bar, since visitors don't have
a dashboard to navigate into yet.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Top header on mobile was cramped: Logo + 5 icon-only nav buttons + avatar
crammed into a 48px-tall row. Felt like a desktop nav shrunk down.
Pivot to native-mobile-app pattern:
- Top mobile: just Logo (left) + UserMenu avatar (right). Desktop top nav
is `hidden sm:flex` so it disappears on phones.
- Bottom: full tab bar replacing the single-button MobileActionBar.
Five destinations: Overview · Servers · Create (FAB-style center) ·
Market · Settings.
- "Create" is a raised FAB-style button (round accent fill, -mt-3 to
overlap the bar border) — same prominent-action pattern as Instagram /
Notion mobile.
- Active tab gets accent color + aria-current=page.
- Audit demoted from primary nav on mobile (low frequency); still
reachable via direct /audit URL.
Desktop unchanged — top nav stays.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Same Tailwind-v4 bracket-arbitrary issue we hit on the marketing burger
menu: bg-[--color-bg-elevated] compiles to `background-color:
--color-bg-elevated` (no var() wrap → invalid color → transparent).
Both dropdowns were rendering see-through against the dashboard.
Switch both to the proven pattern: backdrop-blur-md class + inline
style for backgroundColor + borderColor using color-mix() and explicit
var(). 88% elevated-panel fill gives a clear frosted-glass look while
keeping the menu items readable.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dashboard layout threw TypeError: Cannot read properties of null (reading
'charAt') the moment a phone-only user reached any dashboard page —
user.email and user.name are both null for fresh SMS signups, and
the initial-letter computation didn't tolerate it.
Fallback chain for the visible identifier: name → email → phone →
'Account'. Avatar colour seed falls back to userId. The secondary line
under the name also uses phone when email is null.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Native <select> defers dropdown direction to the browser, which on mobile
routinely opens upward and hides countries behind the keyboard. Replaced
with a custom combobox that always opens DOWNWARD (absolute positioned
below the trigger) with a search input at top — at 150 countries a
scrollable list is unusable without search anyway.
COUNTRIES list expanded from 60 → 152 entries: every country with a
meaningful diaspora, including Russia, Pakistan, Bangladesh, Sri Lanka,
Cyprus, Malta, Albania, Bosnia, Kosovo, North Macedonia, Iran, Iraq,
Lebanon, Jordan, Kazakhstan, Morocco, Algeria, Tunisia, Ethiopia,
Tanzania, Uganda, Senegal, Ghana, Madagascar, Cameroon, Sri Lanka,
Belarus, Georgia, Armenia, Azerbaijan and the rest. Serbia was already in
the prior list — just unfindable without search.
Bonus: flag emojis computed from ISO-3166 alpha-2 codes (no asset files).
Search matches name + code + dial-prefix so "+41" or "CH" both find
Switzerland.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Logged-out state was showing two CTAs ("Sign in" link + "Start building"
button) both going to /login — confusing because the prominent purple
button never literally said "Login". Consolidate to one button whose
label flips with auth state: "Login" when out, "Dashboard" when in.
Same slot, same colour, no header layout shift.
Defaults to "Login" while the /v1/auth/me probe is in flight so the
common (anonymous) visitor sees no flicker.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
User-facing identity:
- UserMenu component in dashboard header: avatar (deterministic colour from
email hash), email + name, current plan badge, dropdown to Profile /
Billing / Support / Your data / (Admin panel if isAdmin) / Sign out
- /settings/profile: editable display name; email + phone shown read-only
(changing them requires support ticket — magic-link flow assumed)
- GET + PATCH /v1/account/profile
In-app subscription management (no more Stripe Portal redirect for the
common flows — cancellation, plan switch, invoice viewing all in-app):
- Billing status now combines DB state with a live Stripe lookup of the
subscription details + last 5 invoices. Single roundtrip.
- POST /v1/billing/cancel → schedules cancel_at_period_end
- POST /v1/billing/reactivate → undo scheduled cancel
- POST /v1/billing/change-plan → prorated swap between any tier+cycle
- /settings/billing rewritten: current plan card with renew/cancel date,
big cancel button + reactivate flow, plan-switcher grid, invoice list with
PDF + hosted-invoice links
- Stripe portal still linked at the bottom as the escape hatch for rare
actions (payment-method update, address change). New-subscription Checkout
still uses Stripe-hosted Checkout (industry standard for PCI).
Stripe SDK v22 / API 2024-09 fix: current_period_end moved to subscription
items; updated read paths accordingly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tailwind v4's `bg-[--color-X]` bracket-arbitrary syntax does not wrap the
value in var(), so it compiles to `background-color: --color-bg-elevated`
— an invalid color, which the browser falls back to transparent. The
mobile menu was the one element that depended solely on this utility for
its background, so it rendered with none.
Use an inline style with explicit var() and color-mix to match the nav
bar's frosted look (var(--color-bg) at 80% + backdrop-blur).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The dropdown was bg/95 + backdrop-blur — fragile across mobile browsers
where backdrop-filter is unreliable, leaving 5% transparency that read as
"no background". Switch to a solid elevated panel with a soft shadow and
an explicit z-index.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
On phones the dashboard top bar is tight with the nav icons + the primary
action crammed alongside. Move the action into a sticky bottom bar in the
thumb zone, leave the top bar to navigation. Hidden on the create-wizard
route since that page owns its own action.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- login: SMS step now has a 60-country dial-code <select> (CH default)
and a national-number input, combined into strict E.164 client-side
- marketing header: probe /v1/auth/me, show "Dashboard" when signed in
instead of the Sign in / Start building CTAs
- dashboard overview: drop the duplicate "+ New server" button, the
navbar one is the single source
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Hero h1 was a fixed text-[44px] — overflowed narrow phones. Now
text-[30px] sm:text-[40px] md:text-[56px].
- Hero grid children get min-w-0 so the code blocks' overflow-x-auto
actually constrains instead of widening the page.
- Marketing nav: the inline links were hidden below md with no fallback.
Added a hamburger MobileMenu; "Sign in" collapses into it on the
smallest screens.
- Section vertical padding is now responsive (py-14 sm:py-20).
- globals.css: overflow-x: clip on <html> as a safety net.
- docs: the 240px sidebar is hidden below lg, article gets min-w-0.
- dashboard header: nav labels collapse to icons on small screens.
Verified: next build passes (40/40 pages).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
White on #6366f1 was 4.47:1 — just under the 4.5:1 minimum for small
text (Lighthouse a11y flag). Darkened the banner to #4f46e5 (6.3:1).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ported and adapted from the BuildMyDiscord SEO setup:
- lib/seo.ts — single source for site constants, the FAQ data (shared by
the rendered FAQ and the FAQPage schema so they never drift) and JSON-LD
builders.
- Rich root metadata: title template, keywords, Open Graph, Twitter card,
robots directives, canonical.
- JSON-LD: Organization + WebSite + SoftwareApplication sitewide, FAQPage
on the landing page. No AggregateRating — there are no real reviews yet.
- app/robots.ts — allow all, explicit allow-list for AI answer-engine
crawlers (GPTBot, ClaudeBot, PerplexityBot, …), disallow private routes.
- app/sitemap.ts — every public marketing + docs route.
- app/opengraph-image.tsx — monochrome on-brand 1200x630 share card.
- app/manifest.ts + public/llms.txt.
- Per-page metadata for pricing, changelog, security, privacy, terms,
docs, templates and status.
- opengraph-image + apple-icon pinned to the edge runtime — next/og
crashes during a Node-runtime prerender.
Verified: next build passes; /robots.txt, /sitemap.xml,
/manifest.webmanifest and /opengraph-image all generate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bg-[--color-accent] does not resolve under Tailwind v4 — the banner bar
showed near-black. Set #6366f1 inline so the preview notice is clearly
visible regardless of theme wiring.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Clear notice that the service is not yet open for production use.
Temporary — remove SiteBanner once live.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sprint 3.5: close every dead link and replace the single-step wizard with the
spec-mandated 3-step flow.
Wizard:
- Step 1 collects prompt + name + slug, calls /v1/servers/preview.
- Step 2 renders parsed tools (name, description, input schema as copyable JSON)
+ a credential field per requiredSecret Claude actually identified. Self-contained
servers see 'No credentials needed' instead of generic Notion placeholders.
- Step 3 streams the live build over WebSocket and shows install snippets.
New dashboard pages:
- /settings — org, plan/usage, members table, API keys + billing stubs (Sprint 4),
encryption status. Reads /v1/me/org.
- /audit — filterable table over /v1/audit with action pills, resource refs, IP,
metadata JSON.
Docs site (/docs + 6 sub-pages):
- Sticky 240px sidebar, max-w-prose article column, shared DocsTitle/H2/Code primitives.
- Quickstart, MCP concepts, OAuth 2.1 flow (full walkthrough with curl), Authoring
tools, Self-hosting, API reference, FAQ.
Marketing pages:
- /changelog with tagged release timeline.
- /security with 8 pillars + disclosure.
- /privacy with GDPR-aware sections.
- /terms (10 clauses).
- /pricing full page (nav now points here instead of /#pricing anchor).
- /status with live 10s probes against /api/health and /login.
Footer 'system status' badge now links to /status.
All 20 routes 200 OK in smoke crawl. Typecheck clean across packages.
