Skip to content

improvement(landing): homepage redesign with live hero and real platform UI feature cards#5408

Merged
waleedlatif1 merged 11 commits into
stagingfrom
improvement/landing-homepage-blog
Jul 8, 2026
Merged

improvement(landing): homepage redesign with live hero and real platform UI feature cards#5408
waleedlatif1 merged 11 commits into
stagingfrom
improvement/landing-homepage-blog

Conversation

@andresdjasso

@andresdjasso andresdjasso commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

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

  • Build card: static left-to-right support-triage workflow showcase (Gmail + Slack triggers → Claude triage agent → Linear / Slack / Gmail / Tables fan-out) rendered from the hero's block kit on a solid --surface-3 stage, goo cycle loader in the corner. Non-brand icon tiles use the hero's greyscale ramp; brand colors only on real third-party marks.
  • Monitor card: the REAL platform Logs page captured as a full window (new capture-logs-ui pipeline mirroring the knowledge capture, seeded run table) over a new canyon backdrop, positioned identically to the Context card.
  • Proportional scaling (Cursor-style): feature-card media stages are aspect-locked (3:2 desktop / 4:3 stacked) 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.
  • Mobile: eyebrow chips relocate into the copy column above the title on stacked breakpoints instead of overlapping the media.
  • Extracted StageBlockCard for reuse, exported the horizontal smoothStep helper, removed the unused formation-graph and logs-table-preview components.
  • The Mothership chat + goo-morph animation (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.
  • Landing-only changes; no API routes, contracts, or platform code touched.

@vercel

vercel Bot commented Jul 4, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Jul 8, 2026 1:00am

Request Review

@cursor

cursor Bot commented Jul 4, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
Large landing-only UI change with new above-the-fold client islands (hero loop, stat) affecting LCP and bundle size, but no auth, APIs, or product runtime paths.

Overview
Homepage layout and chrome — Marketing sections move from max-w-[1446px] / px-12 to max-w-[1460px] / px-20 (navbar, hero, features, blog, integrations, models, platform/solutions shells, etc.), with docs updated to match.

Hero — Drops the two-panel absolute layout and in-hero HeroVisual. New stacked flow: larger headline, simplified HeroCta (demo + sign-up chips, no email capture form), HeroStat beside copy on large screens, full-width backdrop + platform screenshot with a HeroPlatformLoop client island (synced chat, sliding workflow pane, draggable blocks, sidebar hotspots). TrustedBy uses a centered row logo layout under the frame.

New ProductDemo section — Inserts between hero and Mothership; hosts the former HeroVisual walkthrough in a feature-card-style outlined band with scroll-drawn loader marks.

Features — Replaces FeatureStage + live preview backdrops with FeatureCard (alternating media/copy, aspect-locked stages). Integrate / Context / Monitor use CalloutFrame + captured platform PNGs; Build shows a static WorkflowShowcase pipeline and ThinkingLoader (Mothership goo chat animation added but not wired). Removes formation-graph, logs-table-preview, and preview-mount masking; adds a full-bleed bottom rule on the section.

Supporting — Extracts shared CalloutFrame chrome; exports smoothStep for reuse; landing-preview route returns 404 in production and wraps LandingShell locally.

Reviewed by Cursor Bugbot for commit a4f43a9. Configure here.

Comment thread apps/sim/app/(landing)/components/hero/hero.tsx Outdated
Comment thread apps/sim/app/landing-preview/readme-tour-capture/[workspaceId]/page.tsx Outdated
@greptile-apps

greptile-apps Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Full homepage redesign replacing the split-panel hero with a full-width media frame that overlays a live animated two-pane platform loop (chat + draggable workflow stage) over a scaled screenshot. Feature cards migrate from FeatureStage to a new Cursor-style FeatureCard with real-UI screenshot callouts and alternating media sides.

  • Live hero: HeroPlatformLoop synchronises the HeroChatLoop word-streamer and HeroWorkflowStage block-builder on one timer timeline; prefers-reduced-motion and ResizeObserver scaling are handled correctly. STAGE_BLOCKS_BY_ID is module-scoped and builtIds is memoized, addressing the previous drag-frame rebuild concern.
  • Feature cards: FeatureCard is a new outlined grid container with alternating mediaSide; callouts (IntegrationsCallout, KnowledgeCallout, LogsCallout) are replaced with real-platform screenshot images. The capture harness (readme-tour-capture) ships with a NODE_ENV === 'production' guard and a seededRef idempotency pattern.
  • Supporting changes: FloatingTooltip gains an optional offset prop for scaled-UI contexts; HeroCta simplifies to two ChipLink buttons; proxy.ts exempts public/landing/ assets from the auth redirect.

Confidence Score: 5/5

Landing-only redesign with no changes to API routes, auth, or data contracts. The capture harness is properly gated; animation effects clean up correctly.

All changes are confined to the (landing) route group and its static assets. The live hero animation uses correct timer/RAF cleanup and motion-preference handling. The capture harness ships with a production guard and an idempotent seed pattern. The one actionable finding is an inaccurate next/image sizes hint on backdrop images in FeatureCard, which causes slightly larger image downloads but has no correctness or runtime impact.

apps/sim/app/(landing)/components/features/components/feature-card/feature-card.tsx — the sizes hint on backdrop images could be tightened.

Important Files Changed

Filename Overview
apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx New live hero loop: animates the two-pane Mothership chat + workflow stage over a scaled screenshot. Correct timer cleanup, motion-preference handling, and ResizeObserver lifecycle.
apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx Draggable workflow-block canvas inside the live hero. STAGE_BLOCKS_BY_ID hoisted to module scope and builtIds memoized per the previous review fix. onPointerMove/onPointerEnd are stable callbacks.
apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.tsx Staggered count-up animation for the hero stat. Timers and RAF are properly cleared in useEffect cleanup; prefers-reduced-motion handled both on mount and on change.
apps/sim/app/(landing)/components/features/components/feature-card/feature-card.tsx New Cursor-style feature card with alternating media/copy layout. The sizes hint on backdrop images is inaccurate: 70vw overestimates the actual 1fr media column width by ~35–77% at desktop breakpoints.
apps/sim/app/landing-preview/readme-tour-capture/[workspaceId]/page.tsx Capture harness for landing screenshots. Production NODE_ENV guard added per previous review; seededRef pattern replaces the useState lazy initializer to prevent double-mutation in Strict Mode.
apps/sim/app/(landing)/components/hero/hero.tsx Hero section redesigned to single stacked layout with full-width media frame, HeroPlatformLoop overlay, and HeroStat. Clean import and layout updates.
apps/sim/app/(landing)/components/features/features.tsx Features section migrated from FeatureStage to FeatureCard with alternating mediaSide and real-UI callout images. Full-bleed divider at bottom is cleanly structured.
apps/sim/proxy.ts Adds landing/ to proxy bypass regex so public/landing/ static assets skip the auth redirect. Correctly scoped — landing-preview/ paths are NOT bypassed since the prefix differs.
apps/sim/next.config.ts Adds qualities:[75,90] to restrict next/image quality values, disables optimizeCss in dev to avoid Turbopack conflict, and disables FS cache for dev. All changes are intentional and properly conditioned.
packages/emcn/src/components/tooltip/tooltip.tsx Adds optional offset prop to FloatingTooltip and Tooltip.Content so tooltips inside scaled product-preview UI can render a proportionate gap. Clean additive change with default preserving existing behavior.
apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx Adds SandboxWorkspacePermissionsProvider for the capture harness. Grants full edit access without API calls; canAdmin is correctly false. useMemo dependency array is empty and correct.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant PL as HeroPlatformLoop
    participant Chat as HeroChatLoop
    participant Stage as HeroWorkflowStage
    participant T as setTimeout chain

    PL->>T: runCycle — schedule all ticks
    T-->>Chat: "phase=user at 500ms"
    T-->>Chat: "phase=thinking at 1400ms"
    T-->>PL: "stageOpen=true at 1900ms"
    PL->>Stage: "mount with builtCount=0"
    T-->>Stage: builtCount 1-5 at 2400-5480ms
    T-->>Chat: "phase=reply at 6400ms"
    Chat->>Chat: stream reply word by word
    T-->>PL: "fading=true at 12240ms"
    T-->>PL: runCycle restart at 12500ms
    PL->>Stage: remount with next cycleId
Loading
%%{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 PL as HeroPlatformLoop
    participant Chat as HeroChatLoop
    participant Stage as HeroWorkflowStage
    participant T as setTimeout chain

    PL->>T: runCycle — schedule all ticks
    T-->>Chat: "phase=user at 500ms"
    T-->>Chat: "phase=thinking at 1400ms"
    T-->>PL: "stageOpen=true at 1900ms"
    PL->>Stage: "mount with builtCount=0"
    T-->>Stage: builtCount 1-5 at 2400-5480ms
    T-->>Chat: "phase=reply at 6400ms"
    Chat->>Chat: stream reply word by word
    T-->>PL: "fading=true at 12240ms"
    T-->>PL: runCycle restart at 12500ms
    PL->>Stage: remount with next cycleId
Loading

Reviews (6): Last reviewed commit: "fix(landing): stop double-seeding query ..." | Re-trigger Greptile

andresdjasso and others added 2 commits July 7, 2026 16:11
…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 andresdjasso force-pushed the improvement/landing-homepage-blog branch from 8e52ff4 to d1d0c2c Compare July 7, 2026 20:12
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>
Comment thread apps/sim/app/landing-preview/page.tsx
The mock hydration state set by the readme-tour-capture route was missing
the required requestId/error fields added to HydrationState, breaking the
production typecheck.
- hero.tsx: object-top-left isn't a real Tailwind v3 utility, so the crop
  fell back to center; use object-left-top.
- hero-workflow-stage.tsx: byId/builtIds were rebuilt on every render,
  including every drag pointermove frame; hoist the STAGE_BLOCKS lookup to
  module scope and memoize builtIds on builtCount.
- hero-platform-loop.tsx: prefers-reduced-motion was only read once on
  mount, so toggling it mid-loop didn't stop the scheduled animation;
  listen for the media query's change event like BuildChatAnimation does.
- landing-preview/page.tsx and readme-tour-capture/[workspaceId]/page.tsx:
  both are dev/preview-only scaffolds (one explicitly "local-only... delete
  before committing") that were reachable in production with no auth guard.
  404 them outside of production instead of leaving them open.
@waleedlatif1

Copy link
Copy Markdown
Collaborator

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator

@cursor review

showFinished (added when wiring up the prefers-reduced-motion change
listener) set the finished phase but left fading true if the preference
flipped mid reset-fade, leaving HeroChatLoop stuck at opacity-0.
@waleedlatif1

Copy link
Copy Markdown
Collaborator

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator

@cursor review

The word-reveal effect only checked prefers-reduced-motion once per
showReply transition. If HeroPlatformLoop's showFinished set phase to
'reply' while it was already 'reply' (no re-render, no dependency change),
the running stream interval kept ticking at normal speed instead of
snapping to the full reply. Listen for the media query's change event,
mirroring the fix already applied to HeroPlatformLoop and BuildChatAnimation.
@waleedlatif1

Copy link
Copy Markdown
Collaborator

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator

@cursor review

HeroStat's staggered count-up entrance only checked prefers-reduced-motion
once on mount, unlike the hero loops in this PR that now listen for the
media query's change event. Toggling the preference mid-entrance left the
scheduled timers/RAF running instead of snapping to the settled value.
@waleedlatif1

Copy link
Copy Markdown
Collaborator

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit b0ca3cf. Configure here.

@greptile-apps

greptile-apps Bot commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Want your agent to iterate on Greptile's feedback? Try greploops.

seed(queryClient) ran inside a useState lazy initializer, a render-phase
side effect that Strict Mode invokes twice. Replace it with a ref guard so
the store mutation runs exactly once, still synchronously before first
paint. Flagged across three Greptile review rounds.
@waleedlatif1

Copy link
Copy Markdown
Collaborator

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit a4f43a9. Configure here.

qc.setQueryData(logKeys.list(...)) requires LogFilters, but the inline
seed object had no annotation and timeRange inferred as string, which
TypeScript widened past the TimeRange literal union. Failed prod build
type-check. Also swap the stray `sandbox` prop back to `embedded` to
match Workflow's actual prop name.
@waleedlatif1 waleedlatif1 merged commit 4aba3dc into staging Jul 8, 2026
11 checks passed
@waleedlatif1 waleedlatif1 deleted the improvement/landing-homepage-blog branch July 8, 2026 01:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants