feat(landing): add interactive Sim stack and refine public pages

apps/docs/components/icons.tsx

@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import { useId } from 'react'
+import { CLAUDE_MARK_PATH, GEMINI_MARK_PATH, OPENAI_MARK_PATH, XAI_MARK_POLYGONS } from '@sim/emcn'
 
 export function EnrichmentIcon(props: SVGProps<SVGSVGElement>) {
   return (
@@ -1307,22 +1308,10 @@ export function xAIIcon(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g>
-        <polygon
-          points='557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18'
-          fill='currentColor'
-        />
-        <polygon
-          points='640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05'
-          fill='currentColor'
-        />
-        <polygon
-          points='201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31'
-          fill='currentColor'
-        />
-        <polygon
-          points='201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99'
-          fill='currentColor'
-        />
+        <polygon points={XAI_MARK_POLYGONS[0]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[1]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[2]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[3]} fill='currentColor' />
       </g>
     </svg>
   )
@@ -1772,10 +1761,7 @@ export function OpenAIIcon(props: SVGProps<SVGSVGElement>) {
       role='img'
       xmlns='http://www.w3.org/2000/svg'
     >
-      <path
-        d='M22.28 9.82a5.98 5.98 0 0 0-.516-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .743 7.1 5.98 5.98 0 0 0 .511 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.748-7.07zm-9.02 12.61a4.48 4.48 0 0 1-2.88-1.04l.142-.08 4.78-2.76a.795.79 0 0 0 .393-.681v-6.74l2.02 1.17a.71.07 0 0 1 .38.05v5.58a4.5 4.5 0 0 1-4.49 4.49zm-9.66-4.13a4.47 4.47 0 0 1-.535-3.01l.142.09 4.78 2.76a.771.77 0 0 0 .781 0l5.84-3.37v2.33a.804.08 0 0 1-.332.06L9.74 19.95a4.5 4.5 0 0 1-6.14-1.65zM2.34 7.9a4.49 4.49 0 0 1 2.37-1.97V11.6a.766.77 0 0 0 .388.68l5.81 3.35-2.02 1.17a.757.08 0 0 1-.071 0l-4.83-2.79A4.5 4.5 0 0 1 2.34 7.87zm16.6 3.86L13.1 8.36 15.12 7.2a.757.08 0 0 1 .071 0l4.83 2.79a4.49 4.49 0 0 1-.676 8.1v-5.68a.79.79 0 0 0-.407-.667zm2.01-3.02l-.142-.085-4.77-2.78a.776.78 0 0 0-.785 0L9.41 9.23V6.9a.662.07 0 0 1 .028-.061l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16a.804.08 0 0 1-.038-.057V6.07a4.5 4.5 0 0 1 7.38-3.45l-.142.08L8.7 5.46a.795.79 0 0 0-.393.68zm1.1-2.37l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5Z'
-        fill='currentColor'
-      />
+      <path d={OPENAI_MARK_PATH} fill='currentColor' />
     </svg>
   )
 }
@@ -4032,7 +4018,7 @@ export const ClaudeIcon = (props: SVGProps<SVGSVGElement>) => (
     xmlns='http://www.w3.org/2000/svg'
   >
     <title>Claude</title>
-    <path d='m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z' />
+    <path d={CLAUDE_MARK_PATH} />
   </svg>
 )
 
@@ -4392,11 +4378,7 @@ export function GeminiIcon(props: SVGProps<SVGSVGElement>) {
           <stop offset='100%' stopColor='#F0DCD6' />
         </linearGradient>
       </defs>
-      <path
-        d='M12 24A14.3 14.3 0 000 12 14.3 14.3 0 0012 0a14.31 14.31 0 0012 12 14.31 14.31 0 00-12 12'
-        fill={`url(#${gradientId})`}
-        fillRule='nonzero'
-      />
+      <path d={GEMINI_MARK_PATH} fill={`url(#${gradientId})`} fillRule='nonzero' />
     </svg>
   )
 }

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

@@ -1,4 +1,5 @@
 import { Suspense } from 'react'
+import { cn } from '@sim/emcn'
 import type { SearchParams } from 'nuqs/server'
 import { getAshbyJobs } from '@/lib/ashby/jobs'
 import {
@@ -9,6 +10,7 @@ import {
   JobGroups,
 } from '@/app/(landing)/careers/components/job-board'
 import { careersSearchParamsCache } from '@/app/(landing)/careers/search-params'
+import { LANDING_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface CareersProps {
   searchParams: Promise<SearchParams>
@@ -45,7 +47,7 @@ export default async function Careers({ searchParams }: CareersProps) {
       <section
         id='careers-hero'
         aria-labelledby='careers-heading'
-        className='mx-auto flex w-full max-w-[1728px] flex-col gap-5 px-10 pt-20 pb-10 max-sm:pt-16 max-md:px-7 max-lg:px-8 max-xl:px-9'
+        className='mx-auto flex w-full max-w-[1728px] flex-col gap-6 px-10 pt-[112px] pb-16 max-sm:pt-12 max-sm:pb-10 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'
       >
         <p className='sr-only'>
           Careers at Sim, the open-source AI workspace where teams build, deploy, and manage AI
@@ -56,11 +58,11 @@ export default async function Careers({ searchParams }: CareersProps) {
 
         <h1
           id='careers-heading'
-          className='max-w-[24ch] text-balance text-[48px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px] max-xl:text-[40px]'
+          className={cn('max-w-[24ch] text-balance text-[var(--text-primary)]', LANDING_TYPE.h1)}
         >
           Help build Sim, the AI workspace for teams.
         </h1>
-        <p className='max-w-[60ch] text-pretty text-[var(--text-body)] text-lg leading-[1.5] max-sm:text-base'>
+        <p className='max-w-[60ch] text-pretty text-[20px] text-[var(--text-body)] leading-[1.5] max-sm:text-[17px]'>
           Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. We're
           a small, high-agency team shipping fast to thousands of builders. If you want to own real
           work and shape the workspace teams live in, we'd love to meet you.

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

@@ -84,11 +84,11 @@ function JobRow({ posting }: JobRowProps) {
       rel='noopener noreferrer'
       className={cn(
         '-mx-3 group flex items-center justify-between gap-6 rounded-lg border-[var(--border)]',
-        'border-t px-3 py-5 transition-colors hover:bg-[var(--surface-hover)]'
+        'border-t px-3 py-6 transition-colors hover:bg-[var(--surface-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-2 motion-reduce:transition-none'
       )}
     >
       <div className='flex min-w-0 flex-col gap-1.5'>
-        <h4 className='truncate font-medium text-[var(--text-primary)] text-base'>
+        <h4 className='text-pretty font-normal text-[var(--text-primary)] text-lg max-sm:text-base'>
           {posting.title}
         </h4>
         <div className='flex flex-wrap items-center gap-x-2 gap-y-1 text-[var(--text-muted)] text-sm'>
@@ -107,7 +107,7 @@ function JobRow({ posting }: JobRowProps) {
 
       <span className='flex shrink-0 items-center gap-1.5 font-medium text-[var(--text-body)] text-sm'>
         Apply
-        <ArrowRight className='size-[14px] text-[var(--text-icon)] transition-transform group-hover:translate-x-0.5' />
+        <ArrowRight className='size-[14px] text-[var(--text-icon)] transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none' />
       </span>
     </a>
   )

apps/sim/app/(landing)/comparisons/[provider]/page.tsx

@@ -21,7 +21,11 @@ import {
 import { BackLink } from '@/app/(landing)/components'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
-import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+import {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} from '@/app/(landing)/components/landing-layout'
 
 const baseUrl = SITE_URL
 
@@ -164,15 +168,21 @@ export default async function ComparisonProviderPage({
       <JsonLd data={faqJsonLd} />
 
       <main id='main-content' className='bg-[var(--bg)]'>
-        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+        <div
+          className={cn(
+            LANDING_CONTENT_WIDTH,
+            LANDING_GUTTER,
+            'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+          )}
+        >
           <div className='mb-6'>
             <BackLink href='/comparisons' label='Back to comparisons' />
           </div>
 
           <div className='flex flex-col gap-4'>
             <h1
               id='comparison-heading'
-              className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+              className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
             >
               Sim vs {competitor.name}
             </h1>

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

@@ -9,7 +9,11 @@ import { ALL_COMPETITORS, ensurePeriod, lowercaseFirst } from '@/app/(landing)/c
 import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
-import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+import {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} from '@/app/(landing)/components/landing-layout'
 
 const baseUrl = SITE_URL
 
@@ -103,14 +107,20 @@ export default function ComparisonHubPage() {
       <JsonLd data={faqJsonLd} />
 
       <main id='main-content' className='bg-[var(--bg)]'>
-        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+        <div
+          className={cn(
+            LANDING_CONTENT_WIDTH,
+            LANDING_GUTTER,
+            'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+          )}
+        >
           {/* Invisible spacer matching the detail page's BackLink block height/margin, so the divider below lands at the same Y on both pages. */}
           <div className='mb-6 h-6' aria-hidden='true' />
 
           <div className='flex flex-col gap-4'>
             <h1
               id='comparison-hub-heading'
-              className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+              className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
             >
               Sim comparisons
             </h1>

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

@@ -6,7 +6,7 @@ const AUTHOR_POST_SKELETON_COUNT = 4
 export function ContentAuthorLoading() {
   return (
     <section className='bg-[var(--bg)]'>
-      <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
+      <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
         <Skeleton className='mb-6 h-[16px] w-[100px] rounded-md bg-[var(--surface-hover)]' />
         <div className='flex items-center gap-4'>
           <Skeleton className='size-[64px] rounded-full bg-[var(--surface-hover)]' />

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

@@ -1,8 +1,10 @@
+import { cn } from '@sim/emcn'
 import Image from 'next/image'
 import Link from 'next/link'
 import type { ContentMeta } from '@/lib/content/schema'
 import { BackLink } from '@/app/(landing)/components/back-link'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface ContentAuthorPageProps {
   /** Route base path, e.g. `/blog` or `/library`. */
@@ -35,7 +37,7 @@ export function ContentAuthorPage({
       <section className='bg-[var(--bg)]'>
         {graphJsonLd && <JsonLd data={graphJsonLd} />}
 
-        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
           <div className='mb-6'>
             <BackLink href={basePath} label={`Back to ${sectionName}`} />
           </div>
@@ -51,7 +53,7 @@ export function ContentAuthorPage({
                 unoptimized
               />
             ) : null}
-            <h1 className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'>
+            <h1 className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
               {authorName}
             </h1>
           </div>

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

@@ -9,7 +9,7 @@ export function ContentIndexLoading() {
   return (
     <section className='bg-[var(--bg)]'>
       <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
-        <div className='pt-[112px] max-sm:pt-20'>
+        <div className='pt-[112px] max-sm:pt-12 max-xl:pt-20'>
           <Skeleton className='mb-5 h-[20px] w-[60px] rounded-md bg-[var(--surface-hover)]' />
           <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
             <Skeleton className='h-[40px] w-[240px] rounded-[4px] bg-[var(--surface-hover)]' />

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

@@ -1,9 +1,10 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, cn } from '@sim/emcn'
 import Image from 'next/image'
 import Link from 'next/link'
 import { paginateContentPosts } from '@/lib/content/index-list'
 import type { ContentMeta } from '@/lib/content/schema'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface ContentIndexPageProps {
   /** Route base path, e.g. `/blog` or `/library`. */
@@ -43,9 +44,9 @@ export function ContentIndexPage({
       <section className='bg-[var(--bg)]'>
         <JsonLd data={collectionJsonLd} />
 
-        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
           <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
-            <h1 className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'>
+            <h1 className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
               {heading}
             </h1>
             <p className='max-w-[540px] text-[var(--text-secondary)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>

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

@@ -5,7 +5,13 @@ import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/component
 export function ContentPostLoading() {
   return (
     <article className='w-full bg-[var(--bg)]'>
-      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+      <div
+        className={cn(
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER,
+          'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+        )}
+      >
         <div className='mb-6'>
           <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
         </div>

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

@@ -1,10 +1,11 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn'
+import { Avatar, AvatarFallback, AvatarImage, cn } from '@sim/emcn'
 import Image from 'next/image'
 import Link from 'next/link'
 import { FAQ } from '@/lib/content/faq'
 import type { ContentMeta, ContentPost } from '@/lib/content/schema'
 import { BackLink } from '@/app/(landing)/components/back-link'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { ShareButton } from '@/app/(landing)/components/share-button'
 
 /** Renders an ISO date as "Jul 1, 2026". Pinned to UTC so the day matches the frontmatter date in every reader's timezone. */
@@ -48,7 +49,7 @@ export function ContentPostPage({
   return (
     <article className='w-full bg-[var(--bg)]' itemScope itemType='https://schema.org/BlogPosting'>
       <JsonLd data={graphJsonLd} />
-      <header className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
+      <header className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
         <div className='mb-6'>
           <BackLink href={basePath} label={backLabel} />
         </div>
@@ -73,7 +74,7 @@ export function ContentPostPage({
           <div className='flex min-w-0 flex-1 flex-col justify-between'>
             <div>
               <h1
-                className='text-balance text-[28px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em] sm:text-[36px] md:text-[44px] lg:text-[52px]'
+                className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.detail)}
                 itemProp='headline'
               >
                 {post.title}
@@ -145,8 +146,11 @@ export function ContentPostPage({
 
       <div className='mx-auto w-full max-w-[1728px] px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'>
         <div className='border-[var(--border)] border-x'>
-          <div className='mx-auto max-w-[900px] px-6 py-16' itemProp='articleBody'>
-            <div className='prose prose-lg max-w-none prose-blockquote:border-[var(--border-1)] prose-hr:border-[var(--border)] prose-headings:font-season prose-a:text-[var(--text-primary)] prose-blockquote:text-[var(--text-secondary)] prose-code:text-[var(--text-primary)] prose-headings:text-[var(--text-primary)] prose-li:text-[var(--text-body)] prose-p:text-[var(--text-body)] prose-strong:text-[var(--text-primary)] prose-headings:tracking-[-0.02em]'>
+          <div
+            className='mx-auto max-w-[800px] px-6 py-16 max-sm:px-4 max-sm:py-10'
+            itemProp='articleBody'
+          >
+            <div className='prose prose-lg max-sm:prose-base max-w-none prose-blockquote:border-[var(--border-1)] prose-hr:border-[var(--border)] prose-headings:font-season prose-a:text-[var(--text-primary)] prose-blockquote:text-[var(--text-secondary)] prose-code:text-[var(--text-primary)] prose-headings:text-[var(--text-primary)] prose-li:text-[var(--text-body)] prose-p:text-[var(--text-body)] prose-strong:text-[var(--text-primary)] prose-headings:tracking-[-0.02em]'>
               <Article />
               {post.faq && post.faq.length > 0 ? <FAQ items={post.faq} /> : null}
             </div>