buildmymcpserver/apps/web/components
Marco Sadjadi 035e55f00c
All checks were successful
Deploy to Production / deploy (push) Successful in 1m2s
feat(web): mobile-fit hero tiles + voluminous calmer particle field + FAQ accordion
Three coordinated polish items requested:

1. **Hero step-rotator tiles fit mobile without horizontal scroll.**
   The previous snippets contained a 50+ char `Live at https://notion-x9.mcp.buildmymcpserver.com` URL that overflowed the ~295 px text area on a 375 px viewport. Rewrote all three snippets to be naturally short — same product story, no full URLs. The <pre> drops `overflow-x-auto` and gains `whitespace-pre-wrap break-words` so any token that does exceed the column wraps gracefully instead of forcing a scrollbar.

2. **ParticleHero — more volumetric, slower, steadier at load-in.**
   The "stuttery / too fast" feedback came from two issues compounding: tiny dots (1.8 px on 256-tier, with 0.42 base alpha) gave the eye too few pixels to track between frames, so individual particles read as snapping rather than drifting; and the simplex-noise drift evolved at 0.08 time-scale with 0.045 velocity, fast enough that frame-to-frame deltas exceeded a tracked particle's diameter.

   Render uniforms tuned:
   - `uPointSize` 1.8 → 2.8 (256-tier), 2.4 → 3.6 (128-tier)
   - `uBaseAlpha` 0.42 → 0.60

   Simulation shader tuned:
   - Drift noise time scale 0.08 → 0.045 (the most impactful single change — particles now move at half the previous speed)
   - Drift velocity magnitude 0.045 → 0.028
   - Ring breathing noise time scale 0.35 → 0.22
   - Ring polar-wave time scales 1.2 / 0.7 → 0.7 / 0.42

   Net effect: same number of particles (65k) but each individually larger, brighter, and moving more slowly. The cumulative additive bloom is denser without the jitter that read as visual stutter.

3. **FAQ collapsed into a native `<details>` accordion.**
   Crawlers and screen readers still see every Q+A in the SSR'd HTML — `<details><summary>...</summary><p>answer</p></details>` is the standard semantic pattern for disclosure widgets. Users see one question at a time and expand on demand, which keeps the page from feeling like an endless wall of marketing text below the fold.

   Container narrowed `max-w-6xl` → `max-w-3xl` for accordion typography (long-form prose reads better single-column). The default WebKit disclosure-triangle marker is suppressed with `list-none` + `[&_summary::-webkit-details-marker]:hidden`, and a `lucide-react` `ChevronDown` icon rotates 180° via `group-open:rotate-180` to indicate state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 12:35:03 +02:00
..
particle-hero feat(web): mobile-fit hero tiles + voluminous calmer particle field + FAQ accordion 2026-05-27 12:35:03 +02:00
ui feat(web): Next.js 15 shell — design tokens, landing, auth pages 2026-05-19 00:30:20 +02:00
code-block.tsx feat(web): Next.js 15 shell — design tokens, landing, auth pages 2026-05-19 00:30:20 +02:00
cookie-banner.tsx feat: Swiss-compliant launch — Impressum/AGB/Contact, support panel, DSG exports, cookie banner 2026-05-25 17:12:06 +02:00
country-picker.tsx fix(web): UserMenu + CountryPicker dropdowns frosted (Tailwind v4 bug) 2026-05-25 23:04:02 +02:00
docs-page.tsx feat(web): real 3-step wizard, settings, audit, docs, marketing pages 2026-05-19 18:20:31 +02:00
hero-animation.tsx feat(web): hero redesign — cycling step rotator + full-width video section 2026-05-27 12:05:28 +02:00
hero-step-rotator.tsx feat(web): mobile-fit hero tiles + voluminous calmer particle field + FAQ accordion 2026-05-27 12:35:03 +02:00
input.tsx feat(web): Next.js 15 shell — design tokens, landing, auth pages 2026-05-19 00:30:20 +02:00
install-snippets.tsx feat(web): dashboard, wizard, server detail, WS build stream, install snippets 2026-05-19 00:32:53 +02:00
json-ld.tsx feat(web): full SEO stack — metadata, JSON-LD, sitemap, robots, OG image 2026-05-21 19:16:40 +02:00
logo.tsx feat(web): Next.js 15 shell — design tokens, landing, auth pages 2026-05-19 00:30:20 +02:00
marketing-auth-buttons.tsx feat(web): glow-pulse on primary CTAs + hero fills full first viewport 2026-05-27 12:20:25 +02:00
marketing-mobile-menu.tsx fix(web): mobile menu background via inline style (Tailwind v4 quirk) 2026-05-23 18:43:57 +02:00
mobile-action-bar.tsx feat(web): app-like mobile dashboard — bottom tab bar, minimal top 2026-05-25 23:15:44 +02:00
pulse.tsx feat(web): glow-pulse on primary CTAs + hero fills full first viewport 2026-05-27 12:20:25 +02:00
scroll-cue.tsx feat(web): restore tall hero + carousel slide + viewport-fixed scroll cue 2026-05-27 12:11:42 +02:00
static-code-block.tsx perf(web): server-only StaticCodeBlock for above-the-fold marketing 2026-05-26 23:30:41 +02:00
status-pill.tsx feat(web): Next.js 15 shell — design tokens, landing, auth pages 2026-05-19 00:30:20 +02:00
streaming-logs.tsx feat(web): dashboard, wizard, server detail, WS build stream, install snippets 2026-05-19 00:32:53 +02:00
user-menu.tsx fix(web): UserMenu + CountryPicker dropdowns frosted (Tailwind v4 bug) 2026-05-25 23:04:02 +02:00