feat(website): add affiliate program page at /affiliates (#12670)

## Summary

- Adds the Comfy affiliate program landing page at `/affiliates`,
composed from 8 reusable presentational blocks (`HeroSplit01`,
`ChecklistSplit01`, `StepsGrid01`, `BenefitsGrid01`, `DetailsTable01`,
`BrandAssetsGrid01`, `FAQSplit01`, `CtaCenter01`) and thin section
wrappers under `templates/affiliate/*`. The page funnels through: Hero →
Audience → How It Works → Why ComfyUI → Program Details → Brand Assets →
FAQ → closing "Ready to start earning?" CTA.
- Removes the older parallel implementation under
`components/affiliates/*` (7 Vue sections, 3 data files, the i18n
contract test) and the `affiliate-landing.*` translation keys — the page
now has a single canonical i18n surface under `affiliate.*`.
- Rewrites `e2e/affiliates.spec.ts` to target the new sections via
semantic queries (no testids were added to production), covering hero
indexability, the closing CTA's apply + terms links, FAQPage JSON-LD
entry count, and FAQ toggle behavior.
- Apply CTA links to the application form
(`forms.gle/RS8L2ttcuGap4Q1v6`, `target=_blank`); terms link goes to
`/affiliates/terms` (English-only by design, per the legal-reviewed
terms document).

## Test plan

- [ ] `pnpm --filter @comfyorg/website typecheck` passes (0 errors)
- [ ] `pnpm --filter @comfyorg/website test:unit` passes (96 tests
across 13 files)
- [ ] `pnpm --filter @comfyorg/website knip --cache` reports no new
orphans introduced by this branch
- [ ] Visit `/affiliates` — all 8 sections render in order on desktop
and mobile
- [ ] APPLY NOW (in closing CTA section) opens
`forms.gle/RS8L2ttcuGap4Q1v6` in a new tab
- [ ] "Read the affiliate program terms" link navigates to
`/affiliates/terms` in the same tab
- [ ] FAQ items expand/collapse on click; `<script
type="application/ld+json">` FAQPage entry contains all 8 Q/A pairs from
`src/data/affiliateFaq.ts`
- [ ] Run e2e: `pnpm --filter @comfyorg/website playwright test
e2e/affiliates.spec.ts`

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>

.github/workflows/pr-report.yaml

@@ -5,6 +5,8 @@ on:
     workflows: ['CI: Size Data', 'CI: Performance Report', 'CI: E2E Coverage']
     types:
       - completed
+    branches-ignore:
+      - main
 
 permissions:
   contents: read

.oxlintrc.json

@@ -84,6 +84,8 @@
     "typescript/no-unused-vars": "off",
     "unicorn/no-empty-file": "off",
     "vitest/require-mock-type-parameters": "off",
+    "vitest/hoisted-apis-on-top": "error",
+    "typescript/no-misused-spread": "error",
     "vitest/consistent-each-for": [
       "error",
       {

CODEOWNERS

@@ -1,60 +1,60 @@
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @comfy_frontend_devs
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-Org/comfy_frontend_devs
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @christian-byrne @comfyui-wiki @comfy_frontend_devs
-/src/components/templates/                        @christian-byrne @comfyui-wiki @comfy_frontend_devs
+/src/platform/workflow/templates/                 @christian-byrne @comfyui-wiki @Comfy-Org/comfy_frontend_devs
+/src/components/templates/                        @christian-byrne @comfyui-wiki @Comfy-Org/comfy_frontend_devs
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88 @comfy_frontend_devs
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88 @comfy_frontend_devs
-/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88 @comfy_frontend_devs
-/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88 @comfy_frontend_devs
-/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88 @comfy_frontend_devs
-/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88 @comfy_frontend_devs
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # Image Crop
-/src/extensions/core/imageCrop.ts                 @jtydhr88 @comfy_frontend_devs
-/src/components/imagecrop/                        @jtydhr88 @comfy_frontend_devs
-/src/composables/useImageCrop.ts                  @jtydhr88 @comfy_frontend_devs
-/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88 @comfy_frontend_devs
+/src/extensions/core/imageCrop.ts                 @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/components/imagecrop/                        @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useImageCrop.ts                  @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # Image Compare
-/src/extensions/core/imageCompare.ts                                                @jtydhr88 @comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue         @jtydhr88 @comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts     @jtydhr88 @comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts  @jtydhr88 @comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts      @jtydhr88 @comfy_frontend_devs
-/src/lib/litegraph/src/widgets/ImageCompareWidget.ts                                @jtydhr88 @comfy_frontend_devs
+/src/extensions/core/imageCompare.ts                                                @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue         @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts     @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts  @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts      @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/lib/litegraph/src/widgets/ImageCompareWidget.ts                                @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # Painter
-/src/extensions/core/painter.ts                                             @jtydhr88 @comfy_frontend_devs
-/src/components/painter/                                                    @jtydhr88 @comfy_frontend_devs
-/src/composables/painter/                                                   @jtydhr88 @comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts   @jtydhr88 @comfy_frontend_devs
-/src/lib/litegraph/src/widgets/PainterWidget.ts                             @jtydhr88 @comfy_frontend_devs
+/src/extensions/core/painter.ts                                             @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/components/painter/                                                    @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/painter/                                                   @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts   @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/lib/litegraph/src/widgets/PainterWidget.ts                             @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # GLSL
-/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne @comfy_frontend_devs
+/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne @Comfy-Org/comfy_frontend_devs
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88 @comfy_frontend_devs
-/src/extensions/core/load3dLazy.ts                @jtydhr88 @comfy_frontend_devs
-/src/extensions/core/load3d/                      @jtydhr88 @comfy_frontend_devs
-/src/components/load3d/                           @jtydhr88 @comfy_frontend_devs
-/src/composables/useLoad3d.ts                     @jtydhr88 @comfy_frontend_devs
-/src/composables/useLoad3d.test.ts                @jtydhr88 @comfy_frontend_devs
-/src/composables/useLoad3dDrag.ts                 @jtydhr88 @comfy_frontend_devs
-/src/composables/useLoad3dDrag.test.ts            @jtydhr88 @comfy_frontend_devs
-/src/composables/useLoad3dViewer.ts               @jtydhr88 @comfy_frontend_devs
-/src/composables/useLoad3dViewer.test.ts          @jtydhr88 @comfy_frontend_devs
-/src/services/load3dService.ts                    @jtydhr88 @comfy_frontend_devs
+/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/load3dLazy.ts                @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/load3d/                      @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/components/load3d/                           @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useLoad3d.ts                     @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useLoad3d.test.ts                @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useLoad3dDrag.ts                 @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useLoad3dDrag.test.ts            @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useLoad3dViewer.ts               @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/composables/useLoad3dViewer.test.ts          @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/services/load3dService.ts                    @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # Manager
-/src/workbench/extensions/manager/                @christian-byrne @ltdrdata @comfy_frontend_devs
+/src/workbench/extensions/manager/                @christian-byrne @ltdrdata @Comfy-Org/comfy_frontend_devs
 
 # Model-to-node mappings (cloud team)
-/src/platform/assets/mappings/                    @deepme987 @comfy_frontend_devs
+/src/platform/assets/mappings/                    @deepme987 @Comfy-Org/comfy_frontend_devs
 
 # LLM Instructions (blank on purpose)
 .claude/

apps/website/e2e/affiliates-terms.spec.ts

@@ -0,0 +1,140 @@
+import { expect } from '@playwright/test'
+
+import { test } from './fixtures/blockExternalMedia'
+
+const PATH = '/affiliates/terms'
+
+const SECTION_IDS = [
+  '1-program-overview',
+  '2-eligible-products',
+  '3-commission-structure',
+  '4-attribution-rules',
+  '5-prohibited-activities',
+  '6-content-guidelines',
+  '7-termination',
+  '8-program-modifications',
+  '9-indemnification',
+  '10-governing-law',
+  '11-miscellaneous'
+] as const
+
+test.describe('Affiliate Terms — desktop @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('renders heading and is indexable', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: 'Affiliate Terms', level: 1 })
+    ).toBeVisible()
+
+    await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
+  })
+
+  test('exposes one anchor per legal section in order', async ({ page }) => {
+    for (const id of SECTION_IDS) {
+      await expect(page.locator(`[id="${id}"]`)).toBeAttached()
+    }
+
+    const orderedIds = await page.evaluate(
+      (ids) => {
+        const elements = ids
+          .map((id) => document.getElementById(id))
+          .filter((el): el is HTMLElement => el !== null)
+        return elements
+          .slice()
+          .sort((a, b) => {
+            const relation = a.compareDocumentPosition(b)
+            if (relation & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+            if (relation & Node.DOCUMENT_POSITION_PRECEDING) return 1
+            return 0
+          })
+          .map((el) => el.id)
+      },
+      [...SECTION_IDS]
+    )
+    expect(orderedIds).toEqual([...SECTION_IDS])
+  })
+
+  test('renders an effective date footer', async ({ page }) => {
+    await expect(page.getByText(/Effective Date:/)).toBeVisible()
+  })
+
+  test('skips internal-only sections (competitive analysis, open questions)', async ({
+    page
+  }) => {
+    await expect(page.getByText(/Competitive analysis/i)).toHaveCount(0)
+    await expect(
+      page.getByText(/Open questions for legal review/i)
+    ).toHaveCount(0)
+  })
+})
+
+test.describe('Affiliate Terms — desktop interactions', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('clicking a desktop TOC link scrolls to the matching section', async ({
+    page
+  }) => {
+    const desktopToc = page.getByRole('navigation', { name: 'On this page' })
+    await expect(desktopToc).toBeVisible()
+
+    const link = desktopToc.getByRole('link', { name: /5\. Prohibited/ })
+    await link.click()
+
+    const target = page.locator('[id="5-prohibited-activities"]')
+    await expect(target).toBeInViewport()
+  })
+
+  test('clicking a TOC link updates the URL hash so the section is shareable', async ({
+    page
+  }) => {
+    const desktopToc = page.getByRole('navigation', { name: 'On this page' })
+    await desktopToc.getByRole('link', { name: /7\. Termination/ }).click()
+
+    await expect
+      .poll(() => page.evaluate(() => window.location.hash))
+      .toBe('#7-termination')
+  })
+})
+
+test.describe('Affiliate Terms — mobile @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('shows a collapsed accordion TOC by default', async ({ page }) => {
+    const accordion = page.locator('details', {
+      has: page.getByText('On this page')
+    })
+    await expect(accordion).toBeVisible()
+    await expect(accordion).not.toHaveAttribute('open', '')
+  })
+
+  test('expanding the accordion reveals every section link', async ({
+    page
+  }) => {
+    const accordion = page.locator('details', {
+      has: page.getByText('On this page')
+    })
+    await accordion.locator('summary').click()
+    await expect(accordion).toHaveAttribute('open', '')
+
+    for (const id of SECTION_IDS) {
+      await expect(accordion.locator(`a[href="#${id}"]`).first()).toBeVisible()
+    }
+  })
+
+  test('headings remain readable at narrow viewports without horizontal overflow', async ({
+    page
+  }) => {
+    const heading = page.getByRole('heading', { name: '1. Program Overview' })
+    await expect(heading).toBeVisible()
+    const box = await heading.boundingBox()
+    expect(box, 'heading box').not.toBeNull()
+    expect(box!.x).toBeGreaterThanOrEqual(0)
+    expect(box!.x + box!.width).toBeLessThanOrEqual(page.viewportSize()!.width)
+  })
+})

apps/website/e2e/affiliates.spec.ts

@@ -0,0 +1,148 @@
+import { expect } from '@playwright/test'
+
+import { affiliateFaqs } from '../src/data/affiliateFaq'
+import { t } from '../src/i18n/translations'
+import { test } from './fixtures/blockExternalMedia'
+
+const PATH = '/affiliates'
+const APPLY_URL = 'https://forms.gle/RS8L2ttcuGap4Q1v6'
+const TERMS_PATH = '/affiliates/terms'
+const FAQ_COUNT = affiliateFaqs.length
+const FIRST_FAQ = affiliateFaqs[0]
+const HERO_HEADING_TEXT = `${t('affiliate.hero.headingHighlight', 'en')} ${t('affiliate.hero.headingMuted', 'en')}`
+const CTA_HEADING_TEXT = t('affiliate.cta.heading', 'en')
+const CTA_APPLY_LABEL = t('affiliate.cta.apply', 'en')
+const CTA_TERMS_LABEL = t('affiliate.cta.termsLabel', 'en')
+
+test.describe('Affiliates landing — desktop @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('renders the hero heading and is indexable', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { level: 1, name: HERO_HEADING_TEXT })
+    ).toBeVisible()
+
+    await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
+  })
+
+  test('renders the closing CTA heading and apply button', async ({ page }) => {
+    const ctaSection = page.locator('section').filter({
+      has: page.getByRole('heading', { level: 2, name: CTA_HEADING_TEXT })
+    })
+    const ctaHeading = ctaSection.getByRole('heading', {
+      level: 2,
+      name: CTA_HEADING_TEXT
+    })
+    await ctaHeading.scrollIntoViewIfNeeded()
+    await expect(ctaHeading).toBeVisible()
+
+    const applyButton = ctaSection.getByRole('link', { name: CTA_APPLY_LABEL })
+    await expect(applyButton).toBeVisible()
+    await expect(applyButton).toHaveAttribute('href', APPLY_URL)
+    await expect(applyButton).toHaveAttribute('target', '_blank')
+    await expect(applyButton).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  test('CTA section links to the affiliate terms page in the same tab', async ({
+    page
+  }) => {
+    const termsLink = page.getByRole('link', { name: CTA_TERMS_LABEL })
+    await termsLink.scrollIntoViewIfNeeded()
+    await expect(termsLink).toBeVisible()
+    await expect(termsLink).toHaveAttribute('href', TERMS_PATH)
+    await expect(termsLink).not.toHaveAttribute('target', '_blank')
+  })
+})
+
+test.describe('Affiliates landing — desktop interactions', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('emits FAQPage structured data with one entry per FAQ', async ({
+    page
+  }) => {
+    const faqJsonLd = await page.evaluate(() => {
+      const scripts = Array.from(
+        document.querySelectorAll<HTMLScriptElement>(
+          'script[type="application/ld+json"]'
+        )
+      )
+      const match = scripts.find((s) =>
+        (s.textContent ?? '').includes('FAQPage')
+      )
+      return match?.textContent ?? null
+    })
+    expect(faqJsonLd, 'FAQ JSON-LD script').not.toBeNull()
+    const parsed = JSON.parse(faqJsonLd!)
+    expect(parsed['@type']).toBe('FAQPage')
+    expect(Array.isArray(parsed.mainEntity)).toBe(true)
+    expect(parsed.mainEntity.length).toBe(FAQ_COUNT)
+  })
+
+  test('Apply Now CTA opens the application form in a new tab', async ({
+    page,
+    context
+  }) => {
+    const ctaSection = page.locator('section').filter({
+      has: page.getByRole('heading', { level: 2, name: CTA_HEADING_TEXT })
+    })
+    const applyButton = ctaSection.getByRole('link', { name: CTA_APPLY_LABEL })
+    await applyButton.scrollIntoViewIfNeeded()
+
+    const popupPromise = context.waitForEvent('page')
+    await applyButton.click()
+    const popup = await popupPromise
+    await popup.waitForLoadState('domcontentloaded')
+    const popupUrl = popup.url()
+    expect(
+      popupUrl.includes('forms.gle/RS8L2ttcuGap4Q1v6') ||
+        popupUrl.includes('docs.google.com/forms')
+    ).toBe(true)
+    await popup.close()
+  })
+
+  test('FAQ items toggle open and closed on click', async ({ page }) => {
+    const firstQuestion = page.getByRole('button', {
+      name: FIRST_FAQ.question.en
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
+
+    await firstQuestion.click()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'true')
+    await expect(page.getByText(FIRST_FAQ.answer.en)).toBeVisible()
+
+    await firstQuestion.click()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
+  })
+})
+
+test.describe('Affiliates landing — mobile @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('renders the hero heading at narrow viewports', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { level: 1, name: HERO_HEADING_TEXT })
+    ).toBeVisible()
+  })
+
+  test('closing CTA stays within the viewport width', async ({ page }) => {
+    const ctaHeading = page.getByRole('heading', {
+      level: 2,
+      name: CTA_HEADING_TEXT
+    })
+    await ctaHeading.scrollIntoViewIfNeeded()
+    await expect(ctaHeading).toBeVisible()
+
+    const box = await ctaHeading.boundingBox()
+    expect(box, 'CTA heading bounding box').not.toBeNull()
+    expect(box!.x + box!.width).toBeLessThanOrEqual(
+      page.viewportSize()!.width + 1
+    )
+  })
+})

apps/website/e2e/download.spec.ts

@@ -4,6 +4,10 @@ import { test } from './fixtures/blockExternalMedia'
 
 const WINDOWS_UA =
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+const LINUX_UA =
+  'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+const IPHONE_UA =
+  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1'
 
 test.describe('Download page @smoke', () => {
   test.beforeEach(async ({ page }) => {
@@ -38,7 +42,7 @@ test.describe('Download page @smoke', () => {
         level: 1
       })
     })
-    const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD LOCAL/i })
+    const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD DESKTOP/i })
     await expect(downloadBtn).toBeVisible()
     await expect(downloadBtn).toHaveAttribute('target', '_blank')
 
@@ -52,6 +56,61 @@ test.describe('Download page @smoke', () => {
     await context.close()
   })
 
+  test('HeroSection falls back to both Windows + Mac when UA is unrecognized', async ({
+    browser
+  }) => {
+    const context = await browser.newContext({ userAgent: LINUX_UA })
+    const page = await context.newPage()
+    await page.goto('/download')
+
+    const hero = page.locator('section', {
+      has: page.getByRole('heading', {
+        name: /Run on your hardware/i,
+        level: 1
+      })
+    })
+
+    const windowsBtn = hero.locator(
+      'a[href="https://download.comfy.org/windows/nsis/x64"]'
+    )
+    await expect(windowsBtn).toBeVisible()
+    await expect(windowsBtn).toHaveText(/DOWNLOAD DESKTOP/i)
+
+    const macBtn = hero.locator(
+      'a[href="https://download.comfy.org/mac/dmg/arm64"]'
+    )
+    await expect(macBtn).toBeVisible()
+    await expect(macBtn).toHaveText(/DOWNLOAD DESKTOP/i)
+
+    await expect(
+      hero.getByRole('link', { name: /DOWNLOAD DESKTOP/i })
+    ).toHaveCount(2)
+
+    await context.close()
+  })
+
+  test('HeroSection hides every desktop CTA on mobile', async ({ browser }) => {
+    const context = await browser.newContext({ userAgent: IPHONE_UA })
+    const page = await context.newPage()
+    await page.goto('/download')
+
+    const hero = page.locator('section', {
+      has: page.getByRole('heading', {
+        name: /Run on your hardware/i,
+        level: 1
+      })
+    })
+
+    await expect(
+      hero.getByRole('link', { name: /DOWNLOAD DESKTOP/i })
+    ).toBeHidden()
+    await expect(
+      hero.getByRole('link', { name: /INSTALL FROM GITHUB/i })
+    ).toBeVisible()
+
+    await context.close()
+  })
+
   test('ReasonSection heading and reasons are visible', async ({ page }) => {
     await expect(
       page.getByRole('heading', { name: /Why.*professionals.*choose/i })
@@ -176,7 +235,7 @@ test.describe('Download page mobile @mobile', () => {
         level: 1
       })
     })
-    const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD LOCAL/i })
+    const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD DESKTOP/i })
     const githubBtn = hero.getByRole('link', { name: /INSTALL FROM GITHUB/i })
 
     await expect(downloadBtn).toBeVisible()

apps/website/e2e/homepage.spec.ts

@@ -213,7 +213,7 @@ test.describe('Get started section links @smoke', () => {
       has: page.getByRole('heading', { name: 'Get started in minutes' })
     })
 
-    const downloadLink = section.getByRole('link', { name: 'Download Local' })
+    const downloadLink = section.getByRole('link', { name: 'Download Desktop' })
     await expect(downloadLink).toBeVisible()
     await expect(downloadLink).toHaveAttribute('href', '/download')
 

apps/website/e2e/navigation.spec.ts

@@ -32,7 +32,7 @@ test.describe('Desktop navigation @smoke', () => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopCTA = nav.getByTestId('desktop-nav-cta')
     await expect(
-      desktopCTA.getByRole('link', { name: 'DOWNLOAD LOCAL' })
+      desktopCTA.getByRole('link', { name: 'DOWNLOAD DESKTOP' })
     ).toBeVisible()
     await expect(
       desktopCTA.getByRole('link', { name: 'LAUNCH CLOUD' })
@@ -55,7 +55,7 @@ test.describe('Desktop dropdown @interaction', () => {
 
     const dropdown = productsButton.locator('..').getByTestId('nav-dropdown')
     for (const item of [
-      'Comfy Local',
+      'Comfy Desktop',
       'Comfy Cloud',
       'Comfy API',
       'Comfy Enterprise'
@@ -69,7 +69,7 @@ test.describe('Desktop dropdown @interaction', () => {
     const desktopLinks = nav.getByTestId('desktop-nav-links')
     await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
 
-    const comfyLocal = nav.getByRole('link', { name: 'Comfy Local' }).first()
+    const comfyLocal = nav.getByRole('link', { name: 'Comfy Desktop' }).first()
     await expect(comfyLocal).toBeVisible()
 
     await page.locator('main').hover()
@@ -81,7 +81,7 @@ test.describe('Desktop dropdown @interaction', () => {
     const desktopLinks = nav.getByTestId('desktop-nav-links')
     await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
 
-    const comfyLocal = nav.getByRole('link', { name: 'Comfy Local' }).first()
+    const comfyLocal = nav.getByRole('link', { name: 'Comfy Desktop' }).first()
     await expect(comfyLocal).toBeVisible()
 
     await page.keyboard.press('Escape')
@@ -121,7 +121,7 @@ test.describe('Mobile menu @mobile', () => {
     const menu = page.locator('#site-mobile-menu')
     await menu.getByText('PRODUCTS').first().click()
 
-    await expect(menu.getByText('Comfy Local')).toBeVisible()
+    await expect(menu.getByText('Comfy Desktop')).toBeVisible()
     await expect(menu.getByText('Comfy Cloud')).toBeVisible()
 
     await menu.getByRole('button', { name: /BACK/i }).click()
@@ -133,7 +133,7 @@ test.describe('Mobile menu @mobile', () => {
 
     const menu = page.locator('#site-mobile-menu')
     await expect(
-      menu.getByRole('link', { name: 'DOWNLOAD LOCAL' })
+      menu.getByRole('link', { name: 'DOWNLOAD DESKTOP' })
     ).toBeVisible()
     await expect(menu.getByRole('link', { name: 'LAUNCH CLOUD' })).toBeVisible()
   })

apps/website/public/affiliates/brand/comfy-amplified-logo-mark.svg

@@ -0,0 +1,3 @@
+<svg width="147" height="159" viewBox="0 0 147 159" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M116.437 118.915C116.712 117.983 116.863 117 116.863 115.967C116.863 110.25 112.252 105.615 106.564 105.615H60.4108C57.9301 105.64 55.9006 103.625 55.9006 101.131C55.9006 100.678 55.9759 100.25 56.0761 99.8468L68.504 56.3212C69.0302 54.4069 70.7841 52.9963 72.8387 52.9963L119.168 52.946C128.94 52.946 137.182 46.3214 139.664 37.2788L146.63 13.0223C146.854 12.1658 146.98 11.2338 146.98 10.3019C146.98 4.60938 142.395 0 136.733 0H80.6814C70.9594 0 62.7409 6.57416 60.2104 15.5159L55.4998 32.0647C54.9485 33.9539 53.2197 35.3392 51.1651 35.3392H37.7098C28.0631 35.3392 19.9198 41.7875 17.3139 50.6287L0.375936 110.098C0.125241 110.98 0 111.937 0 112.894C0 118.612 4.61042 123.247 10.2981 123.247H23.5278C26.0085 123.247 28.038 125.262 28.038 127.781C28.038 128.209 27.988 128.637 27.8627 129.04L23.1771 145.438C22.9515 146.32 22.8012 147.226 22.8012 148.158C22.8012 153.851 27.3866 158.461 33.0492 158.461L89.1253 158.409C98.8722 158.409 107.091 151.81 109.596 142.819L116.412 118.94L116.437 118.915Z" fill="#F2FF59"/>
+</svg>

apps/website/public/affiliates/brand/comfy-color-combo-ink.svg

@@ -0,0 +1,4 @@
+<svg width="142" height="142" viewBox="0 0 142 142" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="142" height="142" rx="33" fill="#211927"/>
+<path d="M91.7457 90.1697C91.8788 89.7195 91.9514 89.2449 91.9514 88.7461C91.9514 85.9841 89.7244 83.7452 86.9768 83.7452H64.6819C63.4836 83.7574 62.5032 82.784 62.5032 81.5794C62.5032 81.3604 62.5396 81.1536 62.588 80.9589L68.5914 59.9335C68.8456 59.0088 69.6928 58.3274 70.6853 58.3274L93.065 58.3031C97.7854 58.3031 101.767 55.103 102.966 50.7349L106.331 39.0176C106.439 38.6039 106.5 38.1537 106.5 37.7035C106.5 34.9537 104.285 32.7271 101.55 32.7271H74.4738C69.7775 32.7271 65.8075 35.9028 64.5851 40.2222L62.3096 48.2162C62.0433 49.1288 61.2082 49.798 60.2157 49.798H53.716C49.0561 49.798 45.1224 52.9129 43.8636 57.1837L35.6816 85.911C35.5605 86.3369 35.5 86.7993 35.5 87.2616C35.5 90.0236 37.7271 92.2625 40.4746 92.2625H46.8653C48.0636 92.2625 49.044 93.2359 49.044 94.4526C49.044 94.6595 49.0198 94.8663 48.9593 95.061L46.6959 102.982C46.5869 103.408 46.5143 103.846 46.5143 104.296C46.5143 107.046 48.7293 109.273 51.4647 109.273L78.5527 109.248C83.261 109.248 87.231 106.06 88.4414 101.717L91.7336 90.1818L91.7457 90.1697Z" fill="#F2FF59"/>
+</svg>

apps/website/public/affiliates/brand/comfy-color-combo-yellow.svg

@@ -0,0 +1,4 @@
+<svg width="142" height="142" viewBox="0 0 142 142" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="142" height="142" rx="33" fill="#F2FF59"/>
+<path d="M91.7457 90.1697C91.8788 89.7195 91.9514 89.2449 91.9514 88.7461C91.9514 85.9841 89.7244 83.7452 86.9768 83.7452H64.6819C63.4836 83.7574 62.5032 82.784 62.5032 81.5794C62.5032 81.3604 62.5396 81.1536 62.588 80.9589L68.5914 59.9335C68.8456 59.0088 69.6928 58.3274 70.6853 58.3274L93.065 58.3031C97.7854 58.3031 101.767 55.103 102.966 50.7349L106.331 39.0176C106.439 38.6039 106.5 38.1537 106.5 37.7035C106.5 34.9537 104.285 32.7271 101.55 32.7271H74.4738C69.7775 32.7271 65.8075 35.9028 64.5851 40.2222L62.3096 48.2162C62.0433 49.1288 61.2082 49.798 60.2157 49.798H53.716C49.0561 49.798 45.1224 52.9129 43.8636 57.1837L35.6816 85.911C35.5605 86.3369 35.5 86.7993 35.5 87.2616C35.5 90.0236 37.7271 92.2625 40.4746 92.2625H46.8653C48.0636 92.2625 49.044 93.2359 49.044 94.4526C49.044 94.6595 49.0198 94.8663 48.9593 95.061L46.6959 102.982C46.5869 103.408 46.5143 103.846 46.5143 104.296C46.5143 107.046 48.7293 109.273 51.4647 109.273L78.5527 109.248C83.261 109.248 87.231 106.06 88.4414 101.717L91.7336 90.1818L91.7457 90.1697Z" fill="#211927"/>
+</svg>

apps/website/public/affiliates/brand/comfy-dimensional-logo-mark.svg

@@ -0,0 +1,3 @@
+<svg width="148" height="159" viewBox="0 0 148 159" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M116.653 119.135C116.929 118.202 117.08 117.217 117.08 116.183C117.08 110.454 112.461 105.811 106.762 105.811H60.523C58.0377 105.836 56.0044 103.817 56.0044 101.319C56.0044 100.865 56.0798 100.436 56.1802 100.032L68.6312 56.4258C69.1584 54.508 70.9155 53.0947 72.9739 53.0947L119.389 53.0443C129.179 53.0443 137.437 46.4074 139.924 37.348L146.903 13.0464C147.127 12.1884 147.253 11.2547 147.253 10.321C147.253 4.61794 142.659 0 136.987 0H80.8312C71.0912 0 62.8574 6.58636 60.3222 15.5448L55.6028 32.1242C55.0505 34.017 53.3185 35.4049 51.2601 35.4049H37.7798C28.1152 35.4049 19.9568 41.8651 17.346 50.7227L0.376634 110.303C0.125474 111.186 0 112.145 0 113.104C0 118.832 4.61899 123.476 10.3173 123.476H23.5715C26.0568 123.476 28.0901 125.495 28.0901 128.018C28.0901 128.447 28.0399 128.876 27.9144 129.28L23.2202 145.708C22.9941 146.591 22.8435 147.5 22.8435 148.433C22.8435 154.137 27.4374 158.755 33.1106 158.755L89.2908 158.704C99.0558 158.704 107.29 152.092 109.8 143.084L116.628 119.16L116.653 119.135Z" fill="#211927"/>
+</svg>

apps/website/public/icons/check.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 11.5811L10.2582 18.0581L20 6.05811" stroke="#F2FF59" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

apps/website/public/robots.txt

@@ -31,28 +31,4 @@ Disallow: /_website/
 Disallow: /_vercel/
 Disallow: /payment/
 
-User-agent: GPTBot
-Allow: /
-
-User-agent: OAI-SearchBot
-Allow: /
-
-User-agent: ChatGPT-User
-Allow: /
-
-User-agent: ClaudeBot
-Allow: /
-
-User-agent: Claude-User
-Allow: /
-
-User-agent: Claude-SearchBot
-Allow: /
-
-User-agent: PerplexityBot
-Allow: /
-
-User-agent: Google-Extended
-Allow: /
-
 Sitemap: https://comfy.org/sitemap-index.xml

apps/website/scripts/generate-models.ts

@@ -58,7 +58,7 @@ const API_PROVIDER_MAP: Record<string, { name: string; slug: string }> = {
   runway: { name: 'Runway', slug: 'runway' },
   vidu: { name: 'Vidu', slug: 'vidu' },
   bfl: { name: 'Flux (API)', slug: 'flux-api' },
-  grok: { name: 'Grok Image', slug: 'grok-image' },
+  grok: { name: 'Grok Imagine', slug: 'grok-imagine' },
   stability: { name: 'Stability AI', slug: 'stability-ai' },
   bytedance: { name: 'Seedance (ByteDance)', slug: 'seedance-bytedance' },
   bytedace: { name: 'Seedance (ByteDance)', slug: 'seedance-bytedance' },
@@ -86,6 +86,20 @@ const API_PROVIDER_MAP: Record<string, { name: string; slug: string }> = {
   wavespped: { name: 'Wavespeed', slug: 'wavespeed' }
 }
 
+// Stub entries that exist only to issue 301 redirects from old slugs to
+// their new canonical slugs. Keeps renames reproducible across regenerations.
+const LEGACY_SLUG_REDIRECTS: OutputModel[] = [
+  {
+    slug: 'grok-image',
+    canonicalSlug: 'grok-imagine',
+    name: 'Grok Image',
+    displayName: 'Grok Image',
+    directory: 'partner_nodes',
+    huggingFaceUrl: '',
+    workflowCount: 0
+  }
+]
+
 function stripExt(name: string): string {
   return name.replace(/\.(safetensors|ckpt|pt|bin)$/, '')
 }
@@ -299,7 +313,8 @@ function run(): void {
       throw new Error(
         `Failed to parse ${file}: ${
           error instanceof Error ? error.message : String(error)
-        }`
+        }`,
+        { cause: error }
       )
     }
   }
@@ -367,7 +382,7 @@ function run(): void {
       displayName: m.name
     }))
 
-  const combined = [...apiOutput, ...output]
+  const combined = [...apiOutput, ...output, ...LEGACY_SLUG_REDIRECTS]
 
   const withThumbs = combined.filter((m) => m.thumbnailUrl).length
   process.stdout.write(

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import BrandButton from '../common/BrandButton.vue'
+import GlassCard from '../common/GlassCard.vue'
+
+type Benefit = { id: string; description: string }
+type Cta = {
+  label: string
+  href: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
+defineProps<{
+  heading: string
+  benefits: readonly Benefit[]
+  primaryCta?: Cta
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <GlassCard class="mx-auto max-w-7xl">
+      <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
+        <article
+          v-for="(benefit, index) in benefits"
+          :key="benefit.id"
+          class="flex flex-col gap-6 rounded-4xl bg-primary-comfy-ink p-6 lg:p-8"
+        >
+          <span
+            class="text-primary-comfy-yellow font-mono text-sm font-bold tracking-wide"
+          >
+            {{ String(index + 1).padStart(2, '0') }}
+          </span>
+          <p
+            class="text-base/relaxed font-medium text-primary-comfy-canvas lg:text-xl"
+          >
+            {{ benefit.description }}
+          </p>
+        </article>
+      </div>
+    </GlassCard>
+
+    <div v-if="primaryCta" class="mt-10 flex justify-center lg:mt-12">
+      <BrandButton
+        :href="primaryCta.href"
+        :target="primaryCta.target"
+        size="lg"
+        class="px-20 py-4 text-base uppercase"
+        variant="outline"
+      >
+        {{ primaryCta.label }}
+      </BrandButton>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+type Asset = {
+  id: string
+  title: string
+  download: string
+  preview: string
+}
+
+defineProps<{
+  heading: string
+  subheading: string
+  downloadLabel: string
+  assets: readonly Asset[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <div class="mx-auto max-w-6xl text-center">
+      <h2
+        class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+      >
+        {{ heading }}
+      </h2>
+      <p class="mx-auto mt-4 max-w-2xl text-base text-primary-comfy-canvas/70">
+        {{ subheading }}
+      </p>
+    </div>
+
+    <ul
+      class="mx-auto mt-12 grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"
+    >
+      <li
+        v-for="asset in assets"
+        :key="asset.id"
+        class="bg-transparency-white-t4 flex flex-col overflow-hidden rounded-4xl border border-primary-comfy-canvas/10"
+      >
+        <div
+          class="flex aspect-video items-center justify-center overflow-hidden bg-primary-comfy-ink/40 p-6"
+        >
+          <img
+            :src="asset.preview"
+            :alt="asset.title"
+            class="max-h-full max-w-full object-contain"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+        <div class="flex flex-1 flex-col gap-2 p-5">
+          <h3 class="text-base font-light text-primary-comfy-canvas">
+            {{ asset.title }}
+          </h3>
+          <a
+            :href="asset.download"
+            :download="asset.download.split('/').pop()"
+            class="text-primary-comfy-yellow mt-auto inline-flex items-center gap-1 text-sm font-bold tracking-wider uppercase hover:underline"
+          >
+            {{ downloadLabel }}
+            <span aria-hidden="true">↓</span>
+          </a>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import GlassCard from '../common/GlassCard.vue'
+import CheckIcon from '../icons/CheckIcon.vue'
+
+type Criterion = { id: string; label: string }
+
+defineProps<{
+  heading: string
+  subheading: string
+  eyebrow?: string
+  criteria: readonly Criterion[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <GlassCard class="px-6 py-10 lg:px-16 lg:py-14">
+      <div
+        class="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16"
+      >
+        <h3 class="text-2xl font-light text-primary-comfy-canvas lg:text-4xl">
+          {{ subheading }}
+        </h3>
+
+        <div class="flex flex-col gap-6">
+          <span
+            v-if="eyebrow"
+            class="text-xs font-bold tracking-widest text-primary-comfy-canvas uppercase"
+          >
+            {{ eyebrow }}
+          </span>
+          <ul class="flex flex-col gap-4">
+            <li
+              v-for="criterion in criteria"
+              :key="criterion.id"
+              class="flex items-start gap-3"
+            >
+              <CheckIcon
+                class="text-primary-comfy-yellow mt-0.5 size-5 shrink-0"
+              />
+              <span class="text-sm text-primary-comfy-canvas lg:text-base">
+                {{ criterion.label }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </GlassCard>
+  </section>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import BrandButton from '../common/BrandButton.vue'
+
+type Cta = {
+  label: string
+  href: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
+type TermsLink = {
+  label: string
+  href: string
+}
+
+defineProps<{
+  heading: string
+  primaryCta: Cta
+  termsLink: TermsLink
+}>()
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 py-16 text-center lg:py-24"
+  >
+    <h2
+      class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <BrandButton
+      :href="primaryCta.href"
+      :target="primaryCta.target"
+      :rel="primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined"
+      variant="outline"
+      size="lg"
+      class="mt-10 px-20 py-4 text-base uppercase lg:mt-12"
+    >
+      {{ primaryCta.label }}
+    </BrandButton>
+
+    <a
+      :href="termsLink.href"
+      class="mt-8 text-sm text-primary-comfy-canvas/70 underline underline-offset-4 transition-colors hover:text-primary-comfy-canvas"
+    >
+      {{ termsLink.label }}
+    </a>
+  </section>
+</template>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { reactive, watch } from 'vue'
+
+type Faq = { id: string; question: string; answer: string }
+
+const { faqs } = defineProps<{
+  heading: string
+  faqs: readonly Faq[]
+}>()
+
+const expanded = reactive<boolean[]>(faqs.map(() => false))
+
+watch(
+  () => faqs.length,
+  (length) => {
+    if (length === expanded.length) return
+    expanded.length = 0
+    for (let i = 0; i < length; i += 1) expanded.push(false)
+  }
+)
+
+function toggle(index: number) {
+  expanded[index] = !expanded[index]
+}
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
+    <div class="flex flex-col gap-6 md:flex-row md:gap-16">
+      <!-- Left heading -->
+      <div
+        class="bg-primary-comfy-ink sticky top-20 z-10 w-full shrink-0 self-start py-4 md:top-28 md:w-80 md:py-0"
+      >
+        <h2 class="text-primary-comfy-canvas text-4xl font-light md:text-5xl">
+          {{ heading }}
+        </h2>
+      </div>
+
+      <!-- Right FAQ list -->
+      <div class="flex-1">
+        <div
+          v-for="(faq, index) in faqs"
+          :key="faq.id"
+          class="border-primary-comfy-canvas/20 border-b"
+        >
+          <button
+            :id="`faq-trigger-${faq.id}`"
+            type="button"
+            :aria-expanded="expanded[index]"
+            :aria-controls="`faq-panel-${faq.id}`"
+            :class="
+              cn(
+                'flex w-full cursor-pointer items-center justify-between text-left',
+                index === 0 ? 'pb-6' : 'py-6'
+              )
+            "
+            @click="toggle(index)"
+          >
+            <span
+              :class="
+                cn(
+                  'text-lg font-light md:text-xl',
+                  expanded[index]
+                    ? 'text-primary-comfy-yellow'
+                    : 'text-primary-comfy-canvas'
+                )
+              "
+            >
+              {{ faq.question }}
+            </span>
+            <span
+              class="text-primary-comfy-yellow ml-4 shrink-0 text-2xl"
+              aria-hidden="true"
+            >
+              {{ expanded[index] ? '−' : '+' }}
+            </span>
+          </button>
+          <section
+            v-show="expanded[index]"
+            :id="`faq-panel-${faq.id}`"
+            role="region"
+            :aria-labelledby="`faq-trigger-${faq.id}`"
+            class="pb-6"
+          >
+            <p class="text-primary-comfy-canvas/70 text-sm whitespace-pre-line">
+              {{ faq.answer }}
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Locale } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+import ProductHeroBadge from '../common/ProductHeroBadge.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
+import CheckIcon from '../icons/CheckIcon.vue'
+
+type Cta = {
+  label: string
+  href: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
+type VideoTrack = {
+  src: string
+  kind: 'subtitles' | 'captions' | 'descriptions'
+  srclang: string
+  label: string
+}
+
+const {
+  locale = 'en',
+  badgeText,
+  badgeLogoSrc,
+  badgeLogoAlt,
+  title,
+  titleHighlight,
+  features = [],
+  primaryCta,
+  secondaryCta,
+  imageSrc,
+  imageAlt = '',
+  imageWidth = 800,
+  imageHeight = 600,
+  imagePosition = 'right',
+  videoSrc,
+  videoPoster,
+  videoTracks = [],
+  videoAutoplay = false,
+  videoLoop = false,
+  videoMinimal = false,
+  videoHideControls = false
+} = defineProps<{
+  locale?: Locale
+  badgeText: string
+  badgeLogoSrc?: string
+  badgeLogoAlt?: string
+  title: string
+  titleHighlight?: string
+  features?: string[]
+  primaryCta: Cta
+  secondaryCta?: Cta
+  imageSrc?: string
+  imageAlt?: string
+  imageWidth?: number
+  imageHeight?: number
+  imagePosition?: 'left' | 'right'
+  videoSrc?: string
+  videoPoster?: string
+  videoTracks?: VideoTrack[]
+  videoAutoplay?: boolean
+  videoLoop?: boolean
+  videoMinimal?: boolean
+  videoHideControls?: boolean
+}>()
+</script>
+
+<template>
+  <section
+    :class="
+      cn(
+        'max-w-9xl relative mx-auto flex flex-col items-center gap-12 px-6 pt-20 pb-16 md:pt-28 md:pb-24 lg:items-center lg:gap-16 lg:px-16',
+        imagePosition === 'right' ? 'lg:flex-row' : 'lg:flex-row-reverse'
+      )
+    "
+  >
+    <div class="w-full lg:flex-1">
+      <ProductHeroBadge
+        :text="badgeText"
+        :logo-src="badgeLogoSrc"
+        :logo-alt="badgeLogoAlt"
+      />
+
+      <h1
+        class="mt-8 text-2xl leading-[125%] font-light tracking-[-1.44px] text-primary-comfy-canvas md:text-4xl lg:text-5xl"
+      >
+        <template v-if="titleHighlight">
+          <span class="text-primary-warm-white">{{ titleHighlight }}</span>
+          {{ title }}
+        </template>
+        <template v-else>{{ title }}</template>
+      </h1>
+
+      <ul v-if="features.length" class="mt-8 space-y-3">
+        <li
+          v-for="feature in features"
+          :key="feature"
+          class="flex items-start gap-3 text-base text-primary-comfy-canvas"
+        >
+          <CheckIcon class="text-primary-comfy-yellow mt-1 size-5 shrink-0" />
+          {{ feature }}
+        </li>
+      </ul>
+
+      <div class="mt-10 flex flex-col gap-4 sm:flex-row">
+        <BrandButton
+          :href="primaryCta.href"
+          :target="primaryCta.target"
+          size="lg"
+          class="px-8 py-4 text-base uppercase"
+        >
+          {{ primaryCta.label }}
+        </BrandButton>
+        <BrandButton
+          v-if="secondaryCta"
+          :href="secondaryCta.href"
+          :target="secondaryCta.target"
+          variant="outline"
+          size="lg"
+          class="px-8 py-4 text-base uppercase"
+        >
+          {{ secondaryCta.label }}
+        </BrandButton>
+      </div>
+    </div>
+
+    <div class="order-first w-full lg:order-last lg:flex-1">
+      <VideoPlayer
+        v-if="videoSrc"
+        :locale
+        :src="videoSrc"
+        :poster="videoPoster"
+        :tracks="videoTracks"
+        :autoplay="videoAutoplay"
+        :loop="videoLoop"
+        :minimal="videoMinimal"
+        :hide-controls="videoHideControls"
+      />
+      <img
+        v-else-if="imageSrc"
+        :src="imageSrc"
+        :alt="imageAlt"
+        :width="imageWidth"
+        :height="imageHeight"
+        fetchpriority="high"
+        decoding="async"
+        class="aspect-4/3 w-full rounded-3xl object-cover"
+      />
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import NodeUnionIcon from '../icons/NodeUnionIcon.vue'
+
+type Step = { id: string; label: string; description: string }
+
+defineProps<{
+  heading: string
+  steps: readonly Step[]
+}>()
+
+const isRtlRow = (i: number) => Math.floor(i / 2) % 2 === 1
+const isFullSpan = (i: number, total: number) =>
+  i === total - 1 && total % 2 === 1
+
+function hasHorizontalConnector(i: number, total: number) {
+  if (isFullSpan(i, total)) return false
+  if (!isRtlRow(i) && i % 2 === 0 && i + 1 < total) return true
+  if (isRtlRow(i) && i % 2 === 1) return true
+  return false
+}
+
+function hasMobileVertical(i: number, total: number) {
+  return i < total - 1
+}
+
+function hasLgVertical(i: number, total: number) {
+  return i % 2 === 1 && i + 1 < total
+}
+
+function cardClass(i: number, total: number) {
+  const fullSpan = isFullSpan(i, total)
+  const rtl = isRtlRow(i)
+  return cn(
+    'border-primary-comfy-yellow relative rounded-3xl border-2 p-8 lg:p-10',
+    fullSpan && 'lg:col-span-2',
+    !fullSpan && rtl && i % 2 === 0 && 'lg:col-start-2',
+    !fullSpan && rtl && i % 2 === 1 && 'lg:col-start-1'
+  )
+}
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <div
+      class="mx-auto grid max-w-3xl grid-cols-1 gap-4 lg:grid-flow-dense lg:grid-cols-2"
+    >
+      <div
+        v-for="(step, index) in steps"
+        :key="step.id"
+        :class="cardClass(index, steps.length)"
+      >
+        <span
+          class="bg-primary-comfy-yellow font-formula-narrow inline-block -skew-x-12 rounded-sm px-3 py-1.5 text-sm font-bold tracking-wide text-primary-comfy-ink uppercase lg:text-base"
+        >
+          <span class="inline-block skew-x-12">
+            {{ index + 1 }}. {{ step.label }}
+          </span>
+        </span>
+        <p class="mt-6 text-sm/relaxed text-primary-comfy-canvas lg:text-base">
+          {{ step.description }}
+        </p>
+
+        <NodeUnionIcon
+          v-if="hasHorizontalConnector(index, steps.length)"
+          class="text-primary-comfy-yellow absolute top-1/2 right-0 hidden size-4 translate-x-[calc(100%+2px)] -translate-y-1/2 scale-x-150 rotate-90 lg:block"
+        />
+        <NodeUnionIcon
+          v-if="
+            hasMobileVertical(index, steps.length) ||
+            hasLgVertical(index, steps.length)
+          "
+          :class="
+            cn(
+              'text-primary-comfy-yellow absolute bottom-0 left-1/2 size-4 -translate-x-1/2 translate-y-[calc(100%+2px)] scale-x-150',
+              !hasMobileVertical(index, steps.length) && 'hidden lg:block',
+              !hasLgVertical(index, steps.length) && 'lg:hidden'
+            )
+          "
+        />
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/careers/WhyJoinSection.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
+import type { Locale, TranslationKey } from '../../i18n/translations'
 
 import WireNodeLayout from '../common/WireNodeLayout.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const reasons = [
+const reasons: TranslationKey[] = [
   'careers.whyJoin.reason1',
   'careers.whyJoin.reason2',
   'careers.whyJoin.reason3',
   'careers.whyJoin.reason4',
   'careers.whyJoin.reason5'
-] as const
+]
 </script>
 
 <template>

apps/website/src/components/common/Badge.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { BadgeVariants } from './badge.variants'
+import { badgeVariants } from './badge.variants'
+
+const { variant, class: className } = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: string
+}>()
+</script>
+
+<template>
+  <span :class="cn(badgeVariants({ variant }), className)">
+    <slot />
+  </span>
+</template>

apps/website/src/components/common/BrandButton.vue

@@ -1,32 +1,39 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
+import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
 import type { BrandButtonVariants } from './brandButton.variants'
 import { brandButtonVariants } from './brandButton.variants'
 
-const {
-  href,
-  target,
-  variant,
-  size,
-  class: customClass = ''
-} = defineProps<{
+const props = defineProps<{
   href?: string
   target?: string
+  rel?: string
   variant?: BrandButtonVariants['variant']
   size?: BrandButtonVariants['size']
   class?: HTMLAttributes['class']
 }>()
+
+const resolvedRel = computed(
+  () =>
+    props.rel ?? (props.target === '_blank' ? 'noopener noreferrer' : undefined)
+)
 </script>
 
 <template>
   <component
-    :is="href ? 'a' : 'button'"
-    :href
-    :target
-    :class="cn(brandButtonVariants({ variant, size }), customClass)"
+    :is="props.href ? 'a' : 'button'"
+    :href="props.href"
+    :target="props.target"
+    :rel="resolvedRel"
+    :class="
+      cn(
+        brandButtonVariants({ variant: props.variant, size: props.size }),
+        props.class ?? ''
+      )
+    "
   >
     <span class="ppformula-text-center">
       <slot />

apps/website/src/components/common/CallToActionSection.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from './BrandButton.vue'
+
+const {
+  locale = 'en',
+  headingKey,
+  primaryLabelKey,
+  primaryHref,
+  secondaryLabelKey,
+  secondaryHref
+} = defineProps<{
+  locale?: Locale
+  headingKey: TranslationKey
+  primaryLabelKey: TranslationKey
+  primaryHref?: string
+  secondaryLabelKey?: TranslationKey
+  secondaryHref?: string
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-20 lg:py-32">
+    <div class="flex flex-col items-center text-center">
+      <h2
+        class="text-primary-comfy-canvas max-w-5xl text-3xl font-light tracking-tight lg:text-5xl"
+      >
+        {{ t(headingKey, locale) }}
+      </h2>
+      <div class="mt-10 flex flex-wrap items-center justify-center gap-3">
+        <BrandButton
+          :href="primaryHref"
+          variant="solid"
+          size="xs"
+          class="uppercase"
+        >
+          {{ t(primaryLabelKey, locale) }}
+        </BrandButton>
+        <BrandButton
+          v-if="secondaryLabelKey"
+          :href="secondaryHref"
+          variant="outline"
+          size="xs"
+          class="uppercase"
+        >
+          {{ t(secondaryLabelKey, locale) }}
+        </BrandButton>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/common/EventsSection.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type {
+  Locale,
+  LocalizedText,
+  TranslationKey
+} from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from './BrandButton.vue'
+
+export type EventItem = {
+  label: LocalizedText
+  title: LocalizedText
+  cta: LocalizedText
+  href: string
+}
+
+const {
+  locale = 'en',
+  headingKey,
+  descriptionKey,
+  notifyLabelKey,
+  notifyHref,
+  events
+} = defineProps<{
+  locale?: Locale
+  headingKey: TranslationKey
+  descriptionKey: TranslationKey
+  notifyLabelKey: TranslationKey
+  notifyHref?: string
+  events: readonly EventItem[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-12">
+    <div
+      class="bg-transparency-white-t4 rounded-4xl px-6 py-12 lg:px-16 lg:py-20"
+    >
+      <div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
+        <div class="flex flex-col gap-8">
+          <h2
+            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
+          >
+            {{ t(headingKey, locale) }}
+          </h2>
+          <p
+            class="text-primary-comfy-canvas max-w-sm text-sm/relaxed lg:text-base"
+          >
+            {{ t(descriptionKey, locale) }}
+          </p>
+          <div>
+            <BrandButton
+              :href="notifyHref"
+              variant="outline"
+              size="xs"
+              class="uppercase"
+            >
+              {{ t(notifyLabelKey, locale) }}
+            </BrandButton>
+          </div>
+        </div>
+
+        <div class="flex flex-col">
+          <a
+            v-for="(event, i) in events"
+            :key="i"
+            :href="event.href"
+            class="group border-primary-comfy-canvas/15 flex items-center gap-4 border-b py-6 lg:gap-8"
+          >
+            <span
+              class="text-primary-comfy-canvas shrink-0 text-sm font-medium"
+            >
+              {{ event.label[locale] }}
+            </span>
+            <span class="text-primary-warm-gray flex-1 text-sm">
+              {{ event.title[locale] }}
+            </span>
+            <span
+              class="text-primary-comfy-yellow flex shrink-0 items-center gap-2 text-sm"
+            >
+              {{ event.cta[locale] }}
+              <svg
+                class="size-4 transition-transform group-hover:translate-x-0.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/common/MaskRevealButton.stories.ts

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import MaskRevealButton from './MaskRevealButton.vue'
+
+const meta: Meta<typeof MaskRevealButton> = {
+  title: 'Website/Common/MaskRevealButton',
+  component: MaskRevealButton,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-12"><story /></div>'
+    })
+  ],
+  argTypes: {
+    href: { control: 'text' },
+    target: { control: 'text' },
+    rel: { control: 'text' },
+    type: {
+      control: { type: 'select' },
+      options: ['button', 'submit', 'reset']
+    },
+    disabled: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+    variant: {
+      control: { type: 'select' },
+      options: ['solid', 'ghost']
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg']
+    },
+    iconPosition: {
+      control: { type: 'select' },
+      options: ['right', 'left']
+    },
+    hideLabel: { control: 'boolean' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { href: '#' },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: `<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>`
+  })
+}
+
+export const Ghost: Story = {
+  args: { href: '#', variant: 'ghost' },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: '<MaskRevealButton v-bind="args">Read More</MaskRevealButton>'
+  })
+}
+
+export const IconLeft: Story = {
+  args: { href: '#', iconPosition: 'left' },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: '<MaskRevealButton v-bind="args">Go Back</MaskRevealButton>'
+  })
+}
+
+export const SmallSolid: Story = {
+  args: { href: '#', size: 'sm' },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: '<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>'
+  })
+}
+
+export const LargeSolid: Story = {
+  args: { href: '#', size: 'lg' },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: `<MaskRevealButton v-bind="args">Let's Collaborate</MaskRevealButton>`
+  })
+}
+
+export const WithCustomIcon: Story = {
+  args: { href: '#' },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: `
+      <MaskRevealButton v-bind="args">
+        Next Step
+        <template #icon>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <polyline points="9 6 15 12 9 18" />
+          </svg>
+        </template>
+      </MaskRevealButton>
+    `
+  })
+}
+
+export const LabelVisible: Story = {
+  args: { href: '#', hideLabel: false },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template:
+      '<MaskRevealButton v-bind="args">Always Visible</MaskRevealButton>'
+  })
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { MaskRevealButton },
+    setup: () => ({ args }),
+    template: '<MaskRevealButton v-bind="args">Unavailable</MaskRevealButton>'
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { MaskRevealButton },
+    template: `
+      <div class="flex flex-col gap-8">
+        <div class="flex flex-col gap-3">
+          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Solid</span>
+          <div class="flex flex-wrap items-center gap-4">
+            <MaskRevealButton href="#" variant="solid" size="sm">Small</MaskRevealButton>
+            <MaskRevealButton href="#" variant="solid" size="md">Medium</MaskRevealButton>
+            <MaskRevealButton href="#" variant="solid" size="lg">Large</MaskRevealButton>
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Ghost</span>
+          <div class="flex flex-wrap items-center gap-4">
+            <MaskRevealButton href="#" variant="ghost" size="sm">Small</MaskRevealButton>
+            <MaskRevealButton href="#" variant="ghost" size="md">Medium</MaskRevealButton>
+            <MaskRevealButton href="#" variant="ghost" size="lg">Large</MaskRevealButton>
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Icon Left</span>
+          <div class="flex flex-wrap items-center gap-4">
+            <MaskRevealButton href="#" iconPosition="left" size="sm">Small</MaskRevealButton>
+            <MaskRevealButton href="#" iconPosition="left" size="md">Medium</MaskRevealButton>
+            <MaskRevealButton href="#" iconPosition="left" size="lg">Large</MaskRevealButton>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}

apps/website/src/components/common/MaskRevealButton.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { HTMLAttributes } from 'vue'
+
+import type { MaskRevealButtonVariants } from './maskRevealButton.variants'
+import {
+  maskRevealButtonBadgeVariants,
+  maskRevealButtonVariants,
+  maskRevealLabelVariants
+} from './maskRevealButton.variants'
+
+const {
+  href,
+  target,
+  rel,
+  type = 'button',
+  disabled,
+  ariaLabel,
+  variant,
+  size,
+  iconPosition,
+  hideLabel = true,
+  class: customClass = ''
+} = defineProps<{
+  href?: string
+  target?: string
+  rel?: string
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  ariaLabel?: string
+  variant?: MaskRevealButtonVariants['variant']
+  size?: MaskRevealButtonVariants['size']
+  iconPosition?: MaskRevealButtonVariants['iconPosition']
+  hideLabel?: boolean
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :href="href || undefined"
+    :target="href ? target : undefined"
+    :rel="href ? rel : undefined"
+    :type="!href ? type : undefined"
+    :disabled="!href ? disabled : undefined"
+    :aria-label="ariaLabel"
+    :class="
+      cn(maskRevealButtonVariants({ variant, size, iconPosition }), customClass)
+    "
+  >
+    <span
+      :data-icon-position="iconPosition ?? 'right'"
+      :data-hidden="hideLabel ? 'true' : 'false'"
+      :class="maskRevealLabelVariants()"
+    >
+      <slot />
+    </span>
+    <span
+      :class="maskRevealButtonBadgeVariants({ variant, size, iconPosition })"
+      aria-hidden="true"
+    >
+      <span class="inline-flex transition-transform duration-500">
+        <slot name="icon">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M7 17 17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </slot>
+      </span>
+    </span>
+  </component>
+</template>

apps/website/src/components/common/PillButton.stories.ts

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import PillButton from './PillButton.vue'
+
+const meta: Meta<typeof PillButton> = {
+  title: 'Website/Common/PillButton',
+  component: PillButton,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-12"><story /></div>'
+    })
+  ],
+  argTypes: {
+    href: { control: 'text' },
+    target: { control: 'text' },
+    rel: { control: 'text' },
+    type: {
+      control: { type: 'select' },
+      options: ['button', 'submit', 'reset']
+    },
+    disabled: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+    variant: {
+      control: { type: 'select' },
+      options: ['solid', 'ghost']
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg']
+    },
+    iconPosition: {
+      control: { type: 'select' },
+      options: ['right', 'left']
+    },
+    hideLabel: { control: 'boolean' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AsAnchor: Story = {
+  args: { href: '#' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: `<PillButton v-bind="args">Let's Collaborate</PillButton>`
+  })
+}
+
+export const AsButton: Story = {
+  args: { type: 'button' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: '<PillButton v-bind="args">Submit</PillButton>'
+  })
+}
+
+export const Ghost: Story = {
+  args: { href: '#', variant: 'ghost' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: '<PillButton v-bind="args">Read More</PillButton>'
+  })
+}
+
+export const SmallSolid: Story = {
+  args: { href: '#', size: 'sm' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: '<PillButton v-bind="args">Try Workflow</PillButton>'
+  })
+}
+
+export const LargeSolid: Story = {
+  args: { href: '#', size: 'lg' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: `<PillButton v-bind="args">Let's Collaborate</PillButton>`
+  })
+}
+
+export const WithCustomIcon: Story = {
+  args: { href: '#' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: `
+      <PillButton v-bind="args">
+        Next Step
+        <template #icon>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <polyline points="9 6 15 12 9 18" />
+          </svg>
+        </template>
+      </PillButton>
+    `
+  })
+}
+
+export const IconLeft: Story = {
+  args: { href: '#', iconPosition: 'left' },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: '<PillButton v-bind="args">Go Back</PillButton>'
+  })
+}
+
+export const RevealLabelOnHover: Story = {
+  args: { href: '#', hideLabel: true },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: '<PillButton v-bind="args">Try Workflow</PillButton>'
+  })
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { PillButton },
+    setup: () => ({ args }),
+    template: '<PillButton v-bind="args">Unavailable</PillButton>'
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { PillButton },
+    template: `
+      <div class="flex flex-col gap-8">
+        <div class="flex flex-col gap-3">
+          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Solid</span>
+          <div class="flex flex-wrap items-center gap-4">
+            <PillButton href="#" variant="solid" size="sm">Small</PillButton>
+            <PillButton href="#" variant="solid" size="md">Medium</PillButton>
+            <PillButton href="#" variant="solid" size="lg">Large</PillButton>
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Ghost</span>
+          <div class="flex flex-wrap items-center gap-4">
+            <PillButton href="#" variant="ghost" size="sm">Small</PillButton>
+            <PillButton href="#" variant="ghost" size="md">Medium</PillButton>
+            <PillButton href="#" variant="ghost" size="lg">Large</PillButton>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}

apps/website/src/components/common/PillButton.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { HTMLAttributes } from 'vue'
+
+import type { PillButtonVariants } from './pillButton.variants'
+import {
+  pillButtonBadgeVariants,
+  pillButtonVariants
+} from './pillButton.variants'
+
+const {
+  href,
+  target,
+  rel,
+  type = 'button',
+  disabled,
+  ariaLabel,
+  variant,
+  size,
+  iconPosition,
+  hideLabel = false,
+  class: customClass = ''
+} = defineProps<{
+  href?: string
+  target?: string
+  rel?: string
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  ariaLabel?: string
+  variant?: PillButtonVariants['variant']
+  size?: PillButtonVariants['size']
+  iconPosition?: PillButtonVariants['iconPosition']
+  hideLabel?: boolean
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :href="href || undefined"
+    :target="href ? target : undefined"
+    :rel="href ? rel : undefined"
+    :type="!href ? type : undefined"
+    :disabled="!href ? disabled : undefined"
+    :aria-label="ariaLabel"
+    :class="
+      cn(pillButtonVariants({ variant, size, iconPosition }), customClass)
+    "
+  >
+    <span
+      :class="
+        cn(
+          'relative leading-none transition-all duration-500',
+          hideLabel && 'opacity-0 group-hover:opacity-100'
+        )
+      "
+    >
+      <slot />
+    </span>
+    <span
+      :class="pillButtonBadgeVariants({ variant, size, iconPosition })"
+      aria-hidden="true"
+    >
+      <span class="inline-flex transition-transform duration-500">
+        <slot name="icon">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M7 17 17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </slot>
+      </span>
+    </span>
+  </component>
+</template>

apps/website/src/components/common/ProductHeroBadge.vue

@@ -2,7 +2,7 @@
 const {
   logoSrc = '/icons/logo.svg',
   logoAlt = 'Comfy',
-  text = 'LOCAL'
+  text = 'DESKTOP'
 } = defineProps<{
   logoSrc?: string
   logoAlt?: string
@@ -20,7 +20,7 @@ const {
     />
 
     <span
-      class="bg-primary-comfy-yellow text-primary-comfy-ink my-auto flex h-12 items-center justify-center lg:my-0 lg:h-auto lg:p-8"
+      class="bg-primary-comfy-yellow my-auto flex h-12 items-center justify-center text-primary-comfy-ink lg:my-0 lg:h-auto lg:p-8"
     >
       <img
         :src="logoSrc"
@@ -37,7 +37,7 @@ const {
     />
 
     <span
-      class="bg-primary-comfy-yellow text-primary-comfy-ink my-auto flex h-7.25 items-center justify-center lg:h-15.5 lg:px-6"
+      class="bg-primary-comfy-yellow my-auto flex h-7.25 items-center justify-center text-primary-comfy-ink lg:h-15.5 lg:px-6"
     >
       <span
         class="inline-block translate-y-0.5 text-2xl leading-none font-bold lg:text-3xl"

apps/website/src/components/common/SiteFooter.vue

@@ -43,6 +43,7 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
   {
     title: t('footer.resources', locale),
     links: [
+      { label: t('nav.learning', locale), href: routes.learning },
       {
         label: t('footer.blog', locale),
         href: externalLinks.blog,
@@ -67,6 +68,10 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
         label: t('nav.youtube', locale),
         href: externalLinks.youtube,
         external: true
+      },
+      {
+        label: t('footer.affiliateProgram', locale),
+        href: routes.affiliates
       }
     ]
   }

apps/website/src/components/common/SiteNav.vue

@@ -52,6 +52,7 @@ const navLinks: NavLink[] = [
   {
     label: t('nav.resources', locale),
     items: [
+      { label: t('nav.learning', locale), href: routes.learning },
       {
         label: t('nav.blogs', locale),
         href: externalLinks.blog,
@@ -93,7 +94,7 @@ const ctaButtons = [
   {
     label: t('nav.downloadLocal', locale),
     prefix: 'DOWNLOAD',
-    core: 'LOCAL',
+    core: 'DESKTOP',
     href: routes.download,
     primary: false
   },
@@ -163,7 +164,7 @@ onMounted(() => {
   />
 
   <nav
-    class="bg-primary-comfy-ink fixed inset-x-0 top-0 z-50 flex items-center justify-between gap-4 px-6 py-5 lg:gap-4 lg:px-[clamp(0.25rem,4vw,5rem)] lg:py-8"
+    class="fixed inset-x-0 top-0 z-50 flex items-center justify-between gap-4 bg-primary-comfy-ink px-6 py-5 lg:gap-4 lg:px-[clamp(0.25rem,4vw,5rem)] lg:py-8"
     aria-label="Main navigation"
   >
     <a

apps/website/src/components/common/VideoPlayer.vue

@@ -28,14 +28,18 @@ const {
   poster,
   tracks = [],
   autoplay = false,
-  minimal = false
+  loop = false,
+  minimal = false,
+  hideControls = false
 } = defineProps<{
   locale?: Locale
   src?: string
   poster?: string
   tracks?: VideoTrack[]
   autoplay?: boolean
+  loop?: boolean
   minimal?: boolean
+  hideControls?: boolean
 }>()
 
 const playerEl = useTemplateRef<HTMLDivElement>('playerEl')
@@ -200,8 +204,9 @@ function toggleFullscreen() {
       crossorigin="anonymous"
       playsinline
       :autoplay
+      :loop
       muted
-      @click="playing = !playing"
+      @click="hideControls ? undefined : (playing = !playing)"
     >
       <track
         v-for="track in tracks"
@@ -215,7 +220,7 @@ function toggleFullscreen() {
 
     <!-- Minimal centered play/pause button -->
     <div
-      v-if="minimal && src"
+      v-if="minimal && src && !hideControls"
       :class="
         cn(
           'absolute inset-0 flex items-center justify-center transition-opacity duration-300',
@@ -235,7 +240,7 @@ function toggleFullscreen() {
 
     <!-- Bottom control bar -->
     <div
-      v-if="src && !minimal"
+      v-if="src && !minimal && !hideControls"
       :class="
         cn(
           'absolute inset-x-0 bottom-0 flex items-center gap-3 p-4 transition-opacity duration-300 lg:px-6 lg:py-5',
@@ -285,7 +290,7 @@ function toggleFullscreen() {
         @click="toggleFullscreen"
       >
         <svg
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -331,7 +336,7 @@ function toggleFullscreen() {
         <!-- Muted icon -->
         <svg
           v-if="muted"
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
           viewBox="0 0 24 24"
           fill="currentColor"
           stroke="currentColor"
@@ -349,7 +354,7 @@ function toggleFullscreen() {
         <!-- Unmuted icon -->
         <svg
           v-else
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
           viewBox="0 0 24 24"
           fill="currentColor"
           stroke="currentColor"

apps/website/src/components/common/badge.variants.ts

@@ -0,0 +1,17 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const badgeVariants = cva({
+  base: 'text-primary-warm-gray focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-4 py-1 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+  variants: {
+    variant: {
+      default: 'bg-transparency-ink-t80',
+      subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+})
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

apps/website/src/components/common/maskRevealButton.variants.ts

@@ -0,0 +1,110 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const maskRevealButtonVariants = cva({
+  base: 'group relative uppercase inline-flex w-fit cursor-pointer items-center overflow-hidden rounded-lg p-1 font-bold text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    variant: {
+      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
+      ghost: 'text-primary-comfy-yellow bg-transparent'
+    },
+    size: {
+      sm: 'h-10 text-xs',
+      md: 'h-12 text-sm',
+      lg: 'h-14 text-base'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    { size: 'sm', iconPosition: 'right', class: 'ps-12 pe-4' },
+    { size: 'md', iconPosition: 'right', class: 'ps-14 pe-6' },
+    { size: 'lg', iconPosition: 'right', class: 'ps-16 pe-8' },
+    { size: 'sm', iconPosition: 'left', class: 'ps-4 pe-12' },
+    { size: 'md', iconPosition: 'left', class: 'ps-6 pe-14' },
+    { size: 'lg', iconPosition: 'left', class: 'ps-8 pe-16' }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    iconPosition: 'right'
+  }
+})
+
+export const maskRevealButtonBadgeVariants = cva({
+  base: 'absolute z-10 flex items-center justify-center rounded-lg transition-all duration-500',
+  variants: {
+    variant: {
+      solid: 'bg-primary-comfy-ink text-primary-comfy-yellow',
+      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
+    },
+    size: {
+      sm: 'size-8',
+      md: 'size-10',
+      lg: 'size-12'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'sm',
+      iconPosition: 'right',
+      class: 'right-1 group-hover:right-[calc(100%-36px)]'
+    },
+    {
+      size: 'md',
+      iconPosition: 'right',
+      class: 'right-1 group-hover:right-[calc(100%-44px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class: 'right-1 group-hover:right-[calc(100%-52px)]'
+    },
+    {
+      size: 'sm',
+      iconPosition: 'left',
+      class: 'left-1 group-hover:left-[calc(100%-36px)]'
+    },
+    {
+      size: 'md',
+      iconPosition: 'left',
+      class: 'left-1 group-hover:left-[calc(100%-44px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class: 'left-1 group-hover:left-[calc(100%-52px)]'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    iconPosition: 'right'
+  }
+})
+
+export const maskRevealLabelVariants = cva({
+  base: [
+    'relative inline-block align-baseline',
+    '[will-change:mask-size,-webkit-mask-size]',
+    '[mask-image:linear-gradient(black,black)] [-webkit-mask-image:linear-gradient(black,black)]',
+    'mask-no-repeat [-webkit-mask-repeat:no-repeat]',
+    'transition-[mask-size,-webkit-mask-size] duration-500 ease-in-out',
+    'data-[icon-position=right]:[mask-position:100%_0] data-[icon-position=right]:[-webkit-mask-position:100%_0]',
+    'data-[icon-position=left]:[mask-position:0_0] data-[icon-position=left]:[-webkit-mask-position:0_0]',
+    'data-[hidden=true]:[mask-size:0%_100%] data-[hidden=true]:[-webkit-mask-size:0%_100%]',
+    'data-[hidden=false]:[mask-size:100%_100%] data-[hidden=false]:[-webkit-mask-size:100%_100%]',
+    'group-hover:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-hover:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]',
+    'group-focus-visible:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-focus-visible:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]'
+  ].join(' ')
+})
+
+export type MaskRevealButtonVariants = VariantProps<
+  typeof maskRevealButtonVariants
+>

apps/website/src/components/common/pillButton.variants.ts

@@ -0,0 +1,116 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const pillButtonVariants = cva({
+  base: 'group relative inline-flex w-fit cursor-pointer items-center overflow-hidden rounded-lg p-1 font-bold text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    variant: {
+      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
+      ghost: 'text-primary-comfy-yellow bg-transparent'
+    },
+    size: {
+      sm: 'h-10 text-xs',
+      md: 'h-12 text-sm',
+      lg: 'h-14 text-base'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'sm',
+      iconPosition: 'right',
+      class: 'ps-4 pe-12 hover:ps-12 hover:pe-4'
+    },
+    {
+      size: 'md',
+      iconPosition: 'right',
+      class: 'ps-6 pe-14 hover:ps-14 hover:pe-6'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class: 'ps-8 pe-16 hover:ps-16 hover:pe-8'
+    },
+    {
+      size: 'sm',
+      iconPosition: 'left',
+      class: 'ps-12 pe-4 hover:ps-4 hover:pe-12'
+    },
+    {
+      size: 'md',
+      iconPosition: 'left',
+      class: 'ps-14 pe-6 hover:ps-6 hover:pe-14'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class: 'ps-16 pe-8 hover:ps-8 hover:pe-16'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    iconPosition: 'right'
+  }
+})
+
+export const pillButtonBadgeVariants = cva({
+  base: 'absolute z-10 flex items-center justify-center rounded-lg transition-all duration-500',
+  variants: {
+    variant: {
+      solid: 'bg-primary-comfy-ink text-primary-comfy-yellow',
+      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
+    },
+    size: {
+      sm: 'size-8',
+      md: 'size-10',
+      lg: 'size-12'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'sm',
+      iconPosition: 'right',
+      class: 'right-1 group-hover:right-[calc(100%-36px)]'
+    },
+    {
+      size: 'md',
+      iconPosition: 'right',
+      class: 'right-1 group-hover:right-[calc(100%-44px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class: 'right-1 group-hover:right-[calc(100%-52px)]'
+    },
+    {
+      size: 'sm',
+      iconPosition: 'left',
+      class: 'left-1 group-hover:left-[calc(100%-36px)]'
+    },
+    {
+      size: 'md',
+      iconPosition: 'left',
+      class: 'left-1 group-hover:left-[calc(100%-44px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class: 'left-1 group-hover:left-[calc(100%-52px)]'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    iconPosition: 'right'
+  }
+})
+
+export type PillButtonVariants = VariantProps<typeof pillButtonVariants>

apps/website/src/components/gallery/GalleryCard.vue

@@ -7,12 +7,16 @@ const {
   item,
   locale = 'en',
   aspect = 'var(--aspect-ratio-gallery-card)',
-  mobile = false
+  mobile = false,
+  objectPosition = 'center',
+  objectFit = 'cover'
 } = defineProps<{
   item: GalleryItem
   locale?: Locale
   aspect?: string
   mobile?: boolean
+  objectPosition?: string
+  objectFit?: string
 }>()
 
 defineEmits<{ click: [] }>()
@@ -31,13 +35,15 @@ defineEmits<{ click: [] }>()
         loop
         muted
         playsinline
-        class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+        class="size-full transition-transform duration-300 group-hover:scale-105"
+        :style="{ objectPosition, objectFit }"
       />
       <img
         v-else
         :src="item.image"
         :alt="item.title"
-        class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+        class="size-full transition-transform duration-300 group-hover:scale-105"
+        :style="{ objectPosition, objectFit }"
       />
       <!-- Desktop hover overlay -->
       <div

apps/website/src/components/icons/CheckIcon.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+    :class="$props.class"
+  >
+    <path
+      d="M5 11.5811L10.2582 18.0581L20 6.05811"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

apps/website/src/components/icons/NodeUnionIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useId } from 'vue'
+
+defineProps<{ class?: HTMLAttributes['class'] }>()
+
+const clipId = `node-union-icon-clip-${useId()}`
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    fill="none"
+    aria-hidden="true"
+    :class="$props.class"
+  >
+    <g :clip-path="`url(#${clipId})`">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M-1.59144e-05 0H100V100H-1.59144e-05V0ZM32.3741 50C32.3741 77.0727 16.2692 99.0196 -3.59714 99.0196C-23.4635 99.0196 -39.5684 77.0727 -39.5684 50C-39.5684 22.9273 -23.4635 0.980392 -3.59714 0.980392C16.2692 0.980392 32.3741 22.9273 32.3741 50ZM139.568 50C139.568 77.0727 123.463 99.0196 103.597 99.0196C83.7309 99.0196 67.6259 77.0727 67.6259 50C67.6259 22.9273 83.7309 0.980392 103.597 0.980392C123.463 0.980392 139.568 22.9273 139.568 50Z"
+      />
+    </g>
+    <defs>
+      <clipPath :id="clipId">
+        <rect width="100" height="100" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

apps/website/src/components/learning/FeaturedWorkflowSection.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import Badge from '../common/Badge.vue'
+import BrandButton from '../common/BrandButton.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const tags = ['Seadance 2.0', 'Image To Video']
+const demoVideoSrc =
+  'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4'
+const demoVideoPoster =
+  'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg'
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
+      <div class="flex flex-col gap-8">
+        <div>
+          <h2
+            class="text-3xl leading-[110%] font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+          >
+            {{ t('learning.featured.title', locale) }}
+          </h2>
+          <p class="text-primary-warm-gray mt-4 text-sm lg:text-base">
+            {{ t('learning.featured.author', locale) }}
+          </p>
+        </div>
+
+        <p
+          class="max-w-md text-sm/relaxed text-primary-comfy-canvas lg:text-base"
+        >
+          {{ t('learning.featured.description', locale) }}
+        </p>
+
+        <div class="flex flex-wrap gap-3">
+          <BrandButton
+            variant="outline"
+            size="xs"
+            class="uppercase"
+            href="https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/"
+          >
+            {{ t('cta.tryWorkflow', locale) }}
+          </BrandButton>
+        </div>
+
+        <ul class="mt-2 flex flex-wrap gap-3">
+          <li v-for="tag in tags" :key="tag">
+            <Badge variant="subtle">{{ tag }}</Badge>
+          </li>
+        </ul>
+      </div>
+
+      <div class="border-primary-warm-gray rounded-4.5xl border p-4">
+        <VideoPlayer
+          :locale
+          :src="demoVideoSrc"
+          :poster="demoVideoPoster"
+          minimal
+        />
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/learning/HeroSection.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-24 pb-12 text-center"
+  >
+    <h1
+      class="text-primary-comfy-canvas max-w-4xl text-3xl leading-[110%] font-light tracking-tight lg:text-5xl"
+    >
+      {{ t('learning.heroTitle.before', locale) }}
+      <span class="text-primary-comfy-yellow">ComfyUI</span
+      >{{ t('learning.heroTitle.after', locale) }}
+      <br />
+      {{ t('learning.heroTitle.line2', locale) }}
+    </h1>
+  </section>
+</template>

apps/website/src/components/learning/TutorialDetailDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+
+import type { LearningTutorial } from '../../data/learningTutorials'
+import type { Locale } from '../../i18n/translations'
+
+import { lockScroll, unlockScroll } from '../../composables/scrollLock'
+import { t } from '../../i18n/translations'
+import VideoPlayer from '../common/VideoPlayer.vue'
+
+const { tutorial, locale = 'en' } = defineProps<{
+  tutorial: LearningTutorial
+  locale?: Locale
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const dialogRef = useTemplateRef<HTMLDialogElement>('dialogRef')
+
+function handleBackdropClick(e: MouseEvent) {
+  if (e.target === e.currentTarget) emit('close')
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+
+onMounted(() => {
+  lockScroll()
+  dialogRef.value?.showModal()
+})
+
+onUnmounted(() => {
+  unlockScroll()
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <dialog
+      ref="dialogRef"
+      :aria-label="tutorial.title[locale]"
+      class="fixed inset-0 z-50 flex size-full max-h-none max-w-none flex-col items-center justify-center border-0 bg-transparent px-4 py-8 backdrop-blur-xl backdrop:bg-transparent lg:px-20 lg:py-8"
+      @click="handleBackdropClick"
+      @keydown="handleKeydown"
+      @close="emit('close')"
+    >
+      <button
+        :aria-label="t('gallery.detail.close', locale)"
+        class="border-primary-comfy-yellow hover:bg-primary-comfy-yellow group absolute top-8 right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 bg-primary-comfy-ink transition-colors lg:right-26"
+        @click="emit('close')"
+      >
+        <span
+          class="bg-primary-comfy-yellow size-5 transition-colors group-hover:bg-primary-comfy-ink"
+          style="mask: url('/icons/close.svg') center / contain no-repeat"
+        />
+      </button>
+
+      <div
+        class="border-primary-comfy-yellow rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 bg-primary-comfy-ink p-3 lg:p-4"
+      >
+        <VideoPlayer
+          :key="tutorial.id"
+          :locale
+          :src="tutorial.videoSrc"
+          :poster="tutorial.poster"
+          autoplay
+          class="w-full"
+        />
+      </div>
+
+      <h2
+        class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
+      >
+        {{ t('learning.tutorials.titlePrefix', locale) }}
+        {{ tutorial.title[locale] }}
+      </h2>
+    </dialog>
+  </Teleport>
+</template>

apps/website/src/components/learning/TutorialsSection.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+
+import {
+  getTutorialPosterSrc,
+  learningTutorials
+} from '../../data/learningTutorials'
+import { t } from '../../i18n/translations'
+import Badge from '../common/Badge.vue'
+import MaskRevealButton from '../common/MaskRevealButton.vue'
+import TutorialDetailDialog from './TutorialDetailDialog.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const activeTutorialId = ref<string | null>(null)
+const activeTutorial = () =>
+  learningTutorials.find((tutorial) => tutorial.id === activeTutorialId.value)
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ t('learning.tutorials.heading', locale) }}
+    </h2>
+
+    <ul
+      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
+    >
+      <li
+        v-for="tutorial in learningTutorials"
+        :key="tutorial.id"
+        class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
+      >
+        <button
+          type="button"
+          class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
+          @click="activeTutorialId = tutorial.id"
+        >
+          <video
+            :src="getTutorialPosterSrc(tutorial)"
+            :poster="tutorial.poster"
+            class="size-full object-cover"
+            preload="metadata"
+            playsinline
+            muted
+          ></video>
+          <span
+            class="absolute inset-0 flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <span
+              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
+            >
+              <svg
+                class="ml-1 size-5 text-white lg:size-6"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </span>
+          </span>
+        </button>
+
+        <div class="flex flex-col space-y-3 p-4">
+          <div class="flex items-center justify-between gap-4">
+            <h3
+              class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
+            >
+              {{ t('learning.tutorials.titlePrefix', locale) }}<br />
+              {{ tutorial.title[locale] }}
+            </h3>
+            <MaskRevealButton
+              v-if="tutorial.href"
+              :href="tutorial.href"
+              icon-position="right"
+              class="shrink-0"
+              variant="ghost"
+              size="sm"
+            >
+              {{ t('cta.tryWorkflow', locale) }}
+              <template #icon>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="size-4"
+                >
+                  <polyline points="9 6 15 12 9 18" />
+                </svg>
+              </template>
+            </MaskRevealButton>
+          </div>
+
+          <ul class="flex flex-wrap gap-2">
+            <li v-for="tag in tutorial.tags" :key="tag">
+              <Badge>{{ t(tag, locale) }}</Badge>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+
+    <TutorialDetailDialog
+      v-if="activeTutorial()"
+      :tutorial="activeTutorial()!"
+      :locale="locale"
+      @close="activeTutorialId = null"
+    />
+  </section>
+</template>

apps/website/src/components/legal/LegalContentSection.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { useIntersectionObserver, useTemplateRefsList } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { hasKey, t, translationKeys } from '../../i18n/translations'
+import { prefersReducedMotion } from '../../composables/useReducedMotion'
+import { scrollTo } from '../../scripts/smoothScroll'
+
+const {
+  prefix,
+  locale = 'en',
+  tocLabelKey
+} = defineProps<{
+  prefix: string
+  locale?: Locale
+  tocLabelKey: TranslationKey
+}>()
+
+interface Block {
+  type: 'paragraph' | 'list'
+  key: TranslationKey
+}
+
+interface LegalSection {
+  id: string
+  title: string
+  blocks: Block[]
+}
+
+function escapeRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function buildSections(): LegalSection[] {
+  const labelRegex = new RegExp(`^${escapeRegex(prefix)}\\.([^.]+)\\.label$`)
+  const sectionIds: string[] = []
+  for (const key of translationKeys) {
+    const match = key.match(labelRegex)
+    if (match && !sectionIds.includes(match[1])) sectionIds.push(match[1])
+  }
+
+  return sectionIds.map((id) => {
+    const blockRegex = new RegExp(
+      `^${escapeRegex(prefix)}\\.${escapeRegex(id)}\\.block\\.(\\d+)$`
+    )
+    const indices: number[] = []
+    for (const key of translationKeys) {
+      const match = key.match(blockRegex)
+      if (match) indices.push(parseInt(match[1]))
+    }
+    indices.sort((a, b) => a - b)
+
+    const blocks: Block[] = indices.map((i) => {
+      const key = `${prefix}.${id}.block.${i}` as TranslationKey
+      const value = t(key, locale)
+      return { type: value.includes('\n') ? 'list' : 'paragraph', key }
+    })
+
+    const titleKey = `${prefix}.${id}.title` as TranslationKey
+    return {
+      id,
+      title: hasKey(titleKey)
+        ? t(titleKey, locale)
+        : t(`${prefix}.${id}.label` as TranslationKey, locale),
+      blocks
+    }
+  })
+}
+
+const sections = buildSections()
+const tocItems = computed(() =>
+  sections.map((s) => ({ id: s.id, title: s.title }))
+)
+const activeSection = ref(sections[0]?.id ?? '')
+const sectionRefs = useTemplateRefsList<HTMLElement>()
+const mobileTocOpen = ref(false)
+
+let isScrolling = false
+const HEADER_OFFSET = -144
+
+useIntersectionObserver(
+  sectionRefs,
+  (entries) => {
+    if (isScrolling) return
+    let best: IntersectionObserverEntry | null = null
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue
+      if (!best || entry.boundingClientRect.top < best.boundingClientRect.top)
+        best = entry
+    }
+    if (best) activeSection.value = best.target.id
+  },
+  { rootMargin: '-20% 0px -60% 0px' }
+)
+
+function scrollToSection(id: string) {
+  activeSection.value = id
+  isScrolling = true
+  mobileTocOpen.value = false
+  const nextHash = `#${id}`
+  if (window.location.hash !== nextHash) {
+    history.replaceState(null, '', nextHash)
+  }
+  const el = document.getElementById(id)
+  if (el) {
+    scrollTo(el, {
+      offset: HEADER_OFFSET,
+      duration: 0.8,
+      immediate: prefersReducedMotion(),
+      onComplete: () => {
+        isScrolling = false
+      }
+    })
+    return
+  }
+  isScrolling = false
+}
+
+function listItems(key: TranslationKey): string[] {
+  return t(key, locale).split('\n')
+}
+</script>
+
+<template>
+  <section class="px-4 pt-8 pb-24 lg:px-20 lg:pt-12 lg:pb-32">
+    <div class="mx-auto max-w-7xl lg:flex lg:gap-16">
+      <aside class="lg:w-64 lg:shrink-0">
+        <details
+          :open="mobileTocOpen"
+          class="border-transparency-white-t4 mb-8 rounded-2xl border bg-(--site-bg-soft) lg:hidden"
+          @toggle="
+            (e) => (mobileTocOpen = (e.target as HTMLDetailsElement).open)
+          "
+        >
+          <summary
+            class="text-primary-comfy-canvas flex cursor-pointer items-center justify-between px-4 py-3 text-sm font-semibold tracking-wide select-none"
+          >
+            <span>{{ t(tocLabelKey, locale) }}</span>
+            <span
+              :class="
+                mobileTocOpen
+                  ? 'rotate-180 transition-transform'
+                  : 'transition-transform'
+              "
+              aria-hidden="true"
+            >
+              ▾
+            </span>
+          </summary>
+          <ul class="border-transparency-white-t4 border-t p-2">
+            <li v-for="item in tocItems" :key="item.id">
+              <a
+                :href="`#${item.id}`"
+                :aria-current="activeSection === item.id ? 'true' : undefined"
+                :class="
+                  cn(
+                    'hover:bg-transparency-white-t4 block rounded-lg px-3 py-2 text-sm transition-colors',
+                    activeSection === item.id
+                      ? 'text-primary-comfy-yellow font-semibold'
+                      : 'text-primary-warm-gray'
+                  )
+                "
+                @click.prevent="scrollToSection(item.id)"
+              >
+                {{ item.title }}
+              </a>
+            </li>
+          </ul>
+        </details>
+
+        <nav
+          class="hidden lg:sticky lg:top-32 lg:block"
+          :aria-label="t(tocLabelKey, locale)"
+        >
+          <p
+            class="text-primary-warm-gray mb-4 text-xs font-semibold tracking-widest uppercase"
+          >
+            {{ t(tocLabelKey, locale) }}
+          </p>
+          <ul class="space-y-2">
+            <li v-for="item in tocItems" :key="item.id">
+              <a
+                :href="`#${item.id}`"
+                :aria-current="activeSection === item.id ? 'true' : undefined"
+                class="hover:text-primary-comfy-canvas block text-sm/snug transition-colors"
+                :class="
+                  activeSection === item.id
+                    ? 'text-primary-comfy-yellow font-semibold'
+                    : 'text-primary-warm-gray'
+                "
+                @click.prevent="scrollToSection(item.id)"
+              >
+                {{ item.title }}
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+
+      <article class="flex-1 lg:max-w-3xl">
+        <section
+          v-for="section in sections"
+          :id="section.id"
+          :ref="sectionRefs.set"
+          :key="section.id"
+          class="mb-16 scroll-mt-24 lg:scroll-mt-36"
+        >
+          <h2
+            class="text-primary-comfy-canvas mb-6 text-2xl font-light lg:text-3xl"
+          >
+            {{ section.title }}
+          </h2>
+
+          <template v-for="block in section.blocks" :key="block.key">
+            <p
+              v-if="block.type === 'paragraph'"
+              class="text-primary-comfy-canvas mt-4 text-sm/relaxed lg:text-base/relaxed"
+              v-html="t(block.key, locale)"
+            />
+            <ul
+              v-else
+              class="mt-4 space-y-2 pl-5 text-sm/relaxed lg:text-base/relaxed"
+            >
+              <li
+                v-for="(item, j) in listItems(block.key)"
+                :key="j"
+                class="text-primary-comfy-canvas flex items-start gap-2"
+              >
+                <span
+                  class="bg-primary-comfy-yellow mt-2 size-1.5 shrink-0 rounded-full"
+                  aria-hidden="true"
+                />
+                <span v-html="item" />
+              </li>
+            </ul>
+          </template>
+        </section>
+      </article>
+    </div>
+  </section>
+</template>

apps/website/src/components/legal/legalSections.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+
+import { getRoutes } from '../../config/routes'
+import { hasKey, t, translationKeys } from '../../i18n/translations'
+
+const PREFIX = 'affiliate-terms'
+const EXPECTED_SECTION_IDS = [
+  '1-program-overview',
+  '2-eligible-products',
+  '3-commission-structure',
+  '4-attribution-rules',
+  '5-prohibited-activities',
+  '6-content-guidelines',
+  '7-termination',
+  '8-program-modifications',
+  '9-indemnification',
+  '10-governing-law',
+  '11-miscellaneous'
+] as const
+
+function deriveAffiliateSectionIds(): string[] {
+  const labelRegex = new RegExp(`^${PREFIX}\\.([0-9]+-[a-z-]+)\\.label$`)
+  const ids: string[] = []
+  for (const key of translationKeys) {
+    const match = key.match(labelRegex)
+    if (match && !ids.includes(match[1])) ids.push(match[1])
+  }
+  return ids
+}
+
+describe('affiliate terms i18n', () => {
+  it('exposes the eleven canonical sections in numeric order', () => {
+    const ids = deriveAffiliateSectionIds()
+    expect(ids).toEqual([...EXPECTED_SECTION_IDS])
+  })
+
+  it('every section has a label, title, and at least one block', () => {
+    for (const id of EXPECTED_SECTION_IDS) {
+      expect(hasKey(`${PREFIX}.${id}.label`)).toBe(true)
+      expect(hasKey(`${PREFIX}.${id}.title`)).toBe(true)
+      expect(hasKey(`${PREFIX}.${id}.block.0`)).toBe(true)
+    }
+  })
+
+  it('section titles follow the "N. Section Name" pattern', () => {
+    for (const id of EXPECTED_SECTION_IDS) {
+      const title = t(`${PREFIX}.${id}.title` as never)
+      const numberPrefix = id.split('-')[0]
+      expect(title).toMatch(new RegExp(`^${numberPrefix}\\. `))
+    }
+  })
+
+  it('exposes the effective date and page-chrome keys editors will need', () => {
+    expect(hasKey('affiliate-terms.effective-date')).toBe(true)
+    expect(hasKey('affiliate-terms.page.title')).toBe(true)
+    expect(hasKey('affiliate-terms.page.heading')).toBe(true)
+    expect(hasKey('affiliate-terms.page.tocLabel')).toBe(true)
+    expect(hasKey('affiliate-terms.page.effectiveDateLabel')).toBe(true)
+  })
+
+  it('does not include any internal-only "Competitive analysis" or "Open questions" keys', () => {
+    const internalRegex = /(competitive-analysis|open-questions|legal-review)/
+    const leaks = translationKeys.filter(
+      (key) => key.startsWith(PREFIX) && internalRegex.test(key)
+    )
+    expect(leaks).toEqual([])
+  })
+
+  it('exposes affiliate terms at the canonical /affiliates/terms path regardless of locale', () => {
+    // Guards against re-introducing /zh-CN/affiliates/terms, which would
+    // serve an unreviewed translation of legal-reviewed copy. See the
+    // comment on LOCALE_INVARIANT_ROUTE_KEYS in src/config/routes.ts.
+    expect(getRoutes('en').affiliateTerms).toBe('/affiliates/terms')
+    expect(getRoutes('zh-CN').affiliateTerms).toBe('/affiliates/terms')
+  })
+})

apps/website/src/components/models/ModelCreationsSection.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import type { GalleryItem } from '../../data/gallery'
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+import GalleryCard from '../gallery/GalleryCard.vue'
+import GalleryDetailModal from '../gallery/GalleryDetailModal.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const modelName = 'Grok'
+const ctaHref = 'https://comfy.org/workflows/model/grok'
+
+const items: GalleryItem[] = [
+  {
+    id: 'subway-swan',
+    image: 'https://media.comfy.org/website/gallery/subway-swan_compressed.png',
+    title: 'Subway Swan',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats'
+  },
+  {
+    id: 'milos-little-wonder',
+    video:
+      'https://media.comfy.org/website/gallery/milos-little-wonder_compressed.mp4',
+    title: 'Milos Little Wonder',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats'
+  },
+  {
+    id: 'amber-passage',
+    image:
+      'https://media.comfy.org/website/gallery/amber-passage_compressed.jpg',
+    title: 'Amber Passage',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats',
+    objectPosition: 'bottom'
+  },
+  {
+    id: 'neon-revenant',
+    video:
+      'https://media.comfy.org/website/gallery/neon-revenant_compressed.mp4',
+    title: 'Neon Revenant',
+    userAlias: 'Eric Solorio',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.instagram.com/enigmatic_e'
+  },
+  {
+    id: 'midnight-umami',
+    image:
+      'https://media.comfy.org/website/gallery/midnight_umami_compressed.png',
+    title: 'Midnight Umami',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats'
+  }
+]
+
+const modalOpen = ref(false)
+const modalIndex = ref(0)
+
+function openDetail(index: number) {
+  modalIndex.value = index
+  modalOpen.value = true
+}
+
+const title = t('models.list.creations.title', locale).replace(
+  '{name}',
+  modelName
+)
+const ctaLabel = t('models.list.creations.cta', locale)
+</script>
+
+<template>
+  <section
+    data-testid="model-creations"
+    class="flex flex-col items-center px-4 py-16 lg:px-20 lg:pt-36"
+  >
+    <h2
+      class="max-w-4xl text-center text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+    >
+      {{ title }}
+    </h2>
+    <BrandButton
+      :href="ctaHref"
+      variant="solid"
+      size="lg"
+      class="mt-16 px-8 py-4 uppercase"
+    >
+      {{ ctaLabel }}
+    </BrandButton>
+
+    <div class="mt-20 hidden w-full flex-col gap-2 lg:flex">
+      <div class="grid grid-cols-2 gap-2">
+        <GalleryCard
+          v-for="(item, i) in items.slice(0, 2)"
+          :key="i"
+          :item
+          :locale
+          :object-position="item.objectPosition"
+          :object-fit="item.objectFit"
+          @click="openDetail(i)"
+        />
+      </div>
+      <div v-if="items.length > 2" class="grid grid-cols-3 gap-2">
+        <GalleryCard
+          v-for="(item, i) in items.slice(2, 5)"
+          :key="i + 2"
+          :item
+          :locale
+          :object-position="item.objectPosition"
+          :object-fit="item.objectFit"
+          @click="openDetail(i + 2)"
+        />
+      </div>
+    </div>
+
+    <div
+      class="rounded-5xl bg-transparency-white-t4 mt-12 flex w-full flex-col gap-6 p-2 max-lg:pb-6 lg:hidden"
+    >
+      <GalleryCard
+        v-for="(item, i) in items"
+        :key="i"
+        :item
+        :locale
+        :object-position="item.objectPosition"
+        :object-fit="item.objectFit"
+        mobile
+        @click="openDetail(i)"
+      />
+    </div>
+
+    <GalleryDetailModal
+      v-if="modalOpen"
+      :items
+      :initial-index="modalIndex"
+      :locale
+      @close="modalOpen = false"
+    />
+  </section>
+</template>

apps/website/src/components/models/ModelsHeroSection.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+
+const {
+  locale = 'en',
+  modelName,
+  ctaHref,
+  videoSrc,
+  videoAriaLabel
+} = defineProps<{
+  locale?: Locale
+  modelName: string
+  ctaHref: string
+  videoSrc: string
+  videoAriaLabel?: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col items-center px-6 pt-16 text-center lg:pt-36">
+    <h1
+      class="max-w-4xl text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+    >
+      {{
+        t('models.list.heroTitle.before', locale).replace('{name}', modelName)
+      }}
+      <span class="text-primary-comfy-yellow">ComfyUI</span>
+      {{
+        t('models.list.heroTitle.after', locale).replace('{name}', modelName)
+      }}
+    </h1>
+    <p
+      class="mt-6 max-w-2xl text-sm text-pretty text-primary-comfy-canvas lg:text-base"
+    >
+      {{ t('hero.subtitle', locale) }}
+    </p>
+    <BrandButton
+      :href="ctaHref"
+      variant="solid"
+      size="lg"
+      class="mt-10 px-8 py-4 uppercase"
+    >
+      {{ t('models.list.heroCta', locale).replace('{name}', modelName) }}
+    </BrandButton>
+    <div class="mt-16 w-full max-w-5xl">
+      <video
+        :src="videoSrc"
+        :aria-label="videoAriaLabel || undefined"
+        :aria-hidden="videoAriaLabel ? undefined : true"
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="metadata"
+        class="rounded-4.5xl size-full object-cover"
+      />
+    </div>
+  </section>
+</template>

apps/website/src/components/pricing/WhatsIncludedSection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Locale, TranslationKey } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
+import CheckIcon from '../icons/CheckIcon.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
@@ -94,12 +95,9 @@ const features: IncludedFeature[] = [
               class="mt-0.5 size-4 shrink-0"
               aria-hidden="true"
             />
-            <img
+            <CheckIcon
               v-else
-              src="/icons/check.svg"
-              alt=""
-              class="mt-0.5 size-4 shrink-0"
-              aria-hidden="true"
+              class="text-primary-comfy-yellow mt-0.5 size-4 shrink-0"
             />
             <p class="text-primary-comfy-canvas text-sm font-medium">
               {{ t(feature.titleKey, locale) }}

apps/website/src/components/product/local/DownloadLocalButton.vue

@@ -3,7 +3,10 @@ import type { Locale } from '../../../i18n/translations'
 import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
-import { useDownloadUrl } from '../../../composables/useDownloadUrl'
+import {
+  downloadUrls,
+  useDownloadUrl
+} from '../../../composables/useDownloadUrl'
 import { t } from '../../../i18n/translations'
 import BrandButton from '../../common/BrandButton.vue'
 
@@ -12,32 +15,64 @@ const { locale = 'en', class: customClass = '' } = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
-const { downloadUrl, platform } = useDownloadUrl()
+const { downloadUrl, platform, showFallback } = useDownloadUrl()
 
-const iconSrc = computed(() => {
-  switch (platform.value) {
-    case 'mac':
-      return '/icons/os/apple.svg'
-    case 'windows':
-      return '/icons/os/windows.svg'
-    default:
-      return undefined
+const ICONS = {
+  windows: '/icons/os/windows.svg',
+  mac: '/icons/os/apple.svg'
+} as const
+
+interface ButtonSpec {
+  key: string
+  href: string
+  icon: string
+  ariaLabel?: string
+}
+
+const buttons = computed<ButtonSpec[]>(() => {
+  if (platform.value) {
+    return [
+      {
+        key: platform.value,
+        href: downloadUrl.value,
+        icon: ICONS[platform.value]
+      }
+    ]
   }
+  if (showFallback.value) {
+    const label = t('download.hero.downloadLocal', locale)
+    return [
+      {
+        key: 'windows',
+        href: downloadUrls.windows,
+        icon: ICONS.windows,
+        ariaLabel: `${label} — Windows`
+      },
+      {
+        key: 'mac',
+        href: downloadUrls.macArm,
+        icon: ICONS.mac,
+        ariaLabel: `${label} — macOS`
+      }
+    ]
+  }
+  return []
 })
 </script>
 
 <template>
   <BrandButton
-    v-show="platform"
-    :href="downloadUrl"
+    v-for="btn in buttons"
+    :key="btn.key"
+    :href="btn.href"
     target="_blank"
     size="lg"
     :class="customClass"
+    :aria-label="btn.ariaLabel"
   >
     <span class="inline-flex items-center gap-2">
       <img
-        v-if="iconSrc"
-        :src="iconSrc"
+        :src="btn.icon"
         alt=""
         class="ppformula-text-center size-5 -translate-y-0.75"
         aria-hidden="true"

apps/website/src/components/product/local/HeroSection.vue

@@ -283,16 +283,16 @@ onUnmounted(() => {
     <div
       class="relative z-10 mt-17 w-full px-4 pb-16 lg:mt-0 lg:min-w-160 lg:flex-1 lg:translate-x-[10%] lg:px-20 lg:py-14"
     >
-      <ProductHeroBadge />
+      <ProductHeroBadge text="DESKTOP" />
 
       <h1
-        class="text-primary-comfy-canvas mt-6 text-3xl/tight font-light whitespace-pre-line md:text-4xl/tight lg:max-w-2xl lg:text-5xl/tight"
+        class="mt-6 text-3xl/tight font-light whitespace-pre-line text-primary-comfy-canvas md:text-4xl/tight lg:max-w-2xl lg:text-5xl/tight"
       >
         {{ t('download.hero.heading', locale) }}
       </h1>
 
       <p
-        class="text-primary-comfy-canvas mt-6 max-w-md text-sm lg:mt-6 lg:text-base"
+        class="mt-6 max-w-md text-sm text-primary-comfy-canvas lg:mt-6 lg:text-base"
       >
         {{ t('download.hero.subtitle', locale) }}
       </p>

apps/website/src/components/product/shared/AIModelsSection.vue

@@ -78,7 +78,7 @@ function getCardClass(layoutClass: string): string {
 
 <template>
   <section
-    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-24 lg:px-20 lg:py-40"
+    class="max-w-9xl mx-auto bg-primary-comfy-ink px-4 py-16 lg:px-20 lg:py-40"
   >
     <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
       <p
@@ -88,18 +88,18 @@ function getCardClass(layoutClass: string): string {
       </p>
 
       <h2
-        class="text-primary-comfy-canvas text-3.5xl/tight mt-8 max-w-4xl text-center font-light lg:text-5xl"
+        class="text-3.5xl/tight mt-8 max-w-4xl text-center font-light text-primary-comfy-canvas lg:text-5xl"
       >
         {{ t('cloud.aiModels.heading', locale) }}
       </h2>
 
       <p
-        class="text-primary-comfy-canvas mt-8 max-w-xl text-center text-sm font-light lg:text-base/snug"
+        class="mt-8 max-w-xl text-center text-sm font-light text-primary-comfy-canvas lg:text-base/snug"
       >
         {{ t('cloud.aiModels.subtitle', locale) }}
       </p>
 
-      <div class="mt-24 w-full">
+      <div class="mt-16 w-full lg:mt-24">
         <div class="rounded-4xl border border-white/12 p-2 lg:p-1.5">
           <div class="grid grid-cols-1 gap-2 lg:grid-cols-12">
             <a
@@ -180,14 +180,15 @@ function getCardClass(layoutClass: string): string {
       <BrandButton
         :href="externalLinks.workflows"
         variant="outline"
-        class="mt-4 w-full max-w-md text-center lg:mt-8 lg:w-auto"
+        size="lg"
+        class="mt-4 w-full max-w-md px-8 py-4 text-center lg:mt-8 lg:w-auto"
       >
-        <span class="lg:hidden">{{
-          t('cloud.aiModels.ctaMobile', locale)
-        }}</span>
-        <span class="hidden lg:inline">{{
+        <!-- <span class="lg:hidden"> -->
+        {{ t('cloud.aiModels.ctaMobile', locale) }}
+        <!-- </span> -->
+        <!-- <span class="hidden lg:inline">{{
           t('cloud.aiModels.ctaDesktop', locale)
-        }}</span>
+        }}</span> -->
       </BrandButton>
     </div>
   </section>

apps/website/src/composables/useDownloadUrl.ts

@@ -2,7 +2,7 @@ import { computed, onMounted, ref } from 'vue'
 
 import { externalLinks } from '@/config/routes'
 
-const downloadUrls = {
+export const downloadUrls = {
   windows: 'https://download.comfy.org/windows/nsis/x64',
   macArm: 'https://download.comfy.org/mac/dmg/arm64'
 } as const
@@ -24,6 +24,8 @@ function detectPlatform(ua: string): DetectedPlatform {
 // When Linux and/or macIntel builds are added, extend detection and URLs here.
 export function useDownloadUrl() {
   const platform = ref<DetectedPlatform>(null)
+  const detected = ref(false)
+  const isMobileUa = ref(false)
 
   const downloadUrl = computed(() => {
     if (platform.value === 'windows') return downloadUrls.windows
@@ -31,9 +33,16 @@ export function useDownloadUrl() {
     return externalLinks.github
   })
 
+  const showFallback = computed(
+    () => detected.value && !platform.value && !isMobileUa.value
+  )
+
   onMounted(() => {
-    platform.value = detectPlatform(navigator.userAgent.toLowerCase())
+    const ua = navigator.userAgent.toLowerCase()
+    isMobileUa.value = isMobile(ua)
+    platform.value = detectPlatform(ua)
+    detected.value = true
   })
 
-  return { downloadUrl, platform }
+  return { downloadUrl, platform, showFallback }
 }

apps/website/src/config/model-metadata.ts

@@ -90,7 +90,7 @@ export const modelMetadata: Record<string, ModelOverride> = {
     hubSlug: 'seedance',
     featured: true
   },
-  'grok-image': {
+  'grok-imagine': {
     hubSlug: 'grok',
     featured: false
   },

apps/website/src/config/routes.ts

@@ -12,15 +12,32 @@ const baseRoutes = {
   careers: '/careers',
   customers: '/customers',
   demos: '/demos',
+  learning: '/learning',
   termsOfService: '/terms-of-service',
   privacyPolicy: '/privacy-policy',
+  affiliates: '/affiliates',
+  affiliateTerms: '/affiliates/terms',
   contact: '/contact',
   models: '/p/supported-models'
 } as const
 
 type Routes = typeof baseRoutes
 
-const localeInvariantRouteKeys = new Set<keyof Routes>(['termsOfService'])
+// Routes that are served only at their canonical path regardless of the
+// active locale. Localized variants of these routes intentionally do not
+// exist, so getRoutes(<non-en>) must not prefix them — emitting
+// /zh-CN/<route> would produce a dead link.
+//
+// affiliateTerms: legal-reviewed English-only document. See the comment
+// header in src/pages/affiliates/terms.astro and the affiliate-terms i18n
+// block in src/i18n/translations.ts for the reasoning.
+//
+// termsOfService: legal-reviewed English-only document, same reasoning.
+const LOCALE_INVARIANT_ROUTE_KEYS = new Set<keyof Routes>([
+  'affiliates',
+  'affiliateTerms',
+  'termsOfService'
+])
 
 export function getRoutes(locale: Locale = 'en'): Routes {
   if (locale === 'en') return baseRoutes
@@ -28,12 +45,13 @@ export function getRoutes(locale: Locale = 'en'): Routes {
   return Object.fromEntries(
     Object.entries(baseRoutes).map(([k, v]) => [
       k,
-      localeInvariantRouteKeys.has(k as keyof Routes) ? v : `${prefix}${v}`
+      LOCALE_INVARIANT_ROUTE_KEYS.has(k as keyof Routes) ? v : `${prefix}${v}`
     ])
   ) as unknown as Routes
 }
 
 export const externalLinks = {
+  affiliateApplicationForm: 'https://forms.gle/RS8L2ttcuGap4Q1v6',
   apiKeys: 'https://platform.comfy.org/profile/api-keys',
   blog: 'https://blog.comfy.org/',
   cloud: 'https://cloud.comfy.org',

apps/website/src/data/affiliateAudience.ts

@@ -0,0 +1,44 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AudienceCriterion {
+  id: string
+  label: LocalizedText
+}
+
+export const affiliateAudienceCriteria: readonly AudienceCriterion[] = [
+  {
+    id: 'tutorial-creator',
+    label: {
+      en: 'A ComfyUI tutorial creator or workflow builder',
+      'zh-CN': 'ComfyUI 教程作者或工作流创建者'
+    }
+  },
+  {
+    id: 'ai-tool-reviewer',
+    label: {
+      en: 'An AI tool reviewer on YouTube, TikTok, blogs',
+      'zh-CN': '在 YouTube、TikTok、博客上做 AI 工具测评'
+    }
+  },
+  {
+    id: 'tech-blogger',
+    label: {
+      en: 'A tech blogger covering AI creative tools',
+      'zh-CN': '报道 AI 创作工具的科技博主'
+    }
+  },
+  {
+    id: 'newsletter-operator',
+    label: {
+      en: 'A newsletter operator in the AI/creative space',
+      'zh-CN': 'AI／创意领域的简报运营者'
+    }
+  },
+  {
+    id: 'audience-owner',
+    label: {
+      en: 'Anyone with an audience interested in AI image, video, or 3D',
+      'zh-CN': '拥有关注 AI 图像、视频或 3D 受众的任何人'
+    }
+  }
+] as const

apps/website/src/data/affiliateBenefits.ts

@@ -0,0 +1,39 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AffiliateBenefit {
+  id: string
+  description: LocalizedText
+}
+
+export const affiliateBenefits: readonly AffiliateBenefit[] = [
+  {
+    id: 'open-source-platform',
+    description: {
+      en: 'ComfyUI is the most powerful open-source AI creative platform',
+      'zh-CN': 'ComfyUI 是最强大的开源 AI 创作平台'
+    }
+  },
+  {
+    id: 'cloud-no-gpu',
+    description: {
+      en: 'Comfy Cloud lets you run ComfyUI in the browser, no GPU needed, all models pre-loaded',
+      'zh-CN':
+        'Comfy Cloud 让你在浏览器中运行 ComfyUI，无需 GPU，所有模型预加载'
+    }
+  },
+  {
+    id: 'node-based-control',
+    description: {
+      en: 'Node-based workflows give users full creative control unlike prompt-only tools',
+      'zh-CN':
+        '基于节点的工作流让用户拥有完整的创作控制力，区别于仅靠提示词的工具'
+    }
+  },
+  {
+    id: 'custom-nodes',
+    description: {
+      en: '1,000+ community custom node packages',
+      'zh-CN': '1,000+ 社区自定义节点包'
+    }
+  }
+] as const

apps/website/src/data/affiliateBrandAssets.ts

@@ -0,0 +1,38 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AffiliateBrandAsset {
+  id: string
+  title: LocalizedText
+  download: string
+  preview: string
+}
+
+const BRAND_ASSETS_ZIP =
+  'https://media.comfy.org/website/comfy-org-brand-assets.zip'
+
+export const affiliateBrandAssets: readonly AffiliateBrandAsset[] = [
+  {
+    id: 'core-logo',
+    title: { en: 'Core Logo', 'zh-CN': '核心标志' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/icons/logo.svg'
+  },
+  {
+    id: 'logomark',
+    title: { en: 'Logomark', 'zh-CN': '标志符号' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/icons/logomark.svg'
+  },
+  {
+    id: 'icon',
+    title: { en: 'Icon', 'zh-CN': '图标' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/affiliates/brand/comfy-color-combo-yellow.svg'
+  },
+  {
+    id: 'amplified-logomark',
+    title: { en: 'Amplified Logomark', 'zh-CN': '放大版标志符号' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/affiliates/brand/comfy-amplified-logo.png'
+  }
+] as const

apps/website/src/data/affiliateFaq.ts

@@ -0,0 +1,103 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AffiliateFaq {
+  id: string
+  question: LocalizedText
+  answer: LocalizedText
+}
+
+export const affiliateFaqs: readonly AffiliateFaq[] = [
+  {
+    id: 'how-do-i-track-my-referrals',
+    question: {
+      en: 'How do I track my referrals?',
+      'zh-CN': '我如何追踪我的推荐？'
+    },
+    answer: {
+      en: 'Real-time dashboard via our partner portal.',
+      'zh-CN': '通过我们的合作伙伴门户使用实时仪表盘追踪。'
+    }
+  },
+  {
+    id: 'what-plans-qualify',
+    question: {
+      en: 'What plans qualify?',
+      'zh-CN': '哪些订阅方案符合条件？'
+    },
+    answer: {
+      en: 'All Comfy Cloud paid subscription plans (Standard, Creator, Pro, Teams).',
+      'zh-CN':
+        '所有 Comfy Cloud 付费订阅方案（Standard、Creator、Pro、Teams）。'
+    }
+  },
+  {
+    id: 'how-long-to-get-approved',
+    question: {
+      en: 'How long does approval take?',
+      'zh-CN': '审核需要多长时间？'
+    },
+    answer: {
+      en: 'Most applications approved within 24 hours.',
+      'zh-CN': '大多数申请会在 24 小时内获批。'
+    }
+  },
+  {
+    id: 'when-do-i-get-paid',
+    question: {
+      en: 'When do I get paid?',
+      'zh-CN': '什么时候结算佣金？'
+    },
+    answer: {
+      en: 'Monthly, within the first 10 business days. Minimum balance $100. Paid via Stripe Express or PayPal.',
+      'zh-CN':
+        '每月结算，于每月前 10 个工作日内发放。最低结算余额为 100 美元，通过 Stripe Express 或 PayPal 支付。'
+    }
+  },
+  {
+    id: 'what-happens-if-referral-upgrades-or-downgrades',
+    question: {
+      en: 'What happens if my referral upgrades or downgrades?',
+      'zh-CN': '如果我推荐的用户升级或降级订阅会怎样？'
+    },
+    answer: {
+      en: 'If they upgrade, your commission increases. If they downgrade, it adjusts accordingly. Commission is based on actual amounts received by Comfy.org, net of refunds.',
+      'zh-CN':
+        '如果他们升级订阅，您的佣金会相应增加；如果降级，佣金也会同步调整。佣金以 Comfy.org 实际收到的金额为准，并扣除退款部分。'
+    }
+  },
+  {
+    id: 'can-i-use-coupon-codes',
+    question: {
+      en: 'Can I use coupon codes?',
+      'zh-CN': '我可以使用优惠码吗？'
+    },
+    answer: {
+      en: 'Yes. We support both tracking links and unique coupon codes.',
+      'zh-CN': '可以。我们同时支持追踪链接和专属优惠码。'
+    }
+  },
+  {
+    id: 'what-if-my-referral-uses-an-ad-blocker',
+    question: {
+      en: 'What if my referral uses an ad blocker?',
+      'zh-CN': '如果我推荐的用户使用广告拦截器怎么办？'
+    },
+    answer: {
+      en: 'We use server-side tracking, so conversions are tracked regardless.',
+      'zh-CN':
+        '我们采用服务端追踪，因此无论用户是否使用广告拦截器，转化都能正常记录。'
+    }
+  },
+  {
+    id: 'what-assets-do-you-provide',
+    question: {
+      en: 'What assets do you provide?',
+      'zh-CN': '你们提供哪些素材？'
+    },
+    answer: {
+      en: 'Logos and banners on this page, plus screenshots and talking points in your affiliate dashboard after approval.',
+      'zh-CN':
+        '本页面提供 Logo 和横幅图，获批后您还可以在联盟仪表盘中获取截图和宣传文案。'
+    }
+  }
+] as const

apps/website/src/data/affiliateHowItWorks.ts

@@ -0,0 +1,45 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface HowItWorksStep {
+  id: string
+  label: LocalizedText
+  description: LocalizedText
+}
+
+export const affiliateHowItWorksSteps: readonly HowItWorksStep[] = [
+  {
+    id: 'apply',
+    label: {
+      en: 'Apply',
+      'zh-CN': '申请'
+    },
+    description: {
+      en: 'Submit a quick form. Most applicants approved same day.',
+      'zh-CN': '填写一份简短表单。大多数申请当天获批。'
+    }
+  },
+  {
+    id: 'share',
+    label: {
+      en: 'Share',
+      'zh-CN': '分享'
+    },
+    description: {
+      en: 'Get your unique tracking link. Share via content, social, email, however you reach your audience.',
+      'zh-CN':
+        '获取您的专属追踪链接。通过内容、社交、邮件等任何触达受众的方式分享。'
+    }
+  },
+  {
+    id: 'earn',
+    label: {
+      en: 'Earn',
+      'zh-CN': '赚取'
+    },
+    description: {
+      en: '30% recurring commission for 3 months on every Comfy Cloud subscriber you refer. Tracked in real-time. Paid monthly.',
+      'zh-CN':
+        '每位您推荐的 Comfy Cloud 订阅者，可获连续 3 个月 30% 的经常性佣金。实时追踪，每月结算。'
+    }
+  }
+] as const

apps/website/src/data/events.ts

@@ -0,0 +1,31 @@
+import type { EventItem } from '../components/common/EventsSection.vue'
+
+export const learningEvents: readonly EventItem[] = [
+  {
+    label: { en: 'Live Stream:', 'zh-CN': '直播：' },
+    title: {
+      en: 'Zero to Node: Building Your First Workflow',
+      'zh-CN': '从零到节点：构建你的第一个工作流'
+    },
+    cta: { en: 'Link', 'zh-CN': '链接' },
+    href: '#'
+  },
+  {
+    label: { en: 'Event 1', 'zh-CN': '活动 1' },
+    title: {
+      en: 'Lorem ipsum dollar sita met',
+      'zh-CN': '此处为活动描述的占位文本'
+    },
+    cta: { en: 'London, UK', 'zh-CN': '英国伦敦' },
+    href: '#'
+  },
+  {
+    label: { en: 'Event 2', 'zh-CN': '活动 2' },
+    title: {
+      en: 'Lorem ipsum dollar sita met',
+      'zh-CN': '此处为活动描述的占位文本'
+    },
+    cta: { en: 'San Francisco', 'zh-CN': '旧金山' },
+    href: '#'
+  }
+] as const

apps/website/src/data/gallery.ts

@@ -7,6 +7,8 @@ export interface GalleryItem {
   teamAlias: string
   tool: string
   href?: string
+  objectPosition?: string
+  objectFit?: string
   /** Defaults to true. Set to false to hide this item from rendered lists. */
   visible?: boolean
 }

apps/website/src/data/learningTutorials.ts

@@ -0,0 +1,84 @@
+import type { LocalizedText, TranslationKey } from '../i18n/translations'
+
+export interface LearningTutorial {
+  id: string
+  tags: readonly TranslationKey[]
+  title: LocalizedText
+  videoSrc: string
+  href?: string
+  poster?: string
+  posterTime?: number
+}
+
+const DEFAULT_POSTER_TIME_SECONDS = 1
+
+const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
+const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
+
+export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
+  tutorial.poster
+    ? tutorial.poster
+    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
+
+export const learningTutorials: readonly LearningTutorial[] = [
+  {
+    id: 'cleanplate_walkthrough_v03',
+    title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg',
+    // href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'deaging_workflow_v03',
+    title: { en: 'Deaging Workflow', 'zh-CN': '减龄工作流' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/deaging_workflow_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/learning/deaging_workflow_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=93f286fbc2c8',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'frame_adjustments_demo_v03',
+    title: { en: 'Frame Adjustments Demo', 'zh-CN': '帧调整演示' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=7dca0438edf4',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'mattes_and_utilities_v03',
+    title: { en: 'Mattes and Utilities', 'zh-CN': '遮罩与实用工具' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/mattes_and_utilities_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/learning/mattes_and_utilities_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=be0889296f65',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'seedance_demo_comfyui_v03',
+    title: { en: 'Seedance Demo ComfyUI', 'zh-CN': 'Seedance ComfyUI 演示' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/seedance_demo_comfyui_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/learning/seedance seedance_demo_comfyui_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=ef543bd4a773',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'skyreplacement_smaller_v06',
+    title: { en: 'Sky Replacement', 'zh-CN': '天空替换' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4',
+    poster:
+      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg',
+    href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/',
+    tags: [partnerNodesTag, imageToVideoTag]
+  }
+] as const

apps/website/src/i18n/translations.ts

@@ -1,6 +1,22 @@
 type Locale = 'en' | 'zh-CN'
 
 const translations = {
+  // Tags (global, reusable across sections)
+  'tags.partnerNodes': {
+    en: 'Partner Nodes',
+    'zh-CN': '合作伙伴节点'
+  },
+  'tags.imageToVideo': {
+    en: 'Image To Video',
+    'zh-CN': '图像生成视频'
+  },
+
+  // CTAs (global, reusable across sections)
+  'cta.tryWorkflow': {
+    en: 'Try Workflow',
+    'zh-CN': '试用工作流'
+  },
+
   // HeroSection
   'hero.title': {
     en: 'Professional Control\nof Visual AI',
@@ -108,8 +124,8 @@ const translations = {
     'zh-CN': '下载或注册'
   },
   'getStarted.step1.downloadLocal': {
-    en: 'Download Local',
-    'zh-CN': '下载本地版'
+    en: 'Download Desktop',
+    'zh-CN': '下载桌面版'
   },
   'getStarted.step1.launchCloud': {
     en: 'Launch Cloud',
@@ -589,8 +605,8 @@ const translations = {
       '是的。基于 GPL-3.0 免费开源。没有功能限制、没有试用期、没有附加条件。'
   },
   'download.faq.4.q': {
-    en: 'Why would I pay for Comfy Cloud if Local is free?',
-    'zh-CN': '既然本地版免费，为什么还要付费使用 Comfy Cloud？'
+    en: 'Why would I pay for Comfy Cloud if Desktop is free?',
+    'zh-CN': '既然桌面版免费，为什么还要付费使用 Comfy Cloud？'
   },
   'download.faq.4.a': {
     en: 'Your machine or ours. Cloud gives you powerful GPUs on demand, pre-loaded models, end-to-end security and infrastructure out of the box and partner models cleared for commercial use.',
@@ -607,8 +623,8 @@ const translations = {
       'Desktop：一键安装，自动更新。Portable：独立构建，可从任意文件夹运行。CLI：从 GitHub 克隆，完全开发者控制，适合想自定义环境或参与上游贡献的开发者。'
   },
   'download.faq.6.q': {
-    en: 'Can I use my local workflows in Comfy Cloud?',
-    'zh-CN': '我可以在 Comfy Cloud 中使用本地工作流吗？'
+    en: 'Can I use my Desktop workflows in Comfy Cloud?',
+    'zh-CN': '我可以在 Comfy Cloud 中使用桌面工作流吗？'
   },
   'download.faq.6.a': {
     en: 'Yes — same file, same results. No conversion, no rework.',
@@ -649,8 +665,8 @@ const translations = {
     'zh-CN': '专业人士为何\n选择'
   },
   'download.reason.headingHighlight': {
-    en: 'Local',
-    'zh-CN': '本地版'
+    en: 'Desktop',
+    'zh-CN': '桌面版'
   },
   'download.reason.1.title': {
     en: 'Unlimited\nCustomization',
@@ -699,8 +715,8 @@ const translations = {
     'zh-CN': '完整的 ComfyUI 引擎——开源、快速、可扩展，随你运行。'
   },
   'download.hero.downloadLocal': {
-    en: 'DOWNLOAD LOCAL',
-    'zh-CN': '下载本地版'
+    en: 'DOWNLOAD DESKTOP',
+    'zh-CN': '下载桌面版'
   },
   'download.hero.installGithub': {
     en: 'INSTALL FROM GITHUB',
@@ -1435,6 +1451,62 @@ const translations = {
   'player.subtitlesOn': { en: 'Subtitles on', 'zh-CN': '开启字幕' },
   'player.subtitlesOff': { en: 'Subtitles off', 'zh-CN': '关闭字幕' },
 
+  // LearningHeroSection
+  'learning.heroTitle.before': { en: 'Learn', 'zh-CN': '学习' },
+  'learning.heroTitle.after': { en: '.', 'zh-CN': '。' },
+  'learning.heroTitle.line2': {
+    en: 'Build what doesn’t exist yet.',
+    'zh-CN': '构建尚未存在之物。'
+  },
+
+  // LearningFeaturedWorkflowSection
+  'learning.featured.title': {
+    en: 'Sky Replacement',
+    'zh-CN': '天空替换'
+  },
+  'learning.featured.author': {
+    en: 'by Doug Hogan',
+    'zh-CN': '作者：Doug Hogan'
+  },
+  'learning.featured.description': {
+    en: 'A sky replacement workflow built on Wan AI models. WanVideoSampler and WanVideoDecode synthesize new sky visuals into existing footage. CLIPVisionLoader and WanVideoClipVisionEncode ensure replacements feel native, not composited.',
+    'zh-CN':
+      '基于 Wan AI 模型构建的天空替换工作流。WanVideoSampler 与 WanVideoDecode 将全新的天空视觉合成到现有素材中。CLIPVisionLoader 与 WanVideoClipVisionEncode 确保替换效果自然融合，而非生硬叠加。'
+  },
+  'learning.featured.watchDemo': {
+    en: 'Watch Demo',
+    'zh-CN': '观看演示'
+  },
+
+  // LearningTutorialsSection
+  'learning.tutorials.heading': {
+    en: 'Featured Demos',
+    'zh-CN': '精选演示'
+  },
+  'learning.tutorials.titlePrefix': {
+    en: 'Learn how to:',
+    'zh-CN': '学习如何：'
+  },
+
+  // LearningCallToActionSection
+  'learning.cta.heading': {
+    en: 'Schedule a demo and see how ComfyUI fits your team’s creative needs.',
+    'zh-CN': '预约演示，了解 ComfyUI 如何契合你的团队创作需求。'
+  },
+  'learning.cta.contactSales': {
+    en: 'Contact Sales',
+    'zh-CN': '联系销售'
+  },
+
+  // LearningEventsSection
+  'learning.events.heading': { en: 'Events', 'zh-CN': '活动' },
+  'learning.events.description': {
+    en: 'Check out our upcoming live streams and community meetings. We’re always open to your questions, ideas, and conversations.',
+    'zh-CN':
+      '查看我们即将举办的直播和社区聚会。我们随时欢迎你的提问、想法和交流。'
+  },
+  'learning.events.getNotified': { en: 'Get Notified', 'zh-CN': '获取通知' },
+
   // GalleryHeroSection
   'gallery.label': { en: 'GALLERY', 'zh-CN': '画廊' },
   'gallery.heroTitle.before': {
@@ -1471,9 +1543,13 @@ const translations = {
   },
   'about.hero.body': {
     en: 'The team behind Comfy is small, intense, and building what we intend to be our life\u2019s work.',
-    'zh-CN': 'Comfy 背后的团队规模虽小，但充满热情，致力于打造我们毕生的事业。'
+    'zh-CN':
+      'Comfy \u80cc\u540e\u7684\u56e2\u961f\u89c4\u6a21\u867d\u5c0f\uff0c\u4f46\u5145\u6ee1\u70ed\u60c5\uff0c\u81f4\u529b\u4e8e\u6253\u9020\u6211\u4eec\u6bd5\u751f\u7684\u4e8b\u4e1a\u3002'
+  },
+  'about.hero.cta': {
+    en: 'SEE OPEN ROLES',
+    'zh-CN': '\u67e5\u770b\u5f00\u653e\u804c\u4f4d'
   },
-  'about.hero.cta': { en: 'SEE OPEN ROLES', 'zh-CN': '查看开放职位' },
 
   // AboutStorySection
   'about.story.label': { en: 'OUR STORY', 'zh-CN': '我们的故事' },
@@ -1734,7 +1810,7 @@ const translations = {
   'nav.community': { en: 'Community', 'zh-CN': '社区' },
   'nav.resources': { en: 'Resources', 'zh-CN': '资源' },
   'nav.company': { en: 'Company', 'zh-CN': '公司' },
-  'nav.comfyLocal': { en: 'Comfy Local', 'zh-CN': 'Comfy 本地版' },
+  'nav.comfyLocal': { en: 'Comfy Desktop', 'zh-CN': 'Comfy 桌面版' },
   'nav.comfyCloud': { en: 'Comfy Cloud', 'zh-CN': 'Comfy Cloud' },
   'nav.comfyApi': { en: 'Comfy API', 'zh-CN': 'Comfy API' },
   'nav.comfyEnterprise': {
@@ -1743,6 +1819,7 @@ const translations = {
   },
   'nav.comfyHub': { en: 'Comfy Hub', 'zh-CN': 'Comfy Hub' },
   'nav.gallery': { en: 'Gallery', 'zh-CN': '画廊' },
+  'nav.learning': { en: 'Learning', 'zh-CN': '学习' },
   'nav.blogs': { en: 'Blog', 'zh-CN': '博客' },
   'nav.github': { en: 'GitHub', 'zh-CN': 'GitHub' },
   'nav.discord': { en: 'Discord', 'zh-CN': 'Discord' },
@@ -1751,7 +1828,7 @@ const translations = {
   'nav.aboutUs': { en: 'About Us', 'zh-CN': '关于我们' },
   'nav.careers': { en: 'Careers', 'zh-CN': '招聘' },
   'nav.customerStories': { en: 'Customer Stories', 'zh-CN': '客户故事' },
-  'nav.downloadLocal': { en: 'DOWNLOAD LOCAL', 'zh-CN': '下载本地版' },
+  'nav.downloadLocal': { en: 'DOWNLOAD DESKTOP', 'zh-CN': '下载桌面版' },
   'nav.launchCloud': { en: 'LAUNCH CLOUD', 'zh-CN': '启动云端' },
   'nav.menu': { en: 'Menu', 'zh-CN': '菜单' },
   'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
@@ -1775,6 +1852,10 @@ const translations = {
   'footer.press': { en: 'Press', 'zh-CN': '媒体' },
   'footer.cloudStatus': { en: 'Cloud Status', 'zh-CN': '云端状态' },
   'footer.blog': { en: 'Blog', 'zh-CN': '博客' },
+  'footer.affiliateProgram': {
+    en: 'Affiliate Program',
+    'zh-CN': 'Affiliate Program'
+  },
   'footer.location': {
     en: 'San Francisco, USA',
     'zh-CN': '美国旧金山'
@@ -1798,8 +1879,9 @@ const translations = {
       '如果我们的网站包含指向第三方网站和服务的链接，请注意这些网站和服务有自己的隐私政策。在访问任何第三方内容的链接后，您应阅读其发布的关于如何收集和使用个人信息的隐私政策信息。本隐私政策不适用于您离开我们网站后的任何活动。'
   },
   'privacy.intro.block.3': {
-    en: 'This policy is effective as of April 18, 2025.',
-    'zh-CN': '本政策自 2025 年 4 月 18 日起生效。'
+    en: 'This policy is effective as of April 18, 2025. For information specific to Comfy Desktop (the local install application), including named processors, lawful basis under GDPR/UK GDPR, retention periods, and your rights, see our <a href="/privacy/desktop" class="text-white underline">Desktop Privacy Policy</a>.',
+    'zh-CN':
+      '本政策自 2025 年 4 月 18 日起生效。有关 Comfy Desktop（本地安装应用程序）的具体信息，包括指定的数据处理方、GDPR/UK GDPR 下的合法依据、保留期限以及您的权利，请参阅我们的<a href="/zh-CN/privacy/desktop" class="text-white underline">Desktop 隐私政策</a>。'
   },
   'privacy.information-we-collect.label': {
     en: 'INFORMATION',
@@ -2049,6 +2131,181 @@ const translations = {
       '<a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>'
   },
 
+  // ── Desktop Privacy Policy ────────────────────────────────────────
+  'desktop_privacy.intro.label': { en: 'OVERVIEW', 'zh-CN': 'OVERVIEW' },
+  'desktop_privacy.intro.block.0': {
+    en: 'Effective 3 June 2026. Applies to the Comfy Desktop application.',
+    'zh-CN': 'Effective 3 June 2026. Applies to the Comfy Desktop application.'
+  },
+  'desktop_privacy.intro.block.1': {
+    en: 'This Privacy Policy describes the personal data we process when you use Comfy Desktop, the purposes and lawful bases for that processing, the recipients of the data, and the rights available to you. The same policy is shown in the application on first run and is available at any time from Settings → About → Privacy Policy.',
+    'zh-CN':
+      'This Privacy Policy describes the personal data we process when you use Comfy Desktop, the purposes and lawful bases for that processing, the recipients of the data, and the rights available to you. The same policy is shown in the application on first run and is available at any time from Settings → About → Privacy Policy.'
+  },
+
+  'desktop_privacy.controller.label': {
+    en: 'CONTROLLER',
+    'zh-CN': 'CONTROLLER'
+  },
+  'desktop_privacy.controller.title': {
+    en: 'Controller',
+    'zh-CN': 'Controller'
+  },
+  'desktop_privacy.controller.block.0': {
+    en: 'Comfy Organization Inc ("Comfy Org", "we", "us") is the data controller for personal data processed in connection with your use of Comfy Desktop. We are established in San Francisco, USA. For privacy enquiries: <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>.',
+    'zh-CN':
+      'Comfy Organization Inc ("Comfy Org", "we", "us") is the data controller for personal data processed in connection with your use of Comfy Desktop. We are established in San Francisco, USA. For privacy enquiries: <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>.'
+  },
+
+  'desktop_privacy.data.label': {
+    en: 'DATA WE PROCESS',
+    'zh-CN': 'DATA WE PROCESS'
+  },
+  'desktop_privacy.data.title': {
+    en: 'Personal data we process',
+    'zh-CN': 'Personal data we process'
+  },
+  'desktop_privacy.data.block.0': {
+    en: 'If you have enabled telemetry, either on the first-run consent screen or at Settings → Telemetry, we process the following categories of data:',
+    'zh-CN':
+      'If you have enabled telemetry, either on the first-run consent screen or at Settings → Telemetry, we process the following categories of data:'
+  },
+  'desktop_privacy.data.block.1': {
+    en: 'Device identifier. A pseudonymous identifier generated locally on first run. Before you sign in to Comfy Cloud it is not linked to your name, email address, or hardware. When you sign in, it is associated with your Comfy account.\nTechnical metadata. Application version, operating system, and processor architecture.\nProduct usage events. Feature interactions, navigation between views, installation and update milestones, and approximate timing.\nCustom node identifiers. Public package names of custom nodes you install through Manager (for example, "comfyui-impact-pack"). The local installation path is not transmitted.\nCrash and error diagnostics. Stack traces, error messages, and short stdout/stderr fragments captured at the moment of failure.',
+    'zh-CN':
+      'Device identifier. A pseudonymous identifier generated locally on first run. Before you sign in to Comfy Cloud it is not linked to your name, email address, or hardware. When you sign in, it is associated with your Comfy account.\nTechnical metadata. Application version, operating system, and processor architecture.\nProduct usage events. Feature interactions, navigation between views, installation and update milestones, and approximate timing.\nCustom node identifiers. Public package names of custom nodes you install through Manager (for example, "comfyui-impact-pack"). The local installation path is not transmitted.\nCrash and error diagnostics. Stack traces, error messages, and short stdout/stderr fragments captured at the moment of failure.'
+  },
+  'desktop_privacy.data.block.2': {
+    en: 'Before crash or error diagnostic data is transmitted, we apply automated redaction to home-directory paths and to well-known credential patterns (Bearer tokens, OpenAI <code>sk-*</code> and Hugging Face <code>hf_*</code> keys, basic-auth URLs, and <code>KEY=</code> / <code>SECRET=</code> environment assignments).',
+    'zh-CN':
+      'Before crash or error diagnostic data is transmitted, we apply automated redaction to home-directory paths and to well-known credential patterns (Bearer tokens, OpenAI <code>sk-*</code> and Hugging Face <code>hf_*</code> keys, basic-auth URLs, and <code>KEY=</code> / <code>SECRET=</code> environment assignments).'
+  },
+  'desktop_privacy.data.block.3': {
+    en: 'We do not process:',
+    'zh-CN': 'We do not process:'
+  },
+  'desktop_privacy.data.block.4': {
+    en: 'Workflow content (the graph, the nodes you connect, their parameters)\nPrompts you write\nGenerated images, video, or audio\nModel weights, or the local filenames under which you save them\nNetwork activity outside the application',
+    'zh-CN':
+      'Workflow content (the graph, the nodes you connect, their parameters)\nPrompts you write\nGenerated images, video, or audio\nModel weights, or the local filenames under which you save them\nNetwork activity outside the application'
+  },
+  'desktop_privacy.data.block.5': {
+    en: 'Your workflow files, your models, the outputs you generate, the list of installations you create, and your local settings remain on your device. They are not transmitted to Comfy Org, and they are not accessible to us.',
+    'zh-CN':
+      'Your workflow files, your models, the outputs you generate, the list of installations you create, and your local settings remain on your device. They are not transmitted to Comfy Org, and they are not accessible to us.'
+  },
+
+  'desktop_privacy.purposes.label': { en: 'PURPOSES', 'zh-CN': 'PURPOSES' },
+  'desktop_privacy.purposes.title': {
+    en: 'Purposes and lawful bases',
+    'zh-CN': 'Purposes and lawful bases'
+  },
+  'desktop_privacy.purposes.block.0': {
+    en: 'We process personal data on the following lawful bases under GDPR and UK GDPR:',
+    'zh-CN':
+      'We process personal data on the following lawful bases under GDPR and UK GDPR:'
+  },
+  'desktop_privacy.purposes.block.1': {
+    en: 'Product usage analytics: consent under Article 6(1)(a).\nCrash and error diagnostics: consent under Article 6(1)(a).\nDelivery of software updates and integrity verification: legitimate interests under Article 6(1)(f).\nAuthentication when you sign in to Comfy Cloud: performance of a contract under Article 6(1)(b).',
+    'zh-CN':
+      'Product usage analytics: consent under Article 6(1)(a).\nCrash and error diagnostics: consent under Article 6(1)(a).\nDelivery of software updates and integrity verification: legitimate interests under Article 6(1)(f).\nAuthentication when you sign in to Comfy Cloud: performance of a contract under Article 6(1)(b).'
+  },
+  'desktop_privacy.purposes.block.2': {
+    en: 'Consent for analytics and crash diagnostics is opt-in, and you may withdraw it at any time at Settings → Telemetry. Withdrawal does not affect the lawfulness of processing carried out before withdrawal. To object to processing on the basis of legitimate interests, contact <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>.',
+    'zh-CN':
+      'Consent for analytics and crash diagnostics is opt-in, and you may withdraw it at any time at Settings → Telemetry. Withdrawal does not affect the lawfulness of processing carried out before withdrawal. To object to processing on the basis of legitimate interests, contact <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>.'
+  },
+  'desktop_privacy.purposes.block.3': {
+    en: 'We do not carry out automated decision-making, including profiling, that produces legal or similarly significant effects. We do not sell personal data, and we do not share personal data for cross-context behavioural advertising.',
+    'zh-CN':
+      'We do not carry out automated decision-making, including profiling, that produces legal or similarly significant effects. We do not sell personal data, and we do not share personal data for cross-context behavioural advertising.'
+  },
+
+  'desktop_privacy.processors.label': {
+    en: 'RECIPIENTS',
+    'zh-CN': 'RECIPIENTS'
+  },
+  'desktop_privacy.processors.title': {
+    en: 'Recipients',
+    'zh-CN': 'Recipients'
+  },
+  'desktop_privacy.processors.block.0': {
+    en: 'We engage the following processors under Data Processing Agreements:',
+    'zh-CN':
+      'We engage the following processors under Data Processing Agreements:'
+  },
+  'desktop_privacy.processors.block.1': {
+    en: 'PostHog (product usage analytics)\nDatadog (crash and error diagnostics)\nToDesktop (application distribution and software updates)\nComfy Org analytics warehouse (long-term aggregate analytics, operated by Comfy Org)',
+    'zh-CN':
+      'PostHog (product usage analytics)\nDatadog (crash and error diagnostics)\nToDesktop (application distribution and software updates)\nComfy Org analytics warehouse (long-term aggregate analytics, operated by Comfy Org)'
+  },
+
+  'desktop_privacy.transfers.label': { en: 'TRANSFERS', 'zh-CN': 'TRANSFERS' },
+  'desktop_privacy.transfers.title': {
+    en: 'International transfers',
+    'zh-CN': 'International transfers'
+  },
+  'desktop_privacy.transfers.block.0': {
+    en: 'Comfy Organization Inc is established in the United States. Personal data of users in the EU, UK, EEA, or other jurisdictions outside the United States may be transferred to the United States and to other locations where our processors operate. Where required, we rely on the European Commission Standard Contractual Clauses (and the UK International Data Transfer Addendum where applicable) as the transfer mechanism under Chapter V GDPR.',
+    'zh-CN':
+      'Comfy Organization Inc is established in the United States. Personal data of users in the EU, UK, EEA, or other jurisdictions outside the United States may be transferred to the United States and to other locations where our processors operate. Where required, we rely on the European Commission Standard Contractual Clauses (and the UK International Data Transfer Addendum where applicable) as the transfer mechanism under Chapter V GDPR.'
+  },
+
+  'desktop_privacy.retention.label': { en: 'RETENTION', 'zh-CN': 'RETENTION' },
+  'desktop_privacy.retention.title': { en: 'Retention', 'zh-CN': 'Retention' },
+  'desktop_privacy.retention.block.0': {
+    en: 'Product usage analytics: up to 24 months from the event, then aggregated or deleted.\nCrash and error diagnostics: 15 days at full fidelity, then sampled or aggregated.\nAggregate analytics: up to 36 months in aggregated form.\nUpdate-server logs: 90 days.\nLocal device identifier: stored on your device only, and removed when you uninstall the application.',
+    'zh-CN':
+      'Product usage analytics: up to 24 months from the event, then aggregated or deleted.\nCrash and error diagnostics: 15 days at full fidelity, then sampled or aggregated.\nAggregate analytics: up to 36 months in aggregated form.\nUpdate-server logs: 90 days.\nLocal device identifier: stored on your device only, and removed when you uninstall the application.'
+  },
+
+  'desktop_privacy.rights.label': { en: 'YOUR RIGHTS', 'zh-CN': 'YOUR RIGHTS' },
+  'desktop_privacy.rights.title': { en: 'Your rights', 'zh-CN': 'Your rights' },
+  'desktop_privacy.rights.block.0': {
+    en: 'If you are in the EU, UK, or EEA, you have the following rights under GDPR and UK GDPR: access, rectification, erasure, restriction of processing, objection, portability, and withdrawal of consent.',
+    'zh-CN':
+      'If you are in the EU, UK, or EEA, you have the following rights under GDPR and UK GDPR: access, rectification, erasure, restriction of processing, objection, portability, and withdrawal of consent.'
+  },
+  'desktop_privacy.rights.block.1': {
+    en: 'If you are a California resident, you have rights under CCPA and CPRA: to know what we collect, to delete, to correct, and to limit use of sensitive personal information. We do not sell personal information, and we do not share it for cross-context behavioural advertising.',
+    'zh-CN':
+      'If you are a California resident, you have rights under CCPA and CPRA: to know what we collect, to delete, to correct, and to limit use of sensitive personal information. We do not sell personal information, and we do not share it for cross-context behavioural advertising.'
+  },
+  'desktop_privacy.rights.block.2': {
+    en: "You also have the right to lodge a complaint with your supervisory authority, such as the UK Information Commissioner's Office, your EU member-state data protection authority, or the California Privacy Protection Agency.",
+    'zh-CN':
+      "You also have the right to lodge a complaint with your supervisory authority, such as the UK Information Commissioner's Office, your EU member-state data protection authority, or the California Privacy Protection Agency."
+  },
+  'desktop_privacy.rights.block.3': {
+    en: 'To exercise any of these rights, contact <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>. If you have signed in to Comfy Cloud, your account verifies your identity. If you have not signed in, please tell us your approximate install date, platform, and application version, and we will attempt to match these against our records. We aim to respond within 30 days.',
+    'zh-CN':
+      'To exercise any of these rights, contact <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>. If you have signed in to Comfy Cloud, your account verifies your identity. If you have not signed in, please tell us your approximate install date, platform, and application version, and we will attempt to match these against our records. We aim to respond within 30 days.'
+  },
+
+  'desktop_privacy.children.label': { en: 'CHILDREN', 'zh-CN': 'CHILDREN' },
+  'desktop_privacy.children.title': { en: 'Children', 'zh-CN': 'Children' },
+  'desktop_privacy.children.block.0': {
+    en: 'Comfy Desktop is not intended for, and we do not knowingly collect personal data from, individuals under 13 years of age.',
+    'zh-CN':
+      'Comfy Desktop is not intended for, and we do not knowingly collect personal data from, individuals under 13 years of age.'
+  },
+
+  'desktop_privacy.changes.label': { en: 'CHANGES', 'zh-CN': 'CHANGES' },
+  'desktop_privacy.changes.title': { en: 'Changes', 'zh-CN': 'Changes' },
+  'desktop_privacy.changes.block.0': {
+    en: 'We will revise this Privacy Policy when our processing changes materially. The Effective date at the top of this policy reflects the date of the most recent revision.',
+    'zh-CN':
+      'We will revise this Privacy Policy when our processing changes materially. The Effective date at the top of this policy reflects the date of the most recent revision.'
+  },
+
+  'desktop_privacy.contact.label': { en: 'CONTACT', 'zh-CN': 'CONTACT' },
+  'desktop_privacy.contact.title': { en: 'Contact', 'zh-CN': 'Contact' },
+  'desktop_privacy.contact.block.0': {
+    en: 'For any privacy enquiry, contact <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>.',
+    'zh-CN':
+      'For any privacy enquiry, contact <a href="mailto:support@comfy.org" class="text-white underline">support@comfy.org</a>.'
+  },
+
   // ── Terms of Service ──────────────────────────────────────────────
   'tos.effectiveDateLabel': {
     en: 'Effective Date',
@@ -2640,6 +2897,189 @@ const translations = {
       'If you have any questions regarding this Agreement or the Comfy Products, please contact us at: <a href="mailto:legal@comfy.org" class="text-white underline">legal@comfy.org</a>.'
   },
 
+  // ── Affiliate Program Terms ───────────────────────────────────────
+  // Legal-reviewed copy — ENGLISH ONLY. There is no /zh-CN/affiliates/terms
+  // route, and the `'zh-CN'` values below intentionally duplicate `en`
+  // verbatim only to satisfy the translations dictionary's required
+  // Record<Locale, string> shape. Do NOT translate these into Chinese:
+  // shipping an unreviewed translation as the active terms exposes us to
+  // liability from the translation diverging from the legal-approved
+  // English source. If a translated terms page is ever needed, add a
+  // separate `/affiliates/terms/<locale>` route only after legal signs
+  // off on that specific translation as the authoritative version.
+  'affiliate-terms.effective-date': {
+    en: 'May 16, 2026',
+    'zh-CN': 'May 16, 2026'
+  },
+  'affiliate-terms.1-program-overview.label': {
+    en: 'PROGRAM',
+    'zh-CN': 'PROGRAM'
+  },
+  'affiliate-terms.1-program-overview.title': {
+    en: '1. Program Overview',
+    'zh-CN': '1. Program Overview'
+  },
+  'affiliate-terms.1-program-overview.block.0': {
+    en: 'The <a href="https://comfy.org" class="text-white underline">Comfy.org</a> Affiliate Program ("<strong>Program</strong>") allows approved participants ("<strong>Affiliates</strong>") to earn commissions by referring new paying customers to Comfy Cloud. By participating in this program, you agree to these terms.',
+    'zh-CN':
+      'The <a href="https://comfy.org" class="text-white underline">Comfy.org</a> Affiliate Program ("<strong>Program</strong>") allows approved participants ("<strong>Affiliates</strong>") to earn commissions by referring new paying customers to Comfy Cloud. By participating in this program, you agree to these terms.'
+  },
+  'affiliate-terms.2-eligible-products.label': {
+    en: 'PRODUCTS',
+    'zh-CN': 'PRODUCTS'
+  },
+  'affiliate-terms.2-eligible-products.title': {
+    en: '2. Eligible Products',
+    'zh-CN': '2. Eligible Products'
+  },
+  'affiliate-terms.2-eligible-products.block.0': {
+    en: 'Commissions are earned on Comfy Cloud paid subscription plans only. The following are excluded from commission eligibility: free tier signups (unless they later convert to paid), one-time credit purchases, enterprise contracts negotiated directly with Comfy sales, and API-only usage billed outside of standard subscription plans.',
+    'zh-CN':
+      'Commissions are earned on Comfy Cloud paid subscription plans only. The following are excluded from commission eligibility: free tier signups (unless they later convert to paid), one-time credit purchases, enterprise contracts negotiated directly with Comfy sales, and API-only usage billed outside of standard subscription plans.'
+  },
+  'affiliate-terms.3-commission-structure.label': {
+    en: 'COMMISSION',
+    'zh-CN': 'COMMISSION'
+  },
+  'affiliate-terms.3-commission-structure.title': {
+    en: '3. Commission Structure',
+    'zh-CN': '3. Commission Structure'
+  },
+  'affiliate-terms.3-commission-structure.block.0': {
+    en: 'Commission rate: 30% recurring on the net subscription amount received by Comfy.org\nCommission duration: 3 months from the referred customer\u2019s first paid subscription\nCookie/attribution window: 60 days from the referral click\nMinimum payout threshold: $100\nPayout schedule: Monthly, within the first 10 business days of each month after the receipt of applicable payment by Comfy from its referred customer\nPayout method: Via the affiliate tracking platform (Stripe Express or PayPal)\nCommission cessation: To the extent a referred customer\u2019s subscription is canceled, in whole or in part, the affiliate shall correspondingly cease to receive commission payments, even within the 3-month commission window. Refunded or charged-back transactions are not eligible for commission, and any commission previously paid for such transactions will be deducted from future payouts (see Section 4).',
+    'zh-CN':
+      'Commission rate: 30% recurring on the net subscription amount received by Comfy.org\nCommission duration: 3 months from the referred customer\u2019s first paid subscription\nCookie/attribution window: 60 days from the referral click\nMinimum payout threshold: $100\nPayout schedule: Monthly, within the first 10 business days of each month after the receipt of applicable payment by Comfy from its referred customer\nPayout method: Via the affiliate tracking platform (Stripe Express or PayPal)\nCommission cessation: To the extent a referred customer\u2019s subscription is canceled, in whole or in part, the affiliate shall correspondingly cease to receive commission payments, even within the 3-month commission window. Refunded or charged-back transactions are not eligible for commission, and any commission previously paid for such transactions will be deducted from future payouts (see Section 4).'
+  },
+  'affiliate-terms.4-attribution-rules.label': {
+    en: 'ATTRIBUTION',
+    'zh-CN': 'ATTRIBUTION'
+  },
+  'affiliate-terms.4-attribution-rules.title': {
+    en: '4. Attribution Rules',
+    'zh-CN': '4. Attribution Rules'
+  },
+  'affiliate-terms.4-attribution-rules.block.0': {
+    en: 'Commissions are attributed on a last-click basis within the 60-day cookie window\nIf a referred customer cancels and re-subscribes within 60 days, the original affiliate retains attribution\nIf a referred customer upgrades their plan, commission is calculated on the upgraded amount\nIf a referred customer downgrades their plan, commission adjusts to the new plan amount\nRefunded transactions are not eligible for commission\nAny commission paid on refunded transactions will be deducted from future payouts to you',
+    'zh-CN':
+      'Commissions are attributed on a last-click basis within the 60-day cookie window\nIf a referred customer cancels and re-subscribes within 60 days, the original affiliate retains attribution\nIf a referred customer upgrades their plan, commission is calculated on the upgraded amount\nIf a referred customer downgrades their plan, commission adjusts to the new plan amount\nRefunded transactions are not eligible for commission\nAny commission paid on refunded transactions will be deducted from future payouts to you'
+  },
+  'affiliate-terms.5-prohibited-activities.label': {
+    en: 'PROHIBITED',
+    'zh-CN': 'PROHIBITED'
+  },
+  'affiliate-terms.5-prohibited-activities.title': {
+    en: '5. Prohibited Activities',
+    'zh-CN': '5. Prohibited Activities'
+  },
+  'affiliate-terms.5-prohibited-activities.block.0': {
+    en: 'Affiliates must NOT:',
+    'zh-CN': 'Affiliates must NOT:'
+  },
+  'affiliate-terms.5-prohibited-activities.block.1': {
+    en: '<strong>Self-refer</strong>: Use your own affiliate link to purchase or receive discounts on your own account\n<strong>Bid on branded keywords</strong>: Run paid search campaigns (Google Ads, Bing Ads, etc.) targeting "ComfyUI," "Comfy.org," "Comfy Cloud," or any misspellings or variations thereof\n<strong>Misrepresent</strong>: Impersonate Comfy.org, claim to be an employee, or create assets that could be confused with official Comfy.org materials\n<strong>Spam</strong>: Send unsolicited bulk emails, messages, or engage in any form of spam promotion\n<strong>Cookie stuff</strong>: Use hidden iframes, pop-unders, or any technical means to set cookies without genuine user intent\n<strong>Incentivize clicks</strong>: Offer monetary rewards, points, or other incentives solely for clicking your affiliate link (content recommendations are fine)\n<strong>Use misleading claims</strong>: Make false or exaggerated claims about Comfy.org products, pricing, or features\n<strong>Promote on prohibited content</strong>: Place affiliate links on sites containing illegal content, hate speech, or adult content\n<strong>Contrary to laws</strong>: Place affiliate links in any market that is prohibited as a region under the laws of the United States of America.',
+    'zh-CN':
+      '<strong>Self-refer</strong>: Use your own affiliate link to purchase or receive discounts on your own account\n<strong>Bid on branded keywords</strong>: Run paid search campaigns (Google Ads, Bing Ads, etc.) targeting "ComfyUI," "Comfy.org," "Comfy Cloud," or any misspellings or variations thereof\n<strong>Misrepresent</strong>: Impersonate Comfy.org, claim to be an employee, or create assets that could be confused with official Comfy.org materials\n<strong>Spam</strong>: Send unsolicited bulk emails, messages, or engage in any form of spam promotion\n<strong>Cookie stuff</strong>: Use hidden iframes, pop-unders, or any technical means to set cookies without genuine user intent\n<strong>Incentivize clicks</strong>: Offer monetary rewards, points, or other incentives solely for clicking your affiliate link (content recommendations are fine)\n<strong>Use misleading claims</strong>: Make false or exaggerated claims about Comfy.org products, pricing, or features\n<strong>Promote on prohibited content</strong>: Place affiliate links on sites containing illegal content, hate speech, or adult content\n<strong>Contrary to laws</strong>: Place affiliate links in any market that is prohibited as a region under the laws of the United States of America.'
+  },
+  'affiliate-terms.6-content-guidelines.label': {
+    en: 'CONTENT & IP',
+    'zh-CN': 'CONTENT & IP'
+  },
+  'affiliate-terms.6-content-guidelines.title': {
+    en: '6. Content Guidelines and Intellectual Property Rights',
+    'zh-CN': '6. Content Guidelines and Intellectual Property Rights'
+  },
+  'affiliate-terms.6-content-guidelines.block.0': {
+    en: 'Affiliates must clearly disclose the affiliate relationship in accordance with FTC guidelines (US) and equivalent regulations in their jurisdiction\nRecommended disclosure: "This page contains affiliate links. I may earn a commission if you sign up through my link."\nAffiliates may use Comfy.org logos and brand assets only as provided in the official affiliate asset kit, and may not modify them\nComfy.org retains all rights, including in any of its intellectual property apart from the limited use rights granted herein',
+    'zh-CN':
+      'Affiliates must clearly disclose the affiliate relationship in accordance with FTC guidelines (US) and equivalent regulations in their jurisdiction\nRecommended disclosure: "This page contains affiliate links. I may earn a commission if you sign up through my link."\nAffiliates may use Comfy.org logos and brand assets only as provided in the official affiliate asset kit, and may not modify them\nComfy.org retains all rights, including in any of its intellectual property apart from the limited use rights granted herein'
+  },
+  'affiliate-terms.7-termination.label': {
+    en: 'TERMINATION',
+    'zh-CN': 'TERMINATION'
+  },
+  'affiliate-terms.7-termination.title': {
+    en: '7. Termination',
+    'zh-CN': '7. Termination'
+  },
+  'affiliate-terms.7-termination.block.0': {
+    en: 'Either party may terminate the affiliate relationship at any time with 14 days\u2019 prior written notice\nComfy.org reserves the right to immediately terminate and withhold commissions if an affiliate violates any of the prohibited activities listed above\nUpon termination, any unpaid commissions above the minimum threshold will be paid in the next regular payout cycle\nCommissions on referred customers will cease at the time of termination, even if within the 3-month commission window',
+    'zh-CN':
+      'Either party may terminate the affiliate relationship at any time with 14 days\u2019 prior written notice\nComfy.org reserves the right to immediately terminate and withhold commissions if an affiliate violates any of the prohibited activities listed above\nUpon termination, any unpaid commissions above the minimum threshold will be paid in the next regular payout cycle\nCommissions on referred customers will cease at the time of termination, even if within the 3-month commission window'
+  },
+  'affiliate-terms.8-program-modifications.label': {
+    en: 'MODIFICATIONS',
+    'zh-CN': 'MODIFICATIONS'
+  },
+  'affiliate-terms.8-program-modifications.title': {
+    en: '8. Program Modifications',
+    'zh-CN': '8. Program Modifications'
+  },
+  'affiliate-terms.8-program-modifications.block.0': {
+    en: 'Comfy.org reserves the right to modify these terms, commission rates, or program structure with 30 days notice to active affiliates\nContinued participation after notice constitutes acceptance of modified terms',
+    'zh-CN':
+      'Comfy.org reserves the right to modify these terms, commission rates, or program structure with 30 days notice to active affiliates\nContinued participation after notice constitutes acceptance of modified terms'
+  },
+  'affiliate-terms.9-indemnification.label': {
+    en: 'LIABILITY',
+    'zh-CN': 'LIABILITY'
+  },
+  'affiliate-terms.9-indemnification.title': {
+    en: '9. Indemnification and Limitation of Liability',
+    'zh-CN': '9. Indemnification and Limitation of Liability'
+  },
+  'affiliate-terms.9-indemnification.block.0': {
+    en: 'You will indemnify Comfy.org from any third party claim arising out of your breach of these terms.\nComfy.org\u2019s liability to any affiliate shall not (i) exceed the total commissions paid to that affiliate in the preceding 12 months, and (ii) include any indirect, consequential, punitive or any other type of special damages.\nComfy.org is not responsible for tracking failures caused by user browser settings, ad blockers, or VPNs, though we employ server-side tracking to minimize these issues',
+    'zh-CN':
+      'You will indemnify Comfy.org from any third party claim arising out of your breach of these terms.\nComfy.org\u2019s liability to any affiliate shall not (i) exceed the total commissions paid to that affiliate in the preceding 12 months, and (ii) include any indirect, consequential, punitive or any other type of special damages.\nComfy.org is not responsible for tracking failures caused by user browser settings, ad blockers, or VPNs, though we employ server-side tracking to minimize these issues'
+  },
+  'affiliate-terms.10-governing-law.label': {
+    en: 'GOVERNING LAW',
+    'zh-CN': 'GOVERNING LAW'
+  },
+  'affiliate-terms.10-governing-law.title': {
+    en: '10. Governing Law',
+    'zh-CN': '10. Governing Law'
+  },
+  'affiliate-terms.10-governing-law.block.0': {
+    en: 'These terms shall be governed by and construed in accordance with the laws of the State of Delaware, without regard to conflict of law principles. All disputes arising under this Agreement shall be resolved exclusively in the state or federal courts in the State of Delaware.',
+    'zh-CN':
+      'These terms shall be governed by and construed in accordance with the laws of the State of Delaware, without regard to conflict of law principles. All disputes arising under this Agreement shall be resolved exclusively in the state or federal courts in the State of Delaware.'
+  },
+  'affiliate-terms.11-miscellaneous.label': {
+    en: 'MISCELLANEOUS',
+    'zh-CN': 'MISCELLANEOUS'
+  },
+  'affiliate-terms.11-miscellaneous.title': {
+    en: '11. Miscellaneous',
+    'zh-CN': '11. Miscellaneous'
+  },
+  'affiliate-terms.11-miscellaneous.block.0': {
+    en: '<strong>(a) Entire Agreement.</strong> These terms constitutes the sole and entire agreement (including the attached schedules and exhibits) of the Parties with respect to the subject matter of these terms, and supersedes all prior and contemporaneous understandings, agreements, representations, and warranties, both written and oral, with respect to the subject matter. <strong>(b) Relationship of Parties.</strong> Each party is an independent contractor with regard to these terms. Nothing contained in These terms shall be construed as creating any agency, partnership, joint venture, or other form of joint enterprise, employment, or fiduciary relationship between the Parties. Neither party, by virtue of these terms, will have any right, power, or authority to act or create an obligation, express or implied, on behalf of the other party. <strong>(c) Assignment.</strong> Neither party shall assign any of its rights or delegate any of its obligations hereunder without the prior written consent of the other party, which consent shall not be unreasonably withheld, conditioned or delayed. <strong>(d) Severability.</strong> If any term or provision of these terms is invalid, illegal, or unenforceable in any jurisdiction, such invalidity, illegality, or unenforceability shall not affect any other term or provision of these terms or invalidate or render unenforceable such term or provision in any other jurisdiction. Upon a determination that any term or provision is invalid, illegal or unenforceable, the Parties hereto shall negotiate in good faith to modify these terms to effect the original intent of the Parties as closely as possible in order that the transactions contemplated hereby be consummated as originally contemplated to the greatest extent possible. <strong>(e) Waiver.</strong> No waiver by either party of any of the provisions hereof shall be effective unless explicitly set forth in writing and signed by the party so waiving. <strong>(f) Notice.</strong> Each party shall deliver all notices, requests, consents, claims, demands, waivers, and other communications under these terms in writing to the email utilized for the primary contact for the other party. <strong>(g) Cumulative Remedies.</strong> All rights and remedies provided in these terms are cumulative and not exclusive, and the exercise by a party of any right or remedy does not preclude the exercise of any other rights or remedies that may now or subsequently be available at Law, in equity, by statute, in any other agreement between the Parties or otherwise. <strong>(h) No Third-Party Beneficiaries.</strong> These terms benefits solely the Parties to these terms and their respective permitted successors and assigns and nothing in these terms, express or implied, confers on any other person or entity any legal or equitable right, benefit, or remedy of any nature whatsoever under or by reason of these terms.',
+    'zh-CN':
+      '<strong>(a) Entire Agreement.</strong> These terms constitutes the sole and entire agreement (including the attached schedules and exhibits) of the Parties with respect to the subject matter of these terms, and supersedes all prior and contemporaneous understandings, agreements, representations, and warranties, both written and oral, with respect to the subject matter. <strong>(b) Relationship of Parties.</strong> Each party is an independent contractor with regard to these terms. Nothing contained in These terms shall be construed as creating any agency, partnership, joint venture, or other form of joint enterprise, employment, or fiduciary relationship between the Parties. Neither party, by virtue of these terms, will have any right, power, or authority to act or create an obligation, express or implied, on behalf of the other party. <strong>(c) Assignment.</strong> Neither party shall assign any of its rights or delegate any of its obligations hereunder without the prior written consent of the other party, which consent shall not be unreasonably withheld, conditioned or delayed. <strong>(d) Severability.</strong> If any term or provision of these terms is invalid, illegal, or unenforceable in any jurisdiction, such invalidity, illegality, or unenforceability shall not affect any other term or provision of these terms or invalidate or render unenforceable such term or provision in any other jurisdiction. Upon a determination that any term or provision is invalid, illegal or unenforceable, the Parties hereto shall negotiate in good faith to modify these terms to effect the original intent of the Parties as closely as possible in order that the transactions contemplated hereby be consummated as originally contemplated to the greatest extent possible. <strong>(e) Waiver.</strong> No waiver by either party of any of the provisions hereof shall be effective unless explicitly set forth in writing and signed by the party so waiving. <strong>(f) Notice.</strong> Each party shall deliver all notices, requests, consents, claims, demands, waivers, and other communications under these terms in writing to the email utilized for the primary contact for the other party. <strong>(g) Cumulative Remedies.</strong> All rights and remedies provided in these terms are cumulative and not exclusive, and the exercise by a party of any right or remedy does not preclude the exercise of any other rights or remedies that may now or subsequently be available at Law, in equity, by statute, in any other agreement between the Parties or otherwise. <strong>(h) No Third-Party Beneficiaries.</strong> These terms benefits solely the Parties to these terms and their respective permitted successors and assigns and nothing in these terms, express or implied, confers on any other person or entity any legal or equitable right, benefit, or remedy of any nature whatsoever under or by reason of these terms.'
+  },
+
+  'affiliate-terms.page.title': {
+    en: 'Affiliate Terms — Comfy',
+    'zh-CN': 'Affiliate Terms — Comfy'
+  },
+  'affiliate-terms.page.description': {
+    en: 'Comfy.org Affiliate Program Terms and Conditions.',
+    'zh-CN': 'Comfy.org Affiliate Program Terms and Conditions.'
+  },
+  'affiliate-terms.page.heading': {
+    en: 'Affiliate Terms',
+    'zh-CN': 'Affiliate Terms'
+  },
+  'affiliate-terms.page.tocLabel': {
+    en: 'On this page',
+    'zh-CN': '本页内容'
+  },
+  'affiliate-terms.page.effectiveDateLabel': {
+    en: 'Effective Date',
+    'zh-CN': '生效日期'
+  },
+
   // Customers page
   'customers.hero.label': {
     en: 'CUSTOMER STORIES',
@@ -4194,6 +4634,80 @@ const translations = {
     'zh-CN': '支持的模型'
   },
 
+  // Models list page (/models)
+  'models.list.label': { en: 'MODELS', 'zh-CN': '模型' },
+  'models.list.heroCta': {
+    en: 'Try {name} Now',
+    'zh-CN': '立即试用 {name}'
+  },
+  'models.list.creations.title': {
+    en: '{name} Image and Video Creations',
+    'zh-CN': '{name} 图像与视频创作'
+  },
+  'models.list.creations.cta': {
+    en: 'Explore Workflows',
+    'zh-CN': '探索工作流'
+  },
+  'models.list.heroTitle.before': {
+    en: '{name} in',
+    'zh-CN': ''
+  },
+  'models.list.heroTitle.after': {
+    en: '',
+    'zh-CN': ' 中的 {name}'
+  },
+  'models.list.heroSubtitle': {
+    en: 'From open-source diffusion checkpoints to partner APIs — every major model, with community workflow templates ready to run.',
+    'zh-CN':
+      '从开源扩散模型到合作伙伴 API，涵盖每一个主流模型，并附带可直接运行的社区工作流模板。'
+  },
+  'models.list.card.workflows': {
+    en: '{count} workflows',
+    'zh-CN': '{count} 个工作流'
+  },
+  'models.list.contact.label': {
+    en: 'COMFY HUB',
+    'zh-CN': 'COMFY HUB'
+  },
+  'models.showcase.label': { en: 'AI MODELS', 'zh-CN': 'AI 模型' },
+  'models.showcase.heading': {
+    en: 'Run the world’s\nleading AI models',
+    'zh-CN': '运行全球领先的\nAI 模型'
+  },
+  'models.showcase.subtitle': {
+    en: 'New models are added as they launch.',
+    'zh-CN': '新模型发布后会第一时间上线。'
+  },
+  'models.showcase.cta': {
+    en: 'EXPLORE WORKFLOWS',
+    'zh-CN': '探索工作流'
+  },
+  'models.showcase.card.grokImagine': {
+    en: 'Grok Imagine',
+    'zh-CN': 'Grok Imagine'
+  },
+  'models.showcase.card.nanoBananaPro': {
+    en: 'Nano Banana Pro',
+    'zh-CN': 'Nano Banana Pro'
+  },
+  'models.showcase.card.ltx23': {
+    en: 'LTX 2.3',
+    'zh-CN': 'LTX 2.3'
+  },
+  'models.showcase.card.qwenAdvancedEdit': {
+    en: 'Advanced image\nediting with Qwen',
+    'zh-CN': '使用 Qwen 进行\n高级图像编辑'
+  },
+  'models.showcase.card.wan22TextToVideo': {
+    en: 'Wan 2.2\ntext to video',
+    'zh-CN': 'Wan 2.2\n文字转视频'
+  },
+  'models.list.contact.heading': {
+    en: 'Pick a model and explore what the community has built. <a href="https://comfy.org/workflows" target="_blank" rel="noopener noreferrer" class="text-primary-comfy-yellow underline">Browse Comfy Hub</a> for the newest workflows.',
+    'zh-CN':
+      '选择一个模型，浏览社区的创作成果。<a href="https://comfy.org/workflows" target="_blank" rel="noopener noreferrer" class="text-primary-comfy-yellow underline">访问 Comfy Hub</a> 查看最新工作流。'
+  },
+
   // Payment status pages
   'payment.success.label': {
     en: 'PAYMENT',
@@ -4235,11 +4749,112 @@ const translations = {
   'payment.failed.secondaryCta': {
     en: 'READ SUBSCRIPTION DOCS',
     'zh-CN': '查看订阅文档'
+  },
+
+  // AffiliateHeroSection
+  'affiliate.hero.label': { en: 'AFFILIATE', 'zh-CN': '联盟' },
+  'affiliate.hero.headingHighlight': {
+    en: 'Earn 30%',
+    'zh-CN': '赚取 30%'
+  },
+  'affiliate.hero.headingMuted': {
+    en: 'recurring commission for 3 months.',
+    'zh-CN': '持续返佣 3 个月。'
+  },
+  'affiliate.hero.feature1': {
+    en: '30% recurring commission for 3 months',
+    'zh-CN': '30% 持续佣金，连续 3 个月'
+  },
+  'affiliate.hero.feature2': {
+    en: '60-day cookie window',
+    'zh-CN': '60 天 Cookie 窗口'
+  },
+  'affiliate.hero.feature3': {
+    en: '$100 minimum payout',
+    'zh-CN': '$100 起付'
+  },
+  'affiliate.hero.feature4': {
+    en: 'Monthly payouts',
+    'zh-CN': '每月结算'
+  },
+  'affiliate.hero.apply': { en: 'APPLY NOW', 'zh-CN': '立即申请' },
+  'affiliate.hero.imageAlt': {
+    en: 'Comfy affiliate program',
+    'zh-CN': 'Comfy 联盟计划'
+  },
+
+  // AffiliateAudienceSection
+  'affiliate.audience.heading': {
+    en: "Who we're looking for",
+    'zh-CN': '我们在寻找谁'
+  },
+  'affiliate.audience.subheading': {
+    en: 'If you are...',
+    'zh-CN': '如果您是……'
+  },
+
+  // AffiliateHowItWorksSection
+  'affiliate.howItWorks.heading': {
+    en: 'How it works',
+    'zh-CN': '运作方式'
+  },
+
+  // AffiliateBenefitsSection
+  'affiliate.benefits.heading': {
+    en: 'Why ComfyUI for affiliate creators',
+    'zh-CN': '为什么联盟创作者选择 ComfyUI'
+  },
+
+  // AffiliateBrandAssetsSection
+  'affiliate.assets.heading': {
+    en: 'Brand logos for your content',
+    'zh-CN': '可用于您内容的品牌 Logo'
+  },
+  'affiliate.assets.subheading': {
+    en: 'Banners, screenshots, and talking points are in your affiliate dashboard after approval.',
+    'zh-CN': '横幅图、截图和宣传文案将在获批后于联盟仪表盘中提供。'
+  },
+  'affiliate.assets.downloadLabel': {
+    en: 'Download zip',
+    'zh-CN': '下载压缩包'
+  },
+
+  // AffiliateFAQSection
+  'affiliate.faq.heading': {
+    en: 'Frequently asked questions',
+    'zh-CN': '常见问题'
+  },
+
+  // Affiliate page (/affiliates) — head metadata
+  'affiliate.page.title': {
+    en: 'Comfy.org Affiliate Program — Become a Partner',
+    'zh-CN': 'Comfy.org 联盟计划 — 成为合作伙伴'
+  },
+  'affiliate.page.description': {
+    en: 'Earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer. Apply to become a Comfy Partner.',
+    'zh-CN':
+      '为您推荐的每个 Comfy Cloud 订阅赚取 30% 持续佣金，连续 3 个月。立即申请成为 Comfy 合作伙伴。'
+  },
+
+  // AffiliateCtaSection
+  'affiliate.cta.heading': {
+    en: 'Ready to start earning?',
+    'zh-CN': '准备好开始赚取佣金了吗？'
+  },
+  'affiliate.cta.apply': {
+    en: 'APPLY NOW',
+    'zh-CN': '立即申请'
+  },
+  'affiliate.cta.termsLabel': {
+    en: 'Read the affiliate program terms',
+    'zh-CN': '阅读联盟计划条款'
   }
 } as const satisfies Record<string, Record<Locale, string>>
 
 type TranslationKey = keyof typeof translations
 
+type LocalizedText = Record<Locale, string>
+
 export function t(key: TranslationKey, locale: Locale = 'en'): string {
   return translations[key][locale] ?? translations[key].en
 }
@@ -4250,4 +4865,4 @@ export function hasKey(key: string): boolean {
   return key in translations
 }
 
-export type { Locale, TranslationKey }
+export type { Locale, LocalizedText, TranslationKey }

apps/website/src/pages/affiliates/index.astro

@@ -0,0 +1,48 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import AudienceSection from '../../templates/affiliate/AudienceSection.vue'
+import BenefitsSection from '../../templates/affiliate/BenefitsSection.vue'
+import BrandAssetsSection from '../../templates/affiliate/BrandAssetsSection.vue'
+import CtaSection from '../../templates/affiliate/CtaSection.vue'
+import FAQSection from '../../templates/affiliate/FAQSection.vue'
+import HeroSection from '../../templates/affiliate/HeroSection.vue'
+import HowItWorksSection from '../../templates/affiliate/HowItWorksSection.vue'
+import { affiliateFaqs } from '../../data/affiliateFaq'
+import { t } from '../../i18n/translations'
+
+const locale = 'en' as const
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: affiliateFaqs.map((faq) => ({
+    '@type': 'Question',
+    name: faq.question[locale],
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq.answer[locale]
+    }
+  }))
+}
+---
+
+<BaseLayout
+  title={t('affiliate.page.title', locale)}
+  description={t('affiliate.page.description', locale)}
+>
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
+
+  <HeroSection />
+  <HowItWorksSection />
+  <AudienceSection />
+  <BenefitsSection />
+  <BrandAssetsSection />
+  <FAQSection client:visible />
+  <CtaSection />
+</BaseLayout>

apps/website/src/pages/affiliates/terms.astro

@@ -0,0 +1,30 @@
+---
+// Affiliate Program Terms — English only, by design.
+// Legal-reviewed copy must not be served under a localized route until
+// legal explicitly approves a translation; rendering an unreviewed
+// translation as the active terms exposes us to liability from the
+// translation diverging from the approved English source. See the
+// matching comment in src/i18n/translations.ts for the i18n block.
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import HeroSection from '../../components/legal/HeroSection.vue'
+import LegalContentSection from '../../components/legal/LegalContentSection.vue'
+import { t } from '../../i18n/translations'
+---
+
+<BaseLayout
+  title={t('affiliate-terms.page.title')}
+  description={t('affiliate-terms.page.description')}
+>
+  <HeroSection title={t('affiliate-terms.page.heading')} />
+  <p class="text-primary-warm-gray mt-2 text-center text-sm">
+    {t('affiliate-terms.page.effectiveDateLabel')}: {
+      t('affiliate-terms.effective-date')
+    }
+  </p>
+  <LegalContentSection
+    prefix="affiliate-terms"
+    locale="en"
+    tocLabelKey="affiliate-terms.page.tocLabel"
+    client:load
+  />
+</BaseLayout>

apps/website/src/pages/learning.astro

@@ -0,0 +1,27 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import HeroSection from '../components/learning/HeroSection.vue'
+import FeaturedWorkflowSection from '../components/learning/FeaturedWorkflowSection.vue'
+import TutorialsSection from '../components/learning/TutorialsSection.vue'
+import CallToActionSection from '../components/common/CallToActionSection.vue'
+// import EventsSection from '../components/common/EventsSection.vue'
+import { getRoutes } from '../config/routes'
+import { externalLinks } from '../config/routes'
+// import { learningEvents } from '../data/events'
+
+const routes = getRoutes('en')
+---
+
+<BaseLayout title="Learning — Comfy">
+  <HeroSection client:load />
+  <FeaturedWorkflowSection client:visible />
+  <TutorialsSection client:visible />
+  <CallToActionSection
+    headingKey="learning.cta.heading"
+    primaryLabelKey="learning.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/pages/models.astro

@@ -0,0 +1,22 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ModelsHeroSection from '../components/models/ModelsHeroSection.vue'
+import ModelCreationsSection from '../components/models/ModelCreationsSection.vue'
+import AIModelsSection from '../components/product/shared/AIModelsSection.vue'
+import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue' 
+---
+
+<BaseLayout
+  title="Models — Comfy"
+  description="Run the world's leading AI models in ComfyUI. Browse every supported model with community workflow templates ready to run."
+>
+  <ModelsHeroSection
+    modelName="Grok Imagine"
+    ctaHref="/p/supported-models/grok-imagine"
+    videoSrc="https://media.comfy.org/website/models/video_ComfdyUI_00001_.mp4"
+    videoAriaLabel="Grok Imagine output created with ComfyUI"
+  />
+  <ModelCreationsSection client:load />
+  <AIModelsSection client:load />
+  <ProductShowcaseSection client:load />
+</BaseLayout>

apps/website/src/pages/privacy/desktop.astro

@@ -0,0 +1,13 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ContentSection from '../../components/common/ContentSection.vue'
+import HeroSection from '../../components/legal/HeroSection.vue'
+---
+
+<BaseLayout
+  title="Desktop Privacy Policy — Comfy"
+  description="Privacy policy for Comfy Desktop. Named processors, lawful basis under GDPR/UK GDPR, retention periods, and your rights."
+>
+  <HeroSection title="Desktop Privacy Policy" />
+  <ContentSection prefix="desktop_privacy" client:load />
+</BaseLayout>

apps/website/src/pages/zh-CN/learning.astro

@@ -0,0 +1,27 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import HeroSection from '../../components/learning/HeroSection.vue'
+import FeaturedWorkflowSection from '../../components/learning/FeaturedWorkflowSection.vue'
+import TutorialsSection from '../../components/learning/TutorialsSection.vue'
+import CallToActionSection from '../../components/common/CallToActionSection.vue'
+import EventsSection from '../../components/common/EventsSection.vue'
+import { getRoutes, externalLinks } from '../../config/routes'
+import { learningEvents } from '../../data/events'
+
+const routes = getRoutes('zh-CN')
+---
+
+<BaseLayout title="学习 — Comfy">
+  <HeroSection locale="zh-CN" client:load />
+  <FeaturedWorkflowSection locale="zh-CN" client:visible />
+  <TutorialsSection locale="zh-CN" client:visible />
+  <CallToActionSection
+    locale="zh-CN"
+    headingKey="learning.cta.heading"
+    primaryLabelKey="learning.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/pages/zh-CN/models.astro

@@ -0,0 +1,23 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ModelsHeroSection from '../../components/models/ModelsHeroSection.vue'
+import ModelCreationsSection from '../../components/models/ModelCreationsSection.vue'
+import AIModelsSection from '../../components/product/shared/AIModelsSection.vue'
+import ProductShowcaseSection from '../../components/home/ProductShowcaseSection.vue'
+---
+
+<BaseLayout
+  title="模型 — Comfy"
+  description="在 ComfyUI 中运行世界领先的 AI 模型。浏览所有支持的模型及社区工作流模板。"
+>
+  <ModelsHeroSection
+    locale="zh-CN"
+    modelName="Grok Imagine"
+    ctaHref="/zh-CN/p/supported-models/grok-imagine"
+    videoSrc="https://media.comfy.org/website/models/video_ComfdyUI_00001_.mp4"
+    videoAriaLabel="使用 ComfyUI 创建的 Grok Imagine 作品"
+  />
+  <ModelCreationsSection client:load locale="zh-CN" />
+  <AIModelsSection client:load locale="zh-CN" />
+  <ProductShowcaseSection client:load locale="zh-CN" />
+</BaseLayout>

apps/website/src/pages/zh-CN/privacy/desktop.astro

@@ -0,0 +1,13 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import ContentSection from '../../../components/common/ContentSection.vue'
+import HeroSection from '../../../components/legal/HeroSection.vue'
+---
+
+<BaseLayout
+  title="Desktop 隐私政策 — Comfy"
+  description="Comfy Desktop 隐私政策。命名的数据处理方、GDPR/UK GDPR 下的合法依据、保留期限和您的权利。"
+>
+  <HeroSection title="Desktop 隐私政策" />
+  <ContentSection prefix="desktop_privacy" locale="zh-CN" client:load />
+</BaseLayout>

apps/website/src/templates/affiliate/AudienceSection.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import ChecklistSplit01 from '../../components/blocks/ChecklistSplit01.vue'
+import { affiliateAudienceCriteria } from '../../data/affiliateAudience'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const criteria = affiliateAudienceCriteria.map((criterion) => ({
+  id: criterion.id,
+  label: criterion.label[locale]
+}))
+</script>
+
+<template>
+  <ChecklistSplit01
+    :heading="t('affiliate.audience.heading', locale)"
+    :subheading="t('affiliate.audience.subheading', locale)"
+    :criteria="criteria"
+  />
+</template>

apps/website/src/templates/affiliate/BenefitsSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import BenefitsGrid01 from '../../components/blocks/BenefitsGrid01.vue'
+import { externalLinks } from '../../config/routes'
+import { affiliateBenefits } from '../../data/affiliateBenefits'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const benefits = affiliateBenefits.map((benefit) => ({
+  id: benefit.id,
+  description: benefit.description[locale]
+}))
+</script>
+
+<template>
+  <BenefitsGrid01
+    :heading="t('affiliate.benefits.heading', locale)"
+    :benefits="benefits"
+    :primary-cta="{
+      label: t('affiliate.hero.apply', locale),
+      href: externalLinks.affiliateApplicationForm,
+      target: '_blank'
+    }"
+  />
+</template>

apps/website/src/templates/affiliate/BrandAssetsSection.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import BrandAssetsGrid01 from '../../components/blocks/BrandAssetsGrid01.vue'
+import { affiliateBrandAssets } from '../../data/affiliateBrandAssets'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const assets = affiliateBrandAssets.map((asset) => ({
+  id: asset.id,
+  title: asset.title[locale],
+  download: asset.download,
+  preview: asset.preview
+}))
+</script>
+
+<template>
+  <BrandAssetsGrid01
+    :heading="t('affiliate.assets.heading', locale)"
+    :subheading="t('affiliate.assets.subheading', locale)"
+    :download-label="t('affiliate.assets.downloadLabel', locale)"
+    :assets="assets"
+  />
+</template>

apps/website/src/templates/affiliate/CtaSection.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import CtaCenter01 from '../../components/blocks/CtaCenter01.vue'
+import { externalLinks, getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const routes = getRoutes(locale)
+</script>
+
+<template>
+  <CtaCenter01
+    :heading="t('affiliate.cta.heading', locale)"
+    :primary-cta="{
+      label: t('affiliate.cta.apply', locale),
+      href: externalLinks.affiliateApplicationForm,
+      target: '_blank'
+    }"
+    :terms-link="{
+      label: t('affiliate.cta.termsLabel', locale),
+      href: routes.affiliateTerms
+    }"
+  />
+</template>

apps/website/src/templates/affiliate/FAQSection.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import FAQSplit01 from '../../components/blocks/FAQSplit01.vue'
+import { affiliateFaqs } from '../../data/affiliateFaq'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const faqs = affiliateFaqs.map((faq) => ({
+  id: faq.id,
+  question: faq.question[locale],
+  answer: faq.answer[locale]
+}))
+</script>
+
+<template>
+  <FAQSplit01 :heading="t('affiliate.faq.heading', locale)" :faqs="faqs" />
+</template>

apps/website/src/templates/affiliate/HeroSection.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import HeroSplit01 from '../../components/blocks/HeroSplit01.vue'
+import { externalLinks } from '@/config/routes.ts'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <HeroSplit01
+    :badge-text="t('affiliate.hero.label', locale)"
+    :title-highlight="t('affiliate.hero.headingHighlight', locale)"
+    :title="t('affiliate.hero.headingMuted', locale)"
+    :features="[
+      t('affiliate.hero.feature1', locale),
+      t('affiliate.hero.feature2', locale),
+      t('affiliate.hero.feature3', locale),
+      t('affiliate.hero.feature4', locale)
+    ]"
+    :primary-cta="{
+      label: t('affiliate.hero.apply', locale),
+      href: externalLinks.affiliateApplicationForm
+    }"
+    video-autoplay
+    video-loop
+    video-hide-controls
+    video-src="https://media.comfy.org/website/affiliates/rainlit-ronin_compressed.mp4"
+    :image-alt="t('affiliate.hero.imageAlt', locale)"
+  />
+</template>

apps/website/src/templates/affiliate/HowItWorksSection.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import StepsGrid01 from '../../components/blocks/StepsGrid01.vue'
+import { affiliateHowItWorksSteps } from '../../data/affiliateHowItWorks'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const steps = affiliateHowItWorksSteps.map((step) => ({
+  id: step.id,
+  label: step.label[locale],
+  description: step.description[locale]
+}))
+</script>
+
+<template>
+  <StepsGrid01
+    :heading="t('affiliate.howItWorks.heading', locale)"
+    :steps="steps"
+  />
+</template>

apps/website/src/utils/video.ts

@@ -1,7 +1,6 @@
 /** @knipIgnoreUsedByStackedPR */
 export type VideoFormat = 'webm' | 'mp4'
 
-/** @knipIgnoreUsedByStackedPR */
 export type VideoSource = {
   src: string
   type: `video/${VideoFormat}`

browser_tests/assets/missing/missing_model_promoted_widget.json

@@ -0,0 +1,115 @@
+{
+  "id": "test-missing-model-promoted-widget",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "subgraph-with-promoted-missing-model",
+      "pos": [450, 250],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-promoted-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 1,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Promoted Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "ckpt-name-input-id",
+            "name": "ckpt_name",
+            "type": "COMBO",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [315, 98],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "ckpt_name",
+                "name": "ckpt_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "ckpt_name"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": null },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/fixtures/ComfyMouse.ts

@@ -100,10 +100,7 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
     await this.nextFrame()
   }
 
-  async resizeByDragging(
-    element: Locator,
-    { x, y }: { x?: number; y?: number }
-  ) {
+  async dragElementBy(element: Locator, { x, y }: { x?: number; y?: number }) {
     const elementBox = await element.boundingBox()
     if (!elementBox) throw new Error('element should have layout')
 

browser_tests/fixtures/data/assetFixtures.ts

@@ -1,10 +1,11 @@
 import type { Asset } from '@comfyorg/ingest-types'
-function createModelAsset(overrides: Partial<Asset> = {}): Asset {
+function createModelAsset(
+  overrides: Partial<Asset> = {}
+): Asset & { hash?: string } {
   return {
     id: 'test-model-001',
     name: 'model.safetensors',
-    asset_hash:
-      'blake3:0000000000000000000000000000000000000000000000000000000000000000',
+    hash: 'blake3:0000000000000000000000000000000000000000000000000000000000000000',
     size: 2_147_483_648,
     mime_type: 'application/octet-stream',
     tags: ['models', 'checkpoints'],
@@ -16,12 +17,13 @@ function createModelAsset(overrides: Partial<Asset> = {}): Asset {
   }
 }
 
-function createInputAsset(overrides: Partial<Asset> = {}): Asset {
+function createInputAsset(
+  overrides: Partial<Asset> = {}
+): Asset & { hash?: string } {
   return {
     id: 'test-input-001',
     name: 'input.png',
-    asset_hash:
-      'blake3:1111111111111111111111111111111111111111111111111111111111111111',
+    hash: 'blake3:1111111111111111111111111111111111111111111111111111111111111111',
     size: 2_048_576,
     mime_type: 'image/png',
     tags: ['input'],
@@ -32,12 +34,13 @@ function createInputAsset(overrides: Partial<Asset> = {}): Asset {
   }
 }
 
-function createOutputAsset(overrides: Partial<Asset> = {}): Asset {
+function createOutputAsset(
+  overrides: Partial<Asset> = {}
+): Asset & { hash?: string } {
   return {
     id: 'test-output-001',
     name: 'output_00001.png',
-    asset_hash:
-      'blake3:2222222222222222222222222222222222222222222222222222222222222222',
+    hash: 'blake3:2222222222222222222222222222222222222222222222222222222222222222',
     size: 4_194_304,
     mime_type: 'image/png',
     tags: ['output'],

browser_tests/fixtures/selectors.ts

@@ -54,6 +54,7 @@ export const TestIds = {
     errorDialogFindIssues: 'error-dialog-find-issues',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section',
+    errorGroupDisplayMessage: 'error-group-display-message',
     missingNodePacksGroup: 'error-group-missing-node',
     missingModelsGroup: 'error-group-missing-model',
     missingModelExpand: 'missing-model-expand',
@@ -68,11 +69,6 @@ export const TestIds = {
     missingMediaGroup: 'error-group-missing-media',
     swapNodesGroup: 'error-group-swap-nodes',
     missingMediaRow: 'missing-media-row',
-    missingMediaUploadDropzone: 'missing-media-upload-dropzone',
-    missingMediaLibrarySelect: 'missing-media-library-select',
-    missingMediaStatusCard: 'missing-media-status-card',
-    missingMediaConfirmButton: 'missing-media-confirm-button',
-    missingMediaCancelButton: 'missing-media-cancel-button',
     missingMediaLocateButton: 'missing-media-locate-button',
     publishTabPanel: 'publish-tab-panel',
     apiSignin: 'api-signin-dialog',

browser_tests/fixtures/sharedWorkflowImportFixture.ts

@@ -43,10 +43,10 @@ const sharedWorkflowAsset: AssetInfo = {
   in_library: false
 }
 
-const defaultInputAsset: Asset = {
+const defaultInputAsset: Asset & { hash?: string } = {
   id: 'default-input-asset',
   name: defaultInputFileName,
-  asset_hash: defaultInputFileName,
+  hash: defaultInputFileName,
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],
@@ -55,10 +55,10 @@ const defaultInputAsset: Asset = {
   last_access_time: '2026-05-01T00:00:00Z'
 }
 
-const importedInputAsset: Asset = {
+const importedInputAsset: Asset & { hash?: string } = {
   id: 'imported-input-asset',
   name: sharedWorkflowImportScenario.inputFileName,
-  asset_hash: sharedWorkflowImportScenario.inputFileName,
+  hash: sharedWorkflowImportScenario.inputFileName,
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],

browser_tests/fixtures/utils/boundsUtils.ts

@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 import { SELECTION_BOUNDS_PADDING } from '@/base/common/selectionBounds'
 import type { CanvasRect } from '@/base/common/selectionBounds'
@@ -91,3 +91,21 @@ export async function measureSelectionBounds(
     { ids: nodeIds, padding: SELECTION_BOUNDS_PADDING }
   ) as Promise<MeasureResult>
 }
+
+export async function intersection(a: Locator, b: Locator) {
+  const aBounds = await a.boundingBox()
+  const bBounds = await b.boundingBox()
+  if (!aBounds || !bBounds) return undefined
+
+  const y = Math.max(aBounds.y, bBounds.y)
+  const x = Math.max(aBounds.x, bBounds.x)
+  const bot = Math.min(aBounds.y + aBounds.height, bBounds.y + bBounds.height)
+  const right = Math.min(aBounds.x + aBounds.width, bBounds.x + bBounds.width)
+
+  if (y > bot || x > right) return undefined
+
+  const width = right - x
+  const height = bot - y
+
+  return { x, y, width, height }
+}

browser_tests/tests/errorOverlay.spec.ts

@@ -19,63 +19,24 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     return page.getByTestId(TestIds.dialogs.errorOverlay)
   }
 
-  function getSeeErrorsButton(page: Page) {
+  function getDetailsButton(page: Page) {
     return getOverlay(page).getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
   }
 
   test.describe('Labels', () => {
-    test('Should display singular error count label for single error', async ({
+    test('Should display single error copy and View details action', async ({
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-      await expect(getOverlay(comfyPage.page)).toBeVisible()
-      await expect(getOverlay(comfyPage.page)).toContainText(/1 ERROR/i)
-    })
-
-    test('Should display "Show missing nodes" button for missing node errors', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-
-      await expect(getOverlay(comfyPage.page)).toBeVisible()
-      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
-        /Show missing nodes/i
-      )
-    })
-
-    test('Should display "Show missing models" button for missing model errors', async ({
-      comfyPage
-    }) => {
-      await cleanupFakeModel(comfyPage)
-
-      await comfyPage.workflow.loadWorkflow('missing/missing_models')
-
-      await expect(getOverlay(comfyPage.page)).toBeVisible()
-      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
-        /Show missing models/i
-      )
-    })
-
-    test('Should display "Show missing inputs" button for missing media errors', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('missing/missing_media_single')
-
-      await expect(getOverlay(comfyPage.page)).toBeVisible()
-      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
-        /Show missing inputs/i
-      )
-    })
-
-    test('Should display generic "See Errors" button for multiple error types', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('missing/missing_nodes_and_media')
-
-      await expect(getOverlay(comfyPage.page)).toBeVisible()
-      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
-        /See Errors/i
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+      await expect(overlay).not.toContainText(/1 ERROR/i)
+      await expect(
+        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
+      ).toHaveText(/\S/)
+      await expect(getDetailsButton(comfyPage.page)).toContainText(
+        /View details/i
       )
     })
   })
@@ -137,7 +98,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     })
   })
 
-  test.describe('See Errors flow', () => {
+  test.describe('View details flow', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.setup()
     })
@@ -166,7 +127,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await expect(overlay).toHaveText(/\S/)
     })
 
-    test('"See Errors" opens right side panel', async ({ comfyPage }) => {
+    test('"View details" opens right side panel', async ({ comfyPage }) => {
       await triggerExecutionError(comfyPage)
 
       const overlay = getOverlay(comfyPage.page)
@@ -178,7 +139,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
     })
 
-    test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
+    test('"View details" dismisses the overlay', async ({ comfyPage }) => {
       await triggerExecutionError(comfyPage)
 
       const overlay = getOverlay(comfyPage.page)
@@ -229,19 +190,24 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     }) => {
       // Regression: ErrorOverlay previously read the selection-filtered
       // missingModelGroups from useErrorGroups, so selecting one of two
-      // missing-model nodes would shrink the overlay label from
-      // "2 required models are missing" to "1". The overlay must show
-      // the workflow total regardless of canvas selection.
+      // missing-model nodes could shrink the overlay count. The overlay must
+      // show the workflow total regardless of canvas selection.
       await comfyPage.workflow.loadWorkflow('missing/missing_models_distinct')
 
       const overlay = getOverlay(comfyPage.page)
       await expect(overlay).toBeVisible()
-      await expect(overlay).toContainText(/2 required models are missing/i)
+      await expect(overlay).toContainText(/2 errors found/i)
+      await expect(
+        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
+      ).toHaveText(/Resolve them before running the workflow\./i)
 
       const node = await comfyPage.nodeOps.getNodeRefById('1')
       await node.click('title')
 
-      await expect(overlay).toContainText(/2 required models are missing/i)
+      await expect(overlay).toContainText(/2 errors found/i)
+      await expect(
+        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
+      ).toHaveText(/Resolve them before running the workflow\./i)
     })
   })
 })