cleanup(landing): enterprise redesign polish + asset compression

- Fix ChipLink chrome overrides in navbar/mobile-nav to use variant='border'
- Dedup elapsed-time reveal effects in enterprise-home-stage into one hook
- Remove unused FeatureGraphicNode component and barrel export
- Convert enterprise-hero-background.png (8.9MB lossless) to WebP q90 (1.07MB, near-lossless)
- Fix team-avatar-1/2/3.png mislabeling (actual JPEG bytes) to correct .jpg extension

Author: waleedlatif1

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

@@ -154,11 +154,12 @@ export function MobileNav({ stars }: MobileNavProps) {
 
           <div className='mt-3 flex flex-col gap-2'>
             <ChipLink
+              variant='border'
               href='/login'
               fullWidth
               flush
               prefetch={false}
-              className='h-[40px] justify-center border border-[var(--border-1)] [&>span]:flex-none'
+              className='h-[40px] justify-center [&>span]:flex-none'
               onClick={() => setOpen(false)}
             >
               Log in

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

@@ -87,7 +87,7 @@ export function Navbar({ stars, logoOnly = false }: NavbarProps) {
               <ChipLink href='/login' prefetch={false}>
                 Log in
               </ChipLink>
-              <ChipLink href='/demo' className='border border-[var(--border-1)]'>
+              <ChipLink variant='border' href='/demo'>
                 Contact sales
               </ChipLink>
               <ChipLink variant='primary' href='/signup' prefetch={false}>

apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx

@@ -29,6 +29,55 @@ import {
 
 const REPLY_WORDS = ENTERPRISE_REPLY.split(' ')
 
+/**
+ * Reveals an incrementing count (typed chars, streamed words) at a fixed
+ * step interval while `active`, deriving progress from ELAPSED time so a
+ * throttled background tab catches up instead of stalling mid-reveal.
+ * Resets to 0 when inactive; jumps straight to `total` under
+ * `prefers-reduced-motion`.
+ */
+function useElapsedReveal(active: boolean, stepMs: number, total: number) {
+  const [revealed, setRevealed] = useState(0)
+
+  useEffect(() => {
+    if (!active) {
+      setRevealed(0)
+      return
+    }
+
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    let interval: ReturnType<typeof setInterval> | null = null
+
+    const run = () => {
+      const startedAt = performance.now()
+      interval = setInterval(() => {
+        const elapsed = performance.now() - startedAt
+        const n = Math.min(Math.floor(elapsed / stepMs) + 1, total)
+        setRevealed(n)
+        if (n >= total && interval) clearInterval(interval)
+      }, stepMs)
+    }
+
+    const syncMotionPreference = () => {
+      if (interval) clearInterval(interval)
+      if (media.matches) {
+        setRevealed(total)
+        return
+      }
+      run()
+    }
+
+    syncMotionPreference()
+    media.addEventListener('change', syncMotionPreference)
+    return () => {
+      media.removeEventListener('change', syncMotionPreference)
+      if (interval) clearInterval(interval)
+    }
+  }, [active, stepMs, total])
+
+  return revealed
+}
+
 /** Greyscale leading icons for the suggested-action rows, in row order. */
 const ACTION_ICONS = [Table, ShieldCheck, ClipboardList, Files] as const
 
@@ -112,82 +161,8 @@ export function EnterpriseHomeStage({ phase, fading }: EnterpriseHomeStageProps)
   const isReply = phase === 'reply'
   const inConversation = phase === 'dispatch' || isReply
   const promptDone = phase === 'typed' || inConversation
-  const [typedChars, setTypedChars] = useState(0)
-  const [revealedWords, setRevealedWords] = useState(0)
-
-  useEffect(() => {
-    if (!isTyping) {
-      setTypedChars(0)
-      return
-    }
-
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    let interval: ReturnType<typeof setInterval> | null = null
-
-    const type = () => {
-      const startedAt = performance.now()
-      interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const n = Math.min(Math.floor(elapsed / PROMPT_CHAR_MS) + 1, ENTERPRISE_PROMPT.length)
-        setTypedChars(n)
-        if (n >= ENTERPRISE_PROMPT.length && interval) clearInterval(interval)
-      }, PROMPT_CHAR_MS)
-    }
-
-    const syncMotionPreference = () => {
-      if (interval) clearInterval(interval)
-      if (media.matches) {
-        setTypedChars(ENTERPRISE_PROMPT.length)
-        return
-      }
-      type()
-    }
-
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      if (interval) clearInterval(interval)
-    }
-  }, [isTyping])
-
-  // Stream the reply word by word while the phase holds on 'reply'; any other
-  // phase (the next cycle's reset) rewinds it for the following pass.
-  useEffect(() => {
-    if (!isReply) {
-      setRevealedWords(0)
-      return
-    }
-
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    let interval: ReturnType<typeof setInterval> | null = null
-
-    const stream = () => {
-      const startedAt = performance.now()
-      interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const n = Math.min(Math.floor(elapsed / REPLY_WORD_MS) + 1, REPLY_WORDS.length)
-        setRevealedWords(n)
-        if (n >= REPLY_WORDS.length && interval) clearInterval(interval)
-      }, REPLY_WORD_MS)
-    }
-
-    const syncMotionPreference = () => {
-      if (interval) clearInterval(interval)
-      if (media.matches) {
-        setRevealedWords(REPLY_WORDS.length)
-        return
-      }
-      stream()
-    }
-
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      if (interval) clearInterval(interval)
-    }
-  }, [isReply])
+  const typedChars = useElapsedReveal(isTyping, PROMPT_CHAR_MS, ENTERPRISE_PROMPT.length)
+  const revealedWords = useElapsedReveal(isReply, REPLY_WORD_MS, REPLY_WORDS.length)
 
   const visiblePrompt = promptDone ? ENTERPRISE_PROMPT : ENTERPRISE_PROMPT.slice(0, typedChars)
   const hasText = visiblePrompt.length > 0

apps/sim/app/(landing)/enterprise/components/feature-graphics/access-control-graphic.tsx

@@ -10,9 +10,9 @@ const CANVAS = { WIDTH: 320, HEIGHT: 250 } as const
 const PORT_Y = { TEAM: 72, CHIP: 208 } as const
 
 const TEAMS = [
-  { avatar: '/landing/team-avatar-1.png', name: 'Engineering', x: 64, leftClass: 'left-[64px]' },
-  { avatar: '/landing/team-avatar-2.png', name: 'Support', x: 160, leftClass: 'left-[160px]' },
-  { avatar: '/landing/team-avatar-3.png', name: 'Ops', x: 256, leftClass: 'left-[256px]' },
+  { avatar: '/landing/team-avatar-1.jpg', name: 'Engineering', x: 64, leftClass: 'left-[64px]' },
+  { avatar: '/landing/team-avatar-2.jpg', name: 'Support', x: 160, leftClass: 'left-[160px]' },
+  { avatar: '/landing/team-avatar-3.jpg', name: 'Ops', x: 256, leftClass: 'left-[256px]' },
 ] as const
 
 const CHIPS = [

apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx

@@ -31,28 +31,28 @@ const ENTRIES: readonly AuditEntry[] = [
     actor: 'Maya Chen',
     resource: 'Support agent v3',
     time: 'Now',
-    avatar: '/landing/team-avatar-1.png',
+    avatar: '/landing/team-avatar-1.jpg',
   },
   {
     action: 'Permission group updated',
     actor: 'Jordan Lee',
     resource: 'Support team',
     time: '2 min ago',
-    avatar: '/landing/team-avatar-2.png',
+    avatar: '/landing/team-avatar-2.jpg',
   },
   {
     action: 'Credential accessed',
     actor: 'Sam Ortiz',
     resource: 'Zendesk OAuth',
     time: '26 min ago',
-    avatar: '/landing/team-avatar-3.png',
+    avatar: '/landing/team-avatar-3.jpg',
   },
   {
     action: 'Workflow created',
     actor: 'Maya Chen',
     resource: 'Support agent',
     time: 'Jun 14',
-    avatar: '/landing/team-avatar-1.png',
+    avatar: '/landing/team-avatar-1.jpg',
   },
 ] as const
 

apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-graphic-node.tsx

@@ -2,7 +2,6 @@ export { AccessControlGraphic } from './access-control-graphic'
 export { AuditTrailGraphic } from './audit-trail-graphic'
 export { BuildMethodsGraphic } from './build-methods-graphic'
 export { DeployGraphic } from './deploy-graphic'
-export { FeatureGraphicNode, type FeatureGraphicNodeRow } from './feature-graphic-node'
 export { FeatureGraphicShell } from './feature-graphic-shell'
 export { FeaturePlatformPanel } from './feature-platform-panel'
 export { ItPlatformTeamsGraphic } from './it-platform-teams-graphic'

apps/sim/app/(landing)/enterprise/components/feature-graphics/index.ts

@@ -67,7 +67,7 @@ export function ItPlatformTeamsGraphic() {
             <span className='flex shrink-0 items-center gap-1.5'>
               <span className='relative size-4 overflow-hidden rounded-full shadow-sm'>
                 <Image
-                  src='/landing/team-avatar-3.png'
+                  src='/landing/team-avatar-3.jpg'
                   alt=''
                   width={16}
                   height={16}

apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx

@@ -76,7 +76,7 @@ export function StagingGraphic() {
               <span className='mt-1.5 flex items-center gap-1.5'>
                 <span className='relative size-4 overflow-hidden rounded-full'>
                   <Image
-                    src='/landing/team-avatar-1.png'
+                    src='/landing/team-avatar-1.jpg'
                     alt=''
                     width={16}
                     height={16}

apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx

@@ -86,7 +86,7 @@ export function TechnicalTeamsGraphic() {
           <div className='mt-3 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
             <span className='relative size-7 shrink-0 overflow-hidden rounded-full shadow-sm'>
               <Image
-                src='/landing/team-avatar-2.png'
+                src='/landing/team-avatar-2.jpg'
                 alt=''
                 width={28}
                 height={28}