improvement(landing): homepage redesign with live hero and real platform UI feature cards

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

@@ -18,11 +18,11 @@ The landing page looks like the product. Its visual language is the workspace UI
 - **Never touch global styles.** No additions to `app/_styles/globals.css`. All styling is local Tailwind classes; `cn()` from `@/lib/core/utils/cn` for conditionals; no inline `style` attributes.
 - **Responsive - desktop is the source of truth, scaled down via `max-*` overrides.** The page is fully responsive (iPad + phone). The desktop layout stays the unprefixed baseline; smaller screens are handled by *layering* `max-*` overrides on top, so desktop renders byte-identically. Tiers:
   - `max-xl:` (≤1279) - the hero's two-panel split (absolute visual + logos) collapses to a stacked, in-flow column. The split needs ≥1280 to avoid the headline colliding with the visual panel; iPad-landscape (1024) therefore gets the stacked hero with the desktop nav.
-  - `max-lg:` (≤1023) - the desktop nav clusters hide (`hidden lg:flex`) and `MobileNav` (hamburger sheet) takes over; multi-column grids step down (mothership 4→2, footer 7→3); shared gutter `px-12 → max-lg:px-8`; section gaps tighten.
+  - `max-lg:` (≤1023) - the desktop nav clusters hide (`hidden lg:flex`) and `MobileNav` (hamburger sheet) takes over; multi-column grids step down (mothership 4→2, footer 7→3); shared gutter `px-20 → max-lg:px-8`; section gaps tighten.
   - `max-md:` (≤767) - Features beats drop the floating callout (`max-md:hidden`) and show the un-masked backdrop preview full-width.
   - `max-sm:` (≤639) - single-column grids, smallest type scale, `px-5` gutter, hero CTA row stacks.
 
-  When adding a new section, give it the same `px-12 max-lg:px-8 max-sm:px-5` gutter so the navbar wordmark stays aligned with section content at every width. Verify desktop is unchanged and there is zero horizontal overflow at 1280 / 1024 / 768 / 390 before shipping.
+  When adding a new section, give it the same `px-20 max-lg:px-8 max-sm:px-5` gutter so the navbar wordmark stays aligned with section content at every width. Verify desktop is unchanged and there is zero horizontal overflow at 1280 / 1024 / 768 / 390 before shipping.
 
 ## Performance - page speed is a feature
 

apps/sim/app/(landing)/blog/[slug]/loading.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from '@sim/emcn'
 export default function BlogPostLoading() {
   return (
     <article className='w-full bg-[var(--bg)]'>
-      <div className='mx-auto w-full max-w-[1446px] px-12 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
         <div className='mb-6'>
           <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
         </div>
@@ -31,8 +31,8 @@ export default function BlogPostLoading() {
 
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-      <div className='mx-auto w-full max-w-[1446px]'>
-        <div className='mx-12 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+      <div className='mx-auto w-full max-w-[1460px]'>
+        <div className='mx-20 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
           <div className='mx-auto max-w-[900px] px-6 py-16'>
             <div className='space-y-4'>
               <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--surface-hover)]' />

apps/sim/app/(landing)/blog/[slug]/page.tsx

@@ -39,7 +39,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
   return (
     <article className='w-full bg-[var(--bg)]' itemScope itemType='https://schema.org/TechArticle'>
       <JsonLd data={graphJsonLd} />
-      <header className='mx-auto w-full max-w-[1446px] px-12 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <header className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
         <div className='mb-6'>
           <BackLink href='/blog' label='Back to Blog' />
         </div>
@@ -118,7 +118,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
 
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-      <div className='mx-auto w-full max-w-[1446px] px-12 max-sm:px-5 max-lg:px-8'>
+      <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
         <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-muted)] 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]'>

apps/sim/app/(landing)/blog/loading.tsx

@@ -3,9 +3,9 @@ import { Skeleton } from '@sim/emcn'
 export default function BlogLoading() {
   return (
     <section className='bg-[var(--bg)]'>
-      <div className='mx-auto w-full max-w-[1446px]'>
+      <div className='mx-auto w-full max-w-[1460px]'>
         {/* Header skeleton */}
-        <div className='px-12 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className='px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
           <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)]' />
@@ -14,7 +14,7 @@ export default function BlogLoading() {
         </div>
 
         {/* Content area with vertical border rails */}
-        <div className='mx-12 mt-8 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+        <div className='mx-20 mt-8 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
           <div className='h-px w-full bg-[var(--border)]' />
 
           {/* Featured skeleton */}

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

@@ -103,7 +103,7 @@ export default async function BlogIndex({
         <JsonLd data={collectionJsonLd} />
 
         {/* Section header */}
-        <div className='mx-auto w-full max-w-[1446px] px-12 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
           <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]'>
               Latest from Sim
@@ -118,7 +118,7 @@ export default async function BlogIndex({
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
         {/* Content area with vertical border rails */}
-        <div className='mx-auto w-full max-w-[1446px] px-12 max-sm:px-5 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
           <div className='border-[var(--border)] border-x'>
             {/* Featured posts */}
             {featured.length > 0 && (

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

@@ -21,8 +21,8 @@ interface CareersProps {
  * crawlable HTML; the interactive {@link JobBoard} hydrates on top to add
  * Team/Location filtering.
  *
- * Both sections share the landing gutter — capped and centered at `max-w-[1446px]`
- * with the navbar-aligned `px-12 max-lg:px-8 max-sm:px-5` so the headline starts on
+ * Both sections share the landing gutter — capped and centered at `max-w-[1460px]`
+ * with the navbar-aligned `px-20 max-lg:px-8 max-sm:px-5` so the headline starts on
  * the same vertical line as the wordmark. The hero carries the single `<h1>`
  * (containing "Sim" and "AI workspace") plus an sr-only product summary for AI
  * citation (landing CLAUDE.md → GEO); the roles section owns its own `<h2>`.
@@ -45,7 +45,7 @@ export default async function Careers({ searchParams }: CareersProps) {
       <section
         id='careers-hero'
         aria-labelledby='careers-heading'
-        className='mx-auto flex w-full max-w-[1446px] flex-col gap-5 px-12 pt-20 pb-10 max-sm:px-5 max-sm:pt-16 max-lg:px-8'
+        className='mx-auto flex w-full max-w-[1460px] flex-col gap-5 px-20 pt-20 pb-10 max-sm:px-5 max-sm:pt-16 max-lg:px-8'
       >
         <p className='sr-only'>
           Careers at Sim, the open-source AI workspace where teams build, deploy, and manage AI
@@ -70,7 +70,7 @@ export default async function Careers({ searchParams }: CareersProps) {
       <section
         id='open-roles'
         aria-labelledby='open-roles-heading'
-        className='mx-auto flex w-full max-w-[1446px] flex-col gap-10 px-12 pt-6 pb-24 max-sm:px-5 max-sm:pb-16 max-lg:px-8'
+        className='mx-auto flex w-full max-w-[1460px] flex-col gap-10 px-20 pt-6 pb-24 max-sm:px-5 max-sm:pb-16 max-lg:px-8'
       >
         <h2
           id='open-roles-heading'

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

@@ -11,15 +11,15 @@ import { ChipLink } from '@sim/emcn'
  * `landing.tsx`) above it and the `Footer`'s top margin below it. The headline
  * mirrors the hero `<h1>` exactly (48px / `leading-[1.1]` and the same responsive
  * ramp), so the page opens and closes on the same display size. Horizontal
- * padding (`px-12`) matches every section above, and the section is capped and
- * centered at the shared `max-w-[1446px]`.
+ * padding (`px-20`) matches every section above, and the section is capped and
+ * centered at the shared `max-w-[1460px]`.
  */
 export function Cta() {
   return (
     <section
       id='cta'
       aria-labelledby='cta-heading'
-      className='mx-auto flex w-full max-w-[1446px] flex-col items-center gap-[22px] px-12 text-center max-sm:px-5 max-lg:px-8'
+      className='mx-auto flex w-full max-w-[1460px] flex-col items-center gap-[22px] px-20 text-center max-sm:px-5 max-lg:px-8'
     >
       <h2
         id='cta-heading'

apps/sim/app/(landing)/components/features/components/build-callout/build-callout.tsx

@@ -0,0 +1,20 @@
+import { WorkflowShowcase } from '@/app/(landing)/components/features/components/build-callout/components/workflow-showcase'
+import { ThinkingLoader } from '@/app/(landing)/components/thinking-loader'
+
+/**
+ * The Build beat's callout - the finished workflow canvas centered on the
+ * card's solid grey stage, with the goo cycle loader phasing through its
+ * world-state phrases in the bottom-left corner. The Mothership chat loop
+ * (`components/build-chat-animation`) is parked here unwired, kept for reuse
+ * on another surface.
+ */
+export function BuildCallout() {
+  return (
+    <div aria-hidden='true' className='pointer-events-none absolute inset-0'>
+      <WorkflowShowcase />
+      <div className='absolute bottom-8 left-8 max-sm:bottom-4 max-sm:left-4'>
+        <ThinkingLoader size={22} phase className='text-[var(--text-body)]' />
+      </div>
+    </div>
+  )
+}