feat(landing): extend enterprise product-preview design to solutions and workflows pages

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

@@ -85,13 +85,13 @@ Follow `.claude/rules/constitution.md` exactly: Sim is "the open-source AI works
  │ ├── landing-shell/ # light wrapper + skip link + Navbar(stars) + Footer; wraps every page
  │ ├── hero-cta/ # the one email-capture + Sign-up CTA (hero + every platform hero)
  │ └── logos/ # the one customer-logo set; layout='grid' (hero) | 'row' (platform)
- └── platform-page/ # the reusable platform-page layout (Workflows, Tables, Files, …)
- ├── platform-page.tsx, index.ts, types.ts, constants.ts  # PlatformPage + the content contract + spacing
- └── components/ # platform-hero, platform-logos-row, platform-card-row (→ card, pill-cta),
- # platform-visual-frame, platform-structured-data
+ └── solutions-page/ # the reusable solutions/platform layout (Workflows, Knowledge, Tables, Files, Logs, solutions/*)
+ ├── solutions-page.tsx, index.ts, types.ts, constants.ts # SolutionsPage + the content contract + spacing
+ └── components/ # solutions-hero, solutions-logos-row, solutions-card-row (→ card, pill-cta),
+ # solutions-visual-frame, solutions-structured-data
 ```
 
-Each section component's TSDoc carries its layout spec - read it before implementing. Section components own their landmark (Navbar → `<header>`, Footer → `<footer>`, the rest → `<section>`); the shared `LandingShell` owns the page frame (light wrapper, skip link, navbar, footer, GitHub stars via `@/lib/github/stars` - fetched at build/revalidate time, never client-fetched), and the page's `<main>` owns the section order and rhythm. Platform routes consume `PlatformPage` with a single content `config` - see `platform-page/CLAUDE`-level TSDoc on `platform-page.tsx`. Sub-components of a section go in `components/<section>/components/`.
+Each section component's TSDoc carries its layout spec - read it before implementing. Section components own their landmark (Navbar → `<header>`, Footer → `<footer>`, the rest → `<section>`); the shared `LandingShell` owns the page frame (light wrapper, skip link, navbar, footer, GitHub stars via `@/lib/github/stars` - fetched at build/revalidate time, never client-fetched), and the page's `<main>` owns the section order and rhythm. Platform and solutions routes consume `SolutionsPage` with a single content `config` - see the TSDoc on `solutions-page.tsx`. Sub-components of a section go in `components/<section>/components/`.
 
 Absolute imports only in component code (`@/app/(landing)/components/...`); `index.ts` barrels use relative re-exports (`export { X } from './x'`), matching the workspace convention. Props interfaces for every component. No `utils.ts` until two files share a helper.
 

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

@@ -29,6 +29,13 @@ interface HeroWorkflowStageProps {
  edges?: ReadonlyArray<readonly [string, string]>
  /** Design-space bounding box of the block layout. Defaults with them. */
  canvas?: { width: number; height: number }
+ /**
+ * Block to dress with the selection ring - graphite (`--text-secondary`)
+ * rather than the real canvas's blue, per the landing pages' grayscale
+ * language - the workflows hero uses this for its "being edited" beat.
+ * Off by default, so existing stages are unchanged.
+ */
+ selectedId?: string
 }
 
 /**
@@ -55,6 +62,7 @@ export function HeroWorkflowStage({
  blocks = STAGE_BLOCKS,
  edges = STAGE_EDGES,
  canvas = STAGE_CANVAS,
+ selectedId,
 }: HeroWorkflowStageProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [scale, setScale] = useState(MAX_STAGE_SCALE)
@@ -154,6 +162,13 @@ export function HeroWorkflowStage({
  style={{ left: block.x, top: block.y, width: BLOCK_WIDTH }}
  >
  <StageBlockCard block={block} />
+ <span
+ aria-hidden
+ className={cn(
+ 'pointer-events-none absolute inset-0 rounded-[13px] ring-[1.75px] ring-[var(--text-secondary)] transition-opacity duration-300 ease-out',
+ selectedId === block.id && built ? 'opacity-100' : 'opacity-0'
+ )}
+ />
  </div>
  )
  })}

apps/sim/app/(landing)/components/index.ts

@@ -18,22 +18,9 @@ export { Lightbox } from './lightbox'
 export { LogoShell } from './logo-shell'
 export { Mothership } from './mothership/mothership'
 export { Navbar } from './navbar'
-export type {
- PlatformCardConfig,
- PlatformCardRowConfig,
- PlatformHeroConfig,
- PlatformPageConfig,
- PlatformPillCta,
-} from './platform-page'
-export { PlatformPage } from './platform-page'
+export { PlatformHeroVisual } from './platform-hero-visual'
 export { ProductDemo } from './product-demo'
 export { ShareButton } from './share-button'
 export { SiteStructuredData } from './site-structured-data'
-export type {
- SolutionsCardConfig,
- SolutionsCardRowConfig,
- SolutionsHeroConfig,
- SolutionsPageConfig,
- SolutionsPillCta,
-} from './solutions-page'
+export type { SolutionsPageConfig } from './solutions-page'
 export { SolutionsPage } from './solutions-page'

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-files/landing-preview-files.tsx

@@ -6,8 +6,9 @@ import type {
 } from '@/app/(landing)/components/landing-preview/components/landing-preview-resource/landing-preview-resource'
 import { LandingPreviewResource } from '@/app/(landing)/components/landing-preview/components/landing-preview-resource/landing-preview-resource'
 import { ownerCell } from '@/app/(landing)/components/landing-preview/components/landing-preview-resource/utils'
+import { ZipIcon } from '@/app/(landing)/components/shared/zip-icon'
 
-/** Generic audio/zip icon using basic SVG since no dedicated component exists */
+/** Generic audio icon using basic SVG since no dedicated component exists */
 function AudioIcon({ className }: { className?: string }) {
  return (
  <svg
@@ -46,27 +47,6 @@ function JsonlIcon({ className }: { className?: string }) {
  )
 }
 
-function ZipIcon({ className }: { className?: string }) {
- return (
- <svg
- viewBox='0 0 24 24'
- fill='none'
- stroke='currentColor'
- strokeWidth='1.5'
- strokeLinecap='round'
- strokeLinejoin='round'
- className={className}
- >
- <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
- <path d='M14 2v4a2 2 0 0 0 2 2h4' />
- <path d='M10 6h1' />
- <path d='M10 10h1' />
- <path d='M10 14h1' />
- <path d='M9 18h2v2h-2z' />
- </svg>
- )
-}
-
 const COLUMNS: PreviewColumn[] = [
  { id: 'name', header: 'Name' },
  { id: 'size', header: 'Size' },

apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx

@@ -23,8 +23,12 @@ import { DEMO_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
  * leaf hydrates; the desktop nav stays server-rendered.
  *
  * The sheet locks body scroll while open and closes on route change intent
- * (any link tap) and on `Escape`. Motion is a short token-driven
- * transform/opacity that collapses under `prefers-reduced-motion`.
+ * (any link tap) and on `Escape`. With all three mega-menus expanded the
+ * sections outgrow a phone viewport, so the sheet caps its height at the
+ * space under the bar (`100dvh` minus the bar's 62px) and scrolls internally
+ * (`overscroll-contain` keeps the locked page from rubber-banding behind it).
+ * Motion is a short token-driven transform/opacity that collapses under
+ * `prefers-reduced-motion`.
  */
 
 interface MobileNavProps {
@@ -35,9 +39,9 @@ interface MobileNavProps {
 /**
  * Standalone top-level routes shown in the sheet alongside the expanded mega-menu
  * sections. Pricing is a standalone link on the desktop nav (not a mega-menu), so
- * it stays a single row here too. Restoring `PLATFORM_MENU`/`SOLUTIONS_MENU` to
- * {@link NAV_MENUS} automatically expands them here as grouped sections too - the
- * sheet mirrors the desktop nav's information architecture with no extra edit.
+ * it stays a single row here too. Every menu in {@link NAV_MENUS} expands here as
+ * a grouped section automatically - the sheet mirrors the desktop nav's
+ * information architecture with no extra edit.
  */
 const STANDALONE_LINKS = [
  { label: 'Enterprise', href: '/enterprise' },
@@ -78,6 +82,7 @@ export function MobileNav({ stars }: MobileNavProps) {
  type='button'
  aria-label={open ? 'Close menu' : 'Open menu'}
  aria-expanded={open}
+ aria-controls='mobile-nav-sheet'
  onClick={() => setOpen((v) => !v)}
  className='flex size-[30px] items-center justify-center rounded-lg border border-[var(--border-1)] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-hover)]'
  >
@@ -95,12 +100,13 @@ export function MobileNav({ stars }: MobileNavProps) {
  ) : null}
 
  <div
+ id='mobile-nav-sheet'
  className={cn(
- 'absolute top-full right-0 left-0 z-50 origin-top border-[var(--border)] border-b transition-[opacity,transform] duration-200 motion-reduce:transition-none',
+ 'absolute top-full right-0 left-0 z-50 max-h-[calc(100dvh-62px)] origin-top overflow-y-auto overscroll-contain border-[var(--border)] border-b transition-[opacity,transform,visibility] duration-200 motion-reduce:transition-none',
  NAVBAR_GLASS_SURFACE,
  open
- ? 'pointer-events-auto translate-y-0 opacity-100'
- : '-translate-y-2 pointer-events-none opacity-0'
+ ? 'pointer-events-auto visible translate-y-0 opacity-100'
+ : '-translate-y-2 pointer-events-none invisible opacity-0'
  )}
  >
  <div className='mx-auto flex w-full max-w-[1460px] flex-col gap-1 px-5 pt-2 pb-5'>

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts

@@ -7,11 +7,6 @@ import type { NavMenu } from '@/app/(landing)/components/navbar/components/nav-m
 export const PLATFORM_MENU: NavMenu = {
  label: 'Platform',
  items: [
- {
- title: 'Mothership',
- description: 'Build and command agents in natural language',
- href: '/',
- },
  {
  title: 'Workflows',
  description: 'Design agent logic visually',
@@ -32,6 +27,11 @@ export const PLATFORM_MENU: NavMenu = {
  description: 'One file store for team and agents',
  href: '/files',
  },
+ {
+ title: 'Scheduled Tasks',
+ description: 'Run agents on a cadence',
+ href: '/scheduled-tasks',
+ },
  {
  title: 'Logs',
  description: 'Trace every agent decision',
@@ -121,13 +121,9 @@ export const SOLUTIONS_MENU: NavMenu = {
 }
 
 /**
- * Navbar mega-menus that are currently rendered, in trigger order - shared by
- * desktop and mobile nav (the desktop bar maps this list; mobile nav derives
- * its visible sections from these labels).
- *
- * `PLATFORM_MENU` and `SOLUTIONS_MENU` are intentionally omitted for now to hide
- * those sections from navigation while their pages stay live and reachable by
- * direct URL. The menu definitions above are kept intact - to restore a section,
- * add its constant back to this list.
+ * Navbar mega-menus in trigger order - shared by desktop and mobile nav (the
+ * desktop bar maps this list; mobile nav derives its visible sections from
+ * these labels). Platform leads with the product modules, Solutions follows
+ * with the per-team pages, and Resources closes with learning surfaces.
  */
-export const NAV_MENUS = [RESOURCES_MENU] as const
+export const NAV_MENUS = [PLATFORM_MENU, SOLUTIONS_MENU, RESOURCES_MENU] as const

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx

@@ -30,6 +30,12 @@ import type { NavMenu } from '@/app/(landing)/components/navbar/components/nav-m
  * The panel chrome replicates the `ChipModal` framed-card look exactly: an outer
  * `--surface-4` ring (`p-[3px]`, overlay shadow) wrapping an inner `--bg`
  * surface, with the item grid padded inside.
+ *
+ * The grid renders three visual columns on six tracks (each tile spans two),
+ * which keeps six-item menus pixel-identical to a plain three-column grid while
+ * letting a five-item menu center its two-tile last row - the second-to-last
+ * tile starts on track two, so the short row sits symmetrically instead of
+ * leaving a hole in the corner.
  */
 
 interface NavMenuChipProps {
@@ -74,7 +80,14 @@ export function NavMenuChip({ menu }: NavMenuChipProps) {
  <div className={cn(PANEL_BASE, !closed && PANEL_REVEAL)}>
  <div className='w-[840px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)]'>
  <div className='rounded-lg border border-[var(--border-1)] bg-[var(--bg)] p-2'>
- <div className='grid grid-cols-3 gap-1' role='group' aria-label={label}>
+ <div
+ className={cn(
+ 'grid grid-cols-6 gap-1 [&>*]:col-span-2',
+ items.length % 3 === 2 && '[&>*:nth-last-child(2)]:col-start-2'
+ )}
+ role='group'
+ aria-label={label}
+ >
  {items.map((item) => (
  <NavMenuItem key={item.title} item={item} onSelect={handleSelect} />
  ))}

apps/sim/app/(landing)/components/platform-hero-visual/index.ts

@@ -0,0 +1 @@
+export { PlatformHeroVisual } from '@/app/(landing)/components/platform-hero-visual/platform-hero-visual'

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+import Image from 'next/image'
+
+interface PlatformHeroVisualProps {
+ /** The live platform interior - a platform loop or editor loop island. */
+ children: ReactNode
+}
+
+/**
+ * The enterprise hero's visual composition, shared: the architectural backdrop
+ * (`enterprise-hero-background.webp`) with the white demo window framed in
+ * front of it, ready to hold a live platform interior (a chat platform loop or
+ * the workflows editor loop). Extracted so every hero - the enterprise page
+ * included - reuses the exact backdrop, window geometry (`aspect-[1080/620]`
+ * at 83.08% width), and shadow treatment the enterprise page established.
+ *
+ * Renders inside a hero visual slot (the `variant='home'` media frame or the
+ * standard {@link SolutionsVisualFrame}); the outer `relative` wrapper anchors
+ * the `fill` image in frames that don't position themselves.
+ */
+export function PlatformHeroVisual({ children }: PlatformHeroVisualProps) {
+ return (
+ <div className='relative h-full w-full'>
+ <Image
+ fill
+ priority
+ fetchPriority='high'
+ alt=''
+ className='object-cover object-center'
+ sizes='(max-width: 1024px) 100vw, 1300px'
+ src='/landing/enterprise-hero-background.webp'
+ />
+ <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex aspect-[1080/620] w-[83.08%] flex-col overflow-hidden rounded-[10px] bg-[var(--surface-1)] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_6px_0_rgba(0,0,0,0.05),0_4px_42px_0_rgba(0,0,0,0.06)]'>
+ <div className='relative flex-1'>{children}</div>
+ </div>
+ </div>
+ )
+}