[docs] upgrade @vercel/geistdocs to 1.19.0

docs/app/[lang]/(home)/components/cta.tsx

@@ -2,11 +2,11 @@ import { Button } from '@vercel/geistdocs/components/button';
 import Link from 'next/link';
 
 export const CTA = () => (
-  <section className="px-8 sm:px-12 py-10 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-    <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+  <section className="py-10 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+    <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40">
       Create your first workflow today.
     </h2>
-    <Button asChild size="lg" className="w-fit h-10">
+    <Button asChild size="lg" className="w-fit h-10 rounded-full">
       <Link href="/docs/getting-started">Get started</Link>
     </Button>
   </section>

docs/app/[lang]/(home)/components/features.tsx

@@ -17,12 +17,10 @@ const data = [
 ];
 
 export const Features = () => (
-  <div className="px-4 py-8 sm:py-12 sm:px-12 grid md:grid-cols-3 gap-8">
+  <div className="py-8 sm:py-12 grid md:grid-cols-3 gap-8">
     {data.map((item) => (
       <div key={item.title}>
-        <h3 className="mb-2 font-semibold text-lg tracking-tight">
-          {item.title}
-        </h3>
+        <h3 className="mb-2 text-heading-20">{item.title}</h3>
         <p className="text-muted-foreground">{item.description}</p>
       </div>
     ))}

docs/app/[lang]/(home)/components/frameworks.tsx

@@ -719,16 +719,16 @@ export const Next = (props: ComponentProps<'svg'>) => (
 
 export const Frameworks = () => {
   return (
-    <div className="flex flex-col items-center gap-8 px-4 py-12 sm:py-16 sm:px-12 text-center">
+    <div className="flex flex-col items-start sm:items-center gap-8 py-12 sm:py-16 text-left sm:text-center">
       <div className="flex flex-col gap-3 max-w-xl">
-        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl">
+        <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40">
           Universally Compatible
         </h2>
         <p className="text-muted-foreground sm:text-lg">
           Works with the frameworks you already use with more coming soon.
         </p>
       </div>
-      <div className="flex flex-wrap justify-center gap-6 items-center max-w-xl">
+      <div className="flex flex-wrap justify-start sm:justify-center gap-6 items-center max-w-xl">
         <Link
           href="/docs/getting-started/next"
           className="hover:opacity-70 transition-opacity duration-200"

docs/app/[lang]/(home)/components/hero.tsx

@@ -22,12 +22,12 @@ type HeroProps = {
 
 export const Hero = ({ title, description }: HeroProps) => {
   return (
-    <section className="mt-[var(--fd-nav-height)] space-y-6 px-4 pt-24 sm:pt-32 pb-32 text-center">
+    <section className="mt-[var(--fd-nav-height)] space-y-6 pt-24 sm:pt-32 pb-32 text-center">
       <div className="mx-auto w-full max-w-4xl space-y-5">
-        <h1 className="text-center font-semibold text-4xl leading-[1.1] tracking-tight lg:font-semibold sm:text-5xl! xl:text-6xl! text-balance">
+        <h1 className="text-center text-balance text-heading-40 sm:text-heading-48 xl:text-heading-64">
           {title}
         </h1>
-        <p className="text-balance max-w-3xl mx-auto text-muted-foreground sm:text-xl leading-relaxed">
+        <p className="text-balance max-w-3xl mx-auto text-muted-foreground text-copy-18 leading-relaxed">
           <span className="font-mono text-base bg-accent inline-block px-2 py-0 rounded-sm border border-border">
             use workflow
           </span>{' '}

docs/app/[lang]/(home)/components/implementation.tsx

@@ -27,7 +27,7 @@ export async function userSignup(email) {
   },
   {
     code: `import { Resend } from 'resend';
-import { FatalError } from 'workflow'; 
+import { FatalError } from 'workflow';
 
 export async function sendWelcomeEmail(email) {
   "use step"
@@ -52,22 +52,22 @@ export async function sendWelcomeEmail(email) {
 ];
 
 export const Implementation = () => (
-  <div className="px-4 py-8 sm:py-12 sm:px-12 grid gap-12">
+  <div className="py-8 sm:py-12 grid gap-12">
     <div className="max-w-3xl text-balance grid gap-2">
-      <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+      <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40">
         Effortless setup
       </h2>
       <p className="text-balance text-lg text-muted-foreground">
         With a simple declarative API to define and use your workflows.
       </p>
     </div>
-    <div className="grid md:grid-cols-2 gap-8">
+    <div className="grid md:grid-cols-2 gap-6 md:gap-24">
       {data.map((item) => (
         <div
           key={item.caption}
           className="h-full flex flex-col [&_figure]:flex-1 [&_.fd-scroll-container]:h-full gap-4"
         >
-          <h3 className="text-lg sm:text-xl md:text-2xl font-semibold tracking-tight">
+          <h3 className="text-heading-16 sm:text-heading-20 md:text-heading-24">
             {item.caption}
           </h3>
           <CodeBlock

docs/app/[lang]/(home)/components/intro/intro.tsx

@@ -144,17 +144,17 @@ export const Intro = async () => {
   );
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[330px_1fr] gap-12 px-4 py-8 sm:py-12 sm:px-12">
-      <div className=" flex flex-col gap-2">
-        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+    <div className="grid grid-cols-12 gap-y-12 md:gap-x-8 py-8 sm:py-12">
+      <div className="col-span-12 md:col-span-5 flex flex-col gap-2">
+        <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40">
           Reliability-as-code
         </h2>
         <p className="text-lg text-muted-foreground md:mt-4">
           Move from hand-rolled queues and custom retries to durable, resumable
           code with simple directives.
         </p>
       </div>
-      <div className="flex items-center justify-center">
+      <div className="col-span-12 md:col-span-7">
         <IntroTabs
           withWorkflow={
             <WorkflowExample

docs/app/[lang]/(home)/components/intro/non-workflow.tsx

@@ -99,7 +99,7 @@ export const NonWorkflowExample = ({
   };
 
   return (
-    <div className="relative isolate max-w-3xl mx-auto">
+    <div className="relative isolate w-full">
       <div className="bg-background border rounded-md overflow-x-auto pb-[52px]">
         <div className="relative">
           <div className="flex absolute z-10 flex-col left-[18px] top-[69px] pointer-events-none select-none">

docs/app/[lang]/(home)/components/intro/workflow.tsx

@@ -154,7 +154,7 @@ export const WorkflowExample = ({
   };
 
   return (
-    <div className="relative isolate max-w-3xl mx-auto">
+    <div className="relative isolate w-full">
       <div className="bg-background border rounded-md overflow-x-auto pb-[52px]">
         <div className="relative">
           <div className="flex absolute z-10 flex-col left-[18px] top-[69px] pointer-events-none select-none">

docs/app/[lang]/(home)/components/observability.tsx

@@ -49,7 +49,7 @@ const rows = [
 ];
 
 export const Observability = () => (
-  <div className="grid grid-rows-[auto_1fr] gap-12 px-4 py-8 sm:py-12 sm:px-12">
+  <div className="grid grid-rows-[auto_1fr] gap-12 py-8 sm:py-12">
     <h2 className="font-medium text-xl tracking-tight sm:text-2xl text-muted-foreground">
       <span className="text-foreground">Observability</span>. Inspect every run
       end‑to‑end. Pause, replay, and time‑travel through steps with traces,

docs/app/[lang]/(home)/components/run-anywhere.tsx

@@ -116,18 +116,18 @@ const code = `export async function welcome(userId: string) {
 }`;
 
 export const RunAnywhere = () => (
-  <div className="px-4 py-8 sm:py-12 sm:px-12 grid gap-10 items-center overflow-hidden">
+  <div className="py-8 sm:py-12 grid gap-10 items-center overflow-hidden">
     <div className="space-y-4">
-      <div className="grid gap-4 max-w-lg text-center mx-auto">
-        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+      <div className="grid gap-4 max-w-lg text-left sm:text-center sm:mx-auto">
+        <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40">
           Run anywhere, no lock‑in
         </h2>
         <p className="text-lg text-muted-foreground">
           Run locally, self-host, or swap every component — Workflow SDK is
           fully portable. For zero-config, secure, and scalable workflows,
           deploy on Vercel.
         </p>
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-2">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center sm:justify-center gap-3 mt-2">
           <Button asChild className="rounded-full h-10">
             <Link href="https://vercel.com/workflows" target="_blank">
               Workflows on Vercel
@@ -141,7 +141,7 @@ export const RunAnywhere = () => (
       </div>
     </div>
     <div className="relative isolate">
-      <div className="absolute -left-32 top-1/2 -translate-y-1/2 hidden md:flex items-center gap-2">
+      <div className="absolute right-[calc(50%+140px)] top-1/2 -translate-y-1/2 hidden md:flex items-center gap-2 [mask-image:linear-gradient(to_right,transparent,black)]">
         {[DigitalOcean, AWS].map((Logo, index) => (
           <div
             className={cn(
@@ -166,7 +166,7 @@ export const RunAnywhere = () => (
           }}
         />
       </div>
-      <div className="absolute -right-32 top-1/2 -translate-y-1/2 hidden md:flex items-center gap-2">
+      <div className="absolute left-[calc(50%+140px)] top-1/2 -translate-y-1/2 hidden md:flex items-center gap-2 [mask-image:linear-gradient(to_left,transparent,black)]">
         {[Docker, Vercel].map((Logo, index) => (
           <div
             className={cn(

docs/app/[lang]/(home)/components/templates/index.tsx

@@ -38,19 +38,19 @@ const data = [
 ];
 
 export const Templates = () => (
-  <div className="grid md:grid-cols-[1fr_2fr] md:divide-x">
-    <div className="grid gap-4 content-start px-4 py-8 sm:py-12 sm:px-12">
-      <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+  <div className="grid grid-cols-12 gap-y-12 md:gap-x-8 py-8 sm:py-12">
+    <div className="col-span-12 md:col-span-5 grid gap-4 content-start">
+      <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40 lg:text-heading-40">
         Get started
       </h2>
-      <p className="text-lg text-muted-foreground">
+      <p className="text-lg text-muted-foreground text-balance sm:max-w-md">
         See Workflow SDK in action with one of the example templates.
       </p>
       <Button asChild size="lg" className="rounded-full h-10 px-6 w-fit mt-2">
         <Link href={examplesRepositoryUrl}>All examples</Link>
       </Button>
     </div>
-    <div className="grid sm:grid-cols-2 gap-8 px-4 py-8 sm:py-12 sm:px-12">
+    <div className="col-span-12 md:col-span-7 grid sm:grid-cols-2 gap-8">
       {data.map((item) => (
         <a
           key={item.title}

docs/app/[lang]/(home)/components/tweet-wall.tsx

@@ -213,7 +213,7 @@ function TweetCard({ url, name, username, image, tweet }: Tweet) {
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex flex-col gap-3 rounded-lg border p-4 md:p-5 hover:border-foreground/20 transition-colors"
+      className="flex flex-col gap-3 rounded-lg border bg-background-100 p-4 md:p-5 hover:border-foreground/20 transition-colors"
     >
       <div className="flex items-center gap-2.5">
         <Avatar className="size-9">
@@ -236,11 +236,11 @@ function TweetCard({ url, name, username, image, tweet }: Tweet) {
 }
 
 export const TweetWall = () => (
-  <div className="p-8 sm:p-12 px-4 py-8 sm:py-12 sm:px-12 grid gap-8">
-    <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px] text-center text-balance">
+  <div className="py-8 sm:py-12 grid gap-8">
+    <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40 sm:text-center sm:text-balance">
       What builders say about Workflow SDK
     </h2>
-    <div className="columns-1 gap-4 space-y-4 md:columns-2 lg:columns-3">
+    <div className="columns-1 gap-4 space-y-4 md:columns-2 lg:columns-3 mt-6">
       {TWEETS.map((tweet) => (
         <div key={tweet.username} className="break-inside-avoid">
           <TweetCard {...tweet} />

docs/app/[lang]/(home)/components/use-cases-client.tsx

@@ -27,12 +27,12 @@ export const UseCasesClient = ({ useCases }: { useCases: UseCase[] }) => {
   };
 
   return (
-    <div className="grid sm:grid-cols-3 sm:divide-x px-4 py-8 sm:p-0 gap-12 sm:gap-0">
-      <div className="text-balance flex flex-col gap-2 sm:p-12">
-        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl flex flex-wrap sm:block items-center gap-x-2">
+    <div className="grid grid-cols-12 gap-y-12 md:gap-x-8 py-8 sm:py-12">
+      <div className="col-span-12 md:col-span-5 text-balance flex flex-col gap-2">
+        <h2 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40 flex flex-wrap sm:block items-center gap-x-2">
           Build anything with
           <Select value={selectedCase} onValueChange={handleCaseChange}>
-            <SelectTrigger className="font-semibold bg-background text-xl tracking-tight sm:text-2xl md:text-3xl data-[size=default]:h-auto py-1.5 w-auto sm:mt-1.5 sm:-ml-3">
+            <SelectTrigger className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40 bg-background data-[size=default]:h-auto py-1.5 w-auto sm:mt-1.5 sm:-ml-3">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -49,7 +49,7 @@ export const UseCasesClient = ({ useCases }: { useCases: UseCase[] }) => {
           persistence, and observability built in.
         </p>
       </div>
-      <div className="col-span-2 sm:p-12">{currentCase.codeBlock}</div>
+      <div className="col-span-12 md:col-span-7">{currentCase.codeBlock}</div>
     </div>
   );
 };

docs/app/[lang]/(home)/components/vercel-com-visuals/feature-grid.tsx

@@ -1,5 +1,3 @@
-import { Button } from '@vercel/geistdocs/components/button';
-import Link from 'next/link';
 import type { JSX, ReactNode } from 'react';
 import { AgentsVisual } from './agents-visual';
 import { AiSdkVisual } from './ai-sdk-visual';
@@ -13,19 +11,19 @@ interface Feature {
 
 const features: Feature[] = [
   {
-    title: 'Deep integration with AI SDK.',
+    title: 'Deep integration with AI SDK',
     description:
       'Use familiar AI SDK patterns, plus durability, observability, and retries so agents stay reliable in production.',
     visual: <AiSdkVisual />,
   },
   {
-    title: 'Durable agents by default.',
+    title: 'Durable agents by default',
     description:
       'High-performance streaming, persistence, and resumable runs work out of the box. No infrastructure setup required.',
     visual: <AgentsVisual />,
   },
   {
-    title: 'Inspect every run end\u2011to\u2011end.',
+    title: 'Inspect every run end\u2011to\u2011end',
     description:
       'Observability is built into the SDK and works anywhere you run it. When using workflow on Vercel, observability is built into the Vercel dashboard with no configuration or storage.',
     visual: <O11yVisual />,
@@ -34,11 +32,15 @@ const features: Feature[] = [
 
 function FeatureCard({ title, description, visual }: Feature): JSX.Element {
   return (
-    <div className="flex flex-col items-stretch justify-between gap-6 md:gap-10 px-4 py-8 sm:py-12 sm:px-12">
-      <p className="text-[20px] leading-[26px] tracking-[-0.4px] font-medium text-gray-900 lg:text-[24px] lg:leading-[32px] lg:tracking-[-0.96px]">
-        <strong className="font-semibold text-gray-1000">{title}</strong>{' '}
-        {description}
-      </p>
+    <div className="flex flex-col items-stretch justify-between gap-6 md:gap-10 py-8 sm:py-12">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-heading-20 sm:text-heading-24 lg:text-heading-32">
+          {title}
+        </h3>
+        <p className="text-lg text-muted-foreground sm:max-w-lg">
+          {description}
+        </p>
+      </div>
       <div className="@container flex items-center justify-center overflow-hidden">
         {visual}
       </div>
@@ -48,23 +50,25 @@ function FeatureCard({ title, description, visual }: Feature): JSX.Element {
 
 function FeatureCardWide({ title, description, visual }: Feature): JSX.Element {
   return (
-    <div className="flex flex-col items-center gap-8 md:gap-12 px-4 py-8 sm:py-12 sm:px-12">
-      <div className="flex flex-col items-center max-w-[800px] text-center mx-auto">
-        <h3 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+    <div className="flex flex-col items-start sm:items-center gap-8 md:gap-12">
+      <div className="flex flex-col items-start sm:items-center max-w-[800px] text-left sm:text-center sm:mx-auto">
+        <h3 className="text-heading-20 sm:text-heading-24 md:text-heading-32 lg:text-heading-40">
           {title}
         </h3>
-        <p className="text-balance text-lg text-muted-foreground mt-4">
+        <p className="text-lg text-muted-foreground mt-4 sm:text-balance">
           {description}
         </p>
       </div>
-      <div className="@container w-full overflow-hidden">{visual}</div>
+      <div className="@container w-full max-w-[1200px] px-px overflow-hidden">
+        {visual}
+      </div>
     </div>
   );
 }
 
 export function FeatureGrid(): JSX.Element {
   return (
-    <div className="grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x">
+    <div className="grid lg:grid-cols-2">
       {features.slice(0, 2).map((feature) => (
         <FeatureCard key={feature.title} {...feature} />
       ))}
@@ -76,7 +80,7 @@ export function FeatureGridExtended(): JSX.Element {
   return (
     <>
       {/* AI SDK + Agents — 2 col */}
-      <div className="grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x">
+      <div className="grid lg:grid-cols-2 gap-6 md:gap-24">
         {features.slice(0, 2).map((feature) => (
           <FeatureCard key={feature.title} {...feature} />
         ))}