feat(landing): redesign marketing and product pages (#7543)

* feat(landing): deliver phase one marketing redesign

* fix(landing): showcase supported CLI workflows

* fix(landing): smooth featured customer transitions

* feat(landing): refresh product pages with native UI previews

* fix(landing): allow page scrolling over product previews

* fix(landing): harden preview keyboard interactions

* fix(landing): restore bundle, theme, and analytics guarantees in the redesign

- Lazy-mount the hero product loop (ssr: false) so the workspace chat graph and the
  full block registry no longer ship in every marketing route's initial bundle
  (1.15 MB gz per route, down from 3.44 MB); load the React Flow stage on demand
- Give the marketing surface its own theme store (`sim-landing-theme`): the
  workspace settings sync writes `system` into `sim-theme` for every signed-in
  user, which rendered sim.ai in the OS theme and overwrote the footer toggle;
  make the remaining home links from forced-light shells document navigations
- Track the shell's closing CTA (`footer_cta`) so integration pages keep a
  tracked closing conversion; harden external CTA links in one place
- Restore `priority` on the hero LCP image; stream the customer film only while
  on screen in a visible tab and stop fetching its poster twice
- Delete ~5,800 lines of unreachable components, dead props, and orphaned assets
  the redesign left behind; share the seeded chat strings; reattach two TSDocs

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nwwczp7n4NrACeonLvEgw5

* refactor(landing): simplify the redesign after review

- Stop preview loops while their section is off screen or the tab is hidden
- Drop dead tile/tone branches from the six feature graphics, the unread
  product-layout discriminant, `logoOnly`, placement-frame props, and unused
  layout/type exports; share the two-block workflow preview and the
  elapsed-reveal hook; use the shared `noop`
- Make the invite pages' home buttons document navigations so the marketing
  theme store initializes; drop a no-op grayscale filter on the hero image

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nwwczp7n4NrACeonLvEgw5

* chore(landing): apply the cleanup pass

- Use the canonical `--border` token in the new marketing components, `cn()` for
  the banner class list, and the chip `shape` prop instead of a radius override
- Replace an undefined `--brand-primary` on the qualified-lead dot with the
  brand accent, and an undefined `--shadow-sm` with the utility
- Drop an unobserved `useCallback` and a dead handle-offset constant

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nwwczp7n4NrACeonLvEgw5

* fix(landing): address reviewer feedback and audit findings

Navbar: pin the root's overscroll while the scroll port is locked so an open
menu cannot rubber-band the page; drop the press scale on menu triggers that
do not navigate; lay integration tiles out as rows so the preview fade no
longer covers their names; hide the auth pill in the phone header.

Hero and stages: draw the intro frame on the region's border instead of one
pixel inside it; remove the unshipped Build control from the hero composer;
give the workflows editor loop its block type labels; use the Human block's
icon and fields on the enterprise stage; size React Flow nodes at mount.

Pages: round the changelog chips; give compact pill CTAs the same inset as
the larger sizes; soften the footer wordmark's thresholded edge.

Review follow-ups: keep the landing theme key through logout, make the login
fallback a document navigation, remove a shadow the design never had, and
restore the chip label chrome on two document home links.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(landing): address QA findings and isolate demo dependencies

* fix(landing): enable drag and trackpad scrolling in customer carousel

Scrub the existing logo loop with pointer drags, horizontal trackpad
gestures, and arrow keys while preserving autoplay position and native
trackpad momentum. Keep reduced-motion support and normal vertical
scrolling and pinch-to-zoom behavior.

* fix(landing): fit account links in narrow mobile menus

Size the account pill segments around their labels and reduce minimum horizontal padding so Start building stays inside its segment on narrow screens.

* fix(landing): finish accessibility and routing QA

* fix(test): align enrollment shell mock with direct import

* refactor(ui): use the narrow logo shell barrel

* fix(landing): refine graphics, navigation, and accessibility

* fix(landing): align preview controls and simplify CLI copy

* chore(review): remove ineffective file-limit override

---------

Co-authored-by: andresdjasso <andresdjasso@users.noreply.github.com>
Co-authored-by: Waleed Latif <walif6@gmail.com>
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
Co-authored-by: Justin Blumencranz <96924014+j15z@users.noreply.github.com>

Author: 4 people

.claude/rules/emcn-components.md

@@ -20,7 +20,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 
 ## Component catalogue
 
-- **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`; the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`. The old `mx-0.5` default and its `flush` opt-out are gone; do not reintroduce either, and never add a margin to a chip through `className`.
+- **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`, `outline` (a true `--border` border, no shadow or hover fill); the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`. The old `mx-0.5` default and its `flush` opt-out are gone; do not reintroduce either, and never add a margin to a chip through `className`.
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).

apps/sim/app/(auth)/components/auth-shell.test.tsx

@@ -0,0 +1,24 @@
+/** @vitest-environment node */
+import type { ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { AuthShell } from '@/app/(auth)/components/auth-shell'
+
+vi.mock('next/link', () => ({
+  default: ({ children }: { children: ReactNode }) => (
+    <a href='/' data-client-navigation>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('@/app/_shell/desktop-title-bar', () => ({ DesktopTitleBarLane: () => null }))
+vi.mock('@/app/(landing)/components/navbar/components', () => ({
+  LogoMark: ({ children }: { children: ReactNode }) => <>{children}</>,
+  SimWordmark: () => 'Sim',
+}))
+
+it('returns home through a document link so route-specific theme defaults reinitialize', () => {
+  const html = renderToStaticMarkup(<AuthShell>Sign in</AuthShell>)
+  expect(html).toContain('href="/" aria-label="Sim home"')
+  expect(html).not.toContain('data-client-navigation')
+})

apps/sim/app/(auth)/components/auth-shell.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import Link from 'next/link'
 import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
 
@@ -19,6 +18,8 @@ interface AuthShellProps {
  * the canvas/`--text-primary` surface, and renders a logo-only header that reuses
  * the landing {@link LogoMark} + {@link SimWordmark} at the same nav gutters. The
  * single content column is centered and capped for a calm single-form layout.
+ * The home link starts a document navigation so the marketing theme default is
+ * initialized independently of auth's forced-light context.
  *
  * The shell also owns the macOS traffic-light lane, unconditionally — every surface that
  * wears it (the `(auth)` routes, the CLI auth handoff, the invite pages) sits outside
@@ -34,11 +35,11 @@ export function AuthShell({ children, footer }: AuthShellProps) {
       <DesktopTitleBarLane />
       <header>
         <nav className='mx-auto flex w-full max-w-[1446px] items-center px-12 py-4 max-sm:px-5 max-lg:px-8'>
-          <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
+          <a href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
             <LogoMark>
               <SimWordmark />
             </LogoMark>
-          </Link>
+          </a>
         </nav>
       </header>
       <div className='flex flex-1 items-center justify-center px-4 pb-16'>

apps/sim/app/(auth)/login/login-form.tsx

@@ -262,8 +262,8 @@ export default function LoginPage({
       // Clear reset success message on successful login
       setResetSuccessMessage(null)
 
-      // Explicit redirect fallback if better-auth doesn't redirect
-      router.push(safeCallbackUrl)
+      /** Fallback when better-auth does not redirect: a document navigation, like signup's, so the workspace shell initializes its own theme store. */
+      window.location.href = safeCallbackUrl
     } catch (err: any) {
       if (err.message?.includes('not verified') || err.code?.includes('EMAIL_NOT_VERIFIED')) {
         redirectToVerify(email)

apps/sim/app/(auth)/signup/signup-form.test.tsx

@@ -0,0 +1,132 @@
+/** @vitest-environment jsdom */
+import { act, type InputHTMLAttributes, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import SignupForm from '@/app/(auth)/signup/signup-form'
+
+const { push, signUp, refetchSession } = vi.hoisted(() => ({
+  push: vi.fn(),
+  signUp: vi.fn(),
+  refetchSession: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push }),
+  useSearchParams: () => new URLSearchParams(),
+}))
+vi.mock('@marsidev/react-turnstile', () => ({ Turnstile: () => null }))
+vi.mock('posthog-js/react', () => ({ usePostHog: () => null }))
+vi.mock('@/lib/analytics/google', () => ({ trackGoogleEvent: vi.fn() }))
+vi.mock('@/lib/auth/auth-client', () => ({
+  client: { signUp: { email: signUp } },
+  useSession: () => ({ refetch: refetchSession }),
+}))
+vi.mock('@/lib/consent/tracking-consent', () => ({
+  useTrackingConsent: () => ({ measurement: false }),
+}))
+vi.mock('@/lib/core/config/env', () => ({ getEnv: () => undefined, isFalsy: () => false }))
+vi.mock('@/lib/core/config/env-flags', () => ({ isSsoEnabled: false }))
+vi.mock('@/lib/core/security/input-validation', () => ({ validateCallbackUrl: () => false }))
+vi.mock('@/lib/messaging/email/validation', () => ({
+  quickValidateEmail: () => ({ isValid: true }),
+}))
+vi.mock('@/lib/posthog/client', () => ({ captureClientEvent: vi.fn(), captureEvent: vi.fn() }))
+vi.mock('@/app/(auth)/components', () => ({
+  AuthDivider: () => null,
+  AuthField: ({ children }: { children: ReactNode }) => <>{children}</>,
+  AuthFormMessage: () => null,
+  AuthHeader: () => null,
+  AuthInput: ({ error, ...props }: InputHTMLAttributes<HTMLInputElement> & { error?: boolean }) => (
+    <input {...props} />
+  ),
+  AuthLegalFooter: () => null,
+  AuthNavPrompt: () => null,
+  AuthSubmitButton: ({ children }: { children: ReactNode }) => (
+    <button type='submit'>{children}</button>
+  ),
+  PasswordInput: ({
+    error,
+    ...props
+  }: InputHTMLAttributes<HTMLInputElement> & { error?: boolean }) => <input {...props} />,
+  SocialLoginButtons: () => null,
+  SSOLoginButton: () => null,
+}))
+
+let root: Root
+let host: HTMLDivElement
+let destination: { href: string }
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  destination = { href: '' }
+  const browser = window
+  vi.stubGlobal(
+    'window',
+    new Proxy(browser, {
+      get(target, key) {
+        return key === 'location' ? destination : Reflect.get(target, key, target)
+      },
+    })
+  )
+  signUp.mockResolvedValue({ data: { user: { id: 'new-user' } } })
+  refetchSession.mockResolvedValue(undefined)
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+async function submit(emailVerificationEnabled: boolean) {
+  act(() =>
+    root.render(
+      <SignupForm
+        githubAvailable={false}
+        googleAvailable={false}
+        microsoftAvailable={false}
+        emailSignupEnabled
+        emailVerificationEnabled={emailVerificationEnabled}
+      />
+    )
+  )
+  const fields = { name: 'Test Builder', email: 'builder@example.com', password: 'SafePass1!' }
+  for (const [name, value] of Object.entries(fields)) {
+    const input = host.querySelector<HTMLInputElement>(`input[name="${name}"]`)
+    if (!input) throw new Error(`Missing ${name} input`)
+    input.value = value
+  }
+  const form = host.querySelector('form')
+  if (!form) throw new Error('Missing signup form')
+  await act(async () =>
+    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+  )
+}
+
+describe('signup shell navigation', () => {
+  it('starts a document navigation after a successful signup without verification', async () => {
+    await submit(false)
+    expect(signUp).toHaveBeenCalledOnce()
+    expect(refetchSession).toHaveBeenCalledOnce()
+    expect(destination.href).toBe('/home')
+    expect(push).not.toHaveBeenCalled()
+  })
+
+  it('keeps verification within the auth shell and stores the email for the next step', async () => {
+    await submit(true)
+    expect(push).toHaveBeenCalledWith('/verify?fromSignup=true')
+    expect(sessionStorage.getItem('verificationEmail')).toBe('builder@example.com')
+    expect(destination.href).toBe('')
+  })
+
+  it('does not navigate when signup fails', async () => {
+    signUp.mockResolvedValue({ error: { message: 'Signup failed' } })
+    await submit(false)
+    expect(push).not.toHaveBeenCalled()
+    expect(destination.href).toBe('')
+  })
+})

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -372,12 +372,10 @@ function SignupFormContent({
 
       if (destination.kind === 'verify') {
         router.push(VERIFY_FROM_SIGNUP_ROUTE)
-      } else if (destination.kind === 'redirect') {
-        // Full navigation, matching the verify hop: the destination (invite, CLI
-        // handoff) is server-rendered and must see the fresh session cookie.
-        window.location.href = destination.url
       } else {
-        router.push(DEFAULT_POST_AUTH_ROUTE)
+        /** Match login/verification: refresh session-bound shells and their theme default. */
+        window.location.href =
+          destination.kind === 'redirect' ? destination.url : DEFAULT_POST_AUTH_ROUTE
       }
     } catch (error) {
       logger.error('Signup error:', error)

apps/sim/app/(auth)/verify/use-verification.ts

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { normalizeEmail } from '@sim/utils/string'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { DEFAULT_POST_AUTH_ROUTE, POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
@@ -74,7 +74,6 @@ export function useVerification({
   isProduction,
   isEmailVerificationEnabled,
 }: UseVerificationParams): UseVerificationReturn {
-  const router = useRouter()
   const searchParams = useSearchParams()
   const { refetch: refetchSession } = useSession()
   const [otp, setOtp] = useState('')
@@ -215,15 +214,12 @@ export function useVerification({
         logger.warn('Failed to refetch session during verification skip:', error)
       }
 
-      if (destination) {
-        window.location.href = destination
-      } else {
-        router.push(DEFAULT_POST_AUTH_ROUTE)
-      }
+      /** A document navigation, like signup's, so the workspace shell initializes its own theme store. */
+      window.location.href = destination ?? DEFAULT_POST_AUTH_ROUTE
     }
 
     handleRedirect()
-  }, [isEmailVerificationEnabled, router, searchParams])
+  }, [isEmailVerificationEnabled, searchParams])
 
   return {
     otp,

apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { SupportFooter } from '@/app/(auth)/components'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 /**
  * Chrome for the `(interfaces)` route group (chat + resume) — the lightweight,

apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-execution-unavailable.tsx

@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { chipContentLabelClass, chipVariants, cn } from '@sim/emcn'
 
 export function ResumeExecutionUnavailable() {
   return (
@@ -8,9 +8,9 @@ export function ResumeExecutionUnavailable() {
         <p className='mb-6 text-[var(--text-secondary)] text-sm'>
           This execution could not be located or has already completed.
         </p>
-        <ChipLink variant='border' href='/'>
-          Return Home
-        </ChipLink>
+        <a href='/' className={chipVariants({ variant: 'border' })}>
+          <span className={cn(chipContentLabelClass, 'flex-1')}>Return Home</span>
+        </a>
       </div>
     </div>
   )