diff --git a/.gitignore b/.gitignore
index c8a7336..ba8c66d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .vercel
 .env*.local
+.vslides.json
diff --git a/.vslides-guide.md b/.vslides-guide.md
new file mode 100644
index 0000000..e7baa53
--- /dev/null
+++ b/.vslides-guide.md
@@ -0,0 +1,1392 @@
+# Vercel Slidev Theme Guide
+
+## Presentation Setup
+
+Set global config in the **first slide's frontmatter**:
+
+```yaml
+---
+theme: ./
+title: My Presentation # Shown in footer
+footerLogo: wordmark # "wordmark" | "triangle" | "none"
+footerTitle: true # Show title in footer
+layout: 1-title
+---
+```
+
+---
+
+## Syntax Reference
+
+### Frontmatter
+
+```yaml
+---
+layout: layout-name
+variant: variant-name
+propName: propValue
+---
+```
+
+### Named Slots
+
+```markdown
+::slot-name::
+Content with **markdown**
+```
+
+### Icons
+
+[Lucide](https://lucide.dev/icons): `rocket`, `zap`, `globe`, `code`, `mail`, `twitter`, `github`, etc.
+
+### Tags
+
+```markdown
+::s1-tag::
+<Tag color="gray">Coming soon</Tag>
+```
+
+Colors: `gray`, `blue`, `purple`, `pink`, `red`, `amber`, `green`, `teal`
+
+Tags are used with statements in `2-statement` layouts via `s1-tag`–`s4-tag` slots. See the `2-statement` section for `tagPosition` guidance.
+
+**Color guidance:** Use color sparingly — Vercel guidance is <5% color on a slide. Prefer `gray` as the default tag color. Only use a colored tag as a rare accent (e.g. one highlight per slide). Overusing color dilutes its impact.
+
+### Images
+
+```yaml
+image: /photos/hero.jpg # Relative to public/
+grayscale: 0 # 0 = full color, 100 = grayscale (default)
+```
+
+---
+
+## Layout Variants — Full Reference
+
+### 1-title
+
+#### `variant: title` / `variant: section`
+
+Opening slide or section divider.
+
+**Structure:**
+
+- Vercel logo (title only)
+- Large centered title
+- 2×2 grid of subtitle points (up to 4), each with icon OR avatar image
+
+**Props:**
+
+- `subtitle1Icon`–`subtitle4Icon` — Lucide icon name
+- `subtitle1Image`–`subtitle4Image` — Avatar image URL (circular, grayscale)
+- `subtitleSize` — `sm` (default) or `lg` (larger avatars for presenter intros)
+
+**Slots:**
+
+- `title` — Main heading
+- `subtitle-1`, `subtitle-2`, `subtitle-3`, `subtitle-4` — Text next to each icon/avatar
+
+```yaml
+---
+layout: 1-title
+variant: title
+subtitle1Icon: rocket
+subtitle2Image: /team/alice.jpg
+---
+
+::title::
+# Welcome to Vercel
+
+::subtitle-1::
+Fast deployments
+
+::subtitle-2::
+Alice Chen, Engineering
+```
+
+---
+
+#### `variant: agenda`
+
+Numbered agenda/outline with up to 8 items in two columns.
+
+**Structure:**
+
+- Badge in top-left
+- 8 numbered items (01–08) in two columns of 4
+
+**Props:**
+
+- `badge` — Badge text (default: "Agenda")
+
+**Slots:**
+
+- `item-1` through `item-8` — Agenda item text
+
+```yaml
+---
+layout: 1-title
+variant: agenda
+badge: Today's Agenda
+---
+
+::item-1::
+Introduction
+
+::item-2::
+Demo
+
+::item-3::
+Q&A
+```
+
+---
+
+### 2-statement
+
+#### `variant: large`
+
+Single big statement, centered.
+
+**Structure:**
+
+- Large centered title
+- Smaller subtitle below
+
+**Slots:**
+
+- `title` — Main statement
+- `subtitle` — Supporting text
+
+```yaml
+---
+layout: 2-statement
+variant: large
+---
+
+::title::
+# Ship 10x faster
+
+::subtitle::
+Deploy in seconds, scale automatically
+```
+
+---
+
+#### `variant: title-2` / `title-3` / `title-4`
+
+Title on left, 2/3/4 statements stacked vertically on right.
+
+**Structure:**
+
+- Left half: Large title
+- Right half: 2, 3, or 4 Statement blocks stacked
+
+**Props:**
+
+- `tagPosition` — `inline` (default) or `above`. Use `inline` for wide statement areas (e.g. `title-2`, `cols-2`). Only use `above` when columns are narrow enough that an inline tag would wrap awkwardly (e.g. `cols-4`, `grid-4`). Don't default to `above` — it adds vertical height and leads to cramped content in rows with limited space.
+
+**Slots:**
+
+- `title` — Left side heading
+- `s1-title`, `s1-body`, `s1-tag` — First statement
+- `s2-title`, `s2-body`, `s2-tag` — Second statement
+- `s3-title`, `s3-body`, `s3-tag` — Third statement (title-3, title-4)
+- `s4-title`, `s4-body`, `s4-tag` — Fourth statement (title-4 only)
+
+```yaml
+---
+layout: 2-statement
+variant: title-3
+---
+
+::title::
+# Why Vercel?
+
+::s1-tag::
+<Tag color="gray">Fast</Tag>
+
+::s1-title::
+Speed
+
+::s1-body::
+Deploy in under 10 seconds
+
+::s2-title::
+Scale
+
+::s2-body::
+Auto-scaling to millions
+
+::s3-title::
+Security
+
+::s3-body::
+Enterprise-grade by default
+```
+
+---
+
+#### `variant: cols-2` / `cols-3` / `cols-4`
+
+Title at top, 2/3/4 statements in columns below.
+
+**Structure:**
+
+- Top: Title row
+- Bottom: 2, 3, or 4 Statement blocks side by side
+
+**Slots:** Same as title-N variants above.
+
+---
+
+#### `variant: grid-4`
+
+Title at top, 4 statements in 2×2 grid.
+
+**Structure:**
+
+- Top: Title row
+- Bottom: 2×2 grid of Statement blocks
+
+**Slots:** Same as title-4.
+
+---
+
+#### `variant: transition`
+
+Narrative section connector with optional progress label. Use between major content blocks to guide the audience through the presentation's narrative arc.
+
+**Structure:**
+
+- Centered title + subtitle (like `large` but lighter, using `lg` Statement)
+- Optional progress indicator at bottom (e.g. "Part 2 of 3")
+
+**Props:**
+
+- `transitionLabel` — Progress text (optional, e.g. "Part 2 of 3", "Next: The Solution")
+
+**Slots:**
+
+- `title` — Main transition text
+- `subtitle` — Supporting context
+
+```yaml
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Part 2 of 3"
+---
+
+::title::
+Next: The Solution
+
+::subtitle::
+How we solved the performance challenge
+```
+
+**When to use:** Use `1-title variant: section` for bold section headers. Use `2-statement variant: transition` for lighter narrative connectors within a section, especially when you want a subtitle and/or progress indicator.
+
+---
+
+### 3-screenshot
+
+All variants show images in a **macOS browser frame** with traffic lights.
+
+#### `variant: full`
+
+Full-width screenshot, clipped at bottom by footer.
+
+**Props:**
+
+- `image` — Screenshot URL (required)
+- `url` — URL shown in browser bar
+- `grayscale` — 0–100 (default: 100 = full grayscale)
+
+```yaml
+---
+layout: 3-screenshot
+variant: full
+image: /screenshots/dashboard.png
+url: vercel.com/dashboard
+grayscale: 0
+---
+```
+
+---
+
+#### `variant: right-1`
+
+Statement on left (1/3), screenshot on right (2/3).
+
+**Structure:**
+
+- Left: 1 Statement (title + body)
+- Right: Browser frame with screenshot
+
+**Slots:**
+
+- `title` — Statement title
+- `body` — Statement body
+
+```yaml
+---
+layout: 3-screenshot
+variant: right-1
+image: /screenshots/deploy.png
+url: vercel.com
+---
+
+::title::
+# One-Click Deploy
+
+::body::
+Push to Git and your site is live.
+```
+
+---
+
+#### `variant: left-2`
+
+Screenshot on left (2/3), 2 statements stacked on right (1/3).
+
+**Structure:**
+
+- Left: Browser frame with screenshot
+- Right: 2 Statement blocks stacked
+
+**Slots:**
+
+- `s1-title`, `s1-body` — First statement
+- `s2-title`, `s2-body` — Second statement
+
+---
+
+#### `variant: right-list`
+
+Title + 4 list items on left (1/3), screenshot on right (2/3).
+
+**Structure:**
+
+- Left top: Title
+- Left bottom: 4 simple text rows
+- Right: Browser frame with screenshot
+
+**Slots:**
+
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items (plain text, no title/body)
+
+---
+
+#### `variant: left-list`
+
+Screenshot on left (2/3), title + 4 list items on right (1/3).
+
+Same slots as right-list.
+
+---
+
+### 4-image
+
+Images are shown **without browser frame** (full-bleed or contained).
+
+**Common Props (all variants):**
+
+- `imageMode` — How images fit: `cover` (default), `contain`, `fill`, `none`, `scale-down`
+- `grayscale` — Global grayscale for all images (`0` = full color, `100` = full grayscale, default: `100`)
+
+#### `variant: full`
+
+Full-screen image.
+
+**Props:**
+
+- `image` — Image URL
+- `grayscale` — 0–100 (default: 100)
+
+---
+
+#### `variant: left-list`
+
+Image on left (1/2), title + 4 list items on right (1/2).
+
+**Props:**
+
+- `image` — Image URL
+- `grayscale` — 0–100 (default: 100)
+
+**Slots:**
+
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items
+
+---
+
+#### `variant: title-image`
+
+Title at top (30%), image below (70%).
+
+**Props:**
+
+- `image` — Image URL
+- `grayscale` — 0–100 (default: 100)
+
+**Slots:**
+
+- `title` — Section title
+
+---
+
+#### `variant: grid-2` / `grid-3` / `grid-4`
+
+Title + 2/3/4 images, each with a statement below.
+
+**Structure:**
+
+- Top row: Title
+- Middle row: 2, 3, or 4 images side by side
+- Bottom row: 2, 3, or 4 Statement blocks (one per image)
+
+**Props:**
+
+- `image1`, `image2`, `image3`, `image4` — Image URLs
+- `grayscale1`, `grayscale2`, `grayscale3`, `grayscale4` — Per-image grayscale overrides (0–100)
+- `imageMode1`, `imageMode2`, `imageMode3`, `imageMode4` — Per-image fit mode overrides (`cover`, `contain`, `fill`, `none`, `scale-down`)
+
+For grid variants, `grayscale` and `imageMode` apply to all images by default. Use `grayscaleN` / `imageModeN` to override specific cells.
+
+**Slots:**
+
+- `title` — Section title
+- `s1-title`, `s1-body` — Caption for image1
+- `s2-title`, `s2-body` — Caption for image2
+- `s3-title`, `s3-body` — Caption for image3 (grid-3, grid-4)
+- `s4-title`, `s4-body` — Caption for image4 (grid-4 only)
+
+```yaml
+---
+layout: 4-image
+variant: grid-3
+image1: /team/alice.jpg
+image2: /team/bob.jpg
+image3: /team/carol.jpg
+grayscale1: 0
+grayscale2: 0
+grayscale3: 0
+---
+
+::title::
+# Meet the Team
+
+::s1-title::
+Alice Chen
+
+::s1-body::
+Engineering Lead
+
+::s2-title::
+Bob Smith
+
+::s2-body::
+Product Manager
+
+::s3-title::
+Carol Davis
+
+::s3-body::
+Designer
+```
+
+---
+
+### 4-mermaid
+
+Mermaid charts with the same composition model as `4-image` (image areas replaced by diagrams).
+
+**When to use:** Architecture diagrams, process flows, system maps, and side-by-side chart comparisons.
+
+**Variants:**
+
+- `variant: full` — One full-slide chart
+- `variant: left-list` — Chart left, title + list right
+- `variant: title-image` — Title top, chart below
+- `variant: grid-2` — 2 charts + 2 statement captions
+- `variant: grid-3` — 3 charts + 3 statement captions
+- `variant: grid-4` — 4 charts + 4 statement captions
+
+Grid variants use numbered chart props (chart1, chart2, etc.) and matching statement slots (s1-title/body, s2-title/body, etc.). Single-chart variants use a single chart prop. left-list adds title + item-1..item-4 slots. title-image adds a title slot.
+
+**Syntax rules (all variants):**
+
+- Put Mermaid code in frontmatter using YAML multiline strings (`|`).
+- Start with a Mermaid diagram declaration (`flowchart LR`, `flowchart TD`, etc.).
+- Prefer plain labels (`Node["Text"]`) over HTML labels if rendering is unstable.
+- Use hex colors in `classDef` and `linkStyle`.
+
+**Example: `variant: full`**
+
+## \\`\\`\\`yaml
+
+layout: 4-mermaid
+variant: full
+chart: |
+flowchart LR
+User["User"] --> Edge["Edge Router"]
+Edge -->|cache hit| Cached(["Cached"])
+Edge -->|cache miss| App["App Runtime"]
+App --> DB["Primary DB"]
+classDef success fill:#0b1d0f,stroke:#46a758,color:#63c174;
+class Cached success;
+
+---
+
+\\`\\`\\`
+
+**Example: `variant: grid-2`**
+
+## \\`\\`\\`yaml
+
+layout: 4-mermaid
+variant: grid-2
+chart1: |
+flowchart LR
+Edge["Edge"] --> API["API"]
+API -->|ok| Fast(["Low Latency"])
+classDef success fill:#0b1d0f,stroke:#46a758,color:#63c174;
+class Fast success;
+chart2: |
+flowchart LR
+API["API"] --> Guard["Rate Limit"]
+Guard -->|blocked| Drop(["Dropped"])
+classDef danger fill:#2a1314,stroke:#e5484d,color:#ff6166;
+class Drop danger;
+
+---
+
+::title::
+
+# Traffic Paths
+
+::s1-title::
+Fast path
+
+::s1-body::
+Edge + API success flow.
+
+::s2-title::
+Blocked path
+
+::s2-body::
+Rate limit rejects abusive traffic.
+\\`\\`\\`
+
+---
+
+### 5-open
+
+Flexible layouts with open content areas for custom content (iframes, demos, etc.).
+
+#### `variant: title-space`
+
+Title at top (30%), open area below (70%).
+
+**Slots:**
+
+- `title` — Section title
+- `content` — Open area (any HTML/Vue)
+
+---
+
+#### `variant: title-2-spaces` / `title-3-spaces`
+
+Title at top, 2 or 3 open areas side by side below.
+
+**Slots:**
+
+- `title` — Section title
+- `space-1`, `space-2`, `space-3` — Open areas
+
+---
+
+#### `variant: list-space`
+
+Title + 5 list items on left (1/3), open area on right (2/3).
+
+**Slots:**
+
+- `title` — Section title
+- `item-1` through `item-5` — List items
+- `space` — Open area
+
+---
+
+### 6-quote
+
+#### `variant: center`
+
+Centered quote with attribution.
+
+**Slots:**
+
+- `quote` — Quote text
+- `author` — Attribution (name, title, company)
+
+```yaml
+---
+layout: 6-quote
+variant: center
+---
+
+::quote::
+The best way to predict the future is to build it.
+
+::author::
+— Guillermo Rauch, CEO of Vercel
+```
+
+---
+
+#### `variant: with-statements`
+
+2 statements on left (1/3), quote on right (2/3).
+
+**Slots:**
+
+- `s1-title`, `s1-body` — First statement
+- `s2-title`, `s2-body` — Second statement
+- `quote`, `author` — Quote content
+
+---
+
+### 7-number
+
+#### `variant: one`
+
+Single huge metric, centered.
+
+**Slots:**
+
+- `number` — The metric (e.g., "99.9%")
+- `label` — Description (e.g., "Uptime SLA")
+
+---
+
+#### `variant: two` / `variant: three`
+
+2 or 3 metrics side by side.
+
+**Slots:**
+
+- `number-1`, `label-1` — First metric
+- `number-2`, `label-2` — Second metric
+- `number-3`, `label-3` — Third metric (three only)
+
+---
+
+#### `variant: four-with-title`
+
+Statement on left (1/3), 2×2 grid of 4 metrics on right (2/3).
+
+**Slots:**
+
+- `title`, `subtitle` — Left side statement
+- `number-1`, `label-1` through `number-4`, `label-4` — Metrics
+
+---
+
+#### `variant: six`
+
+6 metrics in 3×2 grid.
+
+**Slots:**
+
+- `number-1`, `label-1` through `number-6`, `label-6`
+
+---
+
+#### `variant: two-with-source` / `three-with-source`
+
+2 or 3 metrics with source citations below each.
+
+**Slots:**
+
+- `number-1`, `label-1`, `source-1` — First metric with citation
+- `number-2`, `label-2`, `source-2` — Second metric
+- `number-3`, `label-3`, `source-3` — Third metric (three-with-source only)
+
+---
+
+### 8-special
+
+#### `variant: qa`
+
+Q&A slide with decorative left panel.
+
+**Structure:**
+
+- Left: Decorative quote bubble SVG + optional custom content
+- Right: Badge + up to 4 icon points (contact info, links, etc.)
+
+**Props:**
+
+- `badge` — Badge text (default: "Q&A")
+- `item1Icon`, `item2Icon`, `item3Icon`, `item4Icon` — Lucide icons
+
+**Slots:**
+
+- `left` — Optional content in left panel
+- `item-1`, `item-2`, `item-3`, `item-4` — Text next to each icon
+
+```yaml
+---
+layout: 8-special
+variant: qa
+badge: Questions?
+item1Icon: mail
+item2Icon: twitter
+---
+
+::item-1::
+hello@vercel.com
+
+::item-2::
+@vercel
+```
+
+---
+
+#### `variant: thank-you`
+
+Centered Vercel triangle + "Thank you" text. No slots.
+
+---
+
+#### `variant: splash`
+
+Centered Vercel triangle only. No slots.
+
+---
+
+### 9-utility
+
+Blank canvases for custom content.
+
+- `variant: blank` — Empty with frame
+- `variant: crosshairs` — Frame + crosshair decorations
+- `variant: full-grid` — Dense alignment grid
+
+Default slot accepts any content.
+
+---
+
+### 10-code
+
+All variants show code in a **code editor frame** with filename header.
+
+**IMPORTANT — Maximum lines of code (LOC) that fit without clipping:**
+
+| Size | Full variant | 2/3 variants (right-1, left-2, right-list, left-list) |
+| ---- | ------------ | ----------------------------------------------------- |
+| `xs` | 23 lines     | 19 lines                                              |
+| `sm` | 17 lines     | 14 lines                                              |
+| `md` | 14 lines     | 11 lines                                              |
+| `lg` | 12 lines     | 9 lines                                               |
+
+**Always count your code lines (including blank lines) and pick a `codeSize` that fits.** If the code exceeds the limit, it will be clipped at the bottom. Prefer trimming code to show only the essential parts rather than cramming everything in at `xs`.
+
+**Scrollable mode:** Set `scrollable: true` to allow vertical scrolling for longer code. This should NOT be the default — only use it when showing the complete code is essential and trimming would lose important context. Non-scrollable (clipped) code is the standard look.
+
+#### `variant: full`
+
+Full-width code, clipped at bottom.
+
+**Props:**
+
+- `filename` — Filename shown in header (e.g., `api/hello.ts`)
+- `codeSize` — `xs`, `sm` (default), `md`, `lg`
+- `scrollable` — `true` to enable vertical scrolling (default: `false`, code clips at bottom)
+
+**Slots:**
+
+- `code` — Fenced code block with syntax highlighting
+
+```yaml
+---
+layout: 10-code
+variant: full
+filename: api/hello.ts
+---
+
+::code::
+\\`\\`\\`ts
+export async function GET() {
+  return Response.json({ hello: 'world' })
+}
+\\`\\`\\`
+```
+
+---
+
+#### `variant: right-1`
+
+Statement on left (1/3), code on right (2/3).
+
+**Slots:**
+
+- `title`, `body` — Statement
+- `code` — Code block
+
+---
+
+#### `variant: left-2`
+
+Code on left (2/3), 2 statements on right (1/3).
+
+**Slots:**
+
+- `code` — Code block
+- `s1-title`, `s1-body` — First statement
+- `s2-title`, `s2-body` — Second statement
+
+---
+
+#### `variant: right-list` / `left-list`
+
+Code + title + 4 list items.
+
+**Slots:**
+
+- `code` — Code block
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items
+
+---
+
+### 11-promo
+
+#### `variant: two-statements`
+
+Badge + decorative grid + 2 statements.
+
+**Structure:**
+
+- Top: Badge
+- Middle: Decorative square grid
+- Bottom: 2 Statement blocks side by side
+
+**Props:**
+
+- `badge` — Badge text
+- `gridCols` — Grid columns (default: 14)
+- `gridRows` — Grid rows (default: 3)
+
+**Slots:**
+
+- `s1-title`, `s1-body`, `s1-tag` — First statement
+- `s2-title`, `s2-body`, `s2-tag` — Second statement
+
+---
+
+### playful
+
+Animated full-screen grid layouts.
+
+#### `variant: welcome`
+
+Static "▲ W E L C O M E" display. No configuration needed.
+
+---
+
+#### `variant: triangles`
+
+Random Vercel triangles fade in/out.
+
+**Props:**
+
+- `flashInterval` — ms between new triangles (default: 2500)
+- `fadeDuration` — ms for fade out (default: 4000)
+
+---
+
+#### `variant: values`
+
+Random Vercel values (FTW, DIG DEEP, etc.) fade in/out.
+
+Same props as triangles.
+
+---
+
+#### `variant: splitflap`
+
+Mechanical split-flap display animation.
+
+Use `<Flap>` components in the slide body:
+
+```yaml
+---
+layout: playful
+variant: splitflap
+---
+<Flap text="▲ VERCEL" :row="5" />
+<Flap text="SHIP FAST" :row="7" mono />
+```
+
+**Flap props:**
+
+- `text` — Text to display (max 16 chars). Use `▲` for Vercel icon.
+- `row` — Row number (1–9)
+- `startCol` — Starting column (auto-centers if omitted)
+- `mono` — Use monospace font (default: false)
+- `flipDuration` — ms per character flip (default: 120)
+- `staggerDelay` — ms between letters (default: 100)
+
+---
+
+### 12-youtube
+
+Embedded YouTube video in a **macOS browser frame** (same chrome as 3-screenshot). The browser bar always shows `youtube.com`. Uses privacy-enhanced embedding (`youtube-nocookie.com`).
+
+**Timestamp support:** Include `&t=SECONDS` in the URL to start the video at a specific time. The component auto-extracts `t=` or `start=` from the URL and passes it to the embed player.
+
+#### `variant: full`
+
+Full-width browser frame with embedded video, clipped at bottom.
+
+**Props:**
+
+- `url` — YouTube video URL (supports `youtube.com/watch?v=`, `youtu.be/`, `youtube.com/embed/`). Append `&t=SECONDS` to start at a specific timestamp.
+
+```yaml
+---
+layout: 12-youtube
+variant: full
+url: https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=166
+---
+```
+
+---
+
+#### `variant: left-list`
+
+Video in browser frame on left (1/2), title + 4 list items on right (1/2).
+
+**Props:**
+
+- `url` — YouTube video URL. Append `&t=SECONDS` to start at a specific timestamp.
+
+**Slots:**
+
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items
+
+```yaml
+---
+layout: 12-youtube
+variant: left-list
+url: https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=120
+---
+
+::title::
+Video Walkthrough
+
+::item-1::
+Step 1: Setup
+
+::item-2::
+Step 2: Configure
+
+::item-3::
+Step 3: Deploy
+
+::item-4::
+Step 4: Monitor
+```
+
+---
+
+## Offer Layouts
+
+Sales offer slides for customer proposals. All offer layouts are dark-themed with the Vercel design system. Data is passed via **frontmatter props** (not slots) for structured data like SKUs, details, and team members.
+
+---
+
+### offer-title
+
+Cover slide for a customer offer with title and team members.
+
+**Structure:**
+
+- Large title at top
+- 2×2 team member grid at bottom (name + role in monospace)
+
+**Props:**
+
+- `team1Name`–`team4Name` — Team member names
+- `team1Role`–`team4Role` — Team member roles (shown in monospace, muted)
+
+**Slots:**
+
+- `title` — Main heading (use `<br>` for line breaks)
+
+```yaml
+---
+layout: offer-title
+team1Name: Jane Smith
+team1Role: ACCOUNT MANAGER
+team2Name: John Doe
+team2Role: SOLUTIONS ENGINEER
+team3Name: Alice Chen
+team3Role: CSM
+team4Name: Bob Wilson
+team4Role: CRO
+---
+::title::
+# Acme Corp's<br>Vercel offer
+```
+
+---
+
+### offer-statement
+
+Badge + title on left, numbered points on right.
+
+**Structure:**
+
+- Left: Outline badge + large title
+- Right: Up to 4 numbered points (01–04) with title + body
+
+**Props:**
+
+- `badge` — Badge text (default: "OUR PRICING PHILOSOPHY")
+- `badgeColor` — Badge border color (default: "#A0A0A0")
+
+**Slots:**
+
+- `title` — Left side heading
+- `point-1-title`, `point-1-body` — First numbered point
+- `point-2-title`, `point-2-body` — Second numbered point
+- `point-3-title`, `point-3-body` — Third point
+- `point-4-title`, `point-4-body` — Fourth point
+
+```yaml
+---
+layout: offer-statement
+badge: OUR PRICING PHILOSOPHY
+---
+
+::title::
+Transparency<br>& predictability
+
+::point-1-title::
+Usage-based
+
+::point-1-body::
+Pay for only what you use
+
+::point-2-title::
+Product flexibility
+
+::point-2-body::
+One commit across products, shift spend where you need
+
+::point-3-title::
+Scales with you
+
+::point-3-body::
+The more you buy, the better your discount
+```
+
+---
+
+### offer-product-grid
+
+Product portfolio grid showing all Vercel SKUs organized by category.
+
+**Structure:**
+
+- Title + subtitle at top
+- Grid of product categories with individual SKU pills
+- Diagonal background pattern behind grid
+
+**Props:**
+
+- `categories` — Array of `{ title, products: [{ name }], highlighted? }` (has sensible defaults with all Vercel products)
+- `rows` — Array of index arrays defining grid layout (default: `[[0,1], [2,3,4], [5,6,7,8]]`)
+
+**Slots:**
+
+- `title` — Grid heading
+- `subtitle` — Subtitle text
+
+```yaml
+---
+layout: offer-product-grid
+---
+
+::title::
+Introducing Flexible Commitment
+
+::subtitle::
+Giving your team access to the entire Vercel product portfolio
+```
+
+---
+
+### offer-timeline
+
+Flex commit timeline visualization with checkbox grid.
+
+**Structure:**
+
+- Badge at top
+- Large headline (supports mixed white/muted text via HTML spans)
+- Month 1–12 timeline with animated checkbox grid + fade overlay
+
+**Props:**
+
+- `badge` — Badge text (default: "FLEX COMMIT")
+- `startLabel` — Left label (default: "MONTH 1")
+- `endLabel` — Right label (default: "MONTH 12")
+- `months` — 12-element array of boolean arrays for checkbox states
+
+**Slots:**
+
+- `title` — Headline (use `<span class="offer-tl-white">` and `<span class="offer-tl-muted">` for mixed styling)
+
+```yaml
+---
+layout: offer-timeline
+---
+
+::title::
+<span class="offer-tl-white">Swap SKUs anytime</span><span class="offer-tl-muted"> to align with<br>shifting needs and seasonality.</span>
+```
+
+---
+
+### offer-pricing
+
+Discount matrix on left, rate card on right.
+
+**Structure:**
+
+- Left: Title + 2×2 discount matrix (BASE/MODERATE/HIGH/BEST)
+- Right: Rate card table with diagonal background
+
+**Props:**
+
+- `badgeText` — Rate card badge (default: "FLEX COMMIT RATE CARD")
+- `footerText` — Rate card footer (default: "ENTIRE RATE CARD AVAILABLE WITH FULL PROPOSAL")
+- `skus` — Array of `{ name, listPrice, discountPrice }` (default: 3 placeholder SKUs)
+
+**Slots:**
+
+- `title` — Left side heading
+
+```yaml
+---
+layout: offer-pricing
+skus:
+  - name: Fluid Compute
+    listPrice: $0.18/GB-hr
+    discountPrice: $0.12/GB-hr
+  - name: Edge Requests
+    listPrice: $2/M
+    discountPrice: $1.40/M
+  - name: Bandwidth
+    listPrice: $0.15/GB
+    discountPrice: $0.10/GB
+---
+
+::title::
+Pricing that<br>scales with<br>you.
+```
+
+---
+
+### offer-roi
+
+Centered card with label/value rows and dotted leaders.
+
+**Structure:**
+
+- Centered rounded card with outline badge
+- Up to 3 key-value rows with dotted line between label and value
+
+**Props:**
+
+- `badge` — Card badge text (default: "ANTICIPATED QUANTIFIED VALUE")
+
+**Slots:**
+
+- `label`, `value` — First row (default: "ROI" / "$XM")
+- `label-2`, `value-2` — Second row (optional)
+- `label-3`, `value-3` — Third row (optional)
+
+```yaml
+---
+layout: offer-roi
+---
+
+::label::
+ROI
+
+::value::
+$2.5M
+
+::label-2::
+Annual savings
+
+::value-2::
+$500K
+```
+
+---
+
+### offer-details
+
+Header + key-value sidebar on left, rate card on right.
+
+**Structure:**
+
+- Header bar with customer name
+- Left: Key-value detail rows (flexible count)
+- Right: Rate card with diagonal background
+
+**Props:**
+
+- `headerText` — Header text (default: "[Customer name] offer")
+- `details` — Array of `{ label, value }` for the sidebar rows
+- `badgeText` — Rate card badge
+- `footerText` — Rate card footer
+- `skus` — Array of `{ name, listPrice, discountPrice }`
+
+```yaml
+---
+layout: offer-details
+headerText: Acme Corp offer
+details:
+  - label: Flex commit balance
+    value: $120K / YR
+  - label: Term
+    value: 2 YRS
+  - label: Support level
+    value: Enterprise
+  - label: Start date
+    value: Q1 2026
+skus:
+  - name: Fluid Compute
+    listPrice: $0.18/GB-hr
+    discountPrice: $0.12/GB-hr
+  - name: Edge Requests
+    listPrice: $2/M
+    discountPrice: $1.40/M
+  - name: Bandwidth
+    listPrice: $0.15/GB
+    discountPrice: $0.10/GB
+---
+<!-- Offer Details -->
+```
+
+---
+
+### offer-comparison
+
+Side-by-side comparison of 2–3 offer options, each with rate card.
+
+**Structure:**
+
+- Header bar with customer name
+- Equal-width columns, each with: option badge, balance/term KV rows, small rate card
+
+**Props:**
+
+- `headerText` — Header text (default: "[Customer name] offer comparison")
+- `options` — Array of `{ label, balance, term, skus: [{ name, listPrice, discountPrice }] }`
+
+```yaml
+---
+layout: offer-comparison
+headerText: Acme Corp offer comparison
+options:
+  - label: OPTION 1
+    balance: $100K / YR
+    term: 1 YR
+    skus:
+      - name: Fluid Compute
+        listPrice: $0.18
+        discountPrice: $0.15
+      - name: Edge Requests
+        listPrice: $2/M
+        discountPrice: $1.70/M
+  - label: OPTION 2
+    balance: $120K / YR
+    term: 2 YRS
+    skus:
+      - name: Fluid Compute
+        listPrice: $0.18
+        discountPrice: $0.12
+      - name: Edge Requests
+        listPrice: $2/M
+        discountPrice: $1.40/M
+---
+<!-- Offer Comparison -->
+```
+
+---
+
+### offer-before-after
+
+Side-by-side before/after comparison with colored badges and icon rows.
+
+**Structure:**
+
+- Left: Red "BEFORE STATE" badge + year + title + X-icon rows
+- Right: Green "AFTER STATE" badge + year + title + check-icon rows
+
+**Props:**
+
+- `beforeBadge` — Left badge text (default: "BEFORE STATE")
+- `afterBadge` — Right badge text (default: "AFTER STATE")
+- `beforeYear` — Left year label (default: "2025 & EARLIER")
+- `afterYear` — Right year label (default: "2026+")
+- `beforeColor` — Left badge color (default: red `#DA2F36`)
+- `afterColor` — Right badge color (default: green `#63C173`)
+
+**Slots:**
+
+- `before-title` — Left title (default: "MIU")
+- `after-title` — Right title (default: "Flex Commit")
+- `before-1` through `before-6` — Before rows (with X icon)
+- `after-1` through `after-6` — After rows (with check icon)
+
+```yaml
+---
+layout: offer-before-after
+---
+
+::before-title::
+MIU
+
+::after-title::
+Flex Commit
+
+::before-1::
+Separate commits per SKU
+
+::after-1::
+Max flexibility
+
+::before-2::
+Monthly burndown
+
+::after-2::
+Annual burndown
+
+::before-3::
+Shallow blanket discount
+
+::after-3::
+Private rate card
+```
diff --git a/presentations/getting-started-workflows-webinar/.vslides-guide.md b/presentations/getting-started-workflows-webinar/.vslides-guide.md
new file mode 100644
index 0000000..e7baa53
--- /dev/null
+++ b/presentations/getting-started-workflows-webinar/.vslides-guide.md
@@ -0,0 +1,1392 @@
+# Vercel Slidev Theme Guide
+
+## Presentation Setup
+
+Set global config in the **first slide's frontmatter**:
+
+```yaml
+---
+theme: ./
+title: My Presentation # Shown in footer
+footerLogo: wordmark # "wordmark" | "triangle" | "none"
+footerTitle: true # Show title in footer
+layout: 1-title
+---
+```
+
+---
+
+## Syntax Reference
+
+### Frontmatter
+
+```yaml
+---
+layout: layout-name
+variant: variant-name
+propName: propValue
+---
+```
+
+### Named Slots
+
+```markdown
+::slot-name::
+Content with **markdown**
+```
+
+### Icons
+
+[Lucide](https://lucide.dev/icons): `rocket`, `zap`, `globe`, `code`, `mail`, `twitter`, `github`, etc.
+
+### Tags
+
+```markdown
+::s1-tag::
+<Tag color="gray">Coming soon</Tag>
+```
+
+Colors: `gray`, `blue`, `purple`, `pink`, `red`, `amber`, `green`, `teal`
+
+Tags are used with statements in `2-statement` layouts via `s1-tag`–`s4-tag` slots. See the `2-statement` section for `tagPosition` guidance.
+
+**Color guidance:** Use color sparingly — Vercel guidance is <5% color on a slide. Prefer `gray` as the default tag color. Only use a colored tag as a rare accent (e.g. one highlight per slide). Overusing color dilutes its impact.
+
+### Images
+
+```yaml
+image: /photos/hero.jpg # Relative to public/
+grayscale: 0 # 0 = full color, 100 = grayscale (default)
+```
+
+---
+
+## Layout Variants — Full Reference
+
+### 1-title
+
+#### `variant: title` / `variant: section`
+
+Opening slide or section divider.
+
+**Structure:**
+
+- Vercel logo (title only)
+- Large centered title
+- 2×2 grid of subtitle points (up to 4), each with icon OR avatar image
+
+**Props:**
+
+- `subtitle1Icon`–`subtitle4Icon` — Lucide icon name
+- `subtitle1Image`–`subtitle4Image` — Avatar image URL (circular, grayscale)
+- `subtitleSize` — `sm` (default) or `lg` (larger avatars for presenter intros)
+
+**Slots:**
+
+- `title` — Main heading
+- `subtitle-1`, `subtitle-2`, `subtitle-3`, `subtitle-4` — Text next to each icon/avatar
+
+```yaml
+---
+layout: 1-title
+variant: title
+subtitle1Icon: rocket
+subtitle2Image: /team/alice.jpg
+---
+
+::title::
+# Welcome to Vercel
+
+::subtitle-1::
+Fast deployments
+
+::subtitle-2::
+Alice Chen, Engineering
+```
+
+---
+
+#### `variant: agenda`
+
+Numbered agenda/outline with up to 8 items in two columns.
+
+**Structure:**
+
+- Badge in top-left
+- 8 numbered items (01–08) in two columns of 4
+
+**Props:**
+
+- `badge` — Badge text (default: "Agenda")
+
+**Slots:**
+
+- `item-1` through `item-8` — Agenda item text
+
+```yaml
+---
+layout: 1-title
+variant: agenda
+badge: Today's Agenda
+---
+
+::item-1::
+Introduction
+
+::item-2::
+Demo
+
+::item-3::
+Q&A
+```
+
+---
+
+### 2-statement
+
+#### `variant: large`
+
+Single big statement, centered.
+
+**Structure:**
+
+- Large centered title
+- Smaller subtitle below
+
+**Slots:**
+
+- `title` — Main statement
+- `subtitle` — Supporting text
+
+```yaml
+---
+layout: 2-statement
+variant: large
+---
+
+::title::
+# Ship 10x faster
+
+::subtitle::
+Deploy in seconds, scale automatically
+```
+
+---
+
+#### `variant: title-2` / `title-3` / `title-4`
+
+Title on left, 2/3/4 statements stacked vertically on right.
+
+**Structure:**
+
+- Left half: Large title
+- Right half: 2, 3, or 4 Statement blocks stacked
+
+**Props:**
+
+- `tagPosition` — `inline` (default) or `above`. Use `inline` for wide statement areas (e.g. `title-2`, `cols-2`). Only use `above` when columns are narrow enough that an inline tag would wrap awkwardly (e.g. `cols-4`, `grid-4`). Don't default to `above` — it adds vertical height and leads to cramped content in rows with limited space.
+
+**Slots:**
+
+- `title` — Left side heading
+- `s1-title`, `s1-body`, `s1-tag` — First statement
+- `s2-title`, `s2-body`, `s2-tag` — Second statement
+- `s3-title`, `s3-body`, `s3-tag` — Third statement (title-3, title-4)
+- `s4-title`, `s4-body`, `s4-tag` — Fourth statement (title-4 only)
+
+```yaml
+---
+layout: 2-statement
+variant: title-3
+---
+
+::title::
+# Why Vercel?
+
+::s1-tag::
+<Tag color="gray">Fast</Tag>
+
+::s1-title::
+Speed
+
+::s1-body::
+Deploy in under 10 seconds
+
+::s2-title::
+Scale
+
+::s2-body::
+Auto-scaling to millions
+
+::s3-title::
+Security
+
+::s3-body::
+Enterprise-grade by default
+```
+
+---
+
+#### `variant: cols-2` / `cols-3` / `cols-4`
+
+Title at top, 2/3/4 statements in columns below.
+
+**Structure:**
+
+- Top: Title row
+- Bottom: 2, 3, or 4 Statement blocks side by side
+
+**Slots:** Same as title-N variants above.
+
+---
+
+#### `variant: grid-4`
+
+Title at top, 4 statements in 2×2 grid.
+
+**Structure:**
+
+- Top: Title row
+- Bottom: 2×2 grid of Statement blocks
+
+**Slots:** Same as title-4.
+
+---
+
+#### `variant: transition`
+
+Narrative section connector with optional progress label. Use between major content blocks to guide the audience through the presentation's narrative arc.
+
+**Structure:**
+
+- Centered title + subtitle (like `large` but lighter, using `lg` Statement)
+- Optional progress indicator at bottom (e.g. "Part 2 of 3")
+
+**Props:**
+
+- `transitionLabel` — Progress text (optional, e.g. "Part 2 of 3", "Next: The Solution")
+
+**Slots:**
+
+- `title` — Main transition text
+- `subtitle` — Supporting context
+
+```yaml
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Part 2 of 3"
+---
+
+::title::
+Next: The Solution
+
+::subtitle::
+How we solved the performance challenge
+```
+
+**When to use:** Use `1-title variant: section` for bold section headers. Use `2-statement variant: transition` for lighter narrative connectors within a section, especially when you want a subtitle and/or progress indicator.
+
+---
+
+### 3-screenshot
+
+All variants show images in a **macOS browser frame** with traffic lights.
+
+#### `variant: full`
+
+Full-width screenshot, clipped at bottom by footer.
+
+**Props:**
+
+- `image` — Screenshot URL (required)
+- `url` — URL shown in browser bar
+- `grayscale` — 0–100 (default: 100 = full grayscale)
+
+```yaml
+---
+layout: 3-screenshot
+variant: full
+image: /screenshots/dashboard.png
+url: vercel.com/dashboard
+grayscale: 0
+---
+```
+
+---
+
+#### `variant: right-1`
+
+Statement on left (1/3), screenshot on right (2/3).
+
+**Structure:**
+
+- Left: 1 Statement (title + body)
+- Right: Browser frame with screenshot
+
+**Slots:**
+
+- `title` — Statement title
+- `body` — Statement body
+
+```yaml
+---
+layout: 3-screenshot
+variant: right-1
+image: /screenshots/deploy.png
+url: vercel.com
+---
+
+::title::
+# One-Click Deploy
+
+::body::
+Push to Git and your site is live.
+```
+
+---
+
+#### `variant: left-2`
+
+Screenshot on left (2/3), 2 statements stacked on right (1/3).
+
+**Structure:**
+
+- Left: Browser frame with screenshot
+- Right: 2 Statement blocks stacked
+
+**Slots:**
+
+- `s1-title`, `s1-body` — First statement
+- `s2-title`, `s2-body` — Second statement
+
+---
+
+#### `variant: right-list`
+
+Title + 4 list items on left (1/3), screenshot on right (2/3).
+
+**Structure:**
+
+- Left top: Title
+- Left bottom: 4 simple text rows
+- Right: Browser frame with screenshot
+
+**Slots:**
+
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items (plain text, no title/body)
+
+---
+
+#### `variant: left-list`
+
+Screenshot on left (2/3), title + 4 list items on right (1/3).
+
+Same slots as right-list.
+
+---
+
+### 4-image
+
+Images are shown **without browser frame** (full-bleed or contained).
+
+**Common Props (all variants):**
+
+- `imageMode` — How images fit: `cover` (default), `contain`, `fill`, `none`, `scale-down`
+- `grayscale` — Global grayscale for all images (`0` = full color, `100` = full grayscale, default: `100`)
+
+#### `variant: full`
+
+Full-screen image.
+
+**Props:**
+
+- `image` — Image URL
+- `grayscale` — 0–100 (default: 100)
+
+---
+
+#### `variant: left-list`
+
+Image on left (1/2), title + 4 list items on right (1/2).
+
+**Props:**
+
+- `image` — Image URL
+- `grayscale` — 0–100 (default: 100)
+
+**Slots:**
+
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items
+
+---
+
+#### `variant: title-image`
+
+Title at top (30%), image below (70%).
+
+**Props:**
+
+- `image` — Image URL
+- `grayscale` — 0–100 (default: 100)
+
+**Slots:**
+
+- `title` — Section title
+
+---
+
+#### `variant: grid-2` / `grid-3` / `grid-4`
+
+Title + 2/3/4 images, each with a statement below.
+
+**Structure:**
+
+- Top row: Title
+- Middle row: 2, 3, or 4 images side by side
+- Bottom row: 2, 3, or 4 Statement blocks (one per image)
+
+**Props:**
+
+- `image1`, `image2`, `image3`, `image4` — Image URLs
+- `grayscale1`, `grayscale2`, `grayscale3`, `grayscale4` — Per-image grayscale overrides (0–100)
+- `imageMode1`, `imageMode2`, `imageMode3`, `imageMode4` — Per-image fit mode overrides (`cover`, `contain`, `fill`, `none`, `scale-down`)
+
+For grid variants, `grayscale` and `imageMode` apply to all images by default. Use `grayscaleN` / `imageModeN` to override specific cells.
+
+**Slots:**
+
+- `title` — Section title
+- `s1-title`, `s1-body` — Caption for image1
+- `s2-title`, `s2-body` — Caption for image2
+- `s3-title`, `s3-body` — Caption for image3 (grid-3, grid-4)
+- `s4-title`, `s4-body` — Caption for image4 (grid-4 only)
+
+```yaml
+---
+layout: 4-image
+variant: grid-3
+image1: /team/alice.jpg
+image2: /team/bob.jpg
+image3: /team/carol.jpg
+grayscale1: 0
+grayscale2: 0
+grayscale3: 0
+---
+
+::title::
+# Meet the Team
+
+::s1-title::
+Alice Chen
+
+::s1-body::
+Engineering Lead
+
+::s2-title::
+Bob Smith
+
+::s2-body::
+Product Manager
+
+::s3-title::
+Carol Davis
+
+::s3-body::
+Designer
+```
+
+---
+
+### 4-mermaid
+
+Mermaid charts with the same composition model as `4-image` (image areas replaced by diagrams).
+
+**When to use:** Architecture diagrams, process flows, system maps, and side-by-side chart comparisons.
+
+**Variants:**
+
+- `variant: full` — One full-slide chart
+- `variant: left-list` — Chart left, title + list right
+- `variant: title-image` — Title top, chart below
+- `variant: grid-2` — 2 charts + 2 statement captions
+- `variant: grid-3` — 3 charts + 3 statement captions
+- `variant: grid-4` — 4 charts + 4 statement captions
+
+Grid variants use numbered chart props (chart1, chart2, etc.) and matching statement slots (s1-title/body, s2-title/body, etc.). Single-chart variants use a single chart prop. left-list adds title + item-1..item-4 slots. title-image adds a title slot.
+
+**Syntax rules (all variants):**
+
+- Put Mermaid code in frontmatter using YAML multiline strings (`|`).
+- Start with a Mermaid diagram declaration (`flowchart LR`, `flowchart TD`, etc.).
+- Prefer plain labels (`Node["Text"]`) over HTML labels if rendering is unstable.
+- Use hex colors in `classDef` and `linkStyle`.
+
+**Example: `variant: full`**
+
+## \\`\\`\\`yaml
+
+layout: 4-mermaid
+variant: full
+chart: |
+flowchart LR
+User["User"] --> Edge["Edge Router"]
+Edge -->|cache hit| Cached(["Cached"])
+Edge -->|cache miss| App["App Runtime"]
+App --> DB["Primary DB"]
+classDef success fill:#0b1d0f,stroke:#46a758,color:#63c174;
+class Cached success;
+
+---
+
+\\`\\`\\`
+
+**Example: `variant: grid-2`**
+
+## \\`\\`\\`yaml
+
+layout: 4-mermaid
+variant: grid-2
+chart1: |
+flowchart LR
+Edge["Edge"] --> API["API"]
+API -->|ok| Fast(["Low Latency"])
+classDef success fill:#0b1d0f,stroke:#46a758,color:#63c174;
+class Fast success;
+chart2: |
+flowchart LR
+API["API"] --> Guard["Rate Limit"]
+Guard -->|blocked| Drop(["Dropped"])
+classDef danger fill:#2a1314,stroke:#e5484d,color:#ff6166;
+class Drop danger;
+
+---
+
+::title::
+
+# Traffic Paths
+
+::s1-title::
+Fast path
+
+::s1-body::
+Edge + API success flow.
+
+::s2-title::
+Blocked path
+
+::s2-body::
+Rate limit rejects abusive traffic.
+\\`\\`\\`
+
+---
+
+### 5-open
+
+Flexible layouts with open content areas for custom content (iframes, demos, etc.).
+
+#### `variant: title-space`
+
+Title at top (30%), open area below (70%).
+
+**Slots:**
+
+- `title` — Section title
+- `content` — Open area (any HTML/Vue)
+
+---
+
+#### `variant: title-2-spaces` / `title-3-spaces`
+
+Title at top, 2 or 3 open areas side by side below.
+
+**Slots:**
+
+- `title` — Section title
+- `space-1`, `space-2`, `space-3` — Open areas
+
+---
+
+#### `variant: list-space`
+
+Title + 5 list items on left (1/3), open area on right (2/3).
+
+**Slots:**
+
+- `title` — Section title
+- `item-1` through `item-5` — List items
+- `space` — Open area
+
+---
+
+### 6-quote
+
+#### `variant: center`
+
+Centered quote with attribution.
+
+**Slots:**
+
+- `quote` — Quote text
+- `author` — Attribution (name, title, company)
+
+```yaml
+---
+layout: 6-quote
+variant: center
+---
+
+::quote::
+The best way to predict the future is to build it.
+
+::author::
+— Guillermo Rauch, CEO of Vercel
+```
+
+---
+
+#### `variant: with-statements`
+
+2 statements on left (1/3), quote on right (2/3).
+
+**Slots:**
+
+- `s1-title`, `s1-body` — First statement
+- `s2-title`, `s2-body` — Second statement
+- `quote`, `author` — Quote content
+
+---
+
+### 7-number
+
+#### `variant: one`
+
+Single huge metric, centered.
+
+**Slots:**
+
+- `number` — The metric (e.g., "99.9%")
+- `label` — Description (e.g., "Uptime SLA")
+
+---
+
+#### `variant: two` / `variant: three`
+
+2 or 3 metrics side by side.
+
+**Slots:**
+
+- `number-1`, `label-1` — First metric
+- `number-2`, `label-2` — Second metric
+- `number-3`, `label-3` — Third metric (three only)
+
+---
+
+#### `variant: four-with-title`
+
+Statement on left (1/3), 2×2 grid of 4 metrics on right (2/3).
+
+**Slots:**
+
+- `title`, `subtitle` — Left side statement
+- `number-1`, `label-1` through `number-4`, `label-4` — Metrics
+
+---
+
+#### `variant: six`
+
+6 metrics in 3×2 grid.
+
+**Slots:**
+
+- `number-1`, `label-1` through `number-6`, `label-6`
+
+---
+
+#### `variant: two-with-source` / `three-with-source`
+
+2 or 3 metrics with source citations below each.
+
+**Slots:**
+
+- `number-1`, `label-1`, `source-1` — First metric with citation
+- `number-2`, `label-2`, `source-2` — Second metric
+- `number-3`, `label-3`, `source-3` — Third metric (three-with-source only)
+
+---
+
+### 8-special
+
+#### `variant: qa`
+
+Q&A slide with decorative left panel.
+
+**Structure:**
+
+- Left: Decorative quote bubble SVG + optional custom content
+- Right: Badge + up to 4 icon points (contact info, links, etc.)
+
+**Props:**
+
+- `badge` — Badge text (default: "Q&A")
+- `item1Icon`, `item2Icon`, `item3Icon`, `item4Icon` — Lucide icons
+
+**Slots:**
+
+- `left` — Optional content in left panel
+- `item-1`, `item-2`, `item-3`, `item-4` — Text next to each icon
+
+```yaml
+---
+layout: 8-special
+variant: qa
+badge: Questions?
+item1Icon: mail
+item2Icon: twitter
+---
+
+::item-1::
+hello@vercel.com
+
+::item-2::
+@vercel
+```
+
+---
+
+#### `variant: thank-you`
+
+Centered Vercel triangle + "Thank you" text. No slots.
+
+---
+
+#### `variant: splash`
+
+Centered Vercel triangle only. No slots.
+
+---
+
+### 9-utility
+
+Blank canvases for custom content.
+
+- `variant: blank` — Empty with frame
+- `variant: crosshairs` — Frame + crosshair decorations
+- `variant: full-grid` — Dense alignment grid
+
+Default slot accepts any content.
+
+---
+
+### 10-code
+
+All variants show code in a **code editor frame** with filename header.
+
+**IMPORTANT — Maximum lines of code (LOC) that fit without clipping:**
+
+| Size | Full variant | 2/3 variants (right-1, left-2, right-list, left-list) |
+| ---- | ------------ | ----------------------------------------------------- |
+| `xs` | 23 lines     | 19 lines                                              |
+| `sm` | 17 lines     | 14 lines                                              |
+| `md` | 14 lines     | 11 lines                                              |
+| `lg` | 12 lines     | 9 lines                                               |
+
+**Always count your code lines (including blank lines) and pick a `codeSize` that fits.** If the code exceeds the limit, it will be clipped at the bottom. Prefer trimming code to show only the essential parts rather than cramming everything in at `xs`.
+
+**Scrollable mode:** Set `scrollable: true` to allow vertical scrolling for longer code. This should NOT be the default — only use it when showing the complete code is essential and trimming would lose important context. Non-scrollable (clipped) code is the standard look.
+
+#### `variant: full`
+
+Full-width code, clipped at bottom.
+
+**Props:**
+
+- `filename` — Filename shown in header (e.g., `api/hello.ts`)
+- `codeSize` — `xs`, `sm` (default), `md`, `lg`
+- `scrollable` — `true` to enable vertical scrolling (default: `false`, code clips at bottom)
+
+**Slots:**
+
+- `code` — Fenced code block with syntax highlighting
+
+```yaml
+---
+layout: 10-code
+variant: full
+filename: api/hello.ts
+---
+
+::code::
+\\`\\`\\`ts
+export async function GET() {
+  return Response.json({ hello: 'world' })
+}
+\\`\\`\\`
+```
+
+---
+
+#### `variant: right-1`
+
+Statement on left (1/3), code on right (2/3).
+
+**Slots:**
+
+- `title`, `body` — Statement
+- `code` — Code block
+
+---
+
+#### `variant: left-2`
+
+Code on left (2/3), 2 statements on right (1/3).
+
+**Slots:**
+
+- `code` — Code block
+- `s1-title`, `s1-body` — First statement
+- `s2-title`, `s2-body` — Second statement
+
+---
+
+#### `variant: right-list` / `left-list`
+
+Code + title + 4 list items.
+
+**Slots:**
+
+- `code` — Code block
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items
+
+---
+
+### 11-promo
+
+#### `variant: two-statements`
+
+Badge + decorative grid + 2 statements.
+
+**Structure:**
+
+- Top: Badge
+- Middle: Decorative square grid
+- Bottom: 2 Statement blocks side by side
+
+**Props:**
+
+- `badge` — Badge text
+- `gridCols` — Grid columns (default: 14)
+- `gridRows` — Grid rows (default: 3)
+
+**Slots:**
+
+- `s1-title`, `s1-body`, `s1-tag` — First statement
+- `s2-title`, `s2-body`, `s2-tag` — Second statement
+
+---
+
+### playful
+
+Animated full-screen grid layouts.
+
+#### `variant: welcome`
+
+Static "▲ W E L C O M E" display. No configuration needed.
+
+---
+
+#### `variant: triangles`
+
+Random Vercel triangles fade in/out.
+
+**Props:**
+
+- `flashInterval` — ms between new triangles (default: 2500)
+- `fadeDuration` — ms for fade out (default: 4000)
+
+---
+
+#### `variant: values`
+
+Random Vercel values (FTW, DIG DEEP, etc.) fade in/out.
+
+Same props as triangles.
+
+---
+
+#### `variant: splitflap`
+
+Mechanical split-flap display animation.
+
+Use `<Flap>` components in the slide body:
+
+```yaml
+---
+layout: playful
+variant: splitflap
+---
+<Flap text="▲ VERCEL" :row="5" />
+<Flap text="SHIP FAST" :row="7" mono />
+```
+
+**Flap props:**
+
+- `text` — Text to display (max 16 chars). Use `▲` for Vercel icon.
+- `row` — Row number (1–9)
+- `startCol` — Starting column (auto-centers if omitted)
+- `mono` — Use monospace font (default: false)
+- `flipDuration` — ms per character flip (default: 120)
+- `staggerDelay` — ms between letters (default: 100)
+
+---
+
+### 12-youtube
+
+Embedded YouTube video in a **macOS browser frame** (same chrome as 3-screenshot). The browser bar always shows `youtube.com`. Uses privacy-enhanced embedding (`youtube-nocookie.com`).
+
+**Timestamp support:** Include `&t=SECONDS` in the URL to start the video at a specific time. The component auto-extracts `t=` or `start=` from the URL and passes it to the embed player.
+
+#### `variant: full`
+
+Full-width browser frame with embedded video, clipped at bottom.
+
+**Props:**
+
+- `url` — YouTube video URL (supports `youtube.com/watch?v=`, `youtu.be/`, `youtube.com/embed/`). Append `&t=SECONDS` to start at a specific timestamp.
+
+```yaml
+---
+layout: 12-youtube
+variant: full
+url: https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=166
+---
+```
+
+---
+
+#### `variant: left-list`
+
+Video in browser frame on left (1/2), title + 4 list items on right (1/2).
+
+**Props:**
+
+- `url` — YouTube video URL. Append `&t=SECONDS` to start at a specific timestamp.
+
+**Slots:**
+
+- `title` — Section title
+- `item-1`, `item-2`, `item-3`, `item-4` — List items
+
+```yaml
+---
+layout: 12-youtube
+variant: left-list
+url: https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=120
+---
+
+::title::
+Video Walkthrough
+
+::item-1::
+Step 1: Setup
+
+::item-2::
+Step 2: Configure
+
+::item-3::
+Step 3: Deploy
+
+::item-4::
+Step 4: Monitor
+```
+
+---
+
+## Offer Layouts
+
+Sales offer slides for customer proposals. All offer layouts are dark-themed with the Vercel design system. Data is passed via **frontmatter props** (not slots) for structured data like SKUs, details, and team members.
+
+---
+
+### offer-title
+
+Cover slide for a customer offer with title and team members.
+
+**Structure:**
+
+- Large title at top
+- 2×2 team member grid at bottom (name + role in monospace)
+
+**Props:**
+
+- `team1Name`–`team4Name` — Team member names
+- `team1Role`–`team4Role` — Team member roles (shown in monospace, muted)
+
+**Slots:**
+
+- `title` — Main heading (use `<br>` for line breaks)
+
+```yaml
+---
+layout: offer-title
+team1Name: Jane Smith
+team1Role: ACCOUNT MANAGER
+team2Name: John Doe
+team2Role: SOLUTIONS ENGINEER
+team3Name: Alice Chen
+team3Role: CSM
+team4Name: Bob Wilson
+team4Role: CRO
+---
+::title::
+# Acme Corp's<br>Vercel offer
+```
+
+---
+
+### offer-statement
+
+Badge + title on left, numbered points on right.
+
+**Structure:**
+
+- Left: Outline badge + large title
+- Right: Up to 4 numbered points (01–04) with title + body
+
+**Props:**
+
+- `badge` — Badge text (default: "OUR PRICING PHILOSOPHY")
+- `badgeColor` — Badge border color (default: "#A0A0A0")
+
+**Slots:**
+
+- `title` — Left side heading
+- `point-1-title`, `point-1-body` — First numbered point
+- `point-2-title`, `point-2-body` — Second numbered point
+- `point-3-title`, `point-3-body` — Third point
+- `point-4-title`, `point-4-body` — Fourth point
+
+```yaml
+---
+layout: offer-statement
+badge: OUR PRICING PHILOSOPHY
+---
+
+::title::
+Transparency<br>& predictability
+
+::point-1-title::
+Usage-based
+
+::point-1-body::
+Pay for only what you use
+
+::point-2-title::
+Product flexibility
+
+::point-2-body::
+One commit across products, shift spend where you need
+
+::point-3-title::
+Scales with you
+
+::point-3-body::
+The more you buy, the better your discount
+```
+
+---
+
+### offer-product-grid
+
+Product portfolio grid showing all Vercel SKUs organized by category.
+
+**Structure:**
+
+- Title + subtitle at top
+- Grid of product categories with individual SKU pills
+- Diagonal background pattern behind grid
+
+**Props:**
+
+- `categories` — Array of `{ title, products: [{ name }], highlighted? }` (has sensible defaults with all Vercel products)
+- `rows` — Array of index arrays defining grid layout (default: `[[0,1], [2,3,4], [5,6,7,8]]`)
+
+**Slots:**
+
+- `title` — Grid heading
+- `subtitle` — Subtitle text
+
+```yaml
+---
+layout: offer-product-grid
+---
+
+::title::
+Introducing Flexible Commitment
+
+::subtitle::
+Giving your team access to the entire Vercel product portfolio
+```
+
+---
+
+### offer-timeline
+
+Flex commit timeline visualization with checkbox grid.
+
+**Structure:**
+
+- Badge at top
+- Large headline (supports mixed white/muted text via HTML spans)
+- Month 1–12 timeline with animated checkbox grid + fade overlay
+
+**Props:**
+
+- `badge` — Badge text (default: "FLEX COMMIT")
+- `startLabel` — Left label (default: "MONTH 1")
+- `endLabel` — Right label (default: "MONTH 12")
+- `months` — 12-element array of boolean arrays for checkbox states
+
+**Slots:**
+
+- `title` — Headline (use `<span class="offer-tl-white">` and `<span class="offer-tl-muted">` for mixed styling)
+
+```yaml
+---
+layout: offer-timeline
+---
+
+::title::
+<span class="offer-tl-white">Swap SKUs anytime</span><span class="offer-tl-muted"> to align with<br>shifting needs and seasonality.</span>
+```
+
+---
+
+### offer-pricing
+
+Discount matrix on left, rate card on right.
+
+**Structure:**
+
+- Left: Title + 2×2 discount matrix (BASE/MODERATE/HIGH/BEST)
+- Right: Rate card table with diagonal background
+
+**Props:**
+
+- `badgeText` — Rate card badge (default: "FLEX COMMIT RATE CARD")
+- `footerText` — Rate card footer (default: "ENTIRE RATE CARD AVAILABLE WITH FULL PROPOSAL")
+- `skus` — Array of `{ name, listPrice, discountPrice }` (default: 3 placeholder SKUs)
+
+**Slots:**
+
+- `title` — Left side heading
+
+```yaml
+---
+layout: offer-pricing
+skus:
+  - name: Fluid Compute
+    listPrice: $0.18/GB-hr
+    discountPrice: $0.12/GB-hr
+  - name: Edge Requests
+    listPrice: $2/M
+    discountPrice: $1.40/M
+  - name: Bandwidth
+    listPrice: $0.15/GB
+    discountPrice: $0.10/GB
+---
+
+::title::
+Pricing that<br>scales with<br>you.
+```
+
+---
+
+### offer-roi
+
+Centered card with label/value rows and dotted leaders.
+
+**Structure:**
+
+- Centered rounded card with outline badge
+- Up to 3 key-value rows with dotted line between label and value
+
+**Props:**
+
+- `badge` — Card badge text (default: "ANTICIPATED QUANTIFIED VALUE")
+
+**Slots:**
+
+- `label`, `value` — First row (default: "ROI" / "$XM")
+- `label-2`, `value-2` — Second row (optional)
+- `label-3`, `value-3` — Third row (optional)
+
+```yaml
+---
+layout: offer-roi
+---
+
+::label::
+ROI
+
+::value::
+$2.5M
+
+::label-2::
+Annual savings
+
+::value-2::
+$500K
+```
+
+---
+
+### offer-details
+
+Header + key-value sidebar on left, rate card on right.
+
+**Structure:**
+
+- Header bar with customer name
+- Left: Key-value detail rows (flexible count)
+- Right: Rate card with diagonal background
+
+**Props:**
+
+- `headerText` — Header text (default: "[Customer name] offer")
+- `details` — Array of `{ label, value }` for the sidebar rows
+- `badgeText` — Rate card badge
+- `footerText` — Rate card footer
+- `skus` — Array of `{ name, listPrice, discountPrice }`
+
+```yaml
+---
+layout: offer-details
+headerText: Acme Corp offer
+details:
+  - label: Flex commit balance
+    value: $120K / YR
+  - label: Term
+    value: 2 YRS
+  - label: Support level
+    value: Enterprise
+  - label: Start date
+    value: Q1 2026
+skus:
+  - name: Fluid Compute
+    listPrice: $0.18/GB-hr
+    discountPrice: $0.12/GB-hr
+  - name: Edge Requests
+    listPrice: $2/M
+    discountPrice: $1.40/M
+  - name: Bandwidth
+    listPrice: $0.15/GB
+    discountPrice: $0.10/GB
+---
+<!-- Offer Details -->
+```
+
+---
+
+### offer-comparison
+
+Side-by-side comparison of 2–3 offer options, each with rate card.
+
+**Structure:**
+
+- Header bar with customer name
+- Equal-width columns, each with: option badge, balance/term KV rows, small rate card
+
+**Props:**
+
+- `headerText` — Header text (default: "[Customer name] offer comparison")
+- `options` — Array of `{ label, balance, term, skus: [{ name, listPrice, discountPrice }] }`
+
+```yaml
+---
+layout: offer-comparison
+headerText: Acme Corp offer comparison
+options:
+  - label: OPTION 1
+    balance: $100K / YR
+    term: 1 YR
+    skus:
+      - name: Fluid Compute
+        listPrice: $0.18
+        discountPrice: $0.15
+      - name: Edge Requests
+        listPrice: $2/M
+        discountPrice: $1.70/M
+  - label: OPTION 2
+    balance: $120K / YR
+    term: 2 YRS
+    skus:
+      - name: Fluid Compute
+        listPrice: $0.18
+        discountPrice: $0.12
+      - name: Edge Requests
+        listPrice: $2/M
+        discountPrice: $1.40/M
+---
+<!-- Offer Comparison -->
+```
+
+---
+
+### offer-before-after
+
+Side-by-side before/after comparison with colored badges and icon rows.
+
+**Structure:**
+
+- Left: Red "BEFORE STATE" badge + year + title + X-icon rows
+- Right: Green "AFTER STATE" badge + year + title + check-icon rows
+
+**Props:**
+
+- `beforeBadge` — Left badge text (default: "BEFORE STATE")
+- `afterBadge` — Right badge text (default: "AFTER STATE")
+- `beforeYear` — Left year label (default: "2025 & EARLIER")
+- `afterYear` — Right year label (default: "2026+")
+- `beforeColor` — Left badge color (default: red `#DA2F36`)
+- `afterColor` — Right badge color (default: green `#63C173`)
+
+**Slots:**
+
+- `before-title` — Left title (default: "MIU")
+- `after-title` — Right title (default: "Flex Commit")
+- `before-1` through `before-6` — Before rows (with X icon)
+- `after-1` through `after-6` — After rows (with check icon)
+
+```yaml
+---
+layout: offer-before-after
+---
+
+::before-title::
+MIU
+
+::after-title::
+Flex Commit
+
+::before-1::
+Separate commits per SKU
+
+::after-1::
+Max flexibility
+
+::before-2::
+Monthly burndown
+
+::after-2::
+Annual burndown
+
+::before-3::
+Shallow blanket discount
+
+::after-3::
+Private rate card
+```
diff --git a/presentations/getting-started-workflows-webinar/slides.md b/presentations/getting-started-workflows-webinar/slides.md
new file mode 100644
index 0000000..33a3631
--- /dev/null
+++ b/presentations/getting-started-workflows-webinar/slides.md
@@ -0,0 +1,679 @@
+---
+theme: ./
+title: Getting Started with Vercel Workflows
+footerLogo: wordmark
+footerTitle: true
+layout: 1-title
+variant: title
+subtitle1Image: https://vercel.com/api/www/avatar/d86685cc0ac958594071ba9cf94e5c50a3551011
+subtitle2Icon: code
+subtitle3Icon: cake
+subtitle4Icon: bot
+subtitleSize: lg
+---
+
+::title::
+# Getting Started with Vercel Workflows
+
+::subtitle-1::
+Pranay Prakash, Head of Workflows
+
+::subtitle-2::
+Long-running backends in plain TypeScript
+
+::subtitle-3::
+Demo-first walkthrough
+
+::subtitle-4::
+Streaming, agents, and GA
+
+<!--
+- Quick intro.
+- This is a demo-first talk.
+- I want to show one real app, then explain why the model works.
+-->
+---
+layout: 2-statement
+variant: large
+---
+
+::title::
+# The code you run on day one can be the code you ship
+
+::subtitle::
+Workflow is about removing the whole “now productionize it with queues, workers, schedulers, and state machines” phase.
+
+<!--
+- This is the real thesis from the mock run.
+- We are used to demo first, then productionizing later.
+- Workflow is trying to collapse that gap.
+-->
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Demo First"
+---
+
+::title::
+Let's jump straight into the birthday card app
+
+::subtitle::
+Then we will break apart the code, the runtime model, and how that extends to agents.
+
+<!--
+- I want to go straight into the demo.
+- Then I will come back and explain how it works.
+-->
+---
+layout: 2-statement
+variant: title-4
+tagPosition: inline
+---
+
+::title::
+# Birthday card generator
+
+::s1-tag::
+<Tag color="gray">Input</Tag>
+
+::s1-title::
+One request
+
+::s1-body::
+Describe the card, pick a birthday, add guests, and send.
+
+::s2-tag::
+<Tag color="gray">Parallel</Tag>
+
+::s2-title::
+Image + message
+
+::s2-body::
+Generate both pieces together, then stream progress to the UI.
+
+::s3-tag::
+<Tag color="gray">Human</Tag>
+
+::s3-title::
+RSVP signatures
+
+::s3-body::
+Guests click a webhook link to sign the card and resume the workflow.
+
+::s4-tag::
+<Tag color="gray">Time</Tag>
+
+::s4-title::
+Deliver later
+
+::s4-body::
+Sleep until the birthday, then send the final postcard.
+
+<!--
+- This app is playful, but the async shape is very real.
+- One request, parallel work, human input, then a delayed send.
+- That is enough to show the whole workflow model.
+-->
+---
+layout: 4-mermaid
+variant: title-image
+chart: |
+  flowchart LR
+    A["User submits form"] --> B["POST /api/generate"]
+    B --> C["start(generateBirthdayCard)"]
+    C --> D["generate prompts"]
+    D --> E["generate image"]
+    D --> F["generate message"]
+    C --> G["send RSVP emails"]
+    G --> H["wait for webhook clicks"]
+    H --> I["sleep until birthday"]
+    I --> J["send final postcard"]
+    classDef accent fill:#111111,stroke:#666666,color:#ffffff;
+    class C,E,F,G,H,I,J accent;
+---
+
+::title::
+# One workflow, multiple async patterns
+
+<!--
+- One request triggers the entire flow.
+- We do immediate work, then wait on people, then wait on time.
+- This is why the demo is useful: it covers the main primitives in one story.
+-->
+---
+layout: 2-statement
+variant: cols-4
+tagPosition: above
+---
+
+::title::
+# What to watch during the live demo
+
+::s1-tag::
+<Tag color="gray">1</Tag>
+
+::s1-title::
+Live progress
+
+::s1-body::
+The UI updates as the workflow runs, before the final result is done.
+
+::s2-tag::
+<Tag color="gray">2</Tag>
+
+::s2-title::
+Parallel steps
+
+::s2-body::
+Image and message generation happen at the same time.
+
+::s3-tag::
+<Tag color="gray">3</Tag>
+
+::s3-title::
+Suspension
+
+::s3-body::
+The workflow actually stops running while it waits for RSVP clicks.
+
+::s4-tag::
+<Tag color="gray">4</Tag>
+
+::s4-title::
+Resumption
+
+::s4-body::
+The workflow wakes back up exactly where it left off.
+
+<!--
+- This is the checklist to anchor the demo.
+- Especially call out suspend/resume and live progress.
+-->
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "After The Demo"
+---
+
+::title::
+Now let's break apart what actually happened
+
+::subtitle::
+The interesting part is how little infrastructure code is needed to model a multi-step, multi-day process.
+
+<!--
+- After the demo, move right into the code.
+- The key message is how little extra plumbing there is.
+-->
+---
+layout: 10-code
+variant: left-2
+filename: app/api/generate/generate-birthday-card.ts
+codeSize: xs
+---
+
+::code::
+```ts
+export const generateBirthdayCard = async (...) => {
+  'use workflow';
+
+  const { textPrompt, imagePrompt } = await generatePrompts(prompt);
+
+  const [image, text] = await Promise.all([
+    generateImage(imagePrompt),
+    generateMessage(textPrompt),
+  ]);
+
+  const webhooks = rsvpEmails.map(() => createWebhook());
+  await Promise.all(rsvpEmails.map((email, i) =>
+    requestRsvp(email, webhooks[i].url, image, text)
+  ));
+
+  const rsvpReplies = await Promise.all(webhooks);
+  await sleep(birthday!);
+  await sendRecipientEmail({ recipientEmail, cardImage: image, cardText: text, rsvpReplies });
+};
+```
+
+::s1-title::
+This reads like product logic
+
+::s1-body::
+It is top-to-bottom business logic, not a map of workers, queues, and schedulers.
+
+::s2-title::
+This is the main abstraction
+
+::s2-body::
+A workflow is just long-running code with explicit async boundaries.
+
+<!--
+- This is the most important code slide.
+- It matches how I would whiteboard the feature.
+- That is the real product value.
+-->
+---
+layout: 10-code
+variant: right-list
+filename: app/api/generate/route.ts + app/api/generate/[runId]/stream/route.ts
+codeSize: xs
+---
+
+::code::
+```ts
+const run = await start(generateBirthdayCard, [...]);
+
+return new Response(run.readable, {
+  headers: {
+    'x-workflow-run-id': run.runId,
+  },
+});
+
+const stream = run.getReadable<string>({ startIndex });
+return new Response(stream);
+```
+
+::title::
+# Two routes, not an orchestration system
+
+::item-1::
+One route starts the workflow
+
+::item-2::
+One route resumes the stream
+
+::item-3::
+No webhook correlation database
+
+::item-4::
+No worker app to coordinate separately
+
+<!--
+- This is something I stressed in the mock.
+- One start route.
+- One stream resume route.
+- Not a whole separate backend architecture.
+-->
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# Hooks and webhooks are the most powerful primitive here
+
+::s1-tag::
+<Tag color="gray">Webhook</Tag>
+
+::s1-title::
+One-time public URL
+
+::s1-body::
+Perfect for email links, approvals, signatures, and “click to continue” flows.
+
+::s2-tag::
+<Tag color="gray">Hook</Tag>
+
+::s2-title::
+Resume from your own code
+
+::s2-body::
+Use a token to resume from Slack, GitHub, internal events, or another route.
+
+::s3-tag::
+<Tag color="gray">Pattern</Tag>
+
+::s3-title::
+Event bus without extra state
+
+::s3-body::
+One workflow can naturally map to one Slack thread, one PR, one task, or one onboarding flow.
+
+<!--
+- In the live walkthrough, hooks/webhooks were a much bigger part of the story.
+- Emphasize that this is not just the birthday demo.
+- This is how we model PR comments, Slack threads, and other event-driven flows.
+-->
+---
+layout: 2-statement
+variant: cols-2
+tagPosition: inline
+---
+
+::title::
+# Sleep is more than a timer
+
+::s1-tag::
+<Tag color="gray">Delay</Tag>
+
+::s1-title::
+Wait for days or weeks
+
+::s1-body::
+The workflow suspends fully and resumes later. No server is sitting there “waiting.”
+
+::s2-tag::
+<Tag color="gray">Timeout</Tag>
+
+::s2-title::
+Race hooks vs sleep
+
+::s2-body::
+“Wait for a webhook, but only for 24 hours” becomes a simple pattern instead of custom infrastructure.
+
+<!--
+- Talk about sleep as a real long-running primitive.
+- Also land the timeout pattern because that felt useful in the mock.
+-->
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# What `use workflow` and `use step` are actually doing
+
+::s1-tag::
+<Tag color="gray">Workflow</Tag>
+
+::s1-title::
+Deterministic replay
+
+::s1-body::
+The workflow function replays quickly using the event log instead of redoing side effects.
+
+::s2-tag::
+<Tag color="gray">Step</Tag>
+
+::s2-title::
+Full Node.js boundary
+
+::s2-body::
+Steps run the real work, serialize inputs and outputs, and become retryable execution units.
+
+::s3-tag::
+<Tag color="gray">Result</Tag>
+
+::s3-title::
+Code stays simple
+
+::s3-body::
+You get durability without turning your code into a state machine DSL.
+
+<!--
+- This is where I explain the runtime model.
+- Workflow replays, steps do the work.
+- Event log is what makes suspend/resume possible.
+-->
+---
+layout: 4-mermaid
+variant: left-list
+chart: |
+  flowchart TD
+    A["Workflow starts"] --> B["Call step"]
+    B --> C["Step runs"]
+    C --> D["Inputs + outputs logged"]
+    D --> E["Workflow replays"]
+    E --> F["Resume from event log"]
+    F --> G["Wait on hook / sleep"]
+    G --> H["Replay and continue"]
+    classDef accent fill:#111111,stroke:#666666,color:#ffffff;
+    class B,C,D,E,F,G,H accent;
+---
+
+::title::
+# The event log powers both durability and observability
+
+::item-1::
+Every step has inputs and outputs
+
+::item-2::
+Parallel steps show up naturally
+
+::item-3::
+Replay and recovery come from the same system
+
+::item-4::
+You get the audit trail without building it yourself
+
+<!--
+- This is a key point from the walkthrough.
+- Observability is not bolted on.
+- It comes from the same event log that powers replay.
+-->
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# Streaming is durable too
+
+::s1-tag::
+<Tag color="gray">UI</Tag>
+
+::s1-title::
+Live progress
+
+::s1-body::
+Steps write progress to a workflow stream so the client sees updates before the run finishes.
+
+::s2-tag::
+<Tag color="gray">Recovery</Tag>
+
+::s2-title::
+Resume from chunk index
+
+::s2-body::
+If the page reloads or the connection drops, the client can reconnect and continue from where it left off.
+
+::s3-tag::
+<Tag color="gray">Scale</Tag>
+
+::s3-title::
+Same primitive for agents
+
+::s3-body::
+Simple apps send progress JSON; agents can stream every token, tool call, and result.
+
+<!--
+- This is one of the biggest changes from the old deck.
+- Don't just say “streaming exists.”
+- Say “the stream is durable and resumable.”
+-->
+---
+layout: 10-code
+variant: left-2
+filename: flight-booking-app/workflows/chat/index.ts
+codeSize: xs
+---
+
+::code::
+```ts
+export async function chat(initialMessages: UIMessage[]) {
+  'use workflow';
+
+  const writable = getWritable<UIMessageChunk>();
+
+  const agent = new DurableAgent({
+    model: 'bedrock/claude-haiku-4-5-20251001-v1',
+    system: FLIGHT_ASSISTANT_PROMPT,
+    tools: flightBookingTools,
+  });
+
+  await agent.stream({
+    messages,
+    writable,
+    preventClose: true,
+  });
+}
+```
+
+::s1-title::
+An agent is basically just a workflow
+
+::s1-body::
+LLM calls, tool calls, retries, and long-running state all fit the same model.
+
+::s2-title::
+Why DurableAgent matters
+
+::s2-body::
+It gives agent builders a native workflow abstraction instead of a fragile loop around `streamText`.
+
+<!--
+- This matches the way I explained agents in the mock.
+- Don't treat agents as separate.
+- They are just a natural long-running workflow.
+-->
+---
+layout: 2-statement
+variant: cols-4
+tagPosition: above
+---
+
+::title::
+# Getting started is intentionally small
+
+::s1-tag::
+<Tag color="gray">Setup</Tag>
+
+::s1-title::
+Wrap the framework
+
+::s1-body::
+In Next.js, the setup is basically `withWorkflow(nextConfig)`.
+
+::s2-tag::
+<Tag color="gray">Adoption</Tag>
+
+::s2-title::
+Start with one painful path
+
+::s2-body::
+Retries, approvals, delayed sends, or multi-step AI are perfect first candidates.
+
+::s3-tag::
+<Tag color="gray">Breadth</Tag>
+
+::s3-title::
+Many frameworks
+
+::s3-body::
+Next.js, Astro, Express, Fastify, Hono, Nitro, Nuxt, SvelteKit, Vite, and more.
+
+::s4-tag::
+<Tag color="gray">Launch</Tag>
+
+::s4-title::
+Python too
+
+::s4-body::
+GA is about broadening where the model applies, not just polishing one API.
+
+<!--
+- Keep the setup story lightweight.
+- The main adoption advice is: pick one ugly async path and move it over.
+- Mention framework breadth and Python at GA.
+-->
+---
+layout: 2-statement
+variant: grid-4
+tagPosition: above
+---
+
+::title::
+# Why GA matters
+
+::s1-tag::
+<Tag color="gray">Internal</Tag>
+
+::s1-title::
+Used across Vercel agents
+
+::s1-body::
+This is no longer a niche experiment. It is part of how Vercel runs long-lived agent systems.
+
+::s2-tag::
+<Tag color="gray">Customer</Tag>
+
+::s2-title::
+Flora
+
+::s2-body::
+A creative agent workflow where the core product experience is built on workflows.
+
+::s3-tag::
+<Tag color="gray">Customer</Tag>
+
+::s3-title::
+Durable
+
+::s3-body::
+Workflow-powered onboarding and generated customer sites as part of a real production flow.
+
+::s4-tag::
+<Tag color="gray">Scale</Tag>
+
+::s4-title::
+5,000+ step runs
+
+::s4-body::
+The model is not limited to toy demos. It is designed for serious, high-step, high-parallelism workloads.
+
+<!--
+- This slide should feel like proof.
+- Internal usage.
+- Real customers.
+- Real scale.
+-->
+---
+layout: 2-statement
+variant: large
+---
+
+::title::
+# Durable systems should be easy to explain from the code itself
+
+::subtitle::
+If your team can read the workflow top to bottom, they can build it, debug it, and trust it in production.
+
+<!--
+- This is the closing message.
+- Reliability matters, but shared understanding matters too.
+-->
+---
+layout: 8-special
+variant: qa
+badge: Questions?
+item1Icon: mail
+item2Icon: github
+item3Icon: book-open
+item4Icon: bot
+---
+
+::left::
+## Thank you
+
+Let's talk about the workflows you want to make durable next.
+
+::item-1::
+pranay@vercel.com
+
+::item-2::
+github.com/vercel/workflow-examples
+
+::item-3::
+useworkflow.dev
+
+::item-4::
+Hooks, streaming, agents, and GA
+
+<!--
+- Invite questions on adoption.
+- Invite questions on hooks, streaming, and agents.
+- If needed, seed with: what is a good first workflow candidate?
+-->
diff --git a/presentations/getting-started-workflows-webinar/slides.with-notes.bak b/presentations/getting-started-workflows-webinar/slides.with-notes.bak
new file mode 100644
index 0000000..598738a
--- /dev/null
+++ b/presentations/getting-started-workflows-webinar/slides.with-notes.bak
@@ -0,0 +1,793 @@
+---
+theme: ./
+title: Getting Started with Vercel Workflows
+footerLogo: wordmark
+footerTitle: true
+layout: 1-title
+variant: title
+subtitle1Image: https://vercel.com/api/www/avatar/d86685cc0ac958594071ba9cf94e5c50a3551011
+subtitle2Icon: code
+subtitleSize: lg
+---
+
+::title::
+# Getting Started with Vercel Workflows
+
+::subtitle-1::
+Pranay Prakash, Head of Workflows
+
+::subtitle-2::
+Durable backends in plain TypeScript
+
+<!--
+Open by framing the session around a very simple promise: long-running backends should not require an infrastructure scavenger hunt. Say that this webinar is about how to keep writing application code even when the work spans time, failures, model calls, and human input. Briefly introduce yourself, then tell the audience they will see one playful but surprisingly realistic demo app that exercises the exact kinds of async edges teams usually struggle with.
+-->
+---
+---
+layout: 2-statement
+variant: large
+---
+
+::title::
+# Long-running backends should feel like writing application code
+
+::subtitle::
+Not stitching together queues, retries, schedulers, and state machines by hand.
+
+<!--
+Use this slide as the thesis for the whole talk. Mention the typical picture people have in their heads when they hear "durable workflow": queues, workers, dead-letter handling, cron, retry settings, some dashboard in a different tool, and a lot of glue code. Then contrast that with the promise of Workflow: the orchestration is visible directly in the TypeScript they already know how to read.
+-->
+---
+---
+layout: 1-title
+variant: agenda
+badge: Today's Flow
+---
+
+::item-1::
+Why async systems get messy fast
+
+::item-2::
+The Workflow mental model
+
+::item-3::
+Live demo: birthday card generator
+
+::item-4::
+What durability looks like in code
+
+::item-5::
+Human input, waiting, and resuming
+
+::item-6::
+Patterns beyond one demo app
+
+::item-7::
+How to adopt Workflow incrementally
+
+::item-8::
+Q&A
+
+<!--
+Set expectations for the pacing. Tell the audience the first half is about the mental model and one live demo, and the second half is about how the same model scales to more serious cases like approvals, agents, and framework integrations. Mention that you will come back to a practical migration recipe near the end so nobody has to reverse-engineer the "how do I start" question from the examples.
+-->
+---
+---
+layout: 2-statement
+variant: title-3
+tagPosition: inline
+---
+
+::title::
+# Why this matters
+
+::s1-tag::
+<Tag color="gray">Today</Tag>
+
+::s1-title::
+Async code is everywhere
+
+::s1-body::
+Background jobs, approval flows, delayed sends, retries, and agent loops show up in almost every modern app.
+
+::s2-tag::
+<Tag color="gray">Pain</Tag>
+
+::s2-title::
+The usual stack sprawls
+
+::s2-body::
+Queues, workers, cron, retry logic, and state tracking get split across services and become harder to reason about.
+
+::s3-tag::
+<Tag color="gray">Shift</Tag>
+
+::s3-title::
+Durability moves into your code
+
+::s3-body::
+Workflow turns plain TypeScript functions into resilient, observable processes without forcing a rearchitecture.
+
+<!--
+Land the pain clearly here. Good phrasing is: "The hard part is not writing the one happy-path async function. The hard part is everything that happens after the first timeout, retry, deploy, approval, or delayed send." Call out AI agents specifically as something that makes the problem more urgent because they combine tool calls, long runtimes, state, and human checkpoints.
+-->
+---
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# What you'll learn in this session
+
+::s1-tag::
+<Tag color="gray">Core</Tag>
+
+::s1-title::
+Two directives
+
+::s1-body::
+How `use workflow` and `use step` convert ordinary functions into durable execution boundaries.
+
+::s2-tag::
+<Tag color="gray">Practical</Tag>
+
+::s2-title::
+One real product flow
+
+::s2-body::
+We will build the mental model through a birthday card app with generation, approvals, waiting, and delivery.
+
+::s3-tag::
+<Tag color="gray">Adoption</Tag>
+
+::s3-title::
+One migration recipe
+
+::s3-body::
+How to take an existing async path or AI agent and convert it into a workflow in minutes.
+
+<!--
+Mirror the public webinar framing here. Say that the entire session can be reduced to three questions: what are the two directives, what does a real workflow look like, and how do I migrate one of my own flows without a rewrite. That sentence gives the audience a clean structure to hold onto.
+-->
+---
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Part 1 of 4"
+---
+
+::title::
+The fastest way to explain Workflow is through one product story
+
+::subtitle::
+We are going to use a playful app so the system design stays memorable.
+
+<!--
+Transition into the demo setup. Explain that the birthday card generator is intentionally whimsical, but the async requirements are not whimsical at all. It has the same ingredients as many internal tools and production features: user-triggered work, multiple model calls, outbound email, waiting on external events, and delayed completion.
+-->
+---
+---
+layout: 2-statement
+variant: title-3
+tagPosition: inline
+---
+
+::title::
+# Demo app: birthday card generator
+
+::s1-tag::
+<Tag color="gray">Parallel</Tag>
+
+::s1-title::
+Two AI tasks at once
+
+::s1-body::
+Generate an image and a message in parallel from one user prompt.
+
+::s2-tag::
+<Tag color="gray">Human Input</Tag>
+
+::s2-title::
+RSVPs as workflow events
+
+::s2-body::
+Invite friends, wait for replies, and resume the flow when real people interact.
+
+::s3-tag::
+<Tag color="gray">Scheduling</Tag>
+
+::s3-title::
+Deliver at the right moment
+
+::s3-body::
+Pause until the birthday, then send the final card and RSVP summary to the recipient.
+
+<!--
+Walk through the app shape in plain language. A user describes the kind of card they want, the app generates both an image and a message, invites friends to RSVP, waits until the birthday, and then sends the completed card to the recipient. Emphasize that this is already enough to demonstrate parallel work, human-in-the-loop behavior, and time-based scheduling in one cohesive story.
+-->
+---
+---
+layout: 4-mermaid
+variant: title-image
+chart: |
+  flowchart LR
+    A["User submits prompt"] --> B["POST /api/generate"]
+    B --> C["start(generateBirthdayCard)"]
+    C --> D["generatePrompts()"]
+    D --> E["generateImage()"]
+    D --> F["generateMessage()"]
+    C --> G["requestRsvp()"]
+    G --> H["createWebhook() waits for replies"]
+    H --> I["sleep(until birthday)"]
+    I --> J["sendRecipientEmail()"]
+    classDef accent fill:#111111,stroke:#666666,color:#ffffff;
+    class C,E,F,G,H,I,J accent;
+---
+
+::title::
+# One workflow, multiple real-world async patterns
+
+<!--
+Read the flow left to right. Avoid over-explaining the diagram. The point is to show that one user action fans out into multiple steps and then pauses at meaningful moments. Say something like: "If you squint, this could be onboarding, procurement approval, content generation, or any agent that needs tools plus waiting."
+-->
+---
+---
+layout: 10-code
+variant: right-list
+filename: app/api/generate/route.ts
+codeSize: sm
+---
+
+::code::
+```ts
+export const POST = async (request: Request) => {
+  const body = await request.json();
+
+  const run = await start(generateBirthdayCard, [
+    body.prompt,
+    body.recipientEmail,
+    body.rsvpEmails,
+    new Date(body.eventDate),
+  ]);
+
+  const values = await run.returnValue;
+  return NextResponse.json(values);
+};
+```
+
+::title::
+# Workflow starts from a normal route
+
+::item-1::
+No separate worker app
+
+::item-2::
+No custom queue producer
+
+::item-3::
+Your API returns workflow output
+
+::item-4::
+The call site stays easy to read
+
+<!--
+This is where you make the first important emotional point for developers: they do not need a second app or a dedicated queue producer to begin. Point out that the route receives a request, calls `start(...)`, waits for the return value, and responds normally. If you want a short memorable line, use: "The workflow enters through the same front door as the rest of your app."
+-->
+---
+---
+layout: 10-code
+variant: left-2
+filename: app/api/generate/generate-birthday-card.ts
+codeSize: xs
+---
+
+::code::
+```ts
+export const generateBirthdayCard = async (...) => {
+  'use workflow';
+
+  const { textPrompt, imagePrompt } = await generatePrompts(prompt);
+
+  const [image, text] = await Promise.all([
+    generateImage(imagePrompt),
+    generateMessage(textPrompt),
+  ]);
+
+  const webhooks = rsvpEmails.map(() => createWebhook());
+  await Promise.all(rsvpEmails.map((email, i) =>
+    requestRsvp(email, webhooks[i].url)
+  ));
+
+  const rsvpReplies = await Promise.all(webhooks);
+  await sleep(birthday!);
+  await sendRecipientEmail({ recipientEmail, cardImage: image, cardText: text, rsvpReplies });
+};
+```
+
+::s1-title::
+`use workflow`
+
+::s1-body::
+This function becomes the durable orchestrator for the whole flow.
+
+::s2-title::
+Read it top to bottom
+
+::s2-body::
+The control flow stays understandable even though the work spans time, models, emails, and human actions.
+
+<!--
+Spend a little extra time here because this is the heart of the mental model. Read the orchestration top to bottom and narrate it as a story, not as syntax. Generate prompts, run image and text generation in parallel, fan out RSVP requests, wait for responses, sleep until the event date, then send the final email. Call out that the source reads like the product requirement itself. Mention the small demo hack too: the birthday wait is shortened so the audience can see the pause-resume behavior live.
+-->
+---
+---
+layout: 10-code
+variant: right-list
+filename: app/api/generate/generate-image.ts + generate-message.ts
+codeSize: sm
+---
+
+::code::
+```ts
+export const generateImage = async (prompt: string) => {
+  'use step';
+  const { files } = await generateText({
+    model: 'google/gemini-2.5-flash-image',
+    prompt,
+  });
+  return files.at(0);
+};
+
+export const generateMessage = async (prompt: string) => {
+  'use step';
+  const { text } = await generateText({
+    model: 'openai/gpt-5-nano',
+    prompt,
+  });
+  return text;
+};
+```
+
+::title::
+# Each async boundary becomes explicit
+
+::item-1::
+Model calls are isolated into steps
+
+::item-2::
+Retries happen at the right boundary
+
+::item-3::
+Outputs are captured per step
+
+::item-4::
+Observability matches the code you wrote
+
+<!--
+Now explain why the step boundary matters. The point is not only retries. The point is that each important side effect gets a name, an execution boundary, and its own observability. Mention that model calls are great examples because they are expensive, failure-prone, and semantically important enough that teams want to see them as distinct units in production.
+-->
+---
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Live Demo"
+---
+
+::title::
+Switch from slides to the app
+
+::subtitle::
+The goal is not just to generate a card. The goal is to watch a durable workflow move through real states.
+
+<!--
+This is your cue to leave the deck. Take five to ten minutes here depending on energy and audience engagement. Keep the structure tight: fill the form, submit the workflow, show logs or workflow progress, point out the RSVP stage, and show how the flow resumes instead of restarting. If the demo feels slow, narrate the expected next state and keep momentum.
+-->
+---
+---
+layout: 2-statement
+variant: cols-4
+tagPosition: above
+---
+
+::title::
+# What to watch during the demo
+
+::s1-tag::
+<Tag color="gray">1</Tag>
+
+::s1-title::
+Start
+
+::s1-body::
+Submit one prompt and kick off the workflow from the UI.
+
+::s2-tag::
+<Tag color="gray">2</Tag>
+
+::s2-title::
+Parallel work
+
+::s2-body::
+Image and message generation can happen together.
+
+::s3-tag::
+<Tag color="gray">3</Tag>
+
+::s3-title::
+Pause
+
+::s3-body::
+The workflow waits for RSVP clicks and for the birthday delay.
+
+::s4-tag::
+<Tag color="gray">4</Tag>
+
+::s4-title::
+Resume
+
+::s4-body::
+The final email sends only after the required external events complete.
+
+<!--
+If you return to this slide before or after the live run, use it as a checklist. The audience does not need every implementation detail; they need to notice four state changes: start, parallel work, pause, and resume. If the live demo goes perfectly, this slide helps you summarize it. If the live demo is messy, this slide helps you recover and restate the intended behavior.
+-->
+---
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Part 2 of 4"
+---
+
+::title::
+What just happened is the product story
+
+::subtitle::
+Now let's turn that story into a reusable mental model you can apply to your own app.
+
+<!--
+Bring the audience back from the UI into the abstraction. Say that the real value of the demo was not the birthday card itself; it was seeing a durable process that could safely move across asynchronous boundaries without turning into a collection of disconnected systems.
+-->
+---
+---
+layout: 2-statement
+variant: title-4
+tagPosition: inline
+---
+
+::title::
+# Four primitives to remember
+
+::s1-tag::
+<Tag color="gray">Entrypoint</Tag>
+
+::s1-title::
+`use workflow`
+
+::s1-body::
+Marks the durable orchestrator.
+
+::s2-tag::
+<Tag color="gray">Boundary</Tag>
+
+::s2-title::
+`use step`
+
+::s2-body::
+Marks retryable units of work.
+
+::s3-tag::
+<Tag color="gray">External Event</Tag>
+
+::s3-title::
+`createWebhook`
+
+::s3-body::
+Lets humans or systems resume a waiting workflow.
+
+::s4-tag::
+<Tag color="gray">Time</Tag>
+
+::s4-title::
+`sleep`
+
+::s4-body::
+Lets a workflow pause and continue later without custom schedulers.
+
+<!--
+Make this a short mnemonic slide. `use workflow` is the story. `use step` is the durable boundary. `createWebhook` is how the outside world can re-enter the story. `sleep` is how time becomes part of the story without cron glue. If you want, ask the audience to remember exactly those four names because everything else builds on them.
+-->
+---
+---
+layout: 4-mermaid
+variant: left-list
+chart: |
+  flowchart TD
+    A["Workflow begins"] --> B["Step succeeds"]
+    B --> C["State + output recorded"]
+    C --> D["Next step runs"]
+    D --> E{"Failure?"}
+    E -->|yes| F["Retry only failed step"]
+    E -->|no| G["Continue forward"]
+    G --> H["Pause on webhook or sleep"]
+    H --> I["Resume without replaying completed work"]
+    classDef accent fill:#111111,stroke:#666666,color:#ffffff;
+    class B,C,D,F,H,I accent;
+---
+
+::title::
+# The event log is the superpower
+
+::item-1::
+Completed work is persisted
+
+::item-2::
+Retries target the failing boundary
+
+::item-3::
+Pauses become first-class state
+
+::item-4::
+Recovery does not mean starting over
+
+<!--
+This is the most conceptual slide in the deck. Explain that durability is really about what the system remembers. Completed work is recorded, failed work can be retried at the correct boundary, and waiting is treated as a first-class state rather than a weird edge case. Avoid going too deep into implementation internals unless the audience asks; the main takeaway is that recovery does not mean replaying everything from the beginning.
+-->
+---
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# Why this feels different from the usual stack
+
+::s1-tag::
+<Tag color="gray">Less Glue</Tag>
+
+::s1-title::
+Fewer moving parts
+
+::s1-body::
+You are not wiring queue producers, workers, retry policies, and schedulers as separate systems.
+
+::s2-tag::
+<Tag color="gray">More Clarity</Tag>
+
+::s2-title::
+Code matches runtime
+
+::s2-body::
+The observable units in the platform line up with the functions and steps in your source code.
+
+::s3-tag::
+<Tag color="gray">Safer AI</Tag>
+
+::s3-title::
+Agents become practical
+
+::s3-body::
+Long-running tool loops, approvals, and resumable streams stop being one-off infrastructure projects.
+
+<!--
+Connect back to developer ergonomics. Say that the reason Workflow feels good is not magic; it is alignment. The code, the runtime boundaries, and the observable events all map to each other. That alignment removes a lot of accidental complexity. This is also a good place to say that AI agents especially benefit because long-lived tool loops and approvals stop feeling like bespoke infrastructure work.
+-->
+---
+---
+layout: 2-statement
+variant: transition
+transitionLabel: "Part 3 of 4"
+---
+
+::title::
+The birthday card app is one example, not the whole story
+
+::subtitle::
+Once the mental model clicks, the same approach applies to agent patterns, framework integrations, and production workflows.
+
+<!--
+Use this slide to widen the lens. A good phrasing is: "Once you trust the mental model on a fun app, you can apply it to the serious stuff." That sets up the repo-tour section and tells the audience this is not a niche pattern for a toy demo.
+-->
+---
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# More examples from this repo
+
+::s1-tag::
+<Tag color="gray">Patterns</Tag>
+
+::s1-title::
+AI SDK workflow patterns
+
+::s1-body::
+Sequential, parallel, routing, orchestrator-worker, and evaluator loop patterns built on top of Workflow.
+
+::s2-tag::
+<Tag color="gray">Agents</Tag>
+
+::s2-title::
+Flight booking app
+
+::s2-body::
+A durable AI agent with tools, multi-turn state, retries, and stream reconnection.
+
+::s3-tag::
+<Tag color="gray">Reach</Tag>
+
+::s3-title::
+Framework integrations
+
+::s3-body::
+The examples repo already shows Workflow across Next.js, Astro, Hono, Nitro, Nuxt, SvelteKit, and Vite.
+
+<!--
+Do a compact second demo or repo tour here. Show `ai-sdk-workflow-patterns` if you want to talk about sequential, parallel, routing, and evaluator-loop patterns. Show `flight-booking-app` if you want to emphasize durable agents, tools, and multi-turn state. Keep this section shorter than the birthday card demo; it should feel like expansion, not a second full talk.
+-->
+---
+---
+layout: 2-statement
+variant: title-3
+tagPosition: inline
+---
+
+::title::
+# How to adopt Workflow incrementally
+
+::s1-tag::
+<Tag color="gray">Start Small</Tag>
+
+::s1-title::
+Pick one async path
+
+::s1-body::
+Choose a flow that already hurts: approvals, retries, delayed sends, or multi-step AI processing.
+
+::s2-tag::
+<Tag color="gray">Draw Boundaries</Tag>
+
+::s2-title::
+Mark the expensive edges
+
+::s2-body::
+Put model calls, external APIs, email sends, and side effects behind `use step`.
+
+::s3-tag::
+<Tag color="gray">Replace Glue</Tag>
+
+::s3-title::
+Keep your app, remove orchestration
+
+::s3-body::
+Start the workflow from your existing route or handler and let the platform manage durability underneath.
+
+<!--
+This is where you make the story actionable for people who are interested but cautious. Tell them not to "workflow-ify" their entire architecture at once. Instead, pick the one async path that already causes incidents, complexity, or product hesitation. Approvals, retries, delayed notifications, and multi-step AI calls are perfect starting points because the pain is usually visible already.
+-->
+---
+---
+layout: 10-code
+variant: right-list
+filename: next.config.ts
+codeSize: sm
+---
+
+::code::
+```ts
+import { withWorkflow } from 'workflow/next';
+
+const nextConfig = {};
+
+export default withWorkflow(nextConfig);
+```
+
+::title::
+# The setup story is intentionally small
+
+::item-1::
+Bring Workflow into the framework you already use
+
+::item-2::
+Keep routes, components, and deployment flow familiar
+
+::item-3::
+Add workflows where you need durability
+
+::item-4::
+Expand from one use case to many
+
+<!--
+Use this slide to lower the activation energy. Mention that the framework integration is deliberately lightweight and designed so teams can stay inside the framework they already use. This is also a good moment to mention framework breadth and the examples repo if you want the audience to feel there is a path whether they are in Next.js or elsewhere.
+-->
+---
+---
+layout: 2-statement
+variant: cols-3
+tagPosition: inline
+---
+
+::title::
+# Migration recipe you can use tomorrow
+
+::s1-tag::
+<Tag color="gray">1</Tag>
+
+::s1-title::
+Find the workflow
+
+::s1-body::
+Look for the place where one request turns into a multi-step process.
+
+::s2-tag::
+<Tag color="gray">2</Tag>
+
+::s2-title::
+Isolate the steps
+
+::s2-body::
+Move each durable boundary into a small, testable function with `use step`.
+
+::s3-tag::
+<Tag color="gray">3</Tag>
+
+::s3-title::
+Add time and humans
+
+::s3-body::
+Once the flow is durable, webhook waits, approvals, scheduling, and agent loops feel natural instead of scary.
+
+<!--
+Turn this into a three-step recipe and say it slowly. First, find the long-lived flow. Second, isolate the durable boundaries. Third, add the time and human edges that usually force teams into extra infrastructure. If you want a strong closing line here, use: "Most teams already know what their first workflow should be. It is the async path they complain about the most."
+-->
+---
+---
+layout: 2-statement
+variant: large
+---
+
+::title::
+# Durable systems should be easy to explain from the code itself
+
+::subtitle::
+That is the bar. If your team can read the workflow top to bottom, they can own it in production.
+
+<!--
+This is your closing thesis. Re-state that the real win is not only reliability; it is shared understanding. When product, engineering, and on-call developers can all point at the same top-to-bottom flow, the system becomes easier to build, debug, and evolve. Pause briefly here before moving to Q&A.
+-->
+---
+---
+layout: 8-special
+variant: qa
+badge: Q&A
+item1Icon: mail
+item2Icon: github
+item3Icon: book-open
+item4Icon: cake
+---
+
+::left::
+## Thank you
+
+Let's talk about the workflows you want to make durable next.
+
+::item-1::
+pranay@vercel.com
+
+::item-2::
+github.com/vercel/workflow-examples
+
+::item-3::
+useworkflow.dev
+
+::item-4::
+Birthday card demo + repo tour
+
+<!--
+Invite questions in three buckets so people know where to start: adoption, architecture, and AI agent use cases. If the room is quiet, seed the conversation yourself with one question like, "What is a good first workflow candidate in an existing app?" That usually unlocks practical discussion.
+-->
diff --git a/presentations/getting-started-workflows-webinar/speaker-notes.md b/presentations/getting-started-workflows-webinar/speaker-notes.md
new file mode 100644
index 0000000..1e5dec5
--- /dev/null
+++ b/presentations/getting-started-workflows-webinar/speaker-notes.md
@@ -0,0 +1,130 @@
+# Speaker Notes
+
+Short presenter notes based on the actual mock walkthrough.
+
+## Slide 1 - Getting Started with Vercel Workflows
+
+- Quick intro.
+- Demo first, then code, then the broader story.
+- Focus today: long-running backends in plain TypeScript.
+
+## Slide 2 - The code you run on day one can be the code you ship
+
+- This is the real thesis.
+- We are used to demo first, then “productionize” later.
+- Workflow is trying to remove that whole second phase.
+
+## Slide 3 - Let's jump straight into the birthday card app
+
+- I want to go directly into the demo.
+- Then I will break apart the code and runtime.
+
+## Slide 4 - Birthday card generator
+
+- One request.
+- Parallel image + message generation.
+- Guests sign with RSVP links.
+- Wait until the birthday.
+- Send the final postcard.
+
+## Slide 5 - One workflow, multiple async patterns
+
+- Immediate work.
+- Human input.
+- Waiting on time.
+- Final delivery.
+
+## Slide 6 - What to watch during the live demo
+
+- Live progress updates.
+- Parallel steps.
+- Real suspension.
+- Real resumption.
+
+## Slide 7 - Now let's break apart what actually happened
+
+- After the demo, move into code.
+- The key message is how little infrastructure code is here.
+
+## Slide 8 - Workflow code
+
+- This reads like product logic.
+- It matches how I would whiteboard the feature.
+- That is the abstraction I want people to remember.
+
+## Slide 9 - Two routes, not an orchestration system
+
+- One route starts the workflow.
+- One route resumes the stream.
+- No extra DB for webhook correlation.
+- No separate worker service.
+
+## Slide 10 - Hooks and webhooks
+
+- This is one of the most powerful primitives.
+- Webhooks for public one-time URLs.
+- Hooks for internal resume logic.
+- Great for Slack, GitHub, approvals, and event-driven systems.
+
+## Slide 11 - Sleep is more than a timer
+
+- This is a real long-running primitive.
+- Sleep for days or weeks.
+- Also mention timeout patterns with hook vs sleep.
+
+## Slide 12 - What `use workflow` and `use step` are actually doing
+
+- Workflow replays.
+- Steps do the real work.
+- Event log resolves prior results.
+- This is why the code stays simple.
+
+## Slide 13 - The event log powers both durability and observability
+
+- Observability is not bolted on.
+- Same event log powers replay, recovery, and the audit trail.
+- Inputs and outputs are already there.
+
+## Slide 14 - Streaming is durable too
+
+- New important piece in this version of the talk.
+- Not just live streaming, resumable streaming.
+- Same primitive works for simple apps and for agents.
+
+## Slide 15 - An agent is basically just a workflow
+
+- This is the framing I used in the mock.
+- LLM calls and tool calls fit naturally into the workflow model.
+- DurableAgent is the concrete example.
+
+## Slide 16 - Getting started is intentionally small
+
+- Setup is light.
+- Start with one painful async path.
+- Mention framework breadth and Python at GA.
+
+## Slide 17 - Why GA matters
+
+- Internal usage across Vercel agents.
+- Customer stories: Flora and Durable.
+- This is the proof slide, not the hype slide.
+- Mention 5,000-step runs and serious workloads.
+
+## Slide 18 - Durable systems should be easy to explain from the code itself
+
+- This is the closing thought.
+- Reliability plus clarity.
+- If the team can read it, they can own it.
+
+## Slide 19 - Q&A
+
+- Invite questions on adoption.
+- Invite questions on hooks, streaming, and agents.
+- Seed with “what is a good first workflow candidate?” if needed.
+
+## Optional talking points if you need extra time
+
+- One workflow can map naturally to one Slack thread or one GitHub PR.
+- Timeout pattern: race a hook against sleep.
+- Streams are resumable, which matters for real production UIs.
+- DurableAgent is a clean bridge from workflows into AI agents.