fix: publish core/* releases immediately to create tags

Draft releases don't create git tags, but publish-pypi workflow
waits for the tag to exist. This caused core/* releases to hang
indefinitely since they were always drafts.

Change: only use draft for prereleases (alpha/beta/rc), publish
all stable releases (main and core/*) immediately.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.github/actions/setup-frontend/action.yaml

@@ -29,3 +29,5 @@ runs:
       if: ${{ inputs.include_build_step == 'true' }}
       shell: bash
       run: pnpm build
+      env:
+        VITE_USE_LEGACY_DEFAULT_GRAPH: 'true'

.github/actions/upsert-comment-section/action.yaml

@@ -1,21 +1,22 @@
 name: Upsert Comment Section
 description: >
   Manage a consolidated PR comment with independently-updatable sections.
-  All website CI workflows share the marker <!-- WEBSITE_CI_REPORT -->.
-  Valid section names: "e2e", "preview", "screenshot-update".
+  Multiple CI workflows can share the same comment by using the same
+  comment-marker and different section-names. Each workflow upserts only
+  its own section, leaving other sections intact.
 
 inputs:
   pr-number:
     description: PR number to comment on
     required: true
   section-name:
-    description: 'Section identifier: "e2e", "preview", or "screenshot-update"'
+    description: 'Section identifier (e.g. "playwright", "storybook", "e2e", "preview")'
     required: true
   section-content:
     description: Markdown content for this section
     required: true
   comment-marker:
-    description: Top-level HTML comment marker (must be <!-- WEBSITE_CI_REPORT --> for all callers)
+    description: Top-level HTML comment marker shared by all sections in this comment
     required: true
   token:
     description: GitHub token with pull-requests write permission
@@ -38,6 +39,10 @@ runs:
           const sectionContent = process.env.INPUT_SECTION_CONTENT
           const commentMarker = process.env.INPUT_COMMENT_MARKER
 
+          if (!/^[a-z0-9-]+$/.test(sectionName)) {
+            throw new Error(`Invalid section-name: ${sectionName}`)
+          }
+
           const sectionStart = `<!-- section:${sectionName}:start -->`
           const sectionEnd = `<!-- section:${sectionName}:end -->`
           const sectionBlock = `${sectionStart}\n${sectionContent}\n${sectionEnd}`

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -109,3 +109,27 @@ jobs:
             exit 1
           fi
           echo '✅ No PostHog references found'
+
+      - name: Scan dist for Customer.io telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Customer.io references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e 'CustomerIoTelemetryProvider' \
+            -e '@customerio/cdp-analytics-browser' \
+            -e 'customerio-gist-web' \
+            -e '(?i)cdp\.customer\.io' \
+            -e 'Comfy\.CustomerIo' \
+            dist; then
+            echo '❌ ERROR: Customer.io references found in dist assets!'
+            echo 'Customer.io must be properly tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
+            echo '2. Call telemetry via useTelemetry() hook'
+            echo '3. Use conditional dynamic imports behind isCloud checks'
+            exit 1
+          fi
+          echo '✅ No Customer.io references found'

.github/workflows/ci-tests-e2e-forks.yaml

@@ -38,16 +38,15 @@ jobs:
         id: pr
         uses: ./.github/actions/resolve-pr-from-workflow-run
 
-      - name: Handle Test Start
+      - name: Handle Test Start — upsert playwright starting section
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'requested'
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ steps.pr.outputs.number }}" \
-            "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ steps.pr.outputs.number }}
+          section-name: playwright
+          section-content: '## 🎭 Playwright: ⏳ Running...'
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed'
@@ -59,13 +58,15 @@ jobs:
           path: reports
           if_no_artifact_found: warn
 
-      - name: Handle Test Completion
+      - name: Handle Test Completion — deploy and generate section
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && hashFiles('reports/**') != ''
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
           GITHUB_SHA: ${{ github.event.workflow_run.head_sha }}
+          SUMMARY_FILE: playwright-section.md
+          BRANCH_NAME: ${{ github.event.workflow_run.head_branch }}
         run: |
           # Rename merged report if exists
           [ -d "reports/playwright-report-chromium-merged" ] && \
@@ -74,5 +75,22 @@ jobs:
           chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.number }}" \
-            "${{ github.event.workflow_run.head_branch }}" \
+            "$BRANCH_NAME" \
             "completed"
+
+      - name: Read playwright section
+        id: section
+        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && hashFiles('playwright-section.md') != ''
+        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        with:
+          path: playwright-section.md
+
+      - name: Upsert playwright section into unified report
+        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && steps.section.outputs.content != ''
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ steps.pr.outputs.number }}
+          section-name: playwright
+          section-content: ${{ steps.section.outputs.content }}
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}

.github/workflows/ci-tests-e2e.yaml

@@ -47,6 +47,8 @@ jobs:
 
       - name: Build cloud frontend
         run: pnpm build:cloud
+        env:
+          VITE_USE_LEGACY_DEFAULT_GRAPH: 'true'
 
       - name: Upload cloud frontend
         uses: actions/upload-artifact@v6
@@ -224,7 +226,7 @@ jobs:
   # when using pull_request event, we have permission to comment directly
   # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
 
-  # Post starting comment for non-forked PRs
+  # Post starting section into the unified PR report comment for non-forked PRs
   comment-on-pr-start:
     needs: changes
     runs-on: ubuntu-latest
@@ -240,17 +242,16 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Post starting comment
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
-            "starting"
+      - name: Upsert playwright starting section into unified report
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ github.event.pull_request.number }}
+          section-name: playwright
+          section-content: '## 🎭 Playwright: ⏳ Running...'
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}
 
-  # Deploy and comment for non-forked PRs only
+  # Deploy and upsert final playwright section for non-forked PRs only
   deploy-and-comment:
     needs: [changes, playwright-tests, merge-reports]
     runs-on: ubuntu-latest
@@ -274,15 +275,34 @@ jobs:
           pattern: playwright-report-*
           path: reports
 
-      - name: Deploy reports and comment on PR
+      - name: Deploy reports and generate section
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
           GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
+          SUMMARY_FILE: playwright-section.md
+          BRANCH_NAME: ${{ github.head_ref }}
         run: |
           bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
+            "$BRANCH_NAME" \
             "completed"
+
+      - name: Read playwright section
+        id: section
+        if: ${{ !cancelled() && hashFiles('playwright-section.md') != '' }}
+        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        with:
+          path: playwright-section.md
+
+      - name: Upsert playwright section into unified report
+        if: ${{ !cancelled() && steps.section.outputs.content != '' }}
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ github.event.pull_request.number }}
+          section-name: playwright
+          section-content: ${{ steps.section.outputs.content }}
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}
   #### END Deployment and commenting (non-forked PRs only)

.github/workflows/ci-tests-storybook-forks.yaml

@@ -38,16 +38,15 @@ jobs:
         id: pr
         uses: ./.github/actions/resolve-pr-from-workflow-run
 
-      - name: Handle Storybook Start
+      - name: Handle Storybook Start — upsert storybook starting section
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'requested'
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
-          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
-            "${{ steps.pr.outputs.number }}" \
-            "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ steps.pr.outputs.number }}
+          section-name: storybook
+          section-content: '## 🎨 Storybook: 🚧 Building...'
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
@@ -58,7 +57,7 @@ jobs:
           name: storybook-static
           path: storybook-static
 
-      - name: Handle Storybook Completion
+      - name: Handle Storybook Completion — deploy and generate section
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed'
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -66,9 +65,28 @@ jobs:
           GITHUB_TOKEN: ${{ github.token }}
           WORKFLOW_CONCLUSION: ${{ github.event.workflow_run.conclusion }}
           WORKFLOW_URL: ${{ github.event.workflow_run.html_url }}
+          SUMMARY_FILE: storybook-section.md
+          BRANCH_NAME: ${{ github.event.workflow_run.head_branch }}
         run: |
           chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.number }}" \
-            "${{ github.event.workflow_run.head_branch }}" \
+            "$BRANCH_NAME" \
             "completed"
+
+      - name: Read storybook section
+        id: section
+        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && hashFiles('storybook-section.md') != ''
+        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        with:
+          path: storybook-section.md
+
+      - name: Upsert storybook section into unified report
+        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && steps.section.outputs.content != ''
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ steps.pr.outputs.number }}
+          section-name: storybook
+          section-content: ${{ steps.section.outputs.content }}
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}

.github/workflows/ci-tests-storybook.yaml

@@ -37,15 +37,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Post starting comment
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
-          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
-            "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
-            "starting"
+      - name: Upsert storybook starting section into unified report
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ github.event.pull_request.number }}
+          section-name: storybook
+          section-content: '## 🎨 Storybook: 🚧 Building...'
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
@@ -164,19 +163,38 @@ jobs:
       - name: Make deployment script executable
         run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
 
-      - name: Deploy Storybook and comment on PR
+      - name: Deploy Storybook and generate section
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
           WORKFLOW_CONCLUSION: ${{ needs.storybook-build.outputs.conclusion }}
           WORKFLOW_URL: ${{ needs.storybook-build.outputs.workflow-url }}
+          SUMMARY_FILE: storybook-section.md
+          BRANCH_NAME: ${{ github.head_ref }}
         run: |
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
+            "$BRANCH_NAME" \
             "completed"
 
+      - name: Read storybook section
+        id: section
+        if: hashFiles('storybook-section.md') != ''
+        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        with:
+          path: storybook-section.md
+
+      - name: Upsert storybook section into unified report
+        if: steps.section.outputs.content != ''
+        uses: ./.github/actions/upsert-comment-section
+        with:
+          pr-number: ${{ github.event.pull_request.number }}
+          section-name: storybook
+          section-content: ${{ steps.section.outputs.content }}
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}
+
   # Deploy Storybook to production URL on main branch push
   deploy-production:
     runs-on: ubuntu-latest
@@ -208,35 +226,17 @@ jobs:
     permissions:
       pull-requests: write
     steps:
-      - name: Update comment with Chromatic URLs
-        uses: actions/github-script@v8
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Upsert Chromatic section into unified report
+        uses: ./.github/actions/upsert-comment-section
         with:
-          script: |
-            const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
-            const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
-
-            // Find the existing Storybook comment
-            const { data: comments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: ${{ github.event.pull_request.number }}
-            });
-
-            const storybookComment = comments.find(comment =>
-              comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
-            );
-
-            if (storybookComment && buildUrl && storybookUrl) {
-              // Append Chromatic info to existing comment
-              const updatedBody = storybookComment.body.replace(
-                /---\n(.*)$/s,
-                `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
-              );
-
-              await github.rest.issues.updateComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: storybookComment.id,
-                body: updatedBody
-              });
-            }
+          pr-number: ${{ github.event.pull_request.number }}
+          section-name: chromatic
+          section-content: |
+            ### 🎨 Chromatic Visual Tests
+            - 📊 [View Chromatic Build](${{ needs.chromatic-deployment.outputs.chromatic-build-url }})
+            - 📚 [View Chromatic Storybook](${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }})
+          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
+          token: ${{ github.token }}

.github/workflows/pr-cursor-review.yaml

@@ -0,0 +1,55 @@
+# Description: Team-gated multi-model Cursor review — a thin caller for the
+# reusable workflow in Comfy-Org/github-workflows, which is the single source of
+# truth for the panel, judge, prompts, and scripts. Triggered by the
+# 'cursor-review' label.
+#
+# Access control (team-only, two layers):
+#   1. Only users with triage permission or higher can apply a label in a public
+#      repo, so the public cannot trigger this.
+#   2. The reusable workflow's secret-bearing jobs do not run on fork PRs (forks
+#      get no secrets), so CURSOR_API_KEY is reachable only on internal branches.
+name: 'PR: Cursor Review'
+
+on:
+  pull_request:
+    types: [labeled, unlabeled]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+concurrency:
+  # Re-labeling cancels an in-flight run for the same PR + label.
+  group: cursor-review-pr-${{ github.event.pull_request.number }}-${{ github.event.label.name }}
+  cancel-in-progress: true
+
+jobs:
+  cursor-review:
+    if: github.event.action == 'labeled' && github.event.label.name == 'cursor-review'
+    # SHA-pinned per zizmor `unpinned-uses: hash-pin`. Bump this SHA to pick up
+    # upstream changes; keep `workflows_ref` matching so prompts/scripts load
+    # from the same commit as the workflow definition.
+    uses: Comfy-Org/github-workflows/.github/workflows/cursor-review.yml@047ca48febe3a6647608ed2e0c4331b491cb9d6a # github-workflows#9
+    with:
+      # Overriding diff_excludes replaces the reusable default wholesale, so
+      # this restates the generated/vendored defaults and adds this repo's heavy
+      # paths (Playwright snapshots, generated manager types).
+      diff_excludes: >-
+        :!**/package-lock.json
+        :!**/yarn.lock
+        :!**/pnpm-lock.yaml
+        :!**/node_modules/**
+        :!**/.claude/**
+        :!**/dist/**
+        :!**/vendor/**
+        :!**/*.generated.*
+        :!**/*.min.js
+        :!**/*.min.css
+        :!**/*-snapshots/**
+        :!src/workbench/extensions/manager/types/generatedManagerTypes.ts
+      # Load the prompts/scripts from the same ref as `uses:`.
+      workflows_ref: 047ca48febe3a6647608ed2e0c4331b491cb9d6a
+    secrets:
+      CURSOR_API_KEY: ${{ secrets.CURSOR_API_KEY }}
+      # Optional — enables start/complete Slack DMs to the triggerer.
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

.github/workflows/pr-report.yaml

@@ -140,6 +140,8 @@ jobs:
             const legacyMarkers = [
               '<!-- COMFYUI_FRONTEND_SIZE -->',
               '<!-- COMFYUI_FRONTEND_PERF -->',
+              '<!-- PLAYWRIGHT_TEST_STATUS -->',
+              '<!-- STORYBOOK_BUILD_STATUS -->',
             ];
 
             const comments = await github.paginate(github.rest.issues.listComments, {
@@ -160,11 +162,19 @@ jobs:
               }
             }
 
-      - name: Post PR comment
+      - name: Read PR report
+        id: report
         if: steps.pr-meta.outputs.skip != 'true'
-        uses: ./.github/actions/post-pr-report-comment
+        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        with:
+          path: ./pr-report.md
+
+      - name: Upsert bundle/perf/coverage section into unified report
+        if: steps.pr-meta.outputs.skip != 'true'
+        uses: ./.github/actions/upsert-comment-section
         with:
           pr-number: ${{ steps.pr-meta.outputs.number }}
-          report-file: ./pr-report.md
+          section-name: ci-metrics
+          section-content: ${{ steps.report.outputs.content }}
           comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-desktop-bridge-types.yaml

@@ -0,0 +1,142 @@
+name: Publish Desktop Bridge Types
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (e.g., 0.1.2)'
+        required: true
+        type: string
+      dist_tag:
+        description: 'npm dist-tag to use'
+        required: true
+        default: latest
+        type: string
+      ref:
+        description: 'Git ref to checkout (commit SHA, tag, or branch)'
+        required: false
+        type: string
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dist_tag:
+        required: false
+        type: string
+        default: latest
+      ref:
+        required: false
+        type: string
+    secrets:
+      NPM_TOKEN:
+        required: true
+
+concurrency:
+  group: publish-desktop-bridge-types-${{ github.workflow }}-${{ inputs.version }}-${{ inputs.dist_tag }}
+  cancel-in-progress: false
+
+jobs:
+  publish_desktop_bridge_types:
+    name: Publish @comfyorg/comfyui-desktop-bridge-types
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Validate inputs
+        env:
+          VERSION: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          SEMVER_REGEX='^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'
+          if [[ ! "$VERSION" =~ $SEMVER_REGEX ]]; then
+            echo "::error title=Invalid version::Version '$VERSION' must follow semantic versioning (x.y.z[-suffix][+build])" >&2
+            exit 1
+          fi
+
+      - name: Determine ref to checkout
+        id: resolve_ref
+        env:
+          REF: ${{ inputs.ref }}
+          DEFAULT_REF: ${{ github.ref_name }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [ -z "$REF" ]; then
+            REF="$DEFAULT_REF"
+          fi
+          if ! git check-ref-format --allow-onelevel "$REF"; then
+            echo "::error title=Invalid ref::Ref '$REF' fails git check-ref-format validation." >&2
+            exit 1
+          fi
+          echo "ref=$REF" >> "$GITHUB_OUTPUT"
+
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ steps.resolve_ref.outputs.ref }}
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+      - name: Verify package
+        id: pkg
+        env:
+          INPUT_VERSION: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          PACKAGE_JSON=packages/comfyui-desktop-bridge-types/package.json
+          NAME=$(node -p "require('./${PACKAGE_JSON}').name")
+          VERSION=$(node -p "require('./${PACKAGE_JSON}').version")
+          if [ "$VERSION" != "$INPUT_VERSION" ]; then
+            echo "::error title=Version mismatch::${PACKAGE_JSON} version $VERSION does not match input $INPUT_VERSION" >&2
+            exit 1
+          fi
+          echo "name=$NAME" >> "$GITHUB_OUTPUT"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Check if version already on npm
+        id: check_npm
+        env:
+          NAME: ${{ steps.pkg.outputs.name }}
+          VER: ${{ steps.pkg.outputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          STATUS=0
+          OUTPUT=$(npm view "${NAME}@${VER}" --json 2>&1) || STATUS=$?
+          if [ "$STATUS" -eq 0 ]; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "::warning title=Already published::${NAME}@${VER} already exists on npm. Skipping publish."
+          else
+            if echo "$OUTPUT" | grep -q "E404"; then
+              echo "exists=false" >> "$GITHUB_OUTPUT"
+            else
+              echo "::error title=Registry lookup failed::$OUTPUT" >&2
+              exit "$STATUS"
+            fi
+          fi
+
+      - name: Publish package
+        if: steps.check_npm.outputs.exists == 'false'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          DIST_TAG: ${{ inputs.dist_tag }}
+        run: pnpm publish --access public --tag "$DIST_TAG" --no-git-checks --ignore-scripts
+        working-directory: packages/comfyui-desktop-bridge-types

.github/workflows/release-draft-create.yaml

@@ -92,9 +92,7 @@ jobs:
           make_latest: >-
             ${{ github.event.pull_request.base.ref == 'main' &&
                 needs.build.outputs.is_prerelease == 'false' }}
-          draft: >-
-            ${{ github.event.pull_request.base.ref != 'main' ||
-                needs.build.outputs.is_prerelease == 'true' }}
+          draft: ${{ needs.build.outputs.is_prerelease == 'true' }}
           prerelease: >-
             ${{ needs.build.outputs.is_prerelease == 'true' }}
           generate_release_notes: true

.oxlintrc.json

@@ -65,6 +65,7 @@
     ],
     "no-unsafe-optional-chaining": "error",
     "no-self-assign": "allow",
+    "no-unreachable": "error",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
     "no-useless-rename": "off",
@@ -73,12 +74,14 @@
     "import/namespace": "error",
     "import/no-duplicates": "error",
     "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "jest/expect-expect": "off",
-    "jest/no-conditional-expect": "off",
-    "jest/no-disabled-tests": "off",
-    "jest/no-standalone-expect": "off",
-    "jest/valid-title": "off",
+    "vitest/expect-expect": "off",
+    "vitest/no-conditional-expect": "off",
+    "vitest/no-disabled-tests": "off",
+    "vitest/no-standalone-expect": "off",
+    "vitest/valid-title": "off",
+    "vitest/require-to-throw-message": "off",
     "typescript/no-this-alias": "off",
+    "typescript/no-useless-default-assignment": "off",
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
     "typescript/no-unused-vars": "off",

apps/website/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "font": "inter",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "pointer": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}

apps/website/e2e/affiliates.spec.ts

@@ -1,38 +1,18 @@
 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 { affiliateFaqs } from '../src/data/affiliateFaq'
 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
+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 }) => {
@@ -41,32 +21,38 @@ test.describe('Affiliates landing — desktop @smoke', () => {
 
   test('renders the hero heading and is indexable', async ({ page }) => {
     await expect(
-      page.getByRole('heading', { name: 'Become a Comfy Partner', level: 1 })
+      page.getByRole('heading', { level: 1, name: HERO_HEADING_TEXT })
     ).toBeVisible()
 
     await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
   })
 
-  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 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('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('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')
   })
 })
 
@@ -93,42 +79,21 @@ test.describe('Affiliates landing — desktop interactions', () => {
     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')
+    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 page.getByTestId('affiliate-hero-cta').click()
+    await applyButton.click()
     const popup = await popupPromise
     await popup.waitForLoadState('domcontentloaded')
     const popupUrl = popup.url()
@@ -140,12 +105,15 @@ test.describe('Affiliates landing — desktop interactions', () => {
   })
 
   test('FAQ items toggle open and closed on click', async ({ page }) => {
-    const firstQuestion = page.getByRole('button', { name: FIRST_FAQ_QUESTION })
+    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)).toBeVisible()
+    await expect(page.getByText(FIRST_FAQ.answer.en)).toBeVisible()
 
     await firstQuestion.click()
     await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
@@ -157,44 +125,24 @@ test.describe('Affiliates landing — mobile @mobile', () => {
     await page.goto(PATH)
   })
 
-  test('renders the hero heading and primary CTA at narrow viewports', async ({
-    page
-  }) => {
+  test('renders the hero heading 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)
+      page.getByRole('heading', { level: 1, name: HERO_HEADING_TEXT })
     ).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
-      )
-    }
+  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 }) => {
@@ -11,7 +15,9 @@ test.describe('Download page @smoke', () => {
   })
 
   test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Download Comfy — Run AI Locally')
+    await expect(page).toHaveTitle(
+      'Download Comfy Desktop — Run AI on Your Hardware'
+    )
   })
 
   test('CloudBannerSection is visible with cloud link', async ({ page }) => {
@@ -52,6 +58,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 })

apps/website/e2e/navigation.spec.ts

@@ -2,6 +2,13 @@ import { expect } from '@playwright/test'
 
 import { test } from './fixtures/blockExternalMedia'
 
+const TOP_LEVEL_LABELS = [
+  'Products',
+  'Pricing',
+  'Community',
+  'Company'
+] as const
+
 test.describe('Desktop navigation @smoke', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/')
@@ -17,14 +24,10 @@ test.describe('Desktop navigation @smoke', () => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
 
-    for (const label of [
-      'PRODUCTS',
-      'PRICING',
-      'COMMUNITY',
-      'RESOURCES',
-      'COMPANY'
-    ]) {
-      await expect(desktopLinks.getByText(label).first()).toBeVisible()
+    for (const label of TOP_LEVEL_LABELS) {
+      await expect(
+        desktopLinks.getByText(label, { exact: true }).first()
+      ).toBeVisible()
     }
   })
 
@@ -49,11 +52,11 @@ test.describe('Desktop dropdown @interaction', () => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
     const productsButton = desktopLinks.getByRole('button', {
-      name: /PRODUCTS/i
+      name: 'Products'
     })
     await productsButton.hover()
 
-    const dropdown = productsButton.locator('..').getByTestId('nav-dropdown')
+    const dropdown = nav.getByTestId('nav-dropdown')
     for (const item of [
       'Comfy Desktop',
       'Comfy Cloud',
@@ -67,19 +70,20 @@ test.describe('Desktop dropdown @interaction', () => {
   test('moving mouse away closes dropdown', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
-    await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
+    await desktopLinks.getByRole('button', { name: 'Products' }).hover()
 
     const comfyLocal = nav.getByRole('link', { name: 'Comfy Desktop' }).first()
     await expect(comfyLocal).toBeVisible()
 
-    await page.locator('main').hover()
+    const viewport = page.viewportSize()
+    await page.mouse.move(10, (viewport?.height ?? 800) - 10)
     await expect(comfyLocal).toBeHidden()
   })
 
   test('Escape key closes dropdown', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
-    await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
+    await desktopLinks.getByRole('button', { name: 'Products' }).hover()
 
     const comfyLocal = nav.getByRole('link', { name: 'Comfy Desktop' }).first()
     await expect(comfyLocal).toBeVisible()
@@ -105,11 +109,11 @@ test.describe('Mobile menu @mobile', () => {
   }) => {
     await page.getByRole('button', { name: 'Toggle menu' }).click()
 
-    const menu = page.locator('#site-mobile-menu')
+    const menu = page.getByRole('dialog')
     await expect(menu).toBeVisible()
 
-    for (const label of ['PRODUCTS', 'PRICING', 'COMMUNITY']) {
-      await expect(menu.getByText(label).first()).toBeVisible()
+    for (const label of ['Products', 'Pricing', 'Community']) {
+      await expect(menu.getByText(label, { exact: true }).first()).toBeVisible()
     }
   })
 
@@ -118,24 +122,14 @@ test.describe('Mobile menu @mobile', () => {
   }) => {
     await page.getByRole('button', { name: 'Toggle menu' }).click()
 
-    const menu = page.locator('#site-mobile-menu')
-    await menu.getByText('PRODUCTS').first().click()
+    const menu = page.getByRole('dialog')
+    await menu.getByRole('button', { name: 'Products' }).click()
 
     await expect(menu.getByText('Comfy Desktop')).toBeVisible()
     await expect(menu.getByText('Comfy Cloud')).toBeVisible()
 
     await menu.getByRole('button', { name: /BACK/i }).click()
-    await expect(menu.getByText('PRODUCTS').first()).toBeVisible()
-  })
-
-  test('CTA buttons visible in mobile menu', async ({ page }) => {
-    await page.getByRole('button', { name: 'Toggle menu' }).click()
-
-    const menu = page.locator('#site-mobile-menu')
-    await expect(
-      menu.getByRole('link', { name: 'DOWNLOAD DESKTOP' })
-    ).toBeVisible()
-    await expect(menu.getByRole('link', { name: 'LAUNCH CLOUD' })).toBeVisible()
+    await expect(menu.getByRole('button', { name: 'Products' })).toBeVisible()
   })
 })
 

apps/website/package.json

@@ -25,12 +25,15 @@
     "@comfyorg/object-info-parser": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
+    "@lucide/vue": "catalog:",
     "@vercel/analytics": "catalog:",
     "@vueuse/core": "catalog:",
+    "class-variance-authority": "catalog:",
     "cva": "catalog:",
     "gsap": "catalog:",
     "lenis": "catalog:",
     "posthog-js": "catalog:",
+    "reka-ui": "catalog:",
     "three": "catalog:",
     "vue": "catalog:",
     "zod": "catalog:"
@@ -43,6 +46,7 @@
     "astro": "catalog:",
     "tailwindcss": "catalog:",
     "tsx": "catalog:",
+    "tw-animate-css": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"
   }

apps/website/public/favicon-dark.svg

@@ -1,4 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="48" height="48" rx="12" fill="#F0EFED"/>
-<path d="M31.0126 30.4797C31.0576 30.3275 31.0822 30.1671 31.0822 29.9985C31.0822 29.0649 30.3294 28.3081 29.4006 28.3081H21.8643C21.4593 28.3122 21.1279 27.9832 21.1279 27.576C21.1279 27.5019 21.1401 27.432 21.1565 27.3662L23.1858 20.259C23.2717 19.9465 23.5581 19.7161 23.8936 19.7161L31.4586 19.7079C33.0542 19.7079 34.4003 18.6262 34.8053 17.1497L35.9427 13.1889C35.9795 13.0491 36 12.8969 36 12.7447C36 11.8152 35.2513 11.0625 34.3266 11.0625H25.1742C23.5868 11.0625 22.2448 12.136 21.8316 13.5961L21.0624 16.2983C20.9724 16.6068 20.6901 16.833 20.3546 16.833H18.1575C16.5823 16.833 15.2526 17.8859 14.8271 19.3295L12.0614 29.0402C12.0205 29.1841 12 29.3404 12 29.4967C12 30.4304 12.7528 31.1871 13.6816 31.1871H15.8418C16.2468 31.1871 16.5782 31.5162 16.5782 31.9275C16.5782 31.9974 16.5701 32.0673 16.5496 32.1331L15.7845 34.8107C15.7477 34.9546 15.7232 35.1027 15.7232 35.2549C15.7232 36.1844 16.4719 36.937 17.3965 36.937L26.553 36.9288C28.1446 36.9288 29.4865 35.8512 29.8957 34.3829L31.0085 30.4838L31.0126 30.4797Z" fill="#211927"/>
-</svg>

apps/website/public/favicon-light.svg

@@ -1,11 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3062_2148)">
-<path d="M36.8451 0H11.1549C4.99423 0 0 4.99423 0 11.1549V36.8451C0 43.0058 4.99423 48 11.1549 48H36.8451C43.0058 48 48 43.0058 48 36.8451V11.1549C48 4.99423 43.0058 0 36.8451 0Z" fill="#211927"/>
-<path d="M31.0126 30.48C31.0576 30.3278 31.0822 30.1674 31.0822 29.9987C31.0822 29.0651 30.3294 28.3083 29.4006 28.3083H21.8643C21.4592 28.3124 21.1278 27.9834 21.1278 27.5762C21.1278 27.5022 21.1401 27.4323 21.1565 27.3665L23.1858 20.2593C23.2718 19.9467 23.5581 19.7164 23.8936 19.7164L31.4586 19.7082C33.0542 19.7082 34.4001 18.6264 34.8054 17.1499L35.9429 13.1891C35.9794 13.0493 36 12.8971 36 12.7449C36 11.8154 35.2513 11.0627 34.3268 11.0627H25.1742C23.5868 11.0627 22.2448 12.1362 21.8316 13.5963L21.0624 16.2985C20.9724 16.607 20.6901 16.8332 20.3546 16.8332H18.1575C16.5823 16.8332 15.2526 17.8861 14.8271 19.3298L12.0614 29.0404C12.0205 29.1844 12 29.3407 12 29.4969C12 30.4306 12.7528 31.1874 13.6816 31.1874H15.8418C16.2469 31.1874 16.5783 31.5164 16.5783 31.9277C16.5783 31.9976 16.5701 32.0675 16.5496 32.1334L15.7845 34.8109C15.7477 34.9549 15.7231 35.1029 15.7231 35.255C15.7231 36.1846 16.4719 36.9374 17.3965 36.9374L26.553 36.929C28.1446 36.929 29.4865 35.8513 29.8957 34.3833L31.0085 30.4841L31.0126 30.48Z" fill="#F2FF59"/>
-</g>
-<defs>
-<clipPath id="clip0_3062_2148">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
-</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/site.webmanifest

@@ -1,23 +1,23 @@
 {
   "name": "Comfy",
   "short_name": "Comfy",
-  "id": "/",
-  "start_url": "/",
   "icons": [
     {
       "src": "/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
     },
     {
       "src": "/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
     }
   ],
   "theme_color": "#211927",
   "background_color": "#211927",
-  "display": "standalone"
+  "display": "standalone",
+  "id": "/",
+  "start_url": "/"
 }

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/affiliates/AudienceSection.vue

@@ -1,42 +0,0 @@
-<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>

apps/website/src/components/affiliates/BrandAssetsSection.vue

@@ -1,62 +0,0 @@
-<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>

apps/website/src/components/affiliates/FooterCtaSection.vue

@@ -1,43 +0,0 @@
-<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>

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

@@ -1,84 +0,0 @@
-<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>

apps/website/src/components/affiliates/HowItWorksSection.vue

@@ -1,55 +0,0 @@
-<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>

apps/website/src/components/affiliates/ProgramDetailsSection.vue

@@ -1,79 +0,0 @@
-<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>

apps/website/src/components/affiliates/TrustBandSection.vue

@@ -1,20 +0,0 @@
-<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>

apps/website/src/components/affiliates/affiliateFaqs.ts

@@ -1,6 +0,0 @@
-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

apps/website/src/components/affiliates/affiliateLanding.test.ts

@@ -1,154 +0,0 @@
-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([])
-  })
-})

apps/website/src/components/affiliates/brandAssets.ts

@@ -1,59 +0,0 @@
-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'
-  }
-]

apps/website/src/components/affiliates/programDetails.ts

@@ -1,33 +0,0 @@
-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'
-  }
-]

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

@@ -1,17 +0,0 @@
-<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,19 +1,13 @@
 <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,
-  rel,
-  variant,
-  size,
-  class: customClass = ''
-} = defineProps<{
+const props = defineProps<{
   href?: string
   target?: string
   rel?: string
@@ -21,15 +15,25 @@ const {
   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
-    :rel
-    :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/ContentSection.vue

@@ -114,7 +114,7 @@ function scrollToSection(id: string) {
   <section class="px-4 pt-8 pb-24 lg:px-20 lg:pt-24 lg:pb-40">
     <div class="lg:flex lg:gap-16">
       <!-- Desktop sticky nav -->
-      <aside class="scrollbar-none hidden lg:block lg:w-48 lg:shrink-0">
+      <aside class="hidden scrollbar-none lg:block lg:w-48 lg:shrink-0">
         <div class="sticky top-32">
           <CategoryNav
             :categories="categories"
@@ -135,7 +135,7 @@ function scrollToSection(id: string) {
         >
           <h2
             v-if="section.hasTitle"
-            class="text-primary-comfy-canvas mb-6 text-2xl font-light"
+            class="mb-6 text-2xl font-light text-primary-comfy-canvas"
           >
             {{ t(key(section.id, 'title'), locale) }}
           </h2>
@@ -144,7 +144,7 @@ function scrollToSection(id: string) {
             <!-- Paragraph -->
             <p
               v-if="block.type === 'paragraph'"
-              class="text-primary-comfy-canvas mt-4 text-sm/relaxed"
+              class="mt-4 text-sm/relaxed text-primary-comfy-canvas"
               v-html="t(key(section.id, `block.${i}`), locale)"
             />
 
@@ -167,7 +167,7 @@ function scrollToSection(id: string) {
                   locale
                 ).split('\n')"
                 :key="j"
-                class="text-primary-comfy-canvas flex items-start gap-2"
+                class="flex items-start gap-2 text-primary-comfy-canvas"
               >
                 <span
                   class="bg-primary-comfy-yellow mt-1.5 size-1.5 shrink-0 rounded-full"
@@ -187,7 +187,7 @@ function scrollToSection(id: string) {
                   locale
                 ).split('\n')"
                 :key="j"
-                class="text-primary-comfy-canvas flex items-start gap-3"
+                class="flex items-start gap-3 text-primary-comfy-canvas"
               >
                 <span
                   class="text-primary-comfy-yellow shrink-0 font-semibold tabular-nums"
@@ -205,7 +205,7 @@ function scrollToSection(id: string) {
                 :alt="t(key(section.id, `block.${i}.alt`), locale)"
                 class="w-full rounded-2xl object-cover"
               />
-              <figcaption class="text-primary-comfy-canvas mt-3 text-xs">
+              <figcaption class="mt-3 text-xs text-primary-comfy-canvas">
                 {{ t(key(section.id, `block.${i}.caption`), locale) }}
               </figcaption>
             </figure>
@@ -221,7 +221,7 @@ function scrollToSection(id: string) {
               "
             >
               <p
-                class="text-primary-comfy-canvas text-lg/relaxed font-light italic"
+                class="text-lg/relaxed font-light text-primary-comfy-canvas italic"
               >
                 "{{ t(key(section.id, `block.${i}.text`), locale) }}"
               </p>
@@ -238,17 +238,17 @@ function scrollToSection(id: string) {
               <SectionLabel>
                 {{ t(key(section.id, `block.${i}.label`), locale) }}
               </SectionLabel>
-              <p class="text-primary-comfy-canvas mt-2 text-sm font-semibold">
+              <p class="mt-2 text-sm font-semibold text-primary-comfy-canvas">
                 {{ t(key(section.id, `block.${i}.name`), locale) }}
               </p>
-              <p class="text-primary-comfy-canvas text-xs">
+              <p class="text-xs text-primary-comfy-canvas">
                 {{ t(key(section.id, `block.${i}.role`), locale) }}
               </p>
               <template v-if="hasKey(key(section.id, `block.${i}.name2`))">
-                <p class="text-primary-comfy-canvas mt-4 text-sm font-semibold">
+                <p class="mt-4 text-sm font-semibold text-primary-comfy-canvas">
                   {{ t(key(section.id, `block.${i}.name2`), locale) }}
                 </p>
-                <p class="text-primary-comfy-canvas text-xs">
+                <p class="text-xs text-primary-comfy-canvas">
                   {{ t(key(section.id, `block.${i}.role2`), locale) }}
                 </p>
               </template>

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

@@ -21,7 +21,7 @@ export const Default: Story = {
   args: {
     title: 'Product',
     links: [
-      { label: 'Local', href: '/local' },
+      { label: 'Desktop', href: '/download' },
       { label: 'Cloud', href: '/cloud' },
       { label: 'API', href: '/api' },
       { label: 'Enterprise', href: '/enterprise' }

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations.ts'
+import { t } from '../../../i18n/translations.ts'
+import { externalLinks, getRoutes } from '../../../config/routes.ts'
+import GitHubStarBadge from '../GitHubStarBadge.vue'
+import HeaderMainDesktop from './HeaderMainDesktop.vue'
+import HeaderMainMobile from './HeaderMainMobile.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const { locale = 'en', githubStars = '' } = defineProps<{
+  locale?: Locale
+  githubStars?: string
+}>()
+const routes = getRoutes(locale)
+
+const ctaButtons = [
+  {
+    prefix: t('nav.ctaDesktopPrefix', locale),
+    core: t('nav.ctaDesktopCore', locale),
+    ariaLabel: t('nav.downloadLocal', locale),
+    href: routes.download,
+    primary: false
+  },
+  {
+    prefix: t('nav.ctaCloudPrefix', locale),
+    core: t('nav.ctaCloudCore', locale),
+    ariaLabel: t('nav.launchCloud', locale),
+    href: externalLinks.cloud,
+    primary: true
+  }
+]
+</script>
+
+<template>
+  <nav
+    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
+      :href="routes.home"
+      class="inline-grid h-10 shrink-0 grid-cols-1 grid-rows-1 transition-[width]"
+      aria-label="Comfy home"
+    >
+      <img
+        src="/icons/logomark.svg"
+        alt="Comfy"
+        class="col-span-full row-span-full h-8"
+      />
+      <div
+        class="relative col-span-full row-span-full h-10 w-0 overflow-clip transition-[width] xl:w-36"
+      >
+        <img
+          src="/icons/logo.svg"
+          alt="Comfy"
+          class="absolute top-0 left-0 h-10 w-36 max-w-none object-contain object-left"
+        />
+      </div>
+    </a>
+
+    <!-- Desktop nav links -->
+    <HeaderMainDesktop :locale class="hidden lg:block" />
+    <HeaderMainMobile :locale class="lg:hidden" />
+
+    <!-- Desktop CTA buttons -->
+    <div
+      data-testid="desktop-nav-cta"
+      class="hidden shrink-0 items-center gap-2 lg:flex"
+    >
+      <GitHubStarBadge v-if="githubStars" :stars="githubStars" />
+      <Button
+        v-for="cta in ctaButtons"
+        :key="cta.href"
+        as="a"
+        :href="cta.href"
+        :variant="cta.primary ? 'default' : 'outline'"
+        :aria-label="cta.ariaLabel"
+      >
+        <span
+          ><span class="hidden xl:inline-block">{{ cta.prefix }}&nbsp;</span
+          >{{ cta.core }}</span
+        >
+      </Button>
+    </div>
+  </nav>
+</template>

apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import NavigationMenu from '@/components/ui/navigation-menu/NavigationMenu.vue'
+import NavigationMenuContent from '@/components/ui/navigation-menu/NavigationMenuContent.vue'
+import NavigationMenuItem from '@/components/ui/navigation-menu/NavigationMenuItem.vue'
+import NavigationMenuLink from '@/components/ui/navigation-menu/NavigationMenuLink.vue'
+import NavigationMenuList from '@/components/ui/navigation-menu/NavigationMenuList.vue'
+import NavigationMenuTrigger from '@/components/ui/navigation-menu/NavigationMenuTrigger.vue'
+import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu/navigationMenuTriggerStyle'
+
+import {
+  isHrefActive,
+  useCurrentPath
+} from '../../../composables/useCurrentPath'
+import { getMainNavigation } from '../../../data/mainNavigation'
+import type { NavItem } from '../../../data/mainNavigation'
+import type { Locale } from '../../../i18n/translations'
+import NavColumn from './NavColumn.vue'
+import NavFeaturedCard from './NavFeaturedCard.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const mainNavigation = getMainNavigation(locale)
+const currentPath = useCurrentPath()
+
+function isNavItemActive(navItem: NavItem, path: string): boolean {
+  if (navItem.href) return isHrefActive(navItem.href, path)
+  return (
+    navItem.columns?.some((column) =>
+      column.items.some((item) => isHrefActive(item.href, path))
+    ) ?? false
+  )
+}
+</script>
+
+<template>
+  <NavigationMenu data-testid="desktop-nav-links">
+    <NavigationMenuList>
+      <NavigationMenuItem
+        v-for="navItem in mainNavigation"
+        :key="navItem.label"
+      >
+        <template v-if="navItem.columns?.length">
+          <NavigationMenuTrigger
+            :active="isNavItemActive(navItem, currentPath)"
+          >
+            {{ navItem.label }}
+          </NavigationMenuTrigger>
+          <NavigationMenuContent class="w-auto" data-testid="nav-dropdown">
+            <ul class="flex w-max gap-16">
+              <NavFeaturedCard
+                v-if="navItem.featured"
+                :featured="navItem.featured"
+              />
+              <NavColumn
+                v-for="column in navItem.columns"
+                :key="column.header"
+                :column="column"
+                :locale="locale"
+                :current-path="currentPath"
+              />
+            </ul>
+          </NavigationMenuContent>
+        </template>
+        <NavigationMenuLink
+          v-else
+          as-child
+          :active="isNavItemActive(navItem, currentPath)"
+          :class="navigationMenuTriggerStyle()"
+        >
+          <a :href="navItem.href" class="ppformula-text-center">{{
+            navItem.label
+          }}</a>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>

apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import BreadthumbIcon from '@/components/icons/BreadthumbIcon.vue'
+import { ChevronLeft, ChevronRight } from '@lucide/vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { getMainNavigation } from '../../../data/mainNavigation'
+import { getRoutes } from '../../../config/routes.ts'
+import { lockScroll, unlockScroll } from '../../../composables/scrollLock'
+import type { Locale } from '../../../i18n/translations.ts'
+import { t } from '../../../i18n/translations.ts'
+import NavLinkContent from './NavLinkContent.vue'
+import Sheet from '@/components/ui/sheet/Sheet.vue'
+import SheetContent from '@/components/ui/sheet/SheetContent.vue'
+import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+import SheetTrigger from '@/components/ui/sheet/SheetTrigger.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+const mainNavigation = getMainNavigation(locale)
+
+const isOpen = ref(false)
+const activeSection = ref<string | null>(null)
+
+const activeItem = computed(() =>
+  mainNavigation.find(
+    (item) => item.label === activeSection.value && item.columns
+  )
+)
+
+watch(isOpen, (open) => {
+  if (open) {
+    lockScroll()
+  } else {
+    unlockScroll()
+    activeSection.value = null
+  }
+})
+
+onUnmounted(() => {
+  if (isOpen.value) unlockScroll({ skipRestore: true })
+})
+</script>
+
+<template>
+  <div>
+    <Sheet v-model:open="isOpen">
+      <SheetTrigger
+        :aria-label="t('nav.toggleMenu', locale)"
+        class="bg-primary-comfy-yellow grid size-10 shrink-0 cursor-pointer place-items-center rounded-xl text-primary-comfy-ink hover:opacity-90"
+      >
+        <BreadthumbIcon class="h-3 w-5 text-primary-comfy-ink" />
+      </SheetTrigger>
+      <SheetContent
+        side="right"
+        class="flex size-full flex-col px-6 py-5 sm:max-w-none"
+        :close-label="t('nav.close', locale)"
+      >
+        <SheetHeader class="sr-only">
+          <SheetTitle>{{ t('nav.menu', locale) }}</SheetTitle>
+          <SheetDescription>
+            {{ t('nav.mobileMenuDescription', locale) }}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div>
+          <a
+            :href="routes.home"
+            class="focus-visible:border-primary-comfy-yellow focus-visible:ring-primary-comfy-yellow/50 inline-flex w-auto shrink-0 focus-visible:ring-3"
+          >
+            <img src="/icons/logomark.svg" alt="" class="h-11 w-auto" />
+            <span class="sr-only">{{ t('nav.home', locale) }}</span>
+          </a>
+        </div>
+
+        <div class="relative mt-4 flex-1 overflow-hidden">
+          <!-- Top-level nav -->
+          <nav
+            :class="
+              cn(
+                'absolute inset-0 overflow-y-auto p-1',
+                activeItem ? 'opacity-0' : ''
+              )
+            "
+            :aria-label="t('nav.menu', locale)"
+            :inert="activeItem ? true : undefined"
+          >
+            <ul class="flex flex-col gap-y-8">
+              <li v-for="item in mainNavigation" :key="item.label">
+                <Button
+                  :as="item.columns ? 'button' : 'a'"
+                  variant="navMuted"
+                  :type="item.columns ? 'button' : undefined"
+                  :href="item.columns ? undefined : item.href"
+                  @click="item.columns && (activeSection = item.label)"
+                >
+                  {{ item.label }}
+                  <template #append>
+                    <ChevronRight class="size-7" />
+                  </template>
+                </Button>
+              </li>
+            </ul>
+          </nav>
+
+          <!-- Drill-down sub-panel -->
+          <div
+            class="absolute inset-0 bg-primary-comfy-ink transition-transform duration-300 ease-out"
+            :class="
+              activeItem
+                ? 'translate-x-0'
+                : 'pointer-events-none translate-x-full'
+            "
+            :inert="activeItem ? undefined : true"
+            :aria-hidden="!activeItem"
+          >
+            <div class="size-full overflow-y-auto py-8">
+              <Button
+                type="button"
+                variant="link"
+                @click="activeSection = null"
+              >
+                <template #prepend>
+                  <ChevronLeft />
+                </template>
+                {{ t('nav.back', locale) }}
+              </Button>
+
+              <div v-if="activeItem" class="mt-6 flex flex-col gap-y-12">
+                <div
+                  v-for="column in activeItem.columns"
+                  :key="column.header"
+                  class="flex flex-col gap-y-3"
+                >
+                  <p
+                    class="text-primary-warm-gray text-base font-bold tracking-wider uppercase"
+                  >
+                    {{ column.header }}
+                  </p>
+                  <Button
+                    v-for="link in column.items"
+                    :key="link.label"
+                    :href="link.href"
+                    variant="nav"
+                    as="a"
+                    :target="link.external ? '_blank' : undefined"
+                    :rel="link.external ? 'noopener noreferrer' : undefined"
+                  >
+                    <NavLinkContent :item="link" :locale="locale" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="pointer-events-none absolute inset-x-0 top-0 h-8 bg-linear-to-b from-primary-comfy-ink to-transparent"
+            />
+            <div
+              class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-linear-to-t from-primary-comfy-ink to-transparent"
+            />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>

apps/website/src/components/common/HeaderMain/NavColumn.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import NavigationMenuLink from '@/components/ui/navigation-menu/NavigationMenuLink.vue'
+
+import { isHrefActive } from '../../../composables/useCurrentPath'
+import type { NavColumn } from '../../../data/mainNavigation'
+import type { Locale } from '../../../i18n/translations'
+import NavLinkContent from './NavLinkContent.vue'
+
+defineProps<{ column: NavColumn; locale: Locale; currentPath: string }>()
+</script>
+
+<template>
+  <li class="flex flex-col space-y-4">
+    <p class="font-formula text-primary-warm-gray pl-2 text-sm font-medium">
+      {{ column.header }}
+    </p>
+    <ul class="flex flex-col">
+      <li v-for="item in column.items" :key="item.label">
+        <NavigationMenuLink
+          as-child
+          :active="isHrefActive(item.href, currentPath)"
+          class="hover:bg-transparency-white-t4"
+        >
+          <a
+            :href="item.href"
+            :target="item.external ? '_blank' : undefined"
+            :rel="item.external ? 'noopener noreferrer' : undefined"
+            class="whitespace-nowrap"
+          >
+            <NavLinkContent :item="item" :locale="locale" />
+          </a>
+        </NavigationMenuLink>
+      </li>
+    </ul>
+  </li>
+</template>

apps/website/src/components/common/HeaderMain/NavFeaturedCard.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import ButtonPill from '@/components/ui/button-pill/ButtonPill.vue'
+
+import type { NavFeatured } from '../../../data/mainNavigation'
+
+defineProps<{ featured: NavFeatured }>()
+</script>
+
+<template>
+  <li class="shrink-0">
+    <a
+      :href="featured.cta.href"
+      :aria-label="featured.cta.ariaLabel"
+      class="group/pill-trigger relative block"
+    >
+      <img
+        class="aspect-4/3 w-62 max-w-none rounded-xl"
+        :src="featured.imageSrc"
+        :alt="featured.imageAlt ?? ''"
+      />
+      <p class="mt-4 font-extrabold uppercase">
+        {{ featured.title }}
+      </p>
+      <div class="mt-1">
+        <ButtonPill as="span" icon-position="left" variant="ghost">
+          {{ featured.cta.label }}
+        </ButtonPill>
+      </div>
+    </a>
+  </li>
+</template>

apps/website/src/components/common/HeaderMain/NavLinkContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/badge/Badge.vue'
+import { ArrowUpRight } from '@lucide/vue'
+
+import type { NavColumnItem } from '../../../data/mainNavigation'
+import type { Locale } from '../../../i18n/translations'
+import { t } from '../../../i18n/translations'
+
+defineProps<{ item: NavColumnItem; locale: Locale }>()
+</script>
+
+<template>
+  <span class="flex items-center gap-2">
+    <span class="ppformula-text-center">{{ item.label }}</span>
+    <Badge v-if="item.badge" size="xs" variant="accent">
+      {{ t('nav.badgeNew', locale) }}
+    </Badge>
+    <ArrowUpRight
+      v-if="item.external"
+      class="text-primary-comfy-yellow size-4"
+    />
+  </span>
+</template>

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

@@ -1,82 +0,0 @@
-<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/MobileMenu.vue

@@ -1,186 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-import { t } from '../../i18n/translations'
-import { lockScroll, unlockScroll } from '../../composables/scrollLock'
-import BrandButton from './BrandButton.vue'
-import type { NavLink } from './NavDesktopLink.vue'
-
-interface CtaLink {
-  label: string
-  href: string
-  primary: boolean
-}
-
-const {
-  open = false,
-  navigating = false,
-  links = [],
-  ctaLinks = [],
-  locale = 'en'
-} = defineProps<{
-  open?: boolean
-  navigating?: boolean
-  links?: NavLink[]
-  ctaLinks?: CtaLink[]
-  locale?: Locale
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const menuRef = ref<HTMLElement | undefined>()
-const activeSection = ref<string | null>(null)
-
-const activeSectionItems = computed(
-  () => links.find((l) => l.label === activeSection.value)?.items
-)
-
-function onNavigate() {
-  activeSection.value = null
-  emit('close')
-}
-
-const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-
-function trapFocus(e: KeyboardEvent) {
-  if (e.key !== 'Tab') return
-  const menu = menuRef.value
-  if (!menu) return
-  const focusable = [...menu.querySelectorAll<HTMLElement>(FOCUSABLE)]
-  if (!focusable.length) return
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-  if (e.shiftKey && document.activeElement === first) {
-    e.preventDefault()
-    last.focus()
-  } else if (!e.shiftKey && document.activeElement === last) {
-    e.preventDefault()
-    first.focus()
-  }
-}
-
-watch(
-  () => open,
-  async (isOpen) => {
-    if (isOpen) {
-      lockScroll()
-      await nextTick()
-      const menu = menuRef.value
-      const firstFocusable = menu?.querySelector<HTMLElement>(FOCUSABLE)
-      firstFocusable?.focus()
-      menu?.addEventListener('keydown', trapFocus)
-    } else {
-      menuRef.value?.removeEventListener('keydown', trapFocus)
-      unlockScroll({ skipRestore: navigating })
-    }
-  }
-)
-
-onUnmounted(() => {
-  menuRef.value?.removeEventListener('keydown', trapFocus)
-  if (open) unlockScroll({ skipRestore: true })
-})
-</script>
-
-<template>
-  <div
-    v-show="open"
-    id="site-mobile-menu"
-    ref="menuRef"
-    role="dialog"
-    aria-modal="true"
-    :inert="!open"
-    :aria-label="t('nav.menu', locale)"
-    class="bg-primary-comfy-ink fixed inset-0 z-40 flex flex-col px-6 pt-24 pb-8 lg:hidden"
-  >
-    <!-- Main list -->
-    <template v-if="!activeSection">
-      <div class="flex flex-1 flex-col gap-8">
-        <template v-for="link in links" :key="link.label">
-          <button
-            v-if="link.items"
-            class="text-primary-comfy-canvas text-left text-3xl font-medium"
-            @click="activeSection = link.label"
-          >
-            {{ link.label }}
-          </button>
-          <a
-            v-else
-            :href="link.href"
-            class="text-primary-comfy-canvas text-3xl font-medium"
-            @click="onNavigate"
-          >
-            {{ link.label }}
-          </a>
-        </template>
-      </div>
-
-      <div class="flex flex-col gap-3">
-        <BrandButton
-          v-for="cta in ctaLinks"
-          :key="cta.href"
-          :href="cta.href"
-          :variant="cta.primary ? 'solid' : 'outline'"
-          size="lg"
-          class="w-full"
-        >
-          {{ cta.label }}
-        </BrandButton>
-      </div>
-    </template>
-
-    <!-- Drill-down sub-menu -->
-    <template v-else>
-      <div class="flex flex-1 flex-col">
-        <button
-          class="text-primary-comfy-yellow mb-6 flex items-center gap-2 text-sm font-bold tracking-wide uppercase"
-          @click="activeSection = null"
-        >
-          <span
-            aria-hidden="true"
-            class="bg-primary-comfy-yellow size-3 -translate-y-px rotate-180"
-            style="
-              mask: url('/icons/arrow-right.svg') center / contain no-repeat;
-            "
-          />
-          {{ t('nav.back', locale) }}
-        </button>
-
-        <p class="text-primary-warm-gray mb-8 text-sm font-bold uppercase">
-          {{ activeSection }}
-        </p>
-
-        <div class="flex flex-col gap-8 pl-2">
-          <a
-            v-for="item in activeSectionItems"
-            :key="item.href"
-            :href="item.href"
-            class="text-primary-comfy-canvas flex items-center gap-3 text-3xl font-medium"
-            @click="onNavigate"
-          >
-            {{ item.label }}
-            <span
-              v-if="item.badge"
-              class="bg-primary-comfy-yellow font-formula-narrow text-primary-comfy-ink -skew-x-12 rounded-sm px-1 py-0.5 text-xs font-semibold"
-            >
-              <span class="ppformula-text-center inline-block skew-x-12">{{
-                item.badge
-              }}</span>
-            </span>
-            <img
-              v-if="item.external"
-              src="/icons/arrow-up-right.svg"
-              alt=""
-              class="size-5"
-              aria-hidden="true"
-            />
-          </a>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>

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

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-type NavDropdownItem = {
-  label: string
-  href: string
-  badge?: string
-  external?: boolean
-}
-
-export type NavLink = {
-  label: string
-  href?: string
-  items?: NavDropdownItem[]
-}
-
-const {
-  link,
-  currentPath,
-  isOpen = false
-} = defineProps<{
-  link: NavLink
-  currentPath: string
-  isOpen?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'open', label: string): void
-  (e: 'close'): void
-  (e: 'toggle', label: string): void
-}>()
-</script>
-
-<template>
-  <div
-    class="relative"
-    @mouseenter="link.items?.length && emit('open', link.label)"
-    @mouseleave="emit('close')"
-    @focusin="link.items?.length && emit('open', link.label)"
-    @focusout="emit('close')"
-  >
-    <button
-      v-if="link.items?.length"
-      type="button"
-      :class="
-        cn(
-          'group flex cursor-pointer items-center gap-1.5 py-3 text-sm font-bold tracking-wide uppercase transition-colors',
-          link.items.some((item) => currentPath === item.href)
-            ? 'text-primary-comfy-yellow'
-            : 'text-primary-comfy-canvas hover:text-primary-warm-gray'
-        )
-      "
-      aria-haspopup="true"
-      :aria-expanded="isOpen"
-      @click="emit('toggle', link.label)"
-    >
-      {{ link.label }}
-      <span
-        aria-hidden="true"
-        :class="
-          cn(
-            'text-base leading-none transition-colors',
-            link.items.some((item) => currentPath === item.href)
-              ? 'text-primary-comfy-yellow'
-              : 'text-primary-comfy-canvas group-hover:text-primary-warm-gray'
-          )
-        "
-      >
-        ▾
-      </span>
-    </button>
-
-    <a
-      v-else
-      :href="link.href"
-      :aria-current="currentPath === link.href ? 'page' : undefined"
-      :class="
-        cn(
-          'flex items-center gap-1.5 py-3 text-sm font-bold tracking-wide uppercase transition-colors',
-          currentPath === link.href
-            ? 'text-primary-comfy-yellow'
-            : 'text-primary-comfy-canvas hover:text-primary-warm-gray'
-        )
-      "
-    >
-      {{ link.label }}
-    </a>
-
-    <div
-      v-if="link.items?.length"
-      v-show="isOpen"
-      data-testid="nav-dropdown"
-      class="bg-transparency-ink-t80 absolute top-full left-0 w-max rounded-xl p-2 shadow-lg backdrop-blur-2xl backdrop-saturate-150"
-    >
-      <a
-        v-for="item in link.items"
-        :key="item.href"
-        :href="item.href"
-        :aria-current="currentPath === item.href ? 'page' : undefined"
-        :class="
-          cn(
-            'flex items-center gap-2 rounded-sm p-2 text-xs font-medium tracking-wide transition-colors',
-            currentPath === item.href
-              ? 'text-primary-comfy-yellow'
-              : 'text-primary-comfy-canvas hover:bg-transparency-white-t4 hover:text-white'
-          )
-        "
-        @click="emit('close')"
-      >
-        {{ item.label }}
-        <span
-          v-if="item.badge"
-          class="bg-primary-comfy-yellow font-formula-narrow text-primary-comfy-ink -skew-x-12 rounded-sm px-1 py-0.5 text-[9px]/3 leading-none font-bold"
-        >
-          <span class="ppformula-text-center inline-block skew-x-12">{{
-            item.badge
-          }}</span>
-        </span>
-        <img
-          v-if="item.external"
-          src="/icons/arrow-up-right.svg"
-          alt=""
-          class="ml-auto size-4"
-          aria-hidden="true"
-        />
-      </a>
-    </div>
-  </div>
-</template>

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

@@ -1,84 +0,0 @@
-<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/ProductCard.stories.ts

@@ -12,9 +12,9 @@ const meta: Meta<typeof ProductCard> = {
     })
   ],
   args: {
-    title: 'Comfy\nLocal',
+    title: 'Comfy\nDesktop',
     description: 'Run ComfyUI on your own hardware.',
-    cta: 'SEE LOCAL FEATURES',
+    cta: 'SEE DESKTOP FEATURES',
     href: '#',
     bg: 'bg-primary-warm-gray'
   }
@@ -31,9 +31,9 @@ export const AllCards: Story = {
     template: `
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <ProductCard
-          title="Comfy\nLocal"
+          title="Comfy\nDesktop"
           description="Run ComfyUI on your own hardware."
-          cta="SEE LOCAL FEATURES"
+          cta="SEE DESKTOP FEATURES"
           href="#"
           bg="bg-primary-warm-gray"
         />

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

@@ -1,262 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-import {
-  breakpointsTailwind,
-  useBreakpoints,
-  useEventListener,
-  whenever
-} from '@vueuse/core'
-import { nextTick, onMounted, ref } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-import { t } from '../../i18n/translations'
-import { externalLinks, getRoutes } from '../../config/routes'
-import BrandButton from './BrandButton.vue'
-import GitHubStarBadge from './GitHubStarBadge.vue'
-import MobileMenu from './MobileMenu.vue'
-import NavDesktopLink from './NavDesktopLink.vue'
-import type { NavLink } from './NavDesktopLink.vue'
-
-const { locale = 'en', githubStars = '' } = defineProps<{
-  locale?: Locale
-  githubStars?: string
-}>()
-const routes = getRoutes(locale)
-
-const navLinks: NavLink[] = [
-  {
-    label: t('nav.products', locale),
-    items: [
-      { label: t('nav.comfyLocal', locale), href: routes.download },
-      { label: t('nav.comfyCloud', locale), href: routes.cloud },
-      {
-        label: t('nav.comfyApi', locale),
-        href: routes.api,
-        badge: t('nav.badgeNew', locale)
-      },
-      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise }
-    ]
-  },
-  { label: t('nav.pricing', locale), href: routes.cloudPricing },
-  {
-    label: t('nav.community', locale),
-    items: [
-      {
-        label: t('nav.comfyHub', locale),
-        href: externalLinks.workflows,
-        badge: t('nav.badgeNew', locale)
-      },
-      { label: t('nav.gallery', locale), href: routes.gallery }
-    ]
-  },
-  {
-    label: t('nav.resources', locale),
-    items: [
-      { label: t('nav.learning', locale), href: routes.learning },
-      {
-        label: t('nav.blogs', locale),
-        href: externalLinks.blog,
-        external: true
-      },
-      {
-        label: t('nav.github', locale),
-        href: externalLinks.github,
-        external: true
-      },
-      {
-        label: t('nav.discord', locale),
-        href: externalLinks.discord,
-        external: true
-      },
-      {
-        label: t('nav.docs', locale),
-        href: externalLinks.docs,
-        external: true
-      },
-      {
-        label: t('nav.youtube', locale),
-        href: externalLinks.youtube,
-        external: true
-      }
-    ]
-  },
-  {
-    label: t('nav.company', locale),
-    items: [
-      { label: t('nav.aboutUs', locale), href: routes.about },
-      { label: t('nav.careers', locale), href: routes.careers },
-      { label: t('nav.customerStories', locale), href: routes.customers }
-    ]
-  }
-]
-
-const ctaButtons = [
-  {
-    label: t('nav.downloadLocal', locale),
-    prefix: 'DOWNLOAD',
-    core: 'DESKTOP',
-    href: routes.download,
-    primary: false
-  },
-  {
-    label: t('nav.launchCloud', locale),
-    prefix: 'LAUNCH',
-    core: 'CLOUD',
-    href: externalLinks.cloud,
-    primary: true
-  }
-]
-
-const currentPath = ref('')
-const openDesktopDropdown = ref<string | null>(null)
-const mobileMenuOpen = ref(false)
-const isNavigating = ref(false)
-const hamburgerRef = ref<HTMLButtonElement | undefined>()
-
-function closeMobileMenu() {
-  mobileMenuOpen.value = false
-  hamburgerRef.value?.focus()
-}
-
-function toggleDesktopDropdown(label: string) {
-  openDesktopDropdown.value = openDesktopDropdown.value === label ? null : label
-}
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
-    closeMobileMenu()
-    openDesktopDropdown.value = null
-  }
-}
-
-async function onNavigate() {
-  isNavigating.value = true
-  closeMobileMenu()
-  openDesktopDropdown.value = null
-  currentPath.value = window.location.pathname
-  await nextTick()
-  isNavigating.value = false
-}
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isDesktop = breakpoints.greaterOrEqual('lg')
-
-whenever(isDesktop, () => {
-  mobileMenuOpen.value = false
-  // Don't focus hamburger when transitioning to desktop — it's hidden
-})
-
-onMounted(() => {
-  currentPath.value = window.location.pathname
-  useEventListener(document, 'keydown', onKeydown)
-  useEventListener(document, 'astro:after-swap', onNavigate)
-})
-</script>
-
-<template>
-  <MobileMenu
-    :open="mobileMenuOpen"
-    :navigating="isNavigating"
-    :links="navLinks"
-    :cta-links="ctaButtons"
-    :locale="locale"
-    @close="closeMobileMenu"
-  />
-
-  <nav
-    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
-      :href="routes.home"
-      class="inline-grid h-10 shrink-0 grid-cols-1 grid-rows-1 transition-[width]"
-      aria-label="Comfy home"
-    >
-      <img
-        src="/icons/logomark.svg"
-        alt="Comfy"
-        class="col-span-full row-span-full h-8"
-      />
-      <div
-        class="relative col-span-full row-span-full h-10 w-0 overflow-clip transition-[width] xl:w-36"
-      >
-        <img
-          src="/icons/logo.svg"
-          alt="Comfy"
-          class="absolute top-0 left-0 h-10 w-36 max-w-none object-contain object-left"
-        />
-      </div>
-    </a>
-
-    <!-- Desktop nav links -->
-    <div
-      data-testid="desktop-nav-links"
-      class="hidden items-center gap-[clamp(1rem,2.5vw,2.5rem)] lg:flex"
-    >
-      <NavDesktopLink
-        v-for="link in navLinks"
-        :key="link.label"
-        :link="link"
-        :current-path="currentPath"
-        :is-open="openDesktopDropdown === link.label"
-        @open="openDesktopDropdown = $event"
-        @close="openDesktopDropdown = null"
-        @toggle="toggleDesktopDropdown"
-      />
-    </div>
-
-    <!-- Desktop CTA buttons -->
-    <div
-      data-testid="desktop-nav-cta"
-      class="hidden shrink-0 items-center gap-2 lg:flex"
-    >
-      <GitHubStarBadge v-if="githubStars" :stars="githubStars" />
-      <BrandButton
-        v-for="cta in ctaButtons"
-        :key="cta.href"
-        :href="cta.href"
-        :variant="cta.primary ? 'solid' : 'outline'"
-        size="nav"
-        :aria-label="cta.label"
-      >
-        <span
-          class="inline-block max-w-0 overflow-hidden align-bottom transition-[max-width] duration-300 ease-in-out xl:max-w-28"
-          aria-hidden="true"
-          >{{ cta.prefix }}&nbsp;</span
-        >{{ cta.core }}
-      </BrandButton>
-    </div>
-
-    <!-- Mobile hamburger -->
-    <button
-      ref="hamburgerRef"
-      :class="
-        cn(
-          'flex size-10 items-center justify-center rounded-xl lg:hidden',
-          mobileMenuOpen
-            ? 'border-primary-comfy-yellow border-2 bg-transparent'
-            : 'bg-primary-comfy-yellow'
-        )
-      "
-      :aria-label="t('nav.toggleMenu', locale)"
-      aria-controls="site-mobile-menu"
-      :aria-expanded="mobileMenuOpen"
-      @click="mobileMenuOpen = !mobileMenuOpen"
-    >
-      <img
-        v-if="!mobileMenuOpen"
-        src="/icons/breadthumb.svg"
-        alt=""
-        class="h-3"
-        aria-hidden="true"
-      />
-      <img
-        v-else
-        src="/icons/close.svg"
-        alt=""
-        class="size-5"
-        aria-hidden="true"
-      />
-    </button>
-  </nav>
-</template>

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

@@ -15,7 +15,7 @@ import { t } from '../../i18n/translations'
 import type { Locale } from '../../i18n/translations'
 import PlayPauseButton from './PlayPauseButton.vue'
 
-type VideoTrack = {
+export type VideoTrack = {
   src: string
   kind: 'subtitles' | 'captions' | 'descriptions'
   srclang: string
@@ -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[]
+  tracks?: readonly 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

@@ -1,17 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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/customers/HeroSection.vue

@@ -58,13 +58,13 @@ function handleLogoLoad() {
         </SectionLabel>
         <h1
           ref="headingRef"
-          class="text-primary-comfy-canvas mt-4 text-4xl/tight font-light lg:text-6xl"
+          class="mt-4 text-4xl/tight font-light text-primary-comfy-canvas lg:text-6xl"
         >
           {{ t('customers.hero.heading', locale) }}
         </h1>
         <p
           ref="bodyRef"
-          class="text-primary-comfy-canvas mt-6 max-w-lg text-base"
+          class="mt-6 max-w-lg text-base text-primary-comfy-canvas"
         >
           {{ t('customers.hero.body', locale) }}
         </p>
@@ -72,7 +72,12 @@ function handleLogoLoad() {
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
+
+    <div
+      id="hero-video"
+      ref="videoRef"
+      class="max-w-9xl mx-auto scroll-mt-24 px-4 pb-20 lg:scroll-mt-36 lg:px-20 lg:pb-40"
+    >
       <VideoPlayer
         src="https://media.comfy.org/website/customers/blackmath/video.webm"
         poster="https://media.comfy.org/website/customers/blackmath/poster.webp"

apps/website/src/components/customers/StorySection.vue

@@ -35,7 +35,7 @@ const prefix = locale === 'zh-CN' ? '/zh-CN' : ''
             {{ t(story.category, locale) }}
           </span>
           <h3
-            class="text-primary-comfy-canvas mt-2 text-lg/snug font-light lg:text-xl/snug"
+            class="mt-2 text-lg/snug font-light text-primary-comfy-canvas lg:text-xl/snug"
           >
             {{ t(story.title, locale) }}
           </h3>

apps/website/src/components/customers/WhatsNextSection.vue

@@ -19,7 +19,7 @@ const {
 
 <template>
   <section class="px-4 py-16 lg:px-20 lg:py-24">
-    <h2 class="text-primary-comfy-canvas mb-10 text-2xl font-light lg:text-3xl">
+    <h2 class="mb-10 text-2xl font-light text-primary-comfy-canvas lg:text-3xl">
       {{ t('customers.story.whatsNext' as TranslationKey, locale) }}
     </h2>
 
@@ -35,18 +35,18 @@ const {
       </a>
 
       <div class="flex flex-col gap-6">
-        <h3 class="text-primary-comfy-canvas text-xl font-light lg:text-2xl">
+        <h3 class="text-xl font-light text-primary-comfy-canvas lg:text-2xl">
           {{ title }}
         </h3>
 
         <a :href="href" class="flex items-center gap-3">
           <span
-            class="bg-primary-comfy-yellow text-primary-comfy-ink flex size-10 items-center justify-center rounded-full"
+            class="bg-primary-comfy-yellow flex size-10 items-center justify-center rounded-full text-primary-comfy-ink"
           >
             <span class="text-lg font-bold">›</span>
           </span>
           <span
-            class="text-primary-comfy-canvas ppformula-text-center text-sm font-semibold tracking-wider uppercase"
+            class="ppformula-text-center text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
           >
             {{ t('customers.story.viewArticle' as TranslationKey, locale) }}
           </span>

apps/website/src/components/demos/DemoNavSection.vue

@@ -21,7 +21,7 @@ const nextHref = `${localePrefix}/demos/${nextSlug}`
 
 <template>
   <section class="px-4 py-16 lg:px-20 lg:py-24">
-    <h2 class="text-primary-comfy-canvas mb-10 text-2xl font-light lg:text-3xl">
+    <h2 class="mb-10 text-2xl font-light text-primary-comfy-canvas lg:text-3xl">
       {{ t('demos.nav.nextDemo' as TranslationKey, locale) }}
     </h2>
 
@@ -37,18 +37,18 @@ const nextHref = `${localePrefix}/demos/${nextSlug}`
       </a>
 
       <div class="flex flex-col gap-6">
-        <h3 class="text-primary-comfy-canvas text-xl font-light lg:text-2xl">
+        <h3 class="text-xl font-light text-primary-comfy-canvas lg:text-2xl">
           {{ nextTitle }}
         </h3>
 
         <a :href="nextHref" class="flex items-center gap-3">
           <span
-            class="bg-primary-comfy-yellow text-primary-comfy-ink flex size-10 items-center justify-center rounded-full"
+            class="bg-primary-comfy-yellow flex size-10 items-center justify-center rounded-full text-primary-comfy-ink"
           >
             <span class="text-lg font-bold">›</span>
           </span>
           <span
-            class="text-primary-comfy-canvas ppformula-text-center text-sm font-semibold tracking-wider uppercase"
+            class="ppformula-text-center text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
           >
             {{ t('demos.nav.viewDemo' as TranslationKey, locale) }}
           </span>

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/BreadthumbIcon.vue

@@ -0,0 +1,20 @@
+<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 20 12"
+    fill="none"
+    aria-hidden="true"
+    :class="$props.class"
+  >
+    <path
+      d="M20 1C20 1.55228 19.5523 2 19 2H17.5C16.6716 2 16 2.67157 16 3.5C16 4.32843 16.6716 5 17.5 5H19C19.5523 5 20 5.44772 20 6C20 6.55228 19.5523 7 19 7H7.5C6.67157 7 6 7.67157 6 8.5C6 9.32843 6.67157 10 7.5 10H19C19.5523 10 20 10.4477 20 11C20 11.5523 19.5523 12 19 12H1C0.447715 12 0 11.5523 0 11C0 10.4477 0.447715 10 1 10H2.5C3.32843 10 4 9.32843 4 8.5C4 7.67157 3.32843 7 2.5 7H1C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5H12.5C13.3284 5 14 4.32843 14 3.5C14 2.67157 13.3284 2 12.5 2H1C0.447716 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H19C19.5523 0 20 0.447715 20 1Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

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

@@ -2,7 +2,7 @@
 import type { Locale } from '../../i18n/translations'
 
 import { t } from '../../i18n/translations'
-import Badge from '../common/Badge.vue'
+import Badge from '../ui/badge/Badge.vue'
 import BrandButton from '../common/BrandButton.vue'
 import VideoPlayer from '../common/VideoPlayer.vue'
 
@@ -21,7 +21,7 @@ const demoVideoPoster =
       <div class="flex flex-col gap-8">
         <div>
           <h2
-            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
+            class="text-3xl leading-[110%] font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
           >
             {{ t('learning.featured.title', locale) }}
           </h2>
@@ -31,7 +31,7 @@ const demoVideoPoster =
         </div>
 
         <p
-          class="text-primary-comfy-canvas max-w-md text-sm/relaxed lg:text-base"
+          class="max-w-md text-sm/relaxed text-primary-comfy-canvas lg:text-base"
         >
           {{ t('learning.featured.description', locale) }}
         </p>

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+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
@@ -15,21 +16,6 @@ const { tutorial, locale = 'en' } = defineProps<{
 const emit = defineEmits<{ close: [] }>()
 
 const dialogRef = useTemplateRef<HTMLDialogElement>('dialogRef')
-const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
-
-const playFromStart = () => {
-  const video = videoRef.value
-  if (!video) return
-  video.currentTime = 0
-  void video.play().catch(() => {})
-}
-
-watch(
-  () => tutorial.id,
-  () => {
-    playFromStart()
-  }
-)
 
 function handleBackdropClick(e: MouseEvent) {
   if (e.target === e.currentTarget) emit('close')
@@ -42,7 +28,6 @@ function handleKeydown(e: KeyboardEvent) {
 onMounted(() => {
   lockScroll()
   dialogRef.value?.showModal()
-  playFromStart()
 })
 
 onUnmounted(() => {
@@ -62,31 +47,31 @@ onUnmounted(() => {
     >
       <button
         :aria-label="t('gallery.detail.close', locale)"
-        class="border-primary-comfy-yellow bg-primary-comfy-ink 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 transition-colors lg:right-26"
+        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 group-hover:bg-primary-comfy-ink size-5 transition-colors"
+          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 bg-primary-comfy-ink rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 p-3 lg:p-4"
+        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"
       >
-        <video
-          ref="videoRef"
+        <VideoPlayer
+          :key="tutorial.id"
+          :locale
           :src="tutorial.videoSrc"
           :poster="tutorial.poster"
-          class="aspect-video w-full rounded-3xl object-contain lg:rounded-4xl"
-          controls
+          :tracks="tutorial.caption"
           autoplay
-          playsinline
-        ></video>
+          class="w-full"
+        />
       </div>
 
       <h2
-        class="text-primary-comfy-canvas mt-6 text-center text-lg font-medium lg:text-xl"
+        class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
       >
         {{ t('learning.tutorials.titlePrefix', locale) }}
         {{ tutorial.title[locale] }}

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

@@ -8,8 +8,8 @@ import {
   learningTutorials
 } from '../../data/learningTutorials'
 import { t } from '../../i18n/translations'
-import Badge from '../common/Badge.vue'
-import MaskRevealButton from '../common/MaskRevealButton.vue'
+import Badge from '../ui/badge/Badge.vue'
+import { ButtonMask } from '../ui/button-mask'
 import TutorialDetailDialog from './TutorialDetailDialog.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
@@ -22,7 +22,7 @@ const activeTutorial = () =>
 <template>
   <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
     <h2
-      class="text-primary-comfy-canvas mb-12 text-4xl font-light tracking-tight lg:mb-16 lg:text-6xl"
+      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>
@@ -71,18 +71,19 @@ const activeTutorial = () =>
         <div class="flex flex-col space-y-3 p-4">
           <div class="flex items-center justify-between gap-4">
             <h3
-              class="text-primary-comfy-canvas text-sm/snug lg:text-base/snug"
+              class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
             >
-              {{ t('learning.tutorials.titlePrefix', locale) }}<wbr />
+              {{ t('learning.tutorials.titlePrefix', locale) }}<br />
               {{ tutorial.title[locale] }}
             </h3>
-            <MaskRevealButton
+            <ButtonMask
               v-if="tutorial.href"
+              as="a"
               :href="tutorial.href"
               icon-position="right"
               class="shrink-0"
               variant="ghost"
-              size="sm"
+              size="default"
             >
               {{ t('cta.tryWorkflow', locale) }}
               <template #icon>
@@ -98,7 +99,7 @@ const activeTutorial = () =>
                   <polyline points="9 6 15 12 9 18" />
                 </svg>
               </template>
-            </MaskRevealButton>
+            </ButtonMask>
           </div>
 
           <ul class="flex flex-wrap gap-2">

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/PriceSection.vue

@@ -68,7 +68,8 @@ const plans: PricingPlan[] = [
       : undefined,
     features: [
       { text: 'pricing.plan.standard.feature1' },
-      { text: 'pricing.plan.standard.feature2' }
+      { text: 'pricing.plan.standard.feature2' },
+      { text: 'pricing.plan.standard.feature3' }
     ]
   },
   {
@@ -122,11 +123,11 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
     <!-- Header -->
     <div class="mx-auto mb-8 max-w-3xl text-center lg:mb-10">
       <h1
-        class="text-primary-comfy-canvas font-formula text-4xl font-light lg:text-5xl"
+        class="font-formula text-4xl font-light text-primary-comfy-canvas lg:text-5xl"
       >
         {{ t('pricing.title', locale) }}
       </h1>
-      <p class="text-primary-comfy-canvas mt-3 text-base">
+      <p class="mt-3 text-base text-primary-comfy-canvas">
         {{ t('pricing.subtitle', locale) }}
       </p>
     </div>
@@ -156,7 +157,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
               aria-hidden="true"
             />
             <span
-              class="bg-primary-comfy-yellow font-formula-narrow text-primary-comfy-ink flex items-center px-2 text-sm font-bold tracking-wider"
+              class="bg-primary-comfy-yellow font-formula-narrow flex items-center px-2 text-sm font-bold tracking-wider text-primary-comfy-ink"
             >
               <span class="ppformula-text-center">
                 {{ t('pricing.badge.popular', locale) }}
@@ -172,18 +173,18 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
         </div>
 
         <!-- Summary -->
-        <p class="text-primary-comfy-canvas px-6 text-sm">
+        <p class="px-6 text-sm text-primary-comfy-canvas">
           {{ t(plan.summaryKey, locale) }}
         </p>
 
         <!-- Price -->
         <div v-if="plan.priceKey" class="flex items-baseline gap-1 px-6 pt-2">
           <span
-            class="text-primary-comfy-canvas font-formula text-5xl font-light"
+            class="font-formula text-5xl font-light text-primary-comfy-canvas"
           >
             {{ t(plan.priceKey, locale) }}
           </span>
-          <span class="text-primary-comfy-canvas text-sm">
+          <span class="text-sm text-primary-comfy-canvas">
             {{ t('pricing.plan.period', locale) }}
           </span>
         </div>
@@ -192,7 +193,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
         <!-- Credits -->
         <p
           v-if="plan.creditsKey"
-          class="text-primary-comfy-canvas px-6 text-sm"
+          class="px-6 text-sm text-primary-comfy-canvas"
         >
           {{ t(plan.creditsKey, locale) }}
         </p>
@@ -201,7 +202,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
         <!-- Estimate -->
         <p
           v-if="plan.estimateKey"
-          class="text-primary-comfy-canvas/80 px-6 text-xs"
+          class="px-6 text-xs text-primary-comfy-canvas/80"
         >
           {{ t(plan.estimateKey, locale) }}
         </p>
@@ -211,17 +212,10 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
         <div v-if="plan.features.length" class="px-6 py-3">
           <p
             v-if="plan.featureIntroKey"
-            class="text-primary-comfy-canvas mb-2 text-sm font-semibold"
+            class="mb-2 text-sm font-semibold text-primary-comfy-canvas"
           >
             {{ t(plan.featureIntroKey, locale) }}
           </p>
-          <p
-            v-else
-            class="text-primary-comfy-canvas mb-2 text-sm font-semibold"
-            aria-hidden="true"
-          >
-            &nbsp;
-          </p>
           <ul class="space-y-2">
             <li
               v-for="feature in plan.features"
@@ -229,7 +223,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
               class="flex items-start gap-2"
             >
               <span class="text-primary-comfy-yellow mt-0.5 text-sm">✓</span>
-              <span class="text-primary-comfy-canvas text-sm">
+              <span class="text-sm text-primary-comfy-canvas">
                 {{ t(feature.text, locale) }}
               </span>
             </li>
@@ -269,7 +263,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
                 aria-hidden="true"
               />
               <span
-                class="bg-primary-comfy-yellow text-primary-comfy-ink flex items-center px-2 text-[10px] font-bold tracking-wider"
+                class="bg-primary-comfy-yellow flex items-center px-2 text-[10px] font-bold tracking-wider text-primary-comfy-ink"
               >
                 <span class="ppformula-text-center">
                   {{ t('pricing.badge.popular', locale) }}
@@ -287,13 +281,13 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
           <!-- Enterprise heading -->
           <h2
             v-if="plan.isEnterprise"
-            class="text-primary-comfy-canvas mt-3 text-2xl font-light"
+            class="mt-3 text-2xl font-light text-primary-comfy-canvas"
           >
             {{ t('pricing.enterprise.heading', locale) }}
           </h2>
 
           <!-- Summary -->
-          <p class="text-primary-comfy-canvas mt-2 text-sm">
+          <p class="mt-2 text-sm text-primary-comfy-canvas">
             {{ t(plan.summaryKey, locale) }}
           </p>
 
@@ -301,25 +295,25 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
           <template v-if="plan.priceKey">
             <div class="mt-6 flex items-baseline gap-1">
               <span
-                class="text-primary-comfy-canvas font-formula text-5xl font-light"
+                class="font-formula text-5xl font-light text-primary-comfy-canvas"
               >
                 {{ t(plan.priceKey, locale) }}
               </span>
-              <span class="text-primary-comfy-canvas/55 text-sm">
+              <span class="text-sm text-primary-comfy-canvas/55">
                 {{ t('pricing.plan.period', locale) }}
               </span>
             </div>
 
             <p
               v-if="plan.creditsKey"
-              class="text-primary-comfy-canvas mt-4 text-xs font-medium"
+              class="mt-4 text-xs font-medium text-primary-comfy-canvas"
             >
               {{ t(plan.creditsKey, locale) }}
             </p>
 
             <p
               v-if="plan.estimateKey"
-              class="text-primary-comfy-canvas mt-2 text-xs"
+              class="mt-2 text-xs text-primary-comfy-canvas"
             >
               {{ t(plan.estimateKey, locale) }}
             </p>
@@ -368,7 +362,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
     >
       <!-- Left side -->
       <div
-        class="bg-primary-comfy-ink rounded-4.5xl flex w-full flex-col items-start justify-between gap-8 p-8"
+        class="rounded-4.5xl flex w-full flex-col items-start justify-between gap-8 bg-primary-comfy-ink p-8"
       >
         <div>
           <span
@@ -377,11 +371,11 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
             {{ t(enterprisePlan.labelKey, locale) }}
           </span>
           <h2
-            class="text-primary-comfy-canvas mt-3 text-2xl font-light lg:text-3xl"
+            class="mt-3 text-2xl font-light text-primary-comfy-canvas lg:text-3xl"
           >
             {{ t('pricing.enterprise.heading', locale) }}
           </h2>
-          <p class="text-primary-comfy-canvas mt-3 text-sm">
+          <p class="mt-3 text-sm text-primary-comfy-canvas">
             {{ t(enterprisePlan.summaryKey, locale) }}
           </p>
         </div>
@@ -392,7 +386,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
     </div>
 
     <!-- Footnote -->
-    <p class="text-primary-comfy-canvas/70 mt-12 text-xs">
+    <p class="mt-12 text-xs text-primary-comfy-canvas/70">
       {{ t('pricing.footnote', locale) }}
     </p>
   </section>

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 }>()
 
@@ -53,7 +54,11 @@ const features: IncludedFeature[] = [
   },
   {
     titleKey: 'pricing.included.feature11.title',
-    descriptionKey: 'pricing.included.feature11.description',
+    descriptionKey: 'pricing.included.feature11.description'
+  },
+  {
+    titleKey: 'pricing.included.feature12.title',
+    descriptionKey: 'pricing.included.feature12.description',
     isComingSoon: true
   }
 ]
@@ -64,10 +69,10 @@ const features: IncludedFeature[] = [
     <div class="mx-auto w-full lg:grid lg:grid-cols-[280px_1fr] lg:gap-x-16">
       <!-- Heading -->
       <div
-        class="bg-primary-comfy-ink sticky top-20 mb-10 py-2 lg:top-28 lg:mb-0 lg:self-start"
+        class="sticky top-20 mb-10 bg-primary-comfy-ink py-2 lg:top-28 lg:mb-0 lg:self-start"
       >
         <h2
-          class="text-primary-comfy-canvas text-3xl/tight font-light whitespace-pre-line"
+          class="text-3xl/tight font-light whitespace-pre-line text-primary-comfy-canvas"
         >
           {{ t('pricing.included.heading', locale) }}
         </h2>
@@ -80,7 +85,7 @@ const features: IncludedFeature[] = [
           :key="feature.titleKey"
           :class="
             index < features.length - 1
-              ? 'border-primary-comfy-canvas/15 border-b border-solid'
+              ? 'border-b border-solid border-primary-comfy-canvas/15'
               : ''
           "
           class="py-8 first:pt-0 lg:grid lg:grid-cols-[200px_1fr] lg:gap-x-10"
@@ -94,21 +99,18 @@ 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">
+            <p class="text-sm font-medium text-primary-comfy-canvas">
               {{ t(feature.titleKey, locale) }}
             </p>
           </div>
 
           <!-- Description -->
           <p
-            class="text-primary-comfy-canvas/55 mt-3 text-sm/relaxed lg:mt-0"
+            class="mt-3 text-sm/relaxed text-primary-comfy-canvas/55 lg:mt-0"
             v-html="t(feature.descriptionKey, locale)"
           />
         </div>

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

@@ -3,8 +3,13 @@ import type { Locale } from '../../../i18n/translations'
 import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
-import { useDownloadUrl } from '../../../composables/useDownloadUrl'
+import type { Platform } from '../../../composables/useDownloadUrl'
+import {
+  downloadUrls,
+  useDownloadUrl
+} from '../../../composables/useDownloadUrl'
 import { t } from '../../../i18n/translations'
+import { captureDownloadClick } from '../../../scripts/posthog'
 import BrandButton from '../../common/BrandButton.vue'
 
 const { locale = 'en', class: customClass = '' } = defineProps<{
@@ -12,39 +17,70 @@ 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 label = computed(() => t('download.hero.downloadLocal', locale))
+
+const ICONS: Record<Platform, string> = {
+  windows: '/icons/os/windows.svg',
+  mac: '/icons/os/apple.svg'
+}
+
+interface ButtonSpec {
+  key: Platform
+  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) {
+    return [
+      {
+        key: 'windows',
+        href: downloadUrls.windows,
+        icon: ICONS.windows,
+        ariaLabel: `${label.value} — Windows`
+      },
+      {
+        key: 'mac',
+        href: downloadUrls.macArm,
+        icon: ICONS.mac,
+        ariaLabel: `${label.value} — 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"
+    @click="captureDownloadClick(btn.key)"
   >
     <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"
       />
-      <span class="ppformula-text-center">{{
-        t('download.hero.downloadLocal', locale)
-      }}</span>
+      <span class="ppformula-text-center">{{ label }}</span>
     </span>
   </BrandButton>
 </template>

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/components/ui/badge/Badge.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { BadgeVariants } from '.'
+import { badgeVariants } from '.'
+
+const {
+  variant,
+  size,
+  class: className,
+  prependIcon,
+  appendIcon
+} = defineProps<{
+  variant?: BadgeVariants['variant']
+  size?: BadgeVariants['size']
+  class?: string
+  prependIcon?: Component
+  appendIcon?: Component
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="badge"
+    :data-variant="variant"
+    :data-size="size"
+    :class="cn(badgeVariants({ variant, size }), className)"
+  >
+    <slot name="prepend">
+      <component :is="prependIcon" v-if="prependIcon" />
+    </slot>
+    <span class="ppformula-text-center">
+      <slot />
+    </span>
+    <slot name="append">
+      <component :is="appendIcon" v-if="appendIcon" />
+    </slot>
+  </span>
+</template>

apps/website/src/components/ui/badge/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const badgeVariants = cva({
+  base: 'text-primary-warm-gray font-formula leading-none focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent 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',
+      accent:
+        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
+    },
+    size: {
+      md: 'px-4 py-1 text-xs',
+      xs: 'px-2 py-0.5 text-[9px]'
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'default'
+  }
+})
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

apps/website/src/components/ui/button-mask/ButtonMask.stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import MaskRevealButton from './MaskRevealButton.vue'
+import ButtonMask from './ButtonMask.vue'
 
-const meta: Meta<typeof MaskRevealButton> = {
-  title: 'Website/Common/MaskRevealButton',
-  component: MaskRevealButton,
+const meta: Meta<typeof ButtonMask> = {
+  title: 'Website/UI/ButtonMask',
+  component: ButtonMask,
   tags: ['autodocs'],
   decorators: [
     () => ({
@@ -12,22 +12,19 @@ const meta: Meta<typeof MaskRevealButton> = {
     })
   ],
   argTypes: {
-    href: { control: 'text' },
-    target: { control: 'text' },
-    rel: { control: 'text' },
-    type: {
+    as: {
       control: { type: 'select' },
-      options: ['button', 'submit', 'reset']
+      options: ['button', 'a']
     },
+    asChild: { control: 'boolean' },
     disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text' },
     variant: {
       control: { type: 'select' },
       options: ['solid', 'ghost']
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg']
+      options: ['default', 'lg', 'icon']
     },
     iconPosition: {
       control: { type: 'select' },
@@ -41,57 +38,57 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: { href: '#' },
+  args: { as: 'a', href: '#' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: `<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>`
+    template: `<ButtonMask v-bind="args">Try Workflow</ButtonMask>`
   })
 }
 
 export const Ghost: Story = {
-  args: { href: '#', variant: 'ghost' },
+  args: { as: 'a', href: '#', variant: 'ghost' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Read More</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Read More</ButtonMask>'
   })
 }
 
 export const IconLeft: Story = {
-  args: { href: '#', iconPosition: 'left' },
+  args: { as: 'a', href: '#', iconPosition: 'left' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Go Back</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Go Back</ButtonMask>'
   })
 }
 
-export const SmallSolid: Story = {
-  args: { href: '#', size: 'sm' },
+export const DefaultSolid: Story = {
+  args: { as: 'a', href: '#', size: 'default' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Try Workflow</ButtonMask>'
   })
 }
 
 export const LargeSolid: Story = {
-  args: { href: '#', size: 'lg' },
+  args: { as: 'a', href: '#', size: 'lg' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: `<MaskRevealButton v-bind="args">Let's Collaborate</MaskRevealButton>`
+    template: `<ButtonMask v-bind="args">Let's Collaborate</ButtonMask>`
   })
 }
 
 export const WithCustomIcon: Story = {
-  args: { href: '#' },
+  args: { as: 'a', href: '#' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
     template: `
-      <MaskRevealButton v-bind="args">
+      <ButtonMask v-bind="args">
         Next Step
         <template #icon>
           <svg
@@ -106,57 +103,53 @@ export const WithCustomIcon: Story = {
             <polyline points="9 6 15 12 9 18" />
           </svg>
         </template>
-      </MaskRevealButton>
+      </ButtonMask>
     `
   })
 }
 
 export const LabelVisible: Story = {
-  args: { href: '#', hideLabel: false },
+  args: { as: 'a', href: '#', hideLabel: false },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template:
-      '<MaskRevealButton v-bind="args">Always Visible</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Always Visible</ButtonMask>'
   })
 }
 
 export const Disabled: Story = {
   args: { disabled: true },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Unavailable</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Unavailable</ButtonMask>'
   })
 }
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     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>
+            <ButtonMask as="a" href="#" variant="solid" size="default">Default</ButtonMask>
+            <ButtonMask as="a" href="#" variant="solid" size="lg">Large</ButtonMask>
           </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>
+            <ButtonMask as="a" href="#" variant="ghost" size="default">Default</ButtonMask>
+            <ButtonMask as="a" href="#" variant="ghost" size="lg">Large</ButtonMask>
           </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>
+            <ButtonMask as="a" href="#" iconPosition="left" size="default">Default</ButtonMask>
+            <ButtonMask as="a" href="#" iconPosition="left" size="lg">Large</ButtonMask>
           </div>
         </div>
       </div>

apps/website/src/components/ui/button-mask/ButtonMask.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { ChevronRight } from '@lucide/vue'
+import { Primitive } from 'reka-ui'
+import type { PrimitiveProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+
+import type { ButtonMaskVariants } from '.'
+import {
+  BUTTON_MASK_LABEL_CLASS,
+  buttonMaskBadgeVariants,
+  buttonMaskVariants
+} from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonMaskVariants['variant']
+  size?: ButtonMaskVariants['size']
+  iconPosition?: ButtonMaskVariants['iconPosition']
+  hideLabel?: boolean
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}
+
+const {
+  as = 'button',
+  asChild,
+  variant,
+  size,
+  iconPosition,
+  hideLabel = true,
+  class: className,
+  disabled
+} = defineProps<Props>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="button-mask"
+    :data-variant="variant"
+    :data-size="size"
+    :as
+    :as-child
+    :disabled
+    :class="cn(buttonMaskVariants({ variant, size, iconPosition }), className)"
+  >
+    <span
+      :data-icon-position="iconPosition ?? 'right'"
+      :data-hidden="hideLabel ? 'true' : 'false'"
+      :class="BUTTON_MASK_LABEL_CLASS"
+    >
+      <slot />
+    </span>
+    <span
+      :class="buttonMaskBadgeVariants({ variant, size, iconPosition })"
+      aria-hidden="true"
+    >
+      <span class="inline-flex transition-transform duration-500">
+        <slot name="icon">
+          <ChevronRight class="size-4" :stroke-width="2" />
+        </slot>
+      </span>
+    </span>
+  </Primitive>
+</template>

apps/website/src/components/ui/button-mask/index.ts

@@ -0,0 +1,94 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export { default as ButtonMask } from './ButtonMask.vue'
+
+export const buttonMaskVariants = cva({
+  base: 'group/button-mask relative inline-flex w-fit uppercase cursor-pointer items-center overflow-hidden rounded-2xl p-1 text-sm font-bold tracking-wider 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: {
+      default: 'h-10 px-6 py-2.5 has-[>svg]:px-3',
+      lg: 'h-14 px-8 py-4 has-[>svg]:px-5'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    { size: 'default', iconPosition: 'right', class: 'ps-12 pe-4' },
+    { size: 'lg', iconPosition: 'right', class: 'ps-16 pe-8' },
+    { size: 'default', iconPosition: 'left', class: 'ps-4 pe-12' },
+    { size: 'lg', iconPosition: 'left', class: 'ps-8 pe-16' }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+    iconPosition: 'right'
+  }
+})
+
+export const buttonMaskBadgeVariants = cva({
+  base: 'absolute z-10 flex items-center justify-center rounded-xl transition-all duration-500',
+  variants: {
+    variant: {
+      solid: 'text-primary-comfy-yellow bg-primary-comfy-ink',
+      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
+    },
+    size: {
+      default: 'size-8',
+      lg: 'size-12'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'default',
+      iconPosition: 'right',
+      class: 'right-1 group-hover/button-mask:right-[calc(100%-36px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class: 'right-1 group-hover/button-mask:right-[calc(100%-52px)]'
+    },
+    {
+      size: 'default',
+      iconPosition: 'left',
+      class: 'left-1 group-hover/button-mask:left-[calc(100%-36px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class: 'left-1 group-hover/button-mask:left-[calc(100%-52px)]'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+    iconPosition: 'right'
+  }
+})
+
+export const BUTTON_MASK_LABEL_CLASS = [
+  'ppformula-text-center 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/button-mask:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-hover/button-mask:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]',
+  'group-focus-visible/button-mask:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-focus-visible/button-mask:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]'
+].join(' ')
+
+export type ButtonMaskVariants = VariantProps<typeof buttonMaskVariants>