fix(landing): fix Core Web Vitals regressions across public marketing pages

- root layout unconditionally rendered next-runtime-env's PublicEnvScript,
  which calls unstable_noStore() and silently forced every route in the app
  dynamic - marketing pages never got static/ISR caching despite their own
  revalidate. Gated it to self-hosted only; hosted now uses a static,
  build-time equivalent (app/_shell/public-env-script.tsx)
- removed real pointer-drag handlers from the hero's decorative workflow
  animation (was draggable despite being aria-hidden)
- disabled dragging/panning on the (currently unmounted) landing-preview
  ReactFlow canvas so it's static-by-default if it's ever wired in
- lazy-mount the Product Demo section's duplicate HeroVisual instance via
  next/dynamic + IntersectionObserver instead of loading it eagerly below
  the fold
- disabled Next.js Link prefetch on always-in-viewport /signup and /login
  CTAs (navbar, hero, mobile nav) so their JS isn't fetched on every
  pageview regardless of whether the visitor clicks
- removed `unoptimized` from local blog/integration images (including the
  priority LCP image on every blog post), letting next/image serve
  resized AVIF/WebP instead of full-size originals

Author: waleedlatif1

apps/sim/app/(landing)/CLAUDE.md

@@ -32,8 +32,11 @@ Target: Lighthouse 95+ on mobile, LCP < 2.0s, CLS < 0.05, minimal hydration cost
 - **No heavy client libraries above the fold.** No animation frameworks (framer-motion etc.), no ReactFlow, no chart libs in the initial bundle. If a below-fold section truly needs one, load it with `next/dynamic` and a dimension-stable placeholder.
 - **Images via `next/image` always.** The LCP element (logo or hero visual) gets `priority`; everything below the fold lazy-loads (the default). Every image has explicit `width`/`height` - zero layout shift.
 - **Prefer CSS over JS.** Hover states, transitions, marquees, and reveal effects in CSS (`transition-*`, `animation`) rather than scroll listeners or animation libraries. Decorative motion respects `prefers-reduced-motion`.
-- **Static rendering.** The page is statically generated with `revalidate` (set in `page.tsx`). Never fetch per-request data in the page tree; anything dynamic (e.g. GitHub stars) is fetched at build/revalidate time on the server or deferred to a tiny client island.
+- **Static rendering.** The page is statically generated with `revalidate` (set in `page.tsx`). Never fetch per-request data in the page tree; anything dynamic (e.g. GitHub stars) is fetched at build/revalidate time or deferred to a client island. A `cookies()`/`headers()`/`unstable_noStore()` call anywhere in the tree - including the root `app/layout.tsx` - silently overrides every page's `revalidate` and forces the whole app dynamic. If a marketing page builds as `ƒ` instead of `○`/`●` (check `bun run build`'s route table), look upstream, not just at the page itself.
 - **Reserve space for everything.** Fixed dimensions or aspect ratios on all media, embeds, and async content. CLS budget is effectively zero.
+- **Decorative canvases and animations are non-interactive.** A hand-built product-demo animation or embedded ReactFlow canvas is presentation only - no drag handlers, no `nodesDraggable`/`panOnDrag`/`elementsSelectable` on ReactFlow. A visitor should never be able to click or drag a decorative element.
+- **Lazy-mount a heavy client island's second occurrence.** If the same animated component appears twice on a page, only the first (usually the hero) loads eagerly - the rest go through a small `'use client'` mount wrapper: `next/dynamic(..., { ssr: false })` gated by an `IntersectionObserver`. See `components/product-demo/components/product-demo-visual-mount/` for the reference pattern, and `.claude/rules/sim-imports.md` for the barrel-cleanup step that must come with it.
+- **Don't prefetch authenticated-app routes from an always-visible CTA.** `<Link>` prefetches its target route's JS once it's in the viewport - a navbar/hero CTA to `/signup` or `/login` is always in view, so it downloads that route's bundle on every pageview. Pass `prefetch={false}` there. Leave the default on CTAs that only enter the viewport on scroll (prefetch-on-approach is the desired behavior there).
 
 ## SEO
 

apps/sim/app/(landing)/blog/[slug]/page.tsx

@@ -56,7 +56,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                 sizes='(max-width: 768px) 100vw, 450px'
                 priority
                 itemProp='image'
-                unoptimized
               />
             </div>
           </div>
@@ -145,7 +144,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                         sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
                         className='object-cover'
                         loading='lazy'
-                        unoptimized
                       />
                     </div>
                     <div className='flex flex-col gap-2'>

apps/sim/app/(landing)/blog/authors/[id]/page.tsx

@@ -92,7 +92,6 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
             width={40}
             height={40}
             className='rounded-full'
-            unoptimized
           />
         ) : null}
         <h1 className='text-[32px] text-[var(--text-primary)] leading-tight'>{author.name}</h1>
@@ -107,7 +106,6 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
                 width={600}
                 height={315}
                 className='h-[160px] w-full object-cover transition-transform group-hover:scale-[1.02]'
-                unoptimized
               />
               <div className='p-3'>
                 <div className='mb-1 text-[var(--text-muted)] text-xs'>

apps/sim/app/(landing)/blog/components/blog-image.tsx

@@ -29,7 +29,6 @@ export function BlogImage({ src, alt = '', width = 800, height = 450, className
         )}
         sizes='(max-width: 768px) 100vw, 800px'
         loading='lazy'
-        unoptimized
         onClick={() => setIsLightboxOpen(true)}
       />
       <Lightbox

apps/sim/app/(landing)/blog/page.tsx

@@ -138,7 +138,6 @@ export default async function BlogIndex({
                           sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
                           className='object-cover'
                           priority={index < 3}
-                          unoptimized
                         />
                       </div>
                       <div className='flex flex-col gap-2'>
@@ -203,7 +202,6 @@ export default async function BlogIndex({
                       fill
                       sizes='140px'
                       className='object-cover'
-                      unoptimized
                     />
                   </div>
                 </Link>

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

@@ -28,7 +28,7 @@ export function Cta() {
         Build your first agent today.
       </h2>
       <div className='flex items-center gap-1'>
-        <ChipLink variant='primary' href='/signup'>
+        <ChipLink variant='primary' href='/signup' prefetch={false}>
           Get started
         </ChipLink>
         <ChipLink href='/demo' className='border border-[var(--border-1)]'>

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

@@ -29,6 +29,7 @@ export function HeroCta() {
       </ChipLink>
       <ChipLink
         href='/signup'
+        prefetch={false}
         className={cn(CTA_SIZE, 'border border-[var(--border-1)] max-sm:justify-center')}
       >
         Sign up

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

@@ -59,12 +59,12 @@ const CHROME_INTERIOR = { width: 1024, height: 721 } as const
  * chat|stage divider is covered by this region, so the divider users see is
  * the live `border-l`, appearing exactly as it does in the product.
  *
- * The chat pane stays `pointer-events-none` (decorative); the workflow pane is
- * interactive - blocks are draggable. Remounting the stage per cycle
- * (`key={cycleId}`) resets dragged positions and build state.
+ * Both panes stay `pointer-events-none` (decorative, matching the hero's
+ * `aria-hidden` frame) - blocks are static. Remounting the stage per cycle
+ * (`key={cycleId}`) resets build state.
  *
  * Under `prefers-reduced-motion` the loop never starts: the finished exchange,
- * open stage, and fully-built workflow render statically (still draggable).
+ * open stage, and fully-built workflow render statically.
  */
 export function HeroPlatformLoop() {
   const regionRef = useRef<HTMLDivElement>(null)

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, useMemo, useRef, useState } from 'react'
+import { type CSSProperties, 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 {
@@ -22,43 +22,26 @@ interface HeroWorkflowStageProps {
   builtCount: number
 }
 
-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
- * scale/fade entrances, edges stroke-draw once both endpoints exist), and every
- * block is DRAGGABLE: pointer-drag updates its position (scaled to design
- * space) and its edges follow live. The edge SVG is `overflow-visible` -
- * SVGs clip at their viewport by default, which cut the lines the moment a
- * dragged block left the design-canvas bounds while the HTML block cards
- * escaped freely. Positions reset when the parent remounts the stage for a
- * new loop pass (`key={cycleId}`).
+ * scale/fade entrances, edges stroke-draw once both endpoints exist) at their
+ * fixed positions. The edge SVG is `overflow-visible` - SVGs clip
+ * at their viewport by default, which would cut the lines if a block ever sat
+ * outside the design-canvas bounds.
+ *
+ * Decorative and `aria-hidden` (via the parent frame), so blocks are NOT
+ * draggable - `pointer-events-none`, matching the rest of the hero animation.
  *
  * Blocks reuse the hero-visual's {@link WorkflowBlockContent} (the faithful
  * icon-tile + rows card body) in a card shell with vertical-flow handle nubs
  * (top in / bottom out), matching the real editor's vertical layout.
  */
 export function HeroWorkflowStage({ builtCount }: HeroWorkflowStageProps) {
-  const [positions, setPositions] = useState<Positions>(initialPositions)
   const containerRef = useRef<HTMLDivElement>(null)
   const [scale, setScale] = useState(MAX_STAGE_SCALE)
-  const dragRef = useRef<{
-    id: string
-    pointerId: number
-    startX: number
-    startY: number
-    originX: number
-    originY: number
-    /** Total design-px -> visual-px factor for the dragged block (this stage's
-     * fit scale x the platform loop's design-space scale), captured at grab. */
-    visualScale: number
-  } | null>(null)
 
   // Fit the design canvas to the card: scale down when the pane narrows so the
   // branch blocks never clip, capped at the full-width scale. Measures LAYOUT
@@ -86,43 +69,6 @@ export function HeroWorkflowStage({ builtCount }: HeroWorkflowStageProps) {
     return () => ro.disconnect()
   }, [])
 
-  const onPointerDown = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>, id: string) => {
-      if (dragRef.current) return
-      const pos = positions[id]
-      dragRef.current = {
-        id,
-        pointerId: e.pointerId,
-        startX: e.clientX,
-        startY: e.clientY,
-        originX: pos.x,
-        originY: pos.y,
-        // Rendered width / design width = the block's total visual scale, all
-        // ancestor transforms included - no need to thread each factor through.
-        visualScale: e.currentTarget.getBoundingClientRect().width / BLOCK_WIDTH,
-      }
-      e.currentTarget.setPointerCapture(e.pointerId)
-    },
-    [positions]
-  )
-
-  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    const drag = dragRef.current
-    if (!drag || e.pointerId !== drag.pointerId || drag.visualScale <= 0) return
-    const dx = (e.clientX - drag.startX) / drag.visualScale
-    const dy = (e.clientY - drag.startY) / drag.visualScale
-    setPositions((prev) => ({
-      ...prev,
-      [drag.id]: { x: drag.originX + dx, y: drag.originY + dy },
-    }))
-  }, [])
-
-  const onPointerEnd = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    const drag = dragRef.current
-    if (!drag || e.pointerId !== drag.pointerId) return
-    dragRef.current = null
-  }, [])
-
   const builtIds = useMemo(
     () => new Set(STAGE_BLOCKS.slice(0, builtCount).map((b) => b.id)),
     [builtCount]
@@ -162,8 +108,8 @@ export function HeroWorkflowStage({ builtCount }: HeroWorkflowStageProps) {
               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
-              const t = handleAnchors(target, positions[to]).in
+              const s = handleAnchors(source, source).out
+              const t = handleAnchors(target, target).in
               return (
                 <path
                   key={`${from}-${to}`}
@@ -181,20 +127,14 @@ export function HeroWorkflowStage({ builtCount }: HeroWorkflowStageProps) {
 
           {STAGE_BLOCKS.map((block) => {
             const built = builtIds.has(block.id)
-            const pos = positions[block.id]
             return (
               <div
                 key={block.id}
                 className={cn(
-                  'absolute cursor-grab touch-none select-none active:cursor-grabbing',
-                  'transition-[opacity,scale] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
-                  built ? 'scale-100 opacity-100' : 'pointer-events-none scale-[0.94] opacity-0'
+                  'pointer-events-none absolute transition-[opacity,scale] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
+                  built ? 'scale-100 opacity-100' : 'scale-[0.94] opacity-0'
                 )}
-                style={{ left: pos.x, top: pos.y, width: BLOCK_WIDTH }}
-                onPointerDown={(e) => onPointerDown(e, block.id)}
-                onPointerMove={onPointerMove}
-                onPointerUp={onPointerEnd}
-                onPointerCancel={onPointerEnd}
+                style={{ left: block.x, top: block.y, width: BLOCK_WIDTH }}
               >
                 <StageBlockCard block={block} />
               </div>