feat(docs): visual design pass on the Agor Cloud landing page - #2309
Open
rusackas wants to merge 2 commits into
Open
feat(docs): visual design pass on the Agor Cloud landing page#2309rusackas wants to merge 2 commits into
rusackas wants to merge 2 commits into
Conversation
/cloud was every section in the same shape — eyebrow label, heading, grid of icon/title/body cards — with no screenshots, no video, no motion beyond a scroll fade-up. The homepage has all of that; /cloud never got it. Ports the same patterns over: - Hero: same dimmed looping product-demo video the homepage hero uses (agor-hero.mp4), behind the existing glass card instead of just a radial glow. - Capabilities: split the 6 flat cards into a screenshot carousel (same tab-pill + frame + arrows grammar as the homepage's surface explorer) for the 3 claims with a real, accurately-representative screenshot on hand (BYOK, sign-in/roles, CI-ready agents — each image was actually opened and checked against its caption, not picked by filename alone), plus a smaller supporting card row for the remaining 3, which are genuinely backend/infra properties (autoscaling, workspace tenancy, health checks) with nothing real to screenshot. Forcing all 6 into picture slots would have meant either repeating one generic screenshot or captioning images to claim things they don't show. - Aurora shader dividers (same component/colors as the homepage's showcase-section seam) at the hero→content and final-CTA seams. - Security section: paired the existing checklist with a real screenshot of a security-review branch whose fanned-out sub-sessions (RBAC, secrets, Unix isolation, supply chain, ...) directly echo the checklist items next to it, instead of leaving that column implicitly empty-feeling. - Card icon medallions got a gradient ring + hover scale/glow, and card hover gained a soft shadow, so the sections that stay card-based read as designed rather than default grids. Verified live via headless-Chrome screenshots at both desktop (1440px) and mobile (390px) widths, section by section, before and after — confirmed the new carousel/tabs/arrows work and collapse sensibly on mobile (arrows hidden under 720px, tabs wrap, tap-the-image still advances), and that nothing regressed in the sections left untouched (deployment tiers, operator stats, footer). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
rusackas
force-pushed
the
redesign-cloud-landing-page
branch
from
August 12, 2026 23:41
b5528cf to
6e6a841
Compare
…tfall
Feedback on the /cloud redesign:
- "Operated by the team behind Preset Cloud" now links "Preset Cloud"
to preset.io (with the same presetUtm attribution pattern already
used by the footer's "Preset" link), styled as an underlined inline
link at heading size rather than reusing .headingStrong's plain bold
treatment as-is.
- Replaced the hero's looping product-demo video with the React Bits
"Lightfall" shader background (reactbits.dev/backgrounds/lightfall,
DavidHDev/react-bits), tinted to Agor's palette (teal/sky-blue/mint,
matching --landing-gradient's stops). Ported in as a local component
(components/Lightfall/), same pattern as the existing Aurora
component — it's already a dependency-free copy since `ogl` (the
WebGL lib both use) was already installed for Aurora.
Tuned down from the library's defaults (lower opacity/glow/streak
count) and strengthened the hero's scrim gradient — the first pass
read as too bright/busy behind the glass card's text, confirmed via
a live screenshot before dialing it back.
Reduced-motion is handled via Lightfall's own `paused` prop (wired
to a matchMedia('(prefers-reduced-motion: reduce)') check), which
actually stops its requestAnimationFrame/WebGL loop — CSS-hiding
alone would leave it rendering invisibly and burning GPU.
Verified live via headless-Chrome screenshots: the Preset Cloud link
resolves to the correct UTM-tagged preset.io URL, and the Lightfall
backdrop renders with headline/body text clearly legible over it at
desktop width.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/cloudwas every section in the same shape — eyebrow label, heading, grid of icon/title/body cards — no screenshots, no video, no motion beyond a scroll fade-up. The homepage has all of that already (background video, screenshot carousel, Aurora shader dividers, animated card treatment);/cloudnever got it. This ports those same patterns over, section by section:agor-hero.mp4), behind the existing glass card instead of just a radial glow.Test plan
tsc --noEmitcleanbiome checkclean🤖 Generated with Claude Code