fix(landing): address Greptile/Cursor review findings

- 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.

Author: waleedlatif1

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx

@@ -91,16 +91,22 @@ export function HeroPlatformLoop() {
   }, [])
 
   useEffect(() => {
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    let timers: ReturnType<typeof setTimeout>[] = []
+
+    const clearScheduled = () => {
+      timers.forEach(clearTimeout)
+      timers = []
+    }
+
+    const showFinished = () => {
+      clearScheduled()
       setPhase('reply')
       setStageOpen(true)
       setBuiltCount(STAGE_BLOCKS.length)
-      return
     }
-    let timers: ReturnType<typeof setTimeout>[] = []
-    let cancelled = false
+
     const runCycle = () => {
-      if (cancelled) return
       setFading(false)
       setPhase('idle')
       setStageOpen(false)
@@ -118,10 +124,21 @@ export function HeroPlatformLoop() {
         setTimeout(runCycle, TOTAL_MS),
       ]
     }
-    runCycle()
+
+    const syncMotionPreference = () => {
+      clearScheduled()
+      if (media.matches) {
+        showFinished()
+        return
+      }
+      runCycle()
+    }
+
+    syncMotionPreference()
+    media.addEventListener('change', syncMotionPreference)
     return () => {
-      cancelled = true
-      timers.forEach(clearTimeout)
+      media.removeEventListener('change', syncMotionPreference)
+      clearScheduled()
     }
   }, [])
 

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react'
+import { type CSSProperties, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '@sim/emcn'
 import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
 import {
@@ -27,6 +27,8 @@ type Positions = Record<string, { x: number; y: number }>
 const initialPositions = (): Positions =>
   Object.fromEntries(STAGE_BLOCKS.map((b) => [b.id, { x: b.x, y: b.y }]))
 
+const STAGE_BLOCKS_BY_ID = new Map(STAGE_BLOCKS.map((b) => [b.id, b]))
+
 /**
  * The hero window's live workflow canvas - the right-pane counterpart of the
  * chat loop. Blocks pop in one by one as `builtCount` advances (staggered
@@ -121,8 +123,10 @@ export function HeroWorkflowStage({ builtCount }: HeroWorkflowStageProps) {
     dragRef.current = null
   }, [])
 
-  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]
+  )
 
   return (
     <div
@@ -154,8 +158,8 @@ export function HeroWorkflowStage({ builtCount }: HeroWorkflowStageProps) {
             aria-hidden='true'
           >
             {STAGE_EDGES.map(([from, to]) => {
-              const source = byId.get(from)
-              const target = byId.get(to)
+              const source = STAGE_BLOCKS_BY_ID.get(from)
+              const target = STAGE_BLOCKS_BY_ID.get(to)
               if (!source || !target) return null
               const visible = builtIds.has(from) && builtIds.has(to)
               const s = handleAnchors(source, positions[from]).out

apps/sim/app/(landing)/components/hero/hero.tsx

@@ -113,7 +113,7 @@ export function Hero() {
               fill
               priority
               sizes='(max-width: 1460px) 83vw, 1080px'
-              className='object-cover object-top-left'
+              className='object-cover object-left-top'
             />
             <HeroPlatformLoop />
           </div>

apps/sim/app/landing-preview/page.tsx

@@ -1,3 +1,4 @@
+import { notFound } from 'next/navigation'
 import { LandingShell } from '@/app/(landing)/components'
 import Landing from '@/app/(landing)/landing'
 
@@ -6,11 +7,13 @@ import Landing from '@/app/(landing)/landing'
  * bypasses the self-hosted `/` -> `/login` redirect (proxy only redirects `/`).
  * Wrapped in {@link LandingShell} so the preview carries the exact prod chrome
  * (light tokens, navbar with GitHub stars, footer, JSON-LD).
- * Local-only scaffold for visual iteration; delete before committing.
+ * Local/preview-only scaffold for visual iteration — 404s in production.
  */
 export const dynamic = 'force-dynamic'
 
 export default function LandingPreviewPage() {
+  if (process.env.NODE_ENV === 'production') notFound()
+
   return (
     <LandingShell>
       <Landing />

apps/sim/app/landing-preview/readme-tour-capture/[workspaceId]/page.tsx

@@ -3,6 +3,7 @@
 import { Suspense, use, useEffect, useRef, useState } from 'react'
 import { ToastProvider } from '@sim/emcn'
 import { type QueryClient, useQueryClient } from '@tanstack/react-query'
+import { notFound } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import { WorkspaceChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
 import { Files } from '@/app/workspace/[workspaceId]/files/files'
@@ -38,7 +39,9 @@ import type { WorkflowState } from '@/stores/workflows/workflow/types'
  * WorkspaceChrome sidebar) with the main view switched IN PLACE as the capture
  * cursor clicks sidebar nav items, so one continuous screencast shows a user
  * navigating chat → integrations → knowledge → tables → files → workflow → logs.
- * No auth/network (everything seeded), light mode. Not committed.
+ * No auth/network (everything seeded), light mode. 404s in production
+ * (see the `NODE_ENV` guard below) — only reachable in dev/preview builds
+ * for the capture script.
  */
 export const dynamic = 'force-dynamic'
 
@@ -499,6 +502,8 @@ interface CapturePageProps {
 }
 
 export default function ReadmeTourCapturePage({ searchParams }: CapturePageProps) {
+  if (process.env.NODE_ENV === 'production') notFound()
+
   const params = use(searchParams)
   const camW = Number(params.w ?? 1280)
   const camH = Number(params.h ?? 800)