feat(website): add /fdct Forward Deployed Creative Technologists page (#14907)

## Summary

Adds the new **Forward Deployed Creatives** marketing page in both
locales — `/forward-deployed-creatives` and
`/zh-CN/forward-deployed-creatives` — built from the Figma design
([desktop](https://www.figma.com/design/11vkE4FAn4plEYpawd57zS/Comfy----Website-Design?node-id=10268-33788),
[mobile
hero](https://www.figma.com/design/11vkE4FAn4plEYpawd57zS/Comfy----Website-Design?node-id=10373-39106)).
The route is registered in `config/routes.ts` (`fdct`) and linked from
the main nav (under **Programs**, with a `new` badge) and the site
footer.

**Page sections, in order:**
1. **Hero** — parallax collage of FDC work on desktop (`useParallax`,
per-item scroll depth); collapses to a static stacked collage below
`xl`. Single **Contact us** CTA → `/contact`. Decorative autoplay videos
are paused under `prefers-reduced-motion`.
2. **Builders** — wire-node diagram (`WireNodeLayout`).
3. **Client logo marquee** (`SocialProofBarSection`).
4. **How it works** — numbered steps (`BenefitsGrid01`).
5. **What you get** — checklist (`ChecklistSplit01`).
6. **Featured technologists** — Doug Hogan, Chris V., Rob Losch, and
Robert Paige ("Bert"), each with a bio dialog surfacing their real
workflows.
7. **Featured projects** — tagged workflow cards linking to real
published workflows on `comfy.org/workflows`.
8. **Closing CTA** — "Build with the people that build Comfy." →
`/contact`.
9. **Q&A** — 5-item accordion, backed by a single data source
(`fdctFaqs`) that also emits the `FAQPage` json-ld so structured data
always matches on-page copy per locale.
10. **Enterprise CTA band** (`CtaBands01`) → `/contact`.

## New reusable blocks (each with a Storybook story)

- `TeamGrid01` + `TeamMemberDialog01`, built on new `ui/dialog`
primitives (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`,
`DialogTitle`, `DialogDescription`, `DialogClose`).
- `CtaBands01` — enterprise CTA band.
- `CardWorkflow01` + `CardWorkflowGallery01` — tagged workflow cards for
the featured-projects gallery.

## Backward-compatible block extensions

`WireNodeLayout`, `BenefitsGrid01`, `ChecklistSplit01`, `HeroCentered01`
(e.g. `eyebrowClass`), and `CardArticle01` / `CardArticleGallery01`
gained opt-in props for this page — existing call sites are unaffected.
Storybook stories were added for `BenefitsGrid01`, `ChecklistSplit01`,
and `CardArticleGallery01`.

## Drafted copy needing review

- **FAQ answers** (`fdct.faq.a1`–`a5`) are **drafted from the page's own
claims**, not provided copy — please review the five Q&A pairs for
accuracy of commitment.
- All **zh-CN translations** in the `fdct.*` namespace are drafted.
- Enterprise CTA band and closing-CTA copy are drafted.

## Test plan

- [x] `e2e/fdct.spec.ts` — ~19 tests across three suites: `FDCT page
@smoke` (en desktop), `FDCT hero @mobile`, and `FDCT page (zh-CN)
@smoke`. Covers each section, the technologist bio dialog, Q&A expand,
`FAQPage` json-ld pairs, and locale-prefixed CTA hrefs.
- [x] `config/routes.test.ts` — canonical `/forward-deployed-creatives`
for en and `/zh-CN/forward-deployed-creatives` for zh-CN.
- [x] `pnpm --filter @comfyorg/website typecheck`, eslint, stylelint,
oxfmt via pre-commit hooks.
- [x] Visually matched against Figma at desktop and mobile widths in a
real browser.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: imick-io

apps/website/e2e/fdct.spec.ts

@@ -14,7 +14,7 @@ const ANALYTICS_PATTERN = '**/va.vercel-scripts.com/**' as const
 const CDP_PATTERN = '**/cdp.customer.io/**' as const
 const YOUTUBE_EMBED_PATTERN = '**/*.youtube-nocookie.com/**' as const
 const MEDIA_PATTERN =
-  /^https:\/\/media\.comfy\.org\/.*\.(webp|webm|mp4|png|jpg|jpeg|vtt)(\?.*)?$/i
+  /^https:\/\/(media|comfy-hub-assets)\.comfy\.org\/.*\.(webp|webm|mp4|png|jpg|jpeg|vtt)(\?.*)?$/i
 const VIDEO_PATTERN = /\.(webm|mp4)(\?|$)/i
 const SUBTITLE_PATTERN = /\.vtt(\?|$)/i
 

apps/website/e2e/fixtures/blockExternalMedia.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import BenefitsGrid01 from './BenefitsGrid01.vue'
+
+const meta: Meta<typeof BenefitsGrid01> = {
+  title: 'Website/Blocks/BenefitsGrid01',
+  component: BenefitsGrid01,
+  tags: ['autodocs'],
+  args: {
+    heading: 'Why join the program',
+    benefits: [
+      { id: 'reach', description: 'Reach a global audience of builders.' },
+      { id: 'earn', description: 'Earn recurring commission on referrals.' },
+      { id: 'assets', description: 'Get ready-made creative assets.' },
+      { id: 'support', description: 'Dedicated partner support at every step.' }
+    ],
+    primaryCta: { label: 'Apply now', href: '#' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithTitlesAndFootnote: Story = {
+  args: {
+    heading: 'How it works',
+    benefits: [
+      {
+        id: 'validate',
+        title: 'Validate',
+        description: 'We prove the outcome is achievable on your own material.'
+      },
+      {
+        id: 'build',
+        title: 'Build',
+        description:
+          'We build the workflow inside your environment, on your models and infrastructure.'
+      },
+      {
+        id: 'enable',
+        title: 'Enable',
+        description:
+          'We train your team to run, modify, and extend it themselves.'
+      },
+      {
+        id: 'own',
+        title: 'Own',
+        description:
+          'It runs on your infrastructure, and your team can change it without us.'
+      }
+    ],
+    footnote: "The direct line stays open. We're here when your team needs us.",
+    primaryCta: undefined
+  }
+}

apps/website/src/components/blocks/BenefitsGrid01.stories.ts

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import BrandButton from '../common/BrandButton.vue'
 import GlassCard from '../common/GlassCard.vue'
+import Button from '../ui/button/Button.vue'
+import { resolveRel } from '../../utils/cta'
 
-type Benefit = { id: string; description: string }
+type Benefit = { id: string; title?: string; description: string }
 type Cta = {
   label: string
   href: string
@@ -12,6 +13,7 @@ type Cta = {
 defineProps<{
   heading: string
   benefits: readonly Benefit[]
+  footnote?: string
   primaryCta?: Cta
 }>()
 </script>
@@ -36,25 +38,44 @@ defineProps<{
           >
             {{ String(index + 1).padStart(2, '0') }}
           </span>
+          <h3
+            v-if="benefit.title"
+            class="text-2xl font-normal text-primary-warm-white"
+          >
+            {{ benefit.title }}
+          </h3>
           <p
-            class="text-base/relaxed font-medium text-primary-comfy-canvas lg:text-xl"
+            :class="
+              benefit.title
+                ? 'text-base/relaxed font-light text-primary-comfy-canvas'
+                : 'text-base/relaxed font-medium text-primary-comfy-canvas lg:text-xl'
+            "
           >
             {{ benefit.description }}
           </p>
         </article>
       </div>
     </GlassCard>
 
+    <p
+      v-if="footnote"
+      class="mt-10 text-center text-sm font-light text-primary-comfy-canvas lg:mt-12"
+    >
+      {{ footnote }}
+    </p>
+
     <div v-if="primaryCta" class="mt-10 flex justify-center lg:mt-12">
-      <BrandButton
+      <Button
+        as="a"
         :href="primaryCta.href"
         :target="primaryCta.target"
-        size="lg"
-        class="px-20 py-4 text-base uppercase"
+        :rel="resolveRel(primaryCta)"
         variant="outline"
+        size="lg"
+        class="px-20"
       >
         {{ primaryCta.label }}
-      </BrandButton>
+      </Button>
     </div>
   </section>
 </template>

apps/website/src/components/blocks/BenefitsGrid01.vue

@@ -2,6 +2,7 @@
 import Badge from '../ui/badge/Badge.vue'
 
 import { resolveRel } from '../../utils/cta'
+import CardArrow from '../common/CardArrow.vue'
 import ButtonPill from '../ui/button-pill/ButtonPill.vue'
 import Card from '../ui/card/Card.vue'
 import CardContent from '../ui/card/CardContent.vue'
@@ -24,6 +25,7 @@ export type CardArticleItem = {
   title: string
   description?: string
   media: CardArticleMedia
+  author?: { name: string; avatarSrc: string }
   cta: { label: string; href: string; newTab?: boolean }
 }
 
@@ -34,7 +36,7 @@ const { item, titleClamp = false } = defineProps<{
 </script>
 
 <template>
-  <Card class="group/pill-trigger relative h-full overflow-hidden">
+  <Card class="group group/pill-trigger relative h-full overflow-hidden">
     <a
       :href="item.cta.href"
       :target="item.cta.newTab ? '_blank' : undefined"
@@ -93,7 +95,28 @@ const { item, titleClamp = false } = defineProps<{
       </CardContent>
     </div>
 
-    <CardFooter class="mt-auto px-6 pb-6">
+    <CardFooter
+      v-if="item.author"
+      class="mt-auto items-center justify-between gap-4 px-6 pb-6"
+    >
+      <span class="flex min-w-0 items-center gap-3">
+        <img
+          :src="item.author.avatarSrc"
+          alt=""
+          loading="lazy"
+          decoding="async"
+          class="size-8 shrink-0 rounded-full object-cover"
+        />
+        <span class="truncate text-sm font-semibold text-primary-warm-white">
+          {{ item.author.name }}
+        </span>
+      </span>
+      <CardArrow
+        hover="group"
+        class="size-8 shrink-0 rounded-xl bg-primary-warm-gray text-primary-warm-white"
+      />
+    </CardFooter>
+    <CardFooter v-else class="mt-auto px-6 pb-6">
       <ButtonPill as="span" variant="ghost" icon-position="left">
         {{ item.cta.label }}
       </ButtonPill>

apps/website/src/components/blocks/CardArticle01.vue

@@ -61,6 +61,25 @@ export const WithTabsAndLoadMore: Story = {
   }
 }
 
+export const ThreeColumnWithAuthors: Story = {
+  args: {
+    title: 'Past projects',
+    titleAlign: 'center',
+    layout: 'three-column',
+    items: ['Advertisement', 'Entertainment', 'Ecommerce'].flatMap((category) =>
+      [0, 1].map((row) => ({
+        ...item(`${category}-${row}`, 'Title of the project'),
+        category,
+        author: {
+          name: 'Person McPersonface',
+          avatarSrc: '/assets/images/fallback-gradient-avatar.svg'
+        },
+        cta: { label: 'View project', href: '#' }
+      }))
+    )
+  }
+}
+
 export const MixedLayout: Story = {
   args: {
     title: 'Latest Launches',

apps/website/src/components/blocks/CardArticleGallery01.stories.ts

@@ -31,7 +31,7 @@ const {
   title?: string
   titleAlign?: 'start' | 'center'
   items: CardArticleGalleryItem[]
-  layout?: 'mixed' | 'two-column'
+  layout?: 'mixed' | 'two-column' | 'three-column'
   titleClamp?: boolean
   tabs?: CardArticleGalleryTab[]
   allLabel?: string
@@ -52,7 +52,7 @@ const { visibleItems, hasMore, showMore } = useFilteredGallery({
   <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
     <h2
       v-if="title && !tabs"
-      class="text-primary-warm-white text-3xl font-light tracking-tight lg:text-5xl"
+      class="text-3xl font-light tracking-tight text-primary-warm-white lg:text-5xl"
       :class="titleAlign === 'center' ? 'text-center' : undefined"
     >
       {{ title }}
@@ -67,7 +67,7 @@ const { visibleItems, hasMore, showMore } = useFilteredGallery({
     >
       <h2
         v-if="title"
-        class="text-primary-warm-white text-3xl font-light tracking-tight lg:text-5xl"
+        class="text-3xl font-light tracking-tight text-primary-warm-white lg:text-5xl"
       >
         {{ title }}
       </h2>
@@ -98,7 +98,13 @@ const { visibleItems, hasMore, showMore } = useFilteredGallery({
 
     <div
       class="mt-10 grid grid-cols-1 gap-6 lg:mt-12"
-      :class="layout === 'mixed' ? 'md:grid-cols-6' : 'md:grid-cols-2'"
+      :class="
+        layout === 'mixed'
+          ? 'md:grid-cols-6'
+          : layout === 'three-column'
+            ? 'md:grid-cols-3'
+            : 'md:grid-cols-2'
+      "
     >
       <div
         v-for="(item, index) in visibleItems"

apps/website/src/components/blocks/CardArticleGallery01.vue

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CardWorkflow01 from './CardWorkflow01.vue'
+
+const meta: Meta<typeof CardWorkflow01> = {
+  title: 'Website/Blocks/CardWorkflow01',
+  component: CardWorkflow01,
+  tags: ['autodocs'],
+  args: {
+    item: {
+      id: 'product-advertisement-video',
+      title: 'Product Advertisement Video',
+      href: 'https://comfy.org/workflows/c98e5c457e1e-c98e5c457e1e/',
+      media: {
+        type: 'video',
+        src: 'https://comfy-hub-assets.comfy.org/uploads/a8c26beb-d463-40a0-8547-fa942e53ad70.mp4',
+        alt: 'Product Advertisement Video'
+      },
+      description:
+        'Turn product stills into a polished advertisement spot, from generated shots to final cut.',
+      tags: ['Image Generation', 'Image to Video']
+    }
+  },
+  decorators: [
+    () => ({
+      template: '<div class="max-w-sm bg-primary-comfy-ink p-6"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ImageMedia: Story = {
+  args: {
+    item: {
+      id: 'headphones-still',
+      title: 'Product Still Workflow',
+      href: 'https://comfy.org/workflows/c98e5c457e1e-c98e5c457e1e/',
+      media: {
+        type: 'image',
+        src: 'https://media.comfy.org/website/fdct/headphones.png',
+        alt: 'Product Still Workflow'
+      },
+      description:
+        'Render studio-grade product stills from a single reference image.',
+      tags: ['Image Generation']
+    }
+  }
+}
+
+export const Compact: Story = {
+  args: {
+    variant: 'compact',
+    item: {
+      id: 'storyboard-to-video-seedance',
+      title: 'Storyboard To Video - Seedance 2.0',
+      media: {
+        type: 'video',
+        src: 'https://comfy-hub-assets.comfy.org/uploads/34ea9f1a-1aac-4c6f-af48-b88cf154ec9b.mp4',
+        alt: 'Storyboard To Video - Seedance 2.0'
+      },
+      tags: ['Advertising', 'Film']
+    }
+  }
+}
+
+export const TitleOnly: Story = {
+  args: {
+    item: {
+      id: 'ltx-cleanplate-for-vfx',
+      title: 'LTX Cleanplate for VFX',
+      href: 'https://comfy.org/workflows/8f2cf0df5da6-8f2cf0df5da6/',
+      media: {
+        type: 'video',
+        src: 'https://comfy-hub-assets.comfy.org/uploads/8a3a846f-5017-428e-b2a2-24025c55e884.mp4',
+        alt: 'LTX Cleanplate for VFX'
+      }
+    }
+  }
+}