Refine homepage feature grid and templates section (vercel#1745)

* Refine homepage: simplify feature grid, update templates section

Remove "Zero infrastructure management", "Deploy confidently", "No timeout
limits", and "Pay for what you use" sections from the feature grid. Update
the observability section with new copy, larger typography, and CTA buttons
for Vercel and self-hosting. Redesign the templates section with a
side-by-side layout, "All examples" button, and vercel.com/workflow card
images with dark mode support.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>

* Make observability CTA buttons stack vertically on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>

* Add Vercel section with o11y dashboard, update homepage layout

- Add O11yDashboard SVG component with Vercel dashboard preview
  showing sidebar nav and observability trace visualization
- Add VercelSection with desktop (offset right) and mobile views
- Update "Run anywhere" section with new copy and CTA buttons
- Normalize all grid section buttons to h-10
- Fix mobile padding in UseCases section
- Remove barrel file for vercel-com-visuals, use direct imports

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>

* Make use-case selector inline on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>

---------

Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: christopherkindl

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

@@ -6,7 +6,7 @@ export const CTA = () => (
     <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
       Create your first workflow today.
     </h2>
-    <Button asChild size="lg" className="w-fit text-base h-12">
+    <Button asChild size="lg" className="w-fit h-10">
       <Link href="/docs/getting-started">Get started</Link>
     </Button>
   </section>

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

@@ -1,5 +1,7 @@
+import Link from 'next/link';
 import type { ComponentProps } from 'react';
 import { CodeBlock } from '@/app/[lang]/(home)/components/code-block';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 const DigitalOcean = (props: ComponentProps<'svg'>) => (
@@ -98,31 +100,45 @@ const Vercel = (props: ComponentProps<'svg'>) => (
 
 const code = `export async function welcome(userId: string) {
   "use workflow";
-  
+
   const user = await getUser(userId);
   const { subject, body } = await generateEmail({
     name: user.name, plan: user.plan
   });
-  
+
   const { status } = await sendEmail({
     to: user.email,
     subject,
     body,
   });
-  
+
   return { status, subject, body };
 }`;
 
 export const RunAnywhere = () => (
   <div className="px-4 py-8 sm:py-12 sm:px-12 grid gap-10 items-center overflow-hidden">
-    <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]">
-        Run anywhere, no lock‑in
-      </h2>
-      <p className="text-balance text-lg text-muted-foreground">
-        The same code runs locally on your laptop, in Docker, on Vercel or any
-        other cloud. Open source and portable by design.
-      </p>
+    <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]">
+          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">
+          <Button asChild className="rounded-full h-10">
+            <Link href="https://vercel.com/workflows" target="_blank">
+              Workflows on Vercel
+            </Link>
+          </Button>
+          {/* Outline variant appears smaller due to inset border — h-[42px] compensates to match the filled button visually */}
+          <Button asChild variant="outline" className="rounded-full h-[42px]">
+            <Link href="/worlds">Learn about self-hosting</Link>
+          </Button>
+        </div>
+      </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">

docs/app/[lang]/(home)/components/templates/flight-v2-dark.png

@@ -1,44 +1,55 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { cn } from '@/lib/utils';
-import Flight from './flight.png';
-import Storytime from './storytime.png';
-import Vectr from './vectr.png';
+import { Button } from '@/components/ui/button';
+import Flight from './flight-v2.png';
+import FlightDark from './flight-v2-dark.png';
+import Storytime from './storytime-v2.png';
+import StorytimeDark from './storytime-v2-dark.png';
+import Vectr from './vectr-v2.png';
+import VectrDark from './vectr-v2-dark.png';
 
 const data = [
   {
     title: 'Story Generator Slack Bot',
     description:
-      "Slackbot that generates children's stories from collaborative input.",
+      "A Slack bot that generates children's stories from collaborative input.",
     image: Storytime,
+    imageDark: StorytimeDark,
     link: 'https://vercel.com/guides/stateful-slack-bots-with-vercel-workflow',
   },
   {
     title: 'Flight Booking App',
     description:
       'Use Workflow to make AI agents more reliable and production-ready.',
     image: Flight,
+    imageDark: FlightDark,
     link: 'https://github.com/vercel/workflow-examples/tree/main/flight-booking-app',
   },
   {
     title: 'Natural Language Image Search',
     description:
       'A free, open-source template for building natural language image search.',
     image: Vectr,
+    imageDark: VectrDark,
     link: 'https://www.vectr.store',
   },
 ];
 
 export const Templates = () => (
-  <div className="p-8 sm:p-12 px-4 py-8 sm:py-12 sm:px-12 grid gap-12">
-    <div className="max-w-3xl text-balance grid gap-2">
+  <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]">
-        Get started quickly
+        Get started
       </h2>
-      <p className="text-balance text-lg text-muted-foreground">
-        See Workflow SDK in action with one of our templates.
+      <p className="text-lg text-muted-foreground">
+        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="/docs/examples">All examples</Link>
+      </Button>
     </div>
-    <div className="grid md:grid-cols-3 gap-8">
+    <div className="grid sm:grid-cols-2 gap-8 px-4 py-8 sm:py-12 sm:px-12">
       {data.map((item) => (
         <a
           key={item.title}
@@ -56,7 +67,19 @@ export const Templates = () => (
             height={336}
             className={cn(
               'border rounded-md overflow-hidden -rotate-3 ml-7 aspect-video object-cover object-top -mb-12 mt-8',
-              'group-hover:scale-105 transition-transform duration-300 group-hover:-rotate-1'
+              'group-hover:scale-105 transition-transform duration-300 group-hover:-rotate-1',
+              'dark:hidden'
+            )}
+          />
+          <Image
+            src={item.imageDark}
+            alt={item.title}
+            width={640}
+            height={336}
+            className={cn(
+              'border rounded-md overflow-hidden -rotate-3 ml-7 aspect-video object-cover object-top -mb-12 mt-8',
+              'group-hover:scale-105 transition-transform duration-300 group-hover:-rotate-1',
+              'hidden dark:block'
             )}
           />
         </a>

docs/app/[lang]/(home)/components/templates/flight-v2.png

@@ -27,12 +27,12 @@ export const UseCasesClient = ({ useCases }: { useCases: UseCase[] }) => {
   };
 
   return (
-    <div className="grid sm:grid-cols-3 sm:divide-x p-8 sm:p-0 gap-12 sm:gap-0">
+    <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">
+        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl 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 mt-1.5 data-[size=default]:h-auto py-1.5 -ml-3">
+            <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">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>