use ui-overview.webm for affiliate hero, not node-workflow

node-workflow.webm reads as a single zoomed-in still until the loop completes (caught it mid-frame on the live preview, looked like a green-screen game asset). ui-overview.webm shows the same ControlNet workflow pipeline but framed as a multi-panel composition the entire loop, so every frame reads as 'this is ComfyUI in action' instead of 'this is a placeholder'. Same provenance (homepage Product Showcase, Last-Modified Apr 23, 2026), 504 KiB, post-brand-refresh.
swap affiliate hero video to post-refresh node-workflow loop
2026-05-24 22:58:08 +00:00 · 2026-05-06 08:29:52 +00:00 · 2026-05-06 08:25:59 +00:00 · 2026-05-06 08:21:12 +00:00 · 2026-05-06 07:59:41 +00:00 · 2026-05-06 07:44:55 +00:00
24 changed files with 1253 additions and 3 deletions
--- a/apps/website/astro.config.ts
+++ b/apps/website/astro.config.ts
@@ -9,10 +9,12 @@ const PAYMENT_STATUSES = ['success', 'failed'] as const
 const LOCALE_PREFIXES = LOCALES.map((locale) =>
  locale === DEFAULT_LOCALE ? '' : `/${locale}`
 )
+const NOINDEX_PATHNAMES = ['/affiliates']
 const SITEMAP_EXCLUDED_PATHNAMES = new Set(
-  LOCALE_PREFIXES.flatMap((prefix) =>
-    PAYMENT_STATUSES.map((status) => `${prefix}/payment/${status}`)
-  )
+  LOCALE_PREFIXES.flatMap((prefix) => [
+    ...PAYMENT_STATUSES.map((status) => `${prefix}/payment/${status}`),
+    ...NOINDEX_PATHNAMES.map((path) => `${prefix}${path}`)
+  ])
 )

 function isExcludedFromSitemap(page: string): boolean {
--- a/apps/website/e2e/affiliates.spec.ts
+++ b/apps/website/e2e/affiliates.spec.ts
@@ -0,0 +1,203 @@
+import { expect } from '@playwright/test'
+
+import {
+  AFFILIATE_FAQ_COUNT,
+  AFFILIATE_FAQ_PREFIX
+} from '../src/components/affiliates/affiliateFaqs'
+import { programDetailRows } from '../src/components/affiliates/programDetails'
+import type { TranslationKey } from '../src/i18n/translations'
+import { t } from '../src/i18n/translations'
+import { test } from './fixtures/blockExternalMedia'
+
+const FIRST_FAQ_QUESTION = t(
+  `${AFFILIATE_FAQ_PREFIX}.1.q` as TranslationKey,
+  'en'
+)
+const FIRST_FAQ_ANSWER = t(
+  `${AFFILIATE_FAQ_PREFIX}.1.a` as TranslationKey,
+  'en'
+)
+const FIRST_PROGRAM_DETAIL_LABEL = t(programDetailRows[0].labelKey, 'en')
+const FIRST_PROGRAM_DETAIL_VALUE = t(programDetailRows[0].valueKey, 'en')
+const PROGRAM_DETAIL_TABLE_ROW_COUNT = programDetailRows.length + 1
+
+const PATH = '/affiliates'
+const APPLY_URL = 'https://forms.gle/RS8L2ttcuGap4Q1v6'
+
+const SECTION_TESTIDS = [
+  'affiliate-hero',
+  'affiliate-trust-band',
+  'affiliate-how-it-works',
+  'affiliate-audience',
+  'affiliate-program-details',
+  'affiliate-brand-assets',
+  'affiliate-footer-cta'
+] as const
+
+test.describe('Affiliates landing — desktop @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('renders the hero heading and is marked noindex', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: 'Become a Comfy Partner', level: 1 })
+    ).toBeVisible()
+
+    const robotsContent = await page
+      .locator('meta[name="robots"]')
+      .getAttribute('content')
+    expect(robotsContent).toContain('noindex')
+  })
+
+  test('renders every page section in top-to-bottom order', async ({
+    page
+  }) => {
+    const ys: number[] = []
+    for (const id of SECTION_TESTIDS) {
+      const section = page.getByTestId(id)
+      await expect(section).toBeVisible()
+      const box = await section.boundingBox()
+      expect(box, `${id} bounding box`).not.toBeNull()
+      ys.push(box!.y)
+    }
+    const sortedYs = [...ys].sort((a, b) => a - b)
+    expect(ys).toEqual(sortedYs)
+  })
+
+  test('renders the program details table on desktop', async ({ page }) => {
+    const table = page.getByTestId('affiliate-program-details-table')
+    await expect(table).toBeVisible()
+    const rows = table.getByRole('row')
+    await expect(rows).toHaveCount(PROGRAM_DETAIL_TABLE_ROW_COUNT)
+  })
+})
+
+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(AFFILIATE_FAQ_COUNT)
+  })
+
+  test('hero and footer CTAs target the application form in a new tab', async ({
+    page
+  }) => {
+    const heroCta = page.getByTestId('affiliate-hero-cta')
+    await expect(heroCta).toBeVisible()
+    await expect(heroCta).toHaveAttribute('href', APPLY_URL)
+    await expect(heroCta).toHaveAttribute('target', '_blank')
+    await expect(heroCta).toHaveAttribute('rel', 'noopener noreferrer')
+
+    const footerCta = page.getByTestId('affiliate-footer-cta-button')
+    await expect(footerCta).toHaveAttribute('href', APPLY_URL)
+    await expect(footerCta).toHaveAttribute('target', '_blank')
+    await expect(footerCta).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  test('footer links to the affiliate terms page as a same-tab navigation', async ({
+    page
+  }) => {
+    const link = page
+      .getByTestId('affiliate-footer-cta')
+      .getByRole('link', { name: /Read the affiliate program terms/i })
+    await expect(link).toBeVisible()
+    await expect(link).toBeEnabled()
+    await expect(link).toHaveAttribute('href', '/affiliates/terms')
+    await expect(link).not.toHaveAttribute('target', '_blank')
+  })
+
+  test('Apply Now CTA opens the application form in a new tab', async ({
+    page,
+    context
+  }) => {
+    const popupPromise = context.waitForEvent('page')
+    await page.getByTestId('affiliate-hero-cta').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 })
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
+
+    await firstQuestion.click()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'true')
+    await expect(page.getByText(FIRST_FAQ_ANSWER)).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 and primary CTA at narrow viewports', async ({
+    page
+  }) => {
+    await expect(
+      page.getByRole('heading', { name: 'Become a Comfy Partner', level: 1 })
+    ).toBeVisible()
+    await expect(page.getByTestId('affiliate-hero-cta')).toBeVisible()
+  })
+
+  test('program details collapse to a stacked definition list', async ({
+    page
+  }) => {
+    await expect(
+      page.getByTestId('affiliate-program-details-table')
+    ).toBeHidden()
+    const detailsList = page
+      .getByTestId('affiliate-program-details')
+      .locator('dl')
+    await expect(detailsList).toBeVisible()
+    await expect(
+      detailsList.getByText(FIRST_PROGRAM_DETAIL_LABEL)
+    ).toBeVisible()
+    await expect(
+      detailsList.getByText(FIRST_PROGRAM_DETAIL_VALUE)
+    ).toBeVisible()
+  })
+
+  test('all major sections remain visible without horizontal overflow', async ({
+    page
+  }) => {
+    for (const id of SECTION_TESTIDS) {
+      const section = page.getByTestId(id)
+      await expect(section).toBeVisible()
+      const box = await section.boundingBox()
+      expect(box, `${id} bounding box`).not.toBeNull()
+      expect(box!.x + box!.width).toBeLessThanOrEqual(
+        page.viewportSize()!.width + 1
+      )
+    }
+  })
+})
--- a/apps/website/public/affiliates/brand/comfy-amplified-logo-mark.svg
+++ b/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>
--- a/apps/website/public/affiliates/brand/comfy-color-combo-ink.svg
+++ b/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>
--- a/apps/website/public/affiliates/brand/comfy-color-combo-yellow.svg
+++ b/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>
--- a/apps/website/public/affiliates/brand/comfy-dimensional-logo-mark.svg
+++ b/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>
--- a/apps/website/public/affiliates/brand/comfy-full-logo-ink.svg
+++ b/apps/website/public/affiliates/brand/comfy-full-logo-ink.svg
--- a/apps/website/public/affiliates/brand/comfy-full-logo-yellow.svg
+++ b/apps/website/public/affiliates/brand/comfy-full-logo-yellow.svg
--- a/apps/website/public/robots.txt
+++ b/apps/website/public/robots.txt
@@ -30,29 +30,38 @@ Disallow: /_astro/
 Disallow: /_website/
 Disallow: /_vercel/
 Disallow: /payment/
+Disallow: /affiliates

 User-agent: GPTBot
 Allow: /
+Disallow: /affiliates

 User-agent: OAI-SearchBot
 Allow: /
+Disallow: /affiliates

 User-agent: ChatGPT-User
 Allow: /
+Disallow: /affiliates

 User-agent: ClaudeBot
 Allow: /
+Disallow: /affiliates

 User-agent: Claude-User
 Allow: /
+Disallow: /affiliates

 User-agent: Claude-SearchBot
 Allow: /
+Disallow: /affiliates

 User-agent: PerplexityBot
 Allow: /
+Disallow: /affiliates

 User-agent: Google-Extended
 Allow: /
+Disallow: /affiliates

 Sitemap: https://comfy.org/sitemap-index.xml
--- a/apps/website/src/components/affiliates/AudienceSection.vue
+++ b/apps/website/src/components/affiliates/AudienceSection.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import SectionHeader from '../common/SectionHeader.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const audienceKeys: TranslationKey[] = [
+  'affiliate-landing.audience.item.0',
+  'affiliate-landing.audience.item.1',
+  'affiliate-landing.audience.item.2',
+  'affiliate-landing.audience.item.3',
+  'affiliate-landing.audience.item.4'
+]
+</script>
+
+<template>
+  <section
+    class="px-6 py-20 md:px-20 md:py-28"
+    data-testid="affiliate-audience"
+  >
+    <SectionHeader>
+      {{ t('affiliate-landing.audience.heading', locale) }}
+    </SectionHeader>
+    <ul class="mx-auto mt-12 flex max-w-3xl flex-col gap-4">
+      <li
+        v-for="key in audienceKeys"
+        :key="key"
+        class="text-primary-comfy-canvas flex items-start gap-4 text-base md:text-lg"
+      >
+        <span
+          class="bg-primary-comfy-yellow text-primary-comfy-ink mt-1 inline-flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-bold"
+          aria-hidden="true"
+        >
+          ✓
+        </span>
+        <span>{{ t(key, locale) }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/BrandAssetsSection.vue
+++ b/apps/website/src/components/affiliates/BrandAssetsSection.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import SectionHeader from '../common/SectionHeader.vue'
+import { brandAssets } from './brandAssets'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section
+    class="px-6 py-20 md:px-20 md:py-28"
+    data-testid="affiliate-brand-assets"
+  >
+    <SectionHeader>
+      {{ t('affiliate-landing.assets.heading', locale) }}
+      <template #subtitle>
+        <p
+          class="text-primary-comfy-canvas/70 mx-auto mt-4 max-w-2xl text-base"
+        >
+          {{ t('affiliate-landing.assets.subheading', locale) }}
+        </p>
+      </template>
+    </SectionHeader>
+    <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 brandAssets"
+        :key="asset.id"
+        class="bg-transparency-white-t4 border-primary-comfy-canvas/10 flex flex-col overflow-hidden rounded-4xl border"
+        :data-testid="`affiliate-asset-${asset.id}`"
+      >
+        <div
+          class="bg-primary-comfy-ink/40 flex aspect-video items-center justify-center overflow-hidden p-6"
+        >
+          <img
+            :src="asset.preview"
+            :alt="t(asset.titleKey, locale)"
+            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-primary-comfy-canvas text-base font-light">
+            {{ t(asset.titleKey, locale) }}
+          </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"
+          >
+            {{ t('affiliate-landing.assets.downloadLabel', locale) }}
+            <span aria-hidden="true">↓</span>
+          </a>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/FooterCtaSection.vue
+++ b/apps/website/src/components/affiliates/FooterCtaSection.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { externalLinks, getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const routes = getRoutes(locale)
+</script>
+
+<template>
+  <section
+    class="bg-secondary-mauve/30 border-primary-comfy-canvas/10 mt-12 border-t px-6 py-20 text-center md:py-28"
+    data-testid="affiliate-footer-cta"
+  >
+    <h2
+      class="text-primary-comfy-canvas text-3xl font-light md:text-4xl lg:text-5xl"
+    >
+      {{ t('affiliate-landing.footerCta.heading', locale) }}
+    </h2>
+    <div class="mt-8 flex flex-col items-center gap-4">
+      <BrandButton
+        :href="externalLinks.affiliateApplicationForm"
+        target="_blank"
+        rel="noopener noreferrer"
+        size="lg"
+        :aria-label="t('affiliate-landing.cta.applyAriaLabel', locale)"
+        data-testid="affiliate-footer-cta-button"
+        class="px-8 py-4 text-base"
+      >
+        {{ t('affiliate-landing.cta.apply', locale) }}
+      </BrandButton>
+      <a
+        :href="routes.affiliateTerms"
+        class="text-primary-comfy-canvas/70 text-sm underline-offset-4 hover:underline"
+      >
+        {{ t('affiliate-landing.footerCta.termsLink', locale) }}
+      </a>
+    </div>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/HeroSection.vue
+++ b/apps/website/src/components/affiliates/HeroSection.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { externalLinks } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const highlightKeys: TranslationKey[] = [
+  'affiliate-landing.hero.highlight.0',
+  'affiliate-landing.hero.highlight.1',
+  'affiliate-landing.hero.highlight.2',
+  'affiliate-landing.hero.highlight.3'
+]
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-stretch gap-10 px-6 pt-12 pb-16 lg:flex-row lg:items-center lg:gap-16 lg:px-20 lg:pt-20 lg:pb-24"
+    data-testid="affiliate-hero"
+  >
+    <div class="flex-1">
+      <h1
+        class="text-primary-comfy-canvas text-4xl/tight font-light md:text-5xl/tight lg:text-6xl/tight"
+      >
+        {{ t('affiliate-landing.hero.heading', locale) }}
+      </h1>
+      <p
+        class="text-primary-comfy-yellow mt-4 text-2xl font-light md:text-3xl lg:text-4xl"
+      >
+        {{ t('affiliate-landing.hero.subheading', locale) }}
+      </p>
+      <p class="text-primary-comfy-canvas/80 mt-6 max-w-xl text-base">
+        {{ t('affiliate-landing.hero.body', locale) }}
+      </p>
+      <ul class="mt-6 flex flex-col gap-3">
+        <li
+          v-for="key in highlightKeys"
+          :key="key"
+          class="text-primary-comfy-canvas flex items-start gap-3 text-base"
+        >
+          <span
+            class="bg-primary-comfy-yellow text-primary-comfy-ink mt-1 inline-flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-bold"
+            aria-hidden="true"
+          >
+            ✓
+          </span>
+          <span>{{ t(key, locale) }}</span>
+        </li>
+      </ul>
+      <div class="mt-8">
+        <BrandButton
+          :href="externalLinks.affiliateApplicationForm"
+          target="_blank"
+          rel="noopener noreferrer"
+          size="lg"
+          :aria-label="t('affiliate-landing.cta.applyAriaLabel', locale)"
+          data-testid="affiliate-hero-cta"
+          class="px-8 py-4 text-base"
+        >
+          {{ t('affiliate-landing.cta.apply', locale) }}
+        </BrandButton>
+      </div>
+    </div>
+
+    <div
+      class="flex flex-1 items-center justify-center"
+      data-testid="affiliate-hero-media"
+    >
+      <slot name="media">
+        <video
+          src="https://media.comfy.org/website/homepage/showcase/ui-overview.webm"
+          autoplay
+          loop
+          muted
+          playsinline
+          aria-hidden="true"
+          class="w-full max-w-xl rounded-4xl"
+        />
+      </slot>
+    </div>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/HowItWorksSection.vue
+++ b/apps/website/src/components/affiliates/HowItWorksSection.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import SectionHeader from '../common/SectionHeader.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const steps: { titleKey: TranslationKey; bodyKey: TranslationKey }[] = [
+  {
+    titleKey: 'affiliate-landing.how.step.0.title',
+    bodyKey: 'affiliate-landing.how.step.0.body'
+  },
+  {
+    titleKey: 'affiliate-landing.how.step.1.title',
+    bodyKey: 'affiliate-landing.how.step.1.body'
+  },
+  {
+    titleKey: 'affiliate-landing.how.step.2.title',
+    bodyKey: 'affiliate-landing.how.step.2.body'
+  }
+]
+</script>
+
+<template>
+  <section
+    class="px-6 py-20 md:px-20 md:py-28"
+    data-testid="affiliate-how-it-works"
+  >
+    <SectionHeader>
+      {{ t('affiliate-landing.how.heading', locale) }}
+    </SectionHeader>
+    <ol
+      class="mx-auto mt-12 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3 md:gap-8"
+    >
+      <li
+        v-for="(step, index) in steps"
+        :key="step.titleKey"
+        class="bg-transparency-white-t4 border-primary-comfy-canvas/10 flex flex-col gap-4 rounded-4xl border p-8"
+      >
+        <span
+          class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"
+        >
+          {{ index + 1 }}
+        </span>
+        <h3 class="text-primary-comfy-canvas text-2xl font-light">
+          {{ t(step.titleKey, locale) }}
+        </h3>
+        <p class="text-primary-comfy-canvas/70 text-sm">
+          {{ t(step.bodyKey, locale) }}
+        </p>
+      </li>
+    </ol>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/ProgramDetailsSection.vue
+++ b/apps/website/src/components/affiliates/ProgramDetailsSection.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import SectionHeader from '../common/SectionHeader.vue'
+import { programDetailRows } from './programDetails'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section
+    class="px-6 py-20 md:px-20 md:py-28"
+    data-testid="affiliate-program-details"
+  >
+    <SectionHeader>
+      {{ t('affiliate-landing.details.heading', locale) }}
+    </SectionHeader>
+    <div class="mx-auto mt-12 max-w-3xl">
+      <div class="hidden md:block">
+        <table
+          class="w-full border-collapse text-left"
+          data-testid="affiliate-program-details-table"
+        >
+          <thead>
+            <tr class="border-primary-comfy-canvas/20 border-b">
+              <th
+                scope="col"
+                class="text-primary-comfy-yellow py-4 pr-6 text-xs font-bold tracking-widest uppercase"
+              >
+                {{ t('affiliate-landing.details.headerLabel', locale) }}
+              </th>
+              <th
+                scope="col"
+                class="text-primary-comfy-yellow py-4 text-xs font-bold tracking-widest uppercase"
+              >
+                {{ t('affiliate-landing.details.headerValue', locale) }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in programDetailRows"
+              :key="row.labelKey"
+              class="border-primary-comfy-canvas/10 border-b"
+            >
+              <th
+                scope="row"
+                class="text-primary-comfy-canvas py-5 pr-6 text-base font-light"
+              >
+                {{ t(row.labelKey, locale) }}
+              </th>
+              <td class="text-primary-comfy-canvas/80 py-5 text-base">
+                {{ t(row.valueKey, locale) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <dl class="flex flex-col gap-6 md:hidden">
+        <div
+          v-for="row in programDetailRows"
+          :key="row.labelKey"
+          class="border-primary-comfy-canvas/10 flex flex-col gap-1 border-b pb-4"
+        >
+          <dt
+            class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+          >
+            {{ t(row.labelKey, locale) }}
+          </dt>
+          <dd class="text-primary-comfy-canvas text-base">
+            {{ t(row.valueKey, locale) }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/TrustBandSection.vue
+++ b/apps/website/src/components/affiliates/TrustBandSection.vue
@@ -0,0 +1,20 @@
+<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="border-primary-comfy-canvas/10 border-y px-6 py-10 text-center md:py-12"
+    data-testid="affiliate-trust-band"
+  >
+    <p
+      class="text-primary-comfy-canvas text-sm tracking-wider uppercase md:text-base"
+    >
+      {{ t('affiliate-landing.trust.label', locale) }}
+    </p>
+  </section>
+</template>
--- a/apps/website/src/components/affiliates/affiliateFaqs.ts
+++ b/apps/website/src/components/affiliates/affiliateFaqs.ts
@@ -0,0 +1,6 @@
+import type { TranslationKey } from '../../i18n/translations'
+
+export const AFFILIATE_FAQ_PREFIX = 'affiliate-landing.faq'
+export const AFFILIATE_FAQ_HEADING_KEY: TranslationKey =
+  'affiliate-landing.faq.heading'
+export const AFFILIATE_FAQ_COUNT = 8
--- a/apps/website/src/components/affiliates/affiliateLanding.test.ts
+++ b/apps/website/src/components/affiliates/affiliateLanding.test.ts
@@ -0,0 +1,154 @@
+import { describe, expect, it } from 'vitest'
+
+import { hasKey, t, translationKeys } from '../../i18n/translations'
+import {
+  AFFILIATE_FAQ_COUNT,
+  AFFILIATE_FAQ_HEADING_KEY,
+  AFFILIATE_FAQ_PREFIX
+} from './affiliateFaqs'
+import { brandAssets } from './brandAssets'
+
+const PREFIX = 'affiliate-landing'
+
+const EXPECTED_SECTION_PREFIXES = [
+  'page',
+  'cta',
+  'hero',
+  'trust',
+  'how',
+  'audience',
+  'details',
+  'assets',
+  'faq',
+  'footerCta'
+] as const
+
+const HERO_HIGHLIGHT_COUNT = 4
+const HOW_STEP_COUNT = 3
+const AUDIENCE_ITEM_COUNT = 5
+const DETAILS_ROW_COUNT = 6
+
+const INTERNAL_KEY_PATTERNS = [
+  /open-questions/,
+  /todo/i,
+  /draft/i,
+  /placeholder/i,
+  /internal/i
+]
+
+function affiliateKeys(): string[] {
+  return translationKeys.filter((k) => k.startsWith(`${PREFIX}.`))
+}
+
+describe('affiliate landing i18n', () => {
+  it('exposes the canonical top-level section prefixes', () => {
+    const keys = affiliateKeys()
+    for (const section of EXPECTED_SECTION_PREFIXES) {
+      const hit = keys.some((k) => k.startsWith(`${PREFIX}.${section}.`))
+      expect(hit, `missing section: ${section}`).toBe(true)
+    }
+  })
+
+  it('orders sections as the page renders them', () => {
+    const keys = affiliateKeys()
+    const seenSections: string[] = []
+    for (const key of keys) {
+      const section = key.split('.')[1]
+      if (!section) continue
+      if (!seenSections.includes(section)) seenSections.push(section)
+    }
+    const orderedExpected = EXPECTED_SECTION_PREFIXES.filter((s) =>
+      seenSections.includes(s)
+    )
+    const orderedActual = seenSections.filter((s) =>
+      (EXPECTED_SECTION_PREFIXES as readonly string[]).includes(s)
+    )
+    expect(orderedActual).toEqual([...orderedExpected])
+  })
+
+  it('exposes hero, page, and cta keys editors will need', () => {
+    expect(hasKey(`${PREFIX}.page.title`)).toBe(true)
+    expect(hasKey(`${PREFIX}.page.description`)).toBe(true)
+    expect(hasKey(`${PREFIX}.cta.apply`)).toBe(true)
+    expect(hasKey(`${PREFIX}.cta.applyAriaLabel`)).toBe(true)
+    expect(hasKey(`${PREFIX}.hero.heading`)).toBe(true)
+    expect(hasKey(`${PREFIX}.hero.subheading`)).toBe(true)
+    expect(hasKey(`${PREFIX}.hero.body`)).toBe(true)
+    for (let i = 0; i < HERO_HIGHLIGHT_COUNT; i++) {
+      expect(hasKey(`${PREFIX}.hero.highlight.${i}`)).toBe(true)
+    }
+  })
+
+  it('exposes the trust band, how-it-works, and audience copy', () => {
+    expect(hasKey(`${PREFIX}.trust.label`)).toBe(true)
+    expect(hasKey(`${PREFIX}.how.heading`)).toBe(true)
+    for (let i = 0; i < HOW_STEP_COUNT; i++) {
+      expect(hasKey(`${PREFIX}.how.step.${i}.title`)).toBe(true)
+      expect(hasKey(`${PREFIX}.how.step.${i}.body`)).toBe(true)
+    }
+    expect(hasKey(`${PREFIX}.audience.heading`)).toBe(true)
+    for (let i = 0; i < AUDIENCE_ITEM_COUNT; i++) {
+      expect(hasKey(`${PREFIX}.audience.item.${i}`)).toBe(true)
+    }
+  })
+
+  it('exposes the program details rows', () => {
+    expect(hasKey(`${PREFIX}.details.heading`)).toBe(true)
+    expect(hasKey(`${PREFIX}.details.headerLabel`)).toBe(true)
+    expect(hasKey(`${PREFIX}.details.headerValue`)).toBe(true)
+    for (let i = 0; i < DETAILS_ROW_COUNT; i++) {
+      expect(hasKey(`${PREFIX}.details.row.${i}.label`)).toBe(true)
+      expect(hasKey(`${PREFIX}.details.row.${i}.value`)).toBe(true)
+    }
+  })
+
+  it('matches every brand-asset tile to a translation key', () => {
+    expect(hasKey(`${PREFIX}.assets.heading`)).toBe(true)
+    expect(hasKey(`${PREFIX}.assets.subheading`)).toBe(true)
+    expect(hasKey(`${PREFIX}.assets.downloadLabel`)).toBe(true)
+    for (const asset of brandAssets) {
+      expect(hasKey(asset.titleKey)).toBe(true)
+    }
+  })
+
+  it('exposes every 1-indexed faq.<n>.q/a pair from 1 to AFFILIATE_FAQ_COUNT (FAQSection contract)', () => {
+    expect(AFFILIATE_FAQ_PREFIX).toBe(`${PREFIX}.faq`)
+    expect(hasKey(AFFILIATE_FAQ_HEADING_KEY)).toBe(true)
+    for (let n = 1; n <= AFFILIATE_FAQ_COUNT; n++) {
+      expect(hasKey(`${AFFILIATE_FAQ_PREFIX}.${n}.q`)).toBe(true)
+      expect(hasKey(`${AFFILIATE_FAQ_PREFIX}.${n}.a`)).toBe(true)
+    }
+  })
+
+  it('keeps AFFILIATE_FAQ_COUNT in sync with the actual faq.<n>.q keys in translations', () => {
+    const faqQuestionKeyPattern = new RegExp(
+      `^${AFFILIATE_FAQ_PREFIX}\\.(\\d+)\\.q$`
+    )
+    const indices = translationKeys
+      .map((k) => k.match(faqQuestionKeyPattern)?.[1])
+      .filter((m): m is string => m !== undefined)
+      .map((s) => parseInt(s, 10))
+      .sort((a, b) => a - b)
+    expect(indices).toEqual(
+      Array.from({ length: AFFILIATE_FAQ_COUNT }, (_, i) => i + 1)
+    )
+  })
+
+  it('exposes the footer cta copy', () => {
+    expect(hasKey(`${PREFIX}.footerCta.heading`)).toBe(true)
+    expect(hasKey(`${PREFIX}.footerCta.termsLink`)).toBe(true)
+  })
+
+  it('returns non-empty english copy for every affiliate-landing key', () => {
+    for (const key of affiliateKeys()) {
+      expect(t(key as never, 'en').trim().length).toBeGreaterThan(0)
+    }
+  })
+
+  it('does not leak internal-only keys (drafts, todos, open questions)', () => {
+    const leaks = affiliateKeys().filter((k) =>
+      INTERNAL_KEY_PATTERNS.some((re) => re.test(k))
+    )
+    expect(leaks).toEqual([])
+  })
+})
--- a/apps/website/src/components/affiliates/brandAssets.ts
+++ b/apps/website/src/components/affiliates/brandAssets.ts
@@ -0,0 +1,59 @@
+import type { TranslationKey } from '../../i18n/translations'
+
+interface BrandAsset {
+  id: string
+  titleKey: TranslationKey
+  download: string
+  preview: string
+}
+
+export const brandAssets: BrandAsset[] = [
+  {
+    id: 'logo-horizontal',
+    titleKey: 'affiliate-landing.assets.tile.logo-horizontal.title',
+    download: '/icons/logo.svg',
+    preview: '/icons/logo.svg'
+  },
+  {
+    id: 'logomark',
+    titleKey: 'affiliate-landing.assets.tile.logomark.title',
+    download: '/icons/logomark.svg',
+    preview: '/icons/logomark.svg'
+  },
+  {
+    id: 'comfy-full-logo-yellow',
+    titleKey: 'affiliate-landing.assets.tile.comfy-full-logo-yellow.title',
+    download: '/affiliates/brand/comfy-full-logo-yellow.svg',
+    preview: '/affiliates/brand/comfy-full-logo-yellow.svg'
+  },
+  {
+    id: 'comfy-full-logo-ink',
+    titleKey: 'affiliate-landing.assets.tile.comfy-full-logo-ink.title',
+    download: '/affiliates/brand/comfy-full-logo-ink.svg',
+    preview: '/affiliates/brand/comfy-full-logo-ink.svg'
+  },
+  {
+    id: 'amplified-logo-mark',
+    titleKey: 'affiliate-landing.assets.tile.amplified-logo-mark.title',
+    download: '/affiliates/brand/comfy-amplified-logo-mark.svg',
+    preview: '/affiliates/brand/comfy-amplified-logo-mark.svg'
+  },
+  {
+    id: 'dimensional-logo-mark',
+    titleKey: 'affiliate-landing.assets.tile.dimensional-logo-mark.title',
+    download: '/affiliates/brand/comfy-dimensional-logo-mark.svg',
+    preview: '/affiliates/brand/comfy-dimensional-logo-mark.svg'
+  },
+  {
+    id: 'color-combo-yellow',
+    titleKey: 'affiliate-landing.assets.tile.color-combo-yellow.title',
+    download: '/affiliates/brand/comfy-color-combo-yellow.svg',
+    preview: '/affiliates/brand/comfy-color-combo-yellow.svg'
+  },
+  {
+    id: 'color-combo-ink',
+    titleKey: 'affiliate-landing.assets.tile.color-combo-ink.title',
+    download: '/affiliates/brand/comfy-color-combo-ink.svg',
+    preview: '/affiliates/brand/comfy-color-combo-ink.svg'
+  }
+]
--- a/apps/website/src/components/affiliates/programDetails.ts
+++ b/apps/website/src/components/affiliates/programDetails.ts
@@ -0,0 +1,33 @@
+import type { TranslationKey } from '../../i18n/translations'
+
+interface ProgramDetailRow {
+  labelKey: TranslationKey
+  valueKey: TranslationKey
+}
+
+export const programDetailRows: ProgramDetailRow[] = [
+  {
+    labelKey: 'affiliate-landing.details.row.0.label',
+    valueKey: 'affiliate-landing.details.row.0.value'
+  },
+  {
+    labelKey: 'affiliate-landing.details.row.1.label',
+    valueKey: 'affiliate-landing.details.row.1.value'
+  },
+  {
+    labelKey: 'affiliate-landing.details.row.2.label',
+    valueKey: 'affiliate-landing.details.row.2.value'
+  },
+  {
+    labelKey: 'affiliate-landing.details.row.3.label',
+    valueKey: 'affiliate-landing.details.row.3.value'
+  },
+  {
+    labelKey: 'affiliate-landing.details.row.4.label',
+    valueKey: 'affiliate-landing.details.row.4.value'
+  },
+  {
+    labelKey: 'affiliate-landing.details.row.5.label',
+    valueKey: 'affiliate-landing.details.row.5.value'
+  }
+]
--- a/apps/website/src/components/common/BrandButton.vue
+++ b/apps/website/src/components/common/BrandButton.vue
@@ -9,12 +9,14 @@ import { brandButtonVariants } from './brandButton.variants'
 const {
  href,
  target,
+  rel,
  variant,
  size,
  class: customClass = ''
 } = defineProps<{
  href?: string
  target?: string
+  rel?: string
  variant?: BrandButtonVariants['variant']
  size?: BrandButtonVariants['size']
  class?: HTMLAttributes['class']
@@ -26,6 +28,7 @@ const {
    :is="href ? 'a' : 'button'"
    :href
    :target
+    :rel
    :class="cn(brandButtonVariants({ variant, size }), customClass)"
  >
    <span class="ppformula-text-center">
--- a/apps/website/src/config/routes.ts
+++ b/apps/website/src/config/routes.ts
@@ -14,6 +14,8 @@ const baseRoutes = {
  demos: '/demos',
  termsOfService: '/terms-of-service',
  privacyPolicy: '/privacy-policy',
+  affiliates: '/affiliates',
+  affiliateTerms: '/affiliates/terms',
  contact: '/contact'
 } as const

@@ -28,6 +30,7 @@ export function getRoutes(locale: Locale = 'en'): 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',
--- a/apps/website/src/i18n/translations.ts
+++ b/apps/website/src/i18n/translations.ts
@@ -3697,6 +3697,315 @@ const translations = {
  'payment.failed.secondaryCta': {
    en: 'READ SUBSCRIPTION DOCS',
    'zh-CN': '查看订阅文档'
+  },
+
+  // Affiliate landing page (/affiliates)
+  // English-only copy; zh-CN values mirror en until a localized version lands.
+  'affiliate-landing.page.title': {
+    en: 'Comfy.org Affiliate Program — Become a Partner',
+    'zh-CN': 'Comfy.org Affiliate Program — Become a Partner'
+  },
+  'affiliate-landing.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':
+      'Earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer. Apply to become a Comfy Partner.'
+  },
+  'affiliate-landing.cta.apply': {
+    en: 'Apply Now',
+    'zh-CN': 'Apply Now'
+  },
+  'affiliate-landing.cta.applyAriaLabel': {
+    en: 'Apply Now (opens in new tab)',
+    'zh-CN': 'Apply Now (opens in new tab)'
+  },
+
+  // Hero
+  'affiliate-landing.hero.heading': {
+    en: 'Become a Comfy Partner',
+    'zh-CN': 'Become a Comfy Partner'
+  },
+  'affiliate-landing.hero.subheading': {
+    en: 'Earn 30% Commission for 3 Months.',
+    'zh-CN': 'Earn 30% Commission for 3 Months.'
+  },
+  'affiliate-landing.hero.body': {
+    en: 'Join the Comfy.org Affiliate Program and earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer:',
+    'zh-CN':
+      'Join the Comfy.org Affiliate Program and earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer:'
+  },
+  'affiliate-landing.hero.highlight.0': {
+    en: '30% recurring commission for 3 months',
+    'zh-CN': '30% recurring commission for 3 months'
+  },
+  'affiliate-landing.hero.highlight.1': {
+    en: '60-day cookie window',
+    'zh-CN': '60-day cookie window'
+  },
+  'affiliate-landing.hero.highlight.2': {
+    en: '$100 minimum payout',
+    'zh-CN': '$100 minimum payout'
+  },
+  'affiliate-landing.hero.highlight.3': {
+    en: 'Monthly payouts',
+    'zh-CN': 'Monthly payouts'
+  },
+
+  // Trust band
+  'affiliate-landing.trust.label': {
+    en: 'Trusted by 2M+ creators worldwide',
+    'zh-CN': 'Trusted by 2M+ creators worldwide'
+  },
+
+  // How it works
+  'affiliate-landing.how.heading': {
+    en: 'How it works',
+    'zh-CN': 'How it works'
+  },
+  'affiliate-landing.how.step.0.title': {
+    en: 'Apply.',
+    'zh-CN': 'Apply.'
+  },
+  'affiliate-landing.how.step.0.body': {
+    en: 'Submit a quick form. Most applicants approved same day.',
+    'zh-CN': 'Submit a quick form. Most applicants approved same day.'
+  },
+  'affiliate-landing.how.step.1.title': {
+    en: 'Share.',
+    'zh-CN': 'Share.'
+  },
+  'affiliate-landing.how.step.1.body': {
+    en: 'Get your unique tracking link. Share via content, social, email, however you reach your audience.',
+    'zh-CN':
+      'Get your unique tracking link. Share via content, social, email, however you reach your audience.'
+  },
+  'affiliate-landing.how.step.2.title': {
+    en: 'Earn.',
+    'zh-CN': 'Earn.'
+  },
+  'affiliate-landing.how.step.2.body': {
+    en: '30% recurring commission for 3 months on every Comfy Cloud subscriber you refer. Tracked in real-time. Paid monthly.',
+    'zh-CN':
+      '30% recurring commission for 3 months on every Comfy Cloud subscriber you refer. Tracked in real-time. Paid monthly.'
+  },
+
+  // Who we're looking for
+  'affiliate-landing.audience.heading': {
+    en: "Who we're looking for",
+    'zh-CN': "Who we're looking for"
+  },
+  'affiliate-landing.audience.item.0': {
+    en: 'ComfyUI tutorial creators and workflow builders',
+    'zh-CN': 'ComfyUI tutorial creators and workflow builders'
+  },
+  'affiliate-landing.audience.item.1': {
+    en: 'AI tool reviewers on YouTube, TikTok, blogs',
+    'zh-CN': 'AI tool reviewers on YouTube, TikTok, blogs'
+  },
+  'affiliate-landing.audience.item.2': {
+    en: 'Tech bloggers covering AI creative tools',
+    'zh-CN': 'Tech bloggers covering AI creative tools'
+  },
+  'affiliate-landing.audience.item.3': {
+    en: 'Newsletter operators in the AI/creative space',
+    'zh-CN': 'Newsletter operators in the AI/creative space'
+  },
+  'affiliate-landing.audience.item.4': {
+    en: 'Anyone with an audience interested in AI image, video, or 3D generation',
+    'zh-CN':
+      'Anyone with an audience interested in AI image, video, or 3D generation'
+  },
+
+  // Program details
+  'affiliate-landing.details.heading': {
+    en: 'Program details',
+    'zh-CN': 'Program details'
+  },
+  'affiliate-landing.details.headerLabel': {
+    en: 'Detail',
+    'zh-CN': 'Detail'
+  },
+  'affiliate-landing.details.headerValue': {
+    en: 'Value',
+    'zh-CN': 'Value'
+  },
+  'affiliate-landing.details.row.0.label': {
+    en: 'Commission rate',
+    'zh-CN': 'Commission rate'
+  },
+  'affiliate-landing.details.row.0.value': {
+    en: '30% recurring',
+    'zh-CN': '30% recurring'
+  },
+  'affiliate-landing.details.row.1.label': {
+    en: 'Commission duration',
+    'zh-CN': 'Commission duration'
+  },
+  'affiliate-landing.details.row.1.value': {
+    en: '3 months',
+    'zh-CN': '3 months'
+  },
+  'affiliate-landing.details.row.2.label': {
+    en: 'Cookie window',
+    'zh-CN': 'Cookie window'
+  },
+  'affiliate-landing.details.row.2.value': {
+    en: '60 days',
+    'zh-CN': '60 days'
+  },
+  'affiliate-landing.details.row.3.label': {
+    en: 'Eligible products',
+    'zh-CN': 'Eligible products'
+  },
+  'affiliate-landing.details.row.3.value': {
+    en: 'Comfy Cloud paid subscription plans',
+    'zh-CN': 'Comfy Cloud paid subscription plans'
+  },
+  'affiliate-landing.details.row.4.label': {
+    en: 'Payouts',
+    'zh-CN': 'Payouts'
+  },
+  'affiliate-landing.details.row.4.value': {
+    en: 'Monthly, within first 10 business days',
+    'zh-CN': 'Monthly, within first 10 business days'
+  },
+  'affiliate-landing.details.row.5.label': {
+    en: 'Minimum payout',
+    'zh-CN': 'Minimum payout'
+  },
+  'affiliate-landing.details.row.5.value': {
+    en: '$100',
+    'zh-CN': '$100'
+  },
+
+  // Brand assets
+  'affiliate-landing.assets.heading': {
+    en: 'Brand assets',
+    'zh-CN': 'Brand assets'
+  },
+  'affiliate-landing.assets.subheading': {
+    en: 'Approved Comfy logos for your content. Banners, screenshots, and talking points are in your affiliate dashboard after approval.',
+    'zh-CN':
+      'Approved Comfy logos for your content. Banners, screenshots, and talking points are in your affiliate dashboard after approval.'
+  },
+  'affiliate-landing.assets.downloadLabel': {
+    en: 'Download',
+    'zh-CN': 'Download'
+  },
+  'affiliate-landing.assets.tile.logo-horizontal.title': {
+    en: 'Comfy logo (horizontal)',
+    'zh-CN': 'Comfy logo (horizontal)'
+  },
+  'affiliate-landing.assets.tile.logomark.title': {
+    en: 'Comfy logomark',
+    'zh-CN': 'Comfy logomark'
+  },
+  'affiliate-landing.assets.tile.comfy-full-logo-yellow.title': {
+    en: 'Comfy full logo (yellow)',
+    'zh-CN': 'Comfy full logo (yellow)'
+  },
+  'affiliate-landing.assets.tile.comfy-full-logo-ink.title': {
+    en: 'Comfy full logo (ink)',
+    'zh-CN': 'Comfy full logo (ink)'
+  },
+  'affiliate-landing.assets.tile.amplified-logo-mark.title': {
+    en: 'Amplified logo mark',
+    'zh-CN': 'Amplified logo mark'
+  },
+  'affiliate-landing.assets.tile.dimensional-logo-mark.title': {
+    en: 'Dimensional logo mark',
+    'zh-CN': 'Dimensional logo mark'
+  },
+  'affiliate-landing.assets.tile.color-combo-yellow.title': {
+    en: 'Color combo (yellow)',
+    'zh-CN': 'Color combo (yellow)'
+  },
+  'affiliate-landing.assets.tile.color-combo-ink.title': {
+    en: 'Color combo (ink)',
+    'zh-CN': 'Color combo (ink)'
+  },
+
+  // FAQ — keys follow the FAQSection contract: <prefix>.<n>.q / <prefix>.<n>.a, 1-indexed
+  'affiliate-landing.faq.heading': {
+    en: 'Questions',
+    'zh-CN': 'Questions'
+  },
+  'affiliate-landing.faq.1.q': {
+    en: 'How do I track my referrals?',
+    'zh-CN': 'How do I track my referrals?'
+  },
+  'affiliate-landing.faq.1.a': {
+    en: 'Real-time dashboard via our partner portal.',
+    'zh-CN': 'Real-time dashboard via our partner portal.'
+  },
+  'affiliate-landing.faq.2.q': {
+    en: 'What plans qualify?',
+    'zh-CN': 'What plans qualify?'
+  },
+  'affiliate-landing.faq.2.a': {
+    en: 'All Comfy Cloud paid subscription plans (Creator, Pro, Teams).',
+    'zh-CN': 'All Comfy Cloud paid subscription plans (Creator, Pro, Teams).'
+  },
+  'affiliate-landing.faq.3.q': {
+    en: 'How long does approval take?',
+    'zh-CN': 'How long does approval take?'
+  },
+  'affiliate-landing.faq.3.a': {
+    en: 'Most applications approved within 24 hours.',
+    'zh-CN': 'Most applications approved within 24 hours.'
+  },
+  'affiliate-landing.faq.4.q': {
+    en: 'When do I get paid?',
+    'zh-CN': 'When do I get paid?'
+  },
+  'affiliate-landing.faq.4.a': {
+    en: 'Monthly, within the first 10 business days. Minimum balance $100. Paid via Stripe Express or PayPal.',
+    'zh-CN':
+      'Monthly, within the first 10 business days. Minimum balance $100. Paid via Stripe Express or PayPal.'
+  },
+  'affiliate-landing.faq.5.q': {
+    en: 'What happens if my referral upgrades or downgrades?',
+    'zh-CN': 'What happens if my referral upgrades or downgrades?'
+  },
+  'affiliate-landing.faq.5.a': {
+    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':
+      '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.'
+  },
+  'affiliate-landing.faq.6.q': {
+    en: 'Can I use coupon codes?',
+    'zh-CN': 'Can I use coupon codes?'
+  },
+  'affiliate-landing.faq.6.a': {
+    en: 'Yes. We support both tracking links and unique coupon codes.',
+    'zh-CN': 'Yes. We support both tracking links and unique coupon codes.'
+  },
+  'affiliate-landing.faq.7.q': {
+    en: 'What if my referral uses an ad blocker?',
+    'zh-CN': 'What if my referral uses an ad blocker?'
+  },
+  'affiliate-landing.faq.7.a': {
+    en: 'We use server-side tracking, so conversions are tracked regardless.',
+    'zh-CN':
+      'We use server-side tracking, so conversions are tracked regardless.'
+  },
+  'affiliate-landing.faq.8.q': {
+    en: 'What assets do you provide?',
+    'zh-CN': 'What assets do you provide?'
+  },
+  'affiliate-landing.faq.8.a': {
+    en: 'Logos and banners on this page, plus screenshots and talking points in your affiliate dashboard after approval.',
+    'zh-CN':
+      'Logos and banners on this page, plus screenshots and talking points in your affiliate dashboard after approval.'
+  },
+
+  // Footer CTA
+  'affiliate-landing.footerCta.heading': {
+    en: 'Ready to start earning?',
+    'zh-CN': 'Ready to start earning?'
+  },
+  'affiliate-landing.footerCta.termsLink': {
+    en: 'Read the affiliate program terms',
+    'zh-CN': 'Read the affiliate program terms'
  }
 } as const satisfies Record<string, Record<Locale, string>>

--- a/apps/website/src/pages/affiliates/index.astro
+++ b/apps/website/src/pages/affiliates/index.astro
@@ -0,0 +1,66 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import AudienceSection from '../../components/affiliates/AudienceSection.vue'
+import BrandAssetsSection from '../../components/affiliates/BrandAssetsSection.vue'
+import FooterCtaSection from '../../components/affiliates/FooterCtaSection.vue'
+import HeroSection from '../../components/affiliates/HeroSection.vue'
+import HowItWorksSection from '../../components/affiliates/HowItWorksSection.vue'
+import ProgramDetailsSection from '../../components/affiliates/ProgramDetailsSection.vue'
+import TrustBandSection from '../../components/affiliates/TrustBandSection.vue'
+import FAQSection from '../../components/common/FAQSection.vue'
+import {
+  AFFILIATE_FAQ_COUNT,
+  AFFILIATE_FAQ_HEADING_KEY,
+  AFFILIATE_FAQ_PREFIX
+} from '../../components/affiliates/affiliateFaqs'
+import type { Locale, TranslationKey } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const locale: Locale =
+  Astro.currentLocale === 'zh-CN' ? 'zh-CN' : 'en'
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: Array.from({ length: AFFILIATE_FAQ_COUNT }, (_, i) => {
+    const n = i + 1
+    return {
+      '@type': 'Question',
+      name: t(`${AFFILIATE_FAQ_PREFIX}.${n}.q` as TranslationKey, locale),
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: t(`${AFFILIATE_FAQ_PREFIX}.${n}.a` as TranslationKey, locale)
+      }
+    }
+  })
+}
+---
+
+<BaseLayout
+  title={t('affiliate-landing.page.title', locale)}
+  description={t('affiliate-landing.page.description', locale)}
+  noindex
+>
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
+
+  <HeroSection locale={locale} client:load />
+  <TrustBandSection locale={locale} />
+  <HowItWorksSection locale={locale} />
+  <AudienceSection locale={locale} />
+  <ProgramDetailsSection locale={locale} />
+  <BrandAssetsSection locale={locale} />
+  <FAQSection
+    locale={locale}
+    headingKey={AFFILIATE_FAQ_HEADING_KEY}
+    faqPrefix={AFFILIATE_FAQ_PREFIX}
+    faqCount={AFFILIATE_FAQ_COUNT}
+    client:load
+  />
+  <FooterCtaSection locale={locale} client:load />
+</BaseLayout>
Author	SHA1	Message	Date
Glary-Bot	26b9f2a143	use ui-overview.webm for affiliate hero, not node-workflow node-workflow.webm reads as a single zoomed-in still until the loop completes (caught it mid-frame on the live preview, looked like a green-screen game asset). ui-overview.webm shows the same ControlNet workflow pipeline but framed as a multi-panel composition the entire loop, so every frame reads as 'this is ComfyUI in action' instead of 'this is a placeholder'. Same provenance (homepage Product Showcase, Last-Modified Apr 23, 2026), 504 KiB, post-brand-refresh.	2026-05-06 08:29:52 +00:00
Glary-Bot	c9c7583b58	swap affiliate hero video to post-refresh node-workflow loop The hero-logo-seq.webm fallback was reading as an unfinished placeholder mid-loop (the morph between paper-shape frames doesn't read as the Comfy logomark until late in the cycle). Swap to showcase/node-workflow.webm: - Last-Modified Apr 23, 2026 - three days newer than hero-logo-seq, i.e. clearly post-brand-refresh. - 175 KiB - 4x lighter than hero-logo-seq, faster first paint. - Visually a Comfy node-graph animation - thematically the strongest frame for an affiliate landing whose target audience is 'ComfyUI tutorial creators and workflow builders' (per the audience copy). - Already in production on the homepage Product Showcase section, so the brand team has signed off on this asset and the affiliate page now visually echoes a recognizably-Comfy section. Add rounded-4xl on the video to match the surrounding card aesthetic (BrandAssetsSection tiles and other landing-page hero media use the same radius).	2026-05-06 08:25:59 +00:00
Glary-Bot	6f7c8c71b1	tasteful brand-assets grid; swap hero placeholder for live brand video Brand-assets grid was 9 tiles: 8 logo SVGs + 1 text-only PP Formula font ZIP that orphaned every breakpoint (4+4+1 desktop, 2+2+2+2+1 sm). The text-only tile broke the visual rhythm and the partner typeface is better positioned as a dashboard download anyway. Drop it: 8 even tiles across every breakpoint - 4x2 desktop, 2x4 sm, 1x8 mobile. Hero media slot was a hand-rolled inline node-graph SVG that read as a placeholder. Swap it for the canonical Comfy logo animation (media.comfy.org/website/homepage/hero-logo-seq.webm, 744 KiB), mirroring the homepage hero attribute-for-attribute (autoplay, loop, muted, playsinline) so the affiliate page feels like the homepage's set-piece sibling rather than an unfinished landing. Also drop the dead BrandAsset.downloadFilename field, the orphan pp-formula-font.title i18n key, and the empty public/affiliates/fonts directory. Update the assets section subhead so the copy matches what the grid actually shows.	2026-05-06 08:21:12 +00:00
Glary-Bot	b83bb312ff	drop banner placeholders, vendor PP Formula font ZIP The previous brand-assets grid trailed four 'Coming soon' banner tiles (728x90, 300x250, 160x600, 1200x628) that no banner files actually exist for - not in the repo, not on the Brand Guidelines Notion page, not on media.comfy.org. Remove them so the grid only shows real downloads and stops looking unfinished. Add the PP Formula font ZIP from the Brand Guidelines page as a real 9th tile under apps/website/public/affiliates/fonts/PP_Formula.zip (3.3 MB, same-origin so the download attribute works). The brand guidelines PDF (46 MB) is intentionally not vendored - that lives in the affiliate dashboard or via the Notion page link. - BrandAsset.comingSoon and the 'Coming soon' v-else branch deleted; every tile now has a real download URL. - BrandAsset.download is now required (was optional). - New optional BrandAsset.downloadFilename overrides the derived-from-URL filename for cases like the font ZIP where the asset id and the file basename don't match. - The download anchor derives the suggested filename from the URL's basename instead of hardcoding '.svg', so non-SVG assets get the right extension when saved. - Subheading updated to match what's actually shown ('Logos and the brand typeface...') instead of promising banners. - Drop dead i18n keys: comingSoonLabel, banner-leaderboard.title, banner-medium-rectangle.title, banner-skyscraper.title, banner-social.title. - affiliateLanding.test.ts: drop the comingSoonLabel hasKey assertion.	2026-05-06 07:59:41 +00:00
Glary-Bot	6813c27c51	vendor 6 brand-kit SVGs from Brand Guidelines into /affiliates The previous brand-assets grid only surfaced /icons/logo.svg and /icons/logomark.svg, even though the Brand Guidelines - 2026 Notion page lists six additional approved logo variants. Vendor those SVGs into apps/website/public/affiliates/brand/ so the download attribute works (cross-origin CDN downloads silently navigate), wire them into brandAssets.ts, and add the matching i18n title keys. Newly downloadable variants: - comfy-full-logo-yellow.svg (204x57 horizontal wordmark, yellow) - comfy-full-logo-ink.svg (204x57 horizontal wordmark, ink) - comfy-amplified-logo-mark.svg (147x159 amplified mark) - comfy-dimensional-logo-mark.svg (148x159 dimensional mark) - comfy-color-combo-yellow.svg (142x142 squared color-combo, yellow) - comfy-color-combo-ink.svg (142x142 squared color-combo, ink) Banners and the raster (PNG) pack are still 'Coming soon' — those ship in a follow-up that mirrors the same vendor-into-public pattern.	2026-05-06 07:44:55 +00:00
Glary-Bot	bb0d33446b	drive program-details e2e from a shared row source Mirrors the affiliateFaqs pattern: the program-details row list moves into a sibling programDetails.ts module, ProgramDetailsSection.vue imports it instead of inlining the array, and the Playwright spec imports the same array to derive - the table-row count (rows + 1 header) instead of hardcoded 7 - the first row's label/value text via t(), instead of hardcoded 'Commission rate' / '30% recurring' so adding or renaming a program-details row only needs a change in one place.	2026-05-06 02:32:39 +00:00
Glary-Bot	687f34fbdc	harden affiliates e2e against popup races and copy churn - waitForEvent('page') resolves when the new tab is created, not when it has navigated, so popup.url() could return 'about:blank' before the forms.gle redirect chain settles. Add popup.waitForLoadState('domcontentloaded') so the URL assertion always reads the post-redirect URL. - The FAQ toggle test was hardcoding the question and answer copy. If src/i18n/translations.ts changes the copy, the locator silently stops matching. Resolve the first FAQ's question/answer from the same translation keys the page renders ('affiliate-landing.faq.1.q' and '.a'), so the test tracks the real source of truth.	2026-05-06 02:22:10 +00:00
Glary-Bot	9c89da8b76	drive FAQPage e2e count from AFFILIATE_FAQ_COUNT The Playwright assertion on the FAQPage JSON-LD entry count was hard-coded to 8. If the FAQ count ever changes (translations and the page auto-update), this test would silently keep passing the wrong assertion until someone noticed. Import AFFILIATE_FAQ_COUNT from affiliateFaqs.ts so the e2e tracks the same source of truth as the unit test and the page itself.	2026-05-06 02:13:51 +00:00
Glary-Bot	0c0c0b588e	address coderabbit review feedback - Add data-testid="affiliate-hero" on the Hero section root for E2E consistency with every other affiliate section. - Tighten the section-render-order e2e: assert that bounding-box y positions match top-to-bottom order, not just visibility, so the test name actually matches behavior. Hero is now part of the ordered list as well. - Move href/target/rel destination assertions out of the @smoke describe and into the desktop interactions describe — keeps smoke focused on render/visibility per repo convention. - Drop the cn() wrapper around a single static class string in BrandAssetsSection.vue — was unnecessary dynamic binding. - Add a bidirectional unit test that scans translation keys for 'affiliate-landing.faq.<n>.q' and asserts the indices exactly equal [1..AFFILIATE_FAQ_COUNT], catching both orphan keys and a stale count. - Encode the 1-indexed FAQ contract in the test title rather than an inline comment.	2026-05-06 02:03:52 +00:00
Glary-Bot	7bd99ee98c	feat(website): draft Affiliate Program landing page at /affiliates Conversion-oriented English landing page that drives applications to the Comfy Affiliate Program Google Form. Page is shipped behind noindex while copy and assets are still being finalized; a follow-up PR will flip it indexable and add the zh-CN locale. Sections (in order): hero, trust band, how-it-works, who-we're-looking-for, program details, brand assets, FAQ, footer CTA. Mirrors the type scale, brand tokens, and noindex/sitemap/robots conventions used by the /affiliates/terms PR (#11954) so the two pages feel like a set. - Copy lives under `affiliate-landing.*` in src/i18n/translations.ts (en only; zh-CN values mirror en until a localized version lands). - Reuses common/FAQSection, common/BrandButton, common/SectionHeader, common/SectionLabel verbatim. Sections without a clean primitive fit (split hero, trust band, 3-step flow, audience list, details table, brand-asset grid, footer CTA) render inline with brand tokens rather than forking new shared components. - Brand-assets grid wired via a config object in components/affiliates/brandAssets.ts so 728x90 / 300x250 / 160x600 / 1200x628 banners can be dropped in without code changes. - FAQ emits FAQPage JSON-LD (schema.org) so the page is structured-data ready when noindex flips off. - Adds /affiliates to NOINDEX_PATHNAMES (excluded from sitemap), to robots.txt Disallow under every UA block (including AI-bot overrides), and renders `<meta name="robots" content="noindex, nofollow">`. - Adds `rel` prop to common/BrandButton.vue so external CTAs can pass rel="noopener noreferrer" alongside target="_blank". - Vitest unit test asserts i18n key structure (no internal-only keys, ordered sections, every indexed item has a translation). - Playwright e2e covers desktop+mobile render/visibility under @smoke, CTA click and FAQ toggle interactions, FAQPage JSON-LD presence, responsive table-to-definition-list collapse.	2026-05-06 01:44:59 +00:00