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

Author: waleedlatif1

apps/sim/app/(landing)/careers/careers.tsx

@@ -50,7 +50,7 @@ export default async function Careers({ searchParams }: CareersProps) {
         <p className='sr-only'>
           Careers at Sim, the open-source AI workspace where teams build, deploy, and manage AI
           agents. Sim is hiring engineers, designers, and go-to-market builders to help teams
-          automate real work across 1,000+ integrations and every major LLM — visually,
+          automate real work across hundreds of integrations and every major LLM — visually,
           conversationally, or with code.
         </p>
 

apps/sim/app/(landing)/careers/components/job-board/job-board.tsx

@@ -54,17 +54,23 @@ export function JobBoard({ postings }: JobBoardProps) {
   return (
     <div className='flex flex-col gap-10'>
       <div className='flex flex-wrap items-center gap-3'>
+        <span id='career-team-filter-description' className='sr-only'>
+          Filter roles by team
+        </span>
         <ChipSelect
           options={teamOptions}
           value={team}
           onChange={(value) => setFilters({ team: value })}
-          aria-label='Filter roles by team'
+          aria-describedby='career-team-filter-description'
         />
+        <span id='career-location-filter-description' className='sr-only'>
+          Filter roles by location
+        </span>
         <ChipSelect
           options={locationOptions}
           value={location}
           onChange={(value) => setFilters({ location: value })}
-          aria-label='Filter roles by location'
+          aria-describedby='career-location-filter-description'
         />
       </div>
 

apps/sim/app/(landing)/changelog/components/changelog-timeline/changelog-timeline.tsx

@@ -91,22 +91,22 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
         const headingId = `release-${entry.tag}-heading`
         return (
           <section key={entry.tag} aria-labelledby={headingId} className='flex flex-col'>
-            <div className='flex items-center justify-between gap-4'>
+            <div className='flex flex-wrap items-center justify-between gap-4'>
               <div className='flex items-center gap-2'>
                 <h2 id={headingId} className='text-[18px] text-[var(--text-primary)] leading-[1.3]'>
                   {entry.tag}
                 </h2>
                 {entry.contributors.length > 0 ? (
-                  <div className='flex'>
-                    {entry.contributors.slice(0, 5).map((contributor, index) => (
+                  <div className='flex gap-1'>
+                    {entry.contributors.slice(0, 5).map((contributor) => (
                       <a
                         key={contributor}
                         href={`https://github.com/${contributor}`}
                         target='_blank'
                         rel='noopener noreferrer'
                         aria-label={`View @${contributor} on GitHub`}
                         title={`@${contributor}`}
-                        className={index === 0 ? 'block' : '-ms-2 block'}
+                        className='block size-6 shrink-0'
                       >
                         <Avatar className='size-6 ring-2 ring-[var(--bg)]'>
                           <AvatarImage
@@ -119,7 +119,7 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
                       </a>
                     ))}
                     {entry.contributors.length > 5 ? (
-                      <div className='-ms-2 relative flex size-6 items-center justify-center rounded-full bg-[var(--surface-2)] text-[10px] text-[var(--text-body)] ring-2 ring-[var(--bg)] hover:z-10'>
+                      <div className='relative flex size-6 items-center justify-center rounded-full bg-[var(--surface-2)] text-[10px] text-[var(--text-body)] ring-2 ring-[var(--bg)]'>
                         +{entry.contributors.length - 5}
                       </div>
                     ) : null}

apps/sim/app/(landing)/comparisons/components/source-info/source-info.tsx

@@ -28,10 +28,10 @@ export function SourceLink({ source, children, className }: SourceLinkProps) {
           href={source.url}
           target='_blank'
           rel='noopener noreferrer'
-          aria-label={`${source.label} (opens source)`}
           className={cn('block min-w-0', className)}
         >
           {children}
+          <span className='sr-only'> (source: {source.label}, opens in a new tab)</span>
         </a>
       </Tooltip.Trigger>
       <Tooltip.Content>Source: {source.label}</Tooltip.Content>

apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx

@@ -88,9 +88,9 @@ export function ContentIndexPage({
                             timeZone: 'UTC',
                           })}
                         </span>
-                        <h3 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
+                        <h2 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
                           {p.title}
-                        </h3>
+                        </h2>
                         <p className='line-clamp-2 text-[var(--text-secondary)] text-sm leading-[150%]'>
                           {p.description}
                         </p>
@@ -127,9 +127,9 @@ export function ContentIndexPage({
                         timeZone: 'UTC',
                       })}
                     </span>
-                    <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
+                    <h2 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
                       {p.title}
-                    </h3>
+                    </h2>
                     <p className='line-clamp-2 text-[var(--text-secondary)] text-sm leading-[150%]'>
                       {p.description}
                     </p>

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

@@ -31,9 +31,9 @@ export function Hero() {
     >
       <p className='sr-only'>
         Sim is the open-source AI workspace where teams build, deploy, and manage AI agents for
-        their organization. Connect 1,000+ integrations and every major LLM, then govern access,
-        spend, data, and deployment from one place. Build visually, conversationally, or with code,
-        and run Sim in your own cloud.
+        their organization. Connect hundreds of integrations and every major LLM, then govern
+        access, spend, data, and deployment from one place. Build visually, conversationally, or
+        with code, and run Sim in your own cloud.
       </p>
 
       <div className={HOME_INSET}>

apps/sim/app/(landing)/components/home-structured-data/home-structured-data.tsx

@@ -22,7 +22,7 @@ import { JsonLd } from '@/app/(landing)/components/json-ld'
  * `WebPage.description` below, so the three surfaces never drift.
  */
 export const HOME_PAGE_DESCRIPTION =
-  'Sim is the open-source AI workspace where companies build, distribute, and govern AI agents. 1,000+ integrations, every major LLM, permission groups, spend limits, and self-hosting.'
+  'Sim is the open-source AI workspace where companies build, distribute, and govern AI agents. Hundreds of integrations, every major LLM, permission groups, spend limits, and self-hosting.'
 
 /**
  * The home page's canonical title - the single string shared by the
@@ -62,7 +62,7 @@ const HOME_JSON_LD = {
       url: SITE_URL,
       name: 'Sim, The AI Workspace',
       description:
-        'Sim is the open-source AI workspace where companies build, distribute, and govern AI agents in one place. Teams build agents visually, conversationally, or with code across 1,000+ integrations and every major LLM, while administrators control model access, integration access, spend limits, and deployment. Trusted by over 100,000 builders. SOC2 compliant and self-hostable.',
+        'Sim is the open-source AI workspace where companies build, distribute, and govern AI agents in one place. Teams build agents visually, conversationally, or with code across hundreds of integrations and every major LLM, while administrators control model access, integration access, spend limits, and deployment. Trusted by over 100,000 builders. SOC2 compliant and self-hostable.',
       applicationCategory: 'BusinessApplication',
       applicationSubCategory: 'AI Workspace',
       operatingSystem: 'Web',
@@ -110,7 +110,7 @@ const HOME_JSON_LD = {
         'Chat: build and manage agents in natural language',
         'Visual workflow builder',
         'CLI access for coding agents and terminal workflows',
-        '1,000+ integrations',
+        'Hundreds of integrations',
         'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
         'Knowledge base creation',
         'Table creation',

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

@@ -24,7 +24,7 @@ export async function LandingShell({ children }: LandingShellProps) {
   const stars = await getGitHubStars()
 
   return (
-    <div className='relative h-screen overflow-y-auto overscroll-y-none bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='relative h-screen overflow-y-auto overscroll-y-none bg-[var(--bg)] text-[var(--text-primary)] [--text-muted:var(--text-secondary)]'>
       <SiteStructuredData />
       <a
         href='#main-content'

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

@@ -17,7 +17,12 @@ vi.mock('@sim/emcn', () => ({
 vi.mock('@sim/emcn/icons', () => ({ Menu: () => null, X: () => null }))
 vi.mock('@/components/icons', () => ({ GithubOutlineIcon: () => null }))
 vi.mock('next/link', () => ({
-  default: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => <a {...props} />,
+  default: ({
+    prefetch,
+    ...props
+  }: AnchorHTMLAttributes<HTMLAnchorElement> & { prefetch?: boolean | null }) => (
+    <a {...props} data-prefetch={prefetch === false ? 'disabled' : 'auto'} />
+  ),
 }))
 vi.mock('@/app/(landing)/components/landing-cta-link', () => ({
   LandingCtaLink: ({ children, href, onClick }: AnchorHTMLAttributes<HTMLAnchorElement>) => (
@@ -77,6 +82,20 @@ function trigger(): HTMLButtonElement {
 }
 
 describe('MobileNav dismissal', () => {
+  it('enables prefetch only while the sheet is open and closes on navigation', () => {
+    const link = host.querySelector<HTMLAnchorElement>('#mobile-nav-sheet a[href="/workflows"]')
+    if (!link) throw new Error('Missing workflow link')
+    expect(link.dataset.prefetch).toBe('disabled')
+
+    act(() => trigger().click())
+    expect(link.dataset.prefetch).toBe('auto')
+    link.addEventListener('click', (event) => event.preventDefault(), { once: true })
+    act(() => link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })))
+    expect(trigger().getAttribute('aria-expanded')).toBe('false')
+    expect(link.dataset.prefetch).toBe('disabled')
+    expect(setMenuOpen).toHaveBeenLastCalledWith('mobile', false)
+  })
+
   it('releases its scroll lock when resizing to desktop and stays closed when returning', () => {
     act(() => trigger().click())
     expect(trigger().getAttribute('aria-expanded')).toBe('true')

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

@@ -130,7 +130,12 @@ export function MobileNav({ stars }: MobileNavProps) {
         <div className='mx-auto flex w-full max-w-[1728px] flex-col gap-1 px-7 pt-2 pb-5'>
           <div className='flex flex-col gap-2 pb-4 sm:hidden'>
             <NavbarAuthPill size='default' onNavigate={() => updateOpen(false)} />
-            <LandingCtaLink href={DEMO_HREF} withArrow onClick={() => updateOpen(false)}>
+            <LandingCtaLink
+              href={DEMO_HREF}
+              prefetch={open ? null : false}
+              withArrow
+              onClick={() => updateOpen(false)}
+            >
               Request a demo
             </LandingCtaLink>
           </div>
@@ -143,6 +148,7 @@ export function MobileNav({ stars }: MobileNavProps) {
               {menu.index && (
                 <Link
                   href={menu.index.href}
+                  prefetch={open ? null : false}
                   onClick={() => updateOpen(false)}
                   className={SHEET_ROW}
                 >
@@ -169,6 +175,7 @@ export function MobileNav({ stars }: MobileNavProps) {
                       <Link
                         key={item.title}
                         href={item.href}
+                        prefetch={open ? null : false}
                         onClick={() => updateOpen(false)}
                         className={SHEET_ROW}
                       >
@@ -182,7 +189,13 @@ export function MobileNav({ stars }: MobileNavProps) {
           ))}
 
           {STANDALONE_LINKS.map(({ label, href }) => (
-            <Link key={label} href={href} onClick={() => updateOpen(false)} className={SHEET_ROW}>
+            <Link
+              key={label}
+              href={href}
+              prefetch={open ? null : false}
+              onClick={() => updateOpen(false)}
+              className={SHEET_ROW}
+            >
               {label}
             </Link>
           ))}