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 1 commit into
Conversation
…orm UI feature cards
|
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, simplified Request a demo / Sign up chips (email capture bar removed), HeroStat with staggered “Global work done by Sim” animation, and a full-width media frame (backdrop + platform screenshot) with HeroPlatformLoop — synced chat stream, stage pane slide-in, block-by-block workflow build, draggable blocks, and sidebar hotspots. TrustedBy uses a centered row layout under the frame. ProductDemo is a new section (between hero and Mothership) that reuses the old HeroVisual walkthrough in FeatureCard-style chrome with scroll-drawn loader marks. Features moves from masked live previews to FeatureCard rows: alternating media/copy, static backdrops, shared CalloutFrame chrome; Integrate/Context show captured platform UI images; optional deep links; full-bleed bottom divider on the last card. Supporting work: temporary readme-tour-capture route for UI shots, Reviewed by Cursor Bugbot for commit 8e52ff4. Bugbot is set up for automated code reviews on this repo. Configure here. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 8e52ff4. Configure here.
| 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.
| useState(() => { | ||
| seed(queryClient) | ||
| return true | ||
| }) |
There was a problem hiding this comment.
Query seed runs during SSR
Medium Severity
Demo workspace data is seeded inside a useState lazy initializer. That initializer runs during server render of this client page, but the browser QueryClient is not hydrated from that work, so the first client paint can show an empty workspace or trigger hydration warnings until something else refetches.
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.githubusercontent.com/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!
1 participant
Summary
Type of Change
Testing
Tested manually against /landing-preview at 1512/1280/768; lint and check:api-validation:strict pass
Checklist