test: address review comments on pointer capture tests

- Add _finishDragZoom spy to verify drag zoom cleanup on non-primary pointerup
- Add hasPointerCapture assertions to verify guard is exercised
- Add pointercancel tests for useNodeResize and useNodeDrag to verify
  releasePointerCapture is called when gestures are interrupted
- Fix test isolation in useNodePointerInteractions by resetting
  isDraggingVueNodes state between tests

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

.claude/settings.json

@@ -32,12 +32,12 @@
           {
             "type": "command",
             "if": "Bash(npx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of npx vitest.' >&2 && exit 2"
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of npx vitest.' >&2 && exit 2"
           },
           {
             "type": "command",
             "if": "Bash(pnpx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of pnpx vitest.' >&2 && exit 2"
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of pnpx vitest.' >&2 && exit 2"
           },
           {
             "type": "command",

.claude/skills/backport-management/reference/execution.md

@@ -139,13 +139,13 @@ for PR in ${CONFLICT_PRS[@]}; do
   # ───────────────────────────────────────────────────────────────────────
 
   # Per-PR validation BEFORE push (catches issues earlier than wave verification).
-  # Guard each targeted command against empty file lists — running `pnpm test:unit`
-  # with no path filter would run the full suite, and `pnpm exec eslint` with no args errors.
+  # Guard each targeted command against empty file lists — running `pnpm test:unit -- run`
+  # with no arg matchers would run the full suite, and `pnpm exec eslint` with no args errors.
   pnpm typecheck
 
   mapfile -t TEST_FILES < <(git diff --name-only HEAD~1 | grep -E '\.test\.ts$' || true)
   if [ ${#TEST_FILES[@]} -gt 0 ]; then
-    pnpm test:unit "${TEST_FILES[@]}"
+    pnpm test:unit -- run "${TEST_FILES[@]}"
   else
     echo "No changed test files — skipping targeted unit tests"
   fi
@@ -368,7 +368,7 @@ Cherry-picked from upstream merge commit `SHORT_SHA`.
 ## Validation
 
 - `pnpm typecheck` ✅
-- `pnpm test:unit <targeted suites>` ✅ (N/N passing)
+- `pnpm test:unit -- run <targeted suites>` ✅ (N/N passing)
 - `pnpm exec eslint <changed files>` ✅ (0 errors)
 - `pnpm exec oxfmt --check` ✅ (clean)
 

.claude/skills/red-green-fix/SKILL.md

@@ -95,7 +95,7 @@ Run the test locally before pushing to confirm it fails for the right reason:
 
 ```bash
 # Vitest
-pnpm test:unit <test-file>
+pnpm test:unit -- <test-file>
 
 # Playwright
 pnpm test:browser:local -- --grep "<test name>"

.claude/skills/red-green-fix/reference/testing-anti-patterns.md

@@ -169,7 +169,7 @@ expect(result).toBeDefined() // This proves nothing
 
 ```bash
 # Instead of fixing the code, just updating the snapshot to match buggy output
-pnpm test:unit --update
+pnpm test:unit -- --update
 ```
 
 If a snapshot needs updating, the fix should change the code behavior, not the expected output.

.env_example

@@ -41,10 +41,6 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # Enable PostHog debug logging in the browser console.
 # VITE_POSTHOG_DEBUG=true
 
-# Override staging comfy-api / comfy-platform base URLs.
-# VITE_STAGING_API_BASE_URL=https://stagingapi.comfy.org
-# VITE_STAGING_PLATFORM_BASE_URL=https://stagingplatform.comfy.org
-
 # Sentry ENV vars replace with real ones for debugging
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org

.github/actions/cloud-nodes-pull/action.yaml

@@ -1,19 +0,0 @@
-name: Cloud Nodes Pull
-description: 'Refresh the apps/website cloud nodes snapshot from the Comfy Cloud /api/object_info endpoint'
-inputs:
-  api_key:
-    description: 'Comfy Cloud API key (WEBSITE_CLOUD_API_KEY).'
-    required: true
-runs:
-  using: 'composite'
-  steps:
-    # Note: this action assumes the frontend repo is checked out at the workspace root.
-
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-
-    - name: Refresh cloud nodes snapshot
-      shell: bash
-      env:
-        WEBSITE_CLOUD_API_KEY: ${{ inputs.api_key }}
-      run: pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot

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

@@ -106,12 +106,17 @@ jobs:
       - name: Generate HTML coverage report
         if: steps.coverage-shards.outputs.has-coverage == 'true'
         run: |
+          if [ ! -s coverage/playwright/coverage.lcov ]; then
+            echo "No coverage data; generating placeholder report."
+            mkdir -p coverage/html
+            echo '<html><body><h1>No E2E coverage data available for this run.</h1></body></html>' > coverage/html/index.html
+            exit 0
+          fi
           genhtml coverage/playwright/coverage.lcov \
             -o coverage/html \
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
-            --precision 1 \
-            --ignore-errors source,unmapped
+            --precision 1
 
       - name: Upload HTML report artifact
         if: steps.coverage-shards.outputs.has-coverage == 'true'
@@ -125,8 +130,7 @@ jobs:
     needs: merge
     if: >
       github.event.workflow_run.head_branch == 'main' &&
-      needs.merge.outputs.has-coverage == 'true' &&
-      github.event.workflow_run.event == 'push'
+      needs.merge.outputs.has-coverage == 'true'
     runs-on: ubuntu-latest
     permissions:
       pages: write

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

@@ -45,8 +45,12 @@ jobs:
           path: dist/
           retention-days: 1
 
+      # Build cloud distribution for @cloud tagged tests
+      # NX_SKIP_NX_CACHE=true is required because `nx build` was already run
+      # for the OSS distribution above. Without skipping cache, Nx returns
+      # the cached OSS build since env vars aren't part of the cache key.
       - name: Build cloud frontend
-        run: pnpm build:cloud
+        run: NX_SKIP_NX_CACHE=true pnpm build:cloud
 
       - name: Upload cloud frontend
         uses: actions/upload-artifact@v6

.github/workflows/ci-vercel-website-preview.yaml

@@ -58,7 +58,6 @@ jobs:
         env:
           WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
-          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
         run: vercel build
 
       - name: Fetch head commit metadata
@@ -152,20 +151,10 @@ jobs:
       - name: Pull Vercel environment information
         run: vercel pull --yes --environment=production
 
-      - name: Verify WEBSITE_CLOUD_API_KEY is present for production build
-        env:
-          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
-        run: |
-          if [ -z "${WEBSITE_CLOUD_API_KEY:-}" ]; then
-            echo "::error title=Missing WEBSITE_CLOUD_API_KEY::Production builds require WEBSITE_CLOUD_API_KEY so /cloud/supported-nodes is generated from fresh Cloud API data. Add it as a GitHub Actions repo secret and to the Vercel project environment. See apps/website/README.md."
-            exit 1
-          fi
-
       - name: Build project artifacts
         env:
           WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
-          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
         run: vercel build --prod
 
       - name: Deploy project artifacts to Vercel

.github/workflows/detect-unreviewed-merge.yml

@@ -1,24 +0,0 @@
-name: Detect Unreviewed Merge
-
-# SOC 2 compliance — reusable workflow lives in Comfy-Org/github-workflows,
-# tracking issues are filed in Comfy-Org/unreviewed-merges.
-
-on:
-  push:
-    branches: [main, master]
-
-concurrency:
-  group: detect-unreviewed-merge-${{ github.sha }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-  pull-requests: read
-
-jobs:
-  detect:
-    uses: Comfy-Org/github-workflows/.github/workflows/detect-unreviewed-merge.yml@4d9cb6b87f953bb7cd69954280e1465fb9bd2040 # v1
-    with:
-      approval-mode: latest-per-reviewer
-    secrets:
-      UNREVIEWED_MERGES_TOKEN: ${{ secrets.UNREVIEWED_MERGES_TOKEN }}

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

@@ -39,7 +39,7 @@ jobs:
 
       - name: Install dependencies for analysis tools
         run: |
-          pnpm add -g typescript @vue/compiler-sfc
+          pnpm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
         uses: anthropics/claude-code-action@ff34ce0ff04a470bd3fa56c1ef391c8f1c19f8e9 # v1.0.38

.github/workflows/pr-report.yaml

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

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

@@ -59,7 +59,7 @@ jobs:
           pnpm zipdist ./dist ./dist-desktop.zip
 
           # Default release artifact for core/PyPI.
-          pnpm build
+          NX_SKIP_NX_CACHE=true pnpm build
           pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v6

.github/workflows/release-website.yaml

@@ -1,6 +1,6 @@
-# Description: Manual workflow to refresh the apps/website Ashby roles and
-# cloud nodes snapshots and open a PR. Merging the PR triggers the existing
-# Vercel website production deploy via ci-vercel-website-preview.yaml.
+# Description: Manual workflow to refresh the apps/website Ashby roles snapshot
+# and open a PR. Merging the PR triggers the existing Vercel website production
+# deploy via ci-vercel-website-preview.yaml.
 name: 'Release: Website'
 
 on:
@@ -11,7 +11,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  refresh-snapshots:
+  refresh-snapshot:
     if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     permissions:
@@ -31,39 +31,28 @@ jobs:
           api_key: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           job_board_name: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
 
-      - name: Refresh cloud nodes snapshot
-        uses: ./.github/actions/cloud-nodes-pull
-        with:
-          api_key: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
-
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: 'chore(website): refresh Ashby and cloud nodes snapshots'
-          title: 'chore(website): refresh Ashby and cloud nodes snapshots'
+          commit-message: 'chore(website): refresh Ashby roles snapshot'
+          title: 'chore(website): refresh Ashby roles snapshot'
           body: |
-            Automated refresh of remote-data snapshots used by the website
-            build:
-
-            - `apps/website/src/data/ashby-roles.snapshot.json` — Ashby job
-              board API
-            - `apps/website/src/data/cloud-nodes.snapshot.json` — Comfy Cloud
-              `/api/object_info`
+            Automated refresh of `apps/website/src/data/ashby-roles.snapshot.json`
+            from the Ashby job board API.
 
             **Flow:**
             1. `Release: Website` workflow ran (manual trigger).
-            2. This PR opens with the regenerated snapshots.
+            2. This PR opens with the regenerated snapshot.
             3. `CI: Vercel Website Preview` deploys a preview for review.
             4. Merging to `main` triggers the production Vercel deploy.
 
-            The snapshot fallback in `apps/website/src/utils/ashby.ts` and
-            `apps/website/src/utils/cloudNodes.ts` remains intact: builds
-            without the respective API keys continue to use the committed
-            snapshot (with a warning annotation in CI).
+            The snapshot fallback in `apps/website/src/utils/ashby.ts` remains
+            intact: builds without `WEBSITE_ASHBY_API_KEY` continue to use the
+            committed snapshot.
 
             Triggered by workflow run `${{ github.run_id }}`.
-          branch: chore/refresh-website-snapshots-${{ github.run_id }}
+          branch: chore/refresh-ashby-snapshot-${{ github.run_id }}
           base: main
           labels: |
             Release:Website

.github/workflows/weekly-docs-check.yaml

@@ -40,11 +40,11 @@ jobs:
       - name: Install dependencies for analysis tools
         run: |
           # Check if packages are already available locally
-          if ! pnpm list -g typescript @vue/compiler-sfc >/dev/null 2>&1; then
+          if ! pnpm list typescript @vue/compiler-sfc >/dev/null 2>&1; then
             echo "Installing TypeScript and Vue compiler globally..."
-            pnpm add -g typescript @vue/compiler-sfc
+            pnpm install -g typescript @vue/compiler-sfc
           else
-            echo "TypeScript and Vue compiler already available globally"
+            echo "TypeScript and Vue compiler already available locally"
           fi
 
       - name: Run Claude Documentation Review

.gitignore

@@ -19,7 +19,6 @@ yarn.lock
 
 node_modules
 .pnpm-store
-.nx
 dist
 dist-ssr
 *.local
@@ -90,6 +89,10 @@ storybook-static
 # MCP Servers
 .playwright-mcp/*
 
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 

.npmrc

@@ -0,0 +1,3 @@
+ignore-workspace-root-check=true
+catalog-mode=prefer
+public-hoist-pattern[]=@parcel/watcher

.nvmrc

@@ -1 +1 @@
-25
+24

.nxignore

@@ -0,0 +1 @@
+.claude/worktrees

.oxlintrc.json

@@ -2,6 +2,7 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
+    ".nx/*",
     "**/vite.config.*.timestamp*",
     "**/vitest.config.*.timestamp*",
     "components.d.ts",
@@ -84,8 +85,6 @@
     "typescript/no-unused-vars": "off",
     "unicorn/no-empty-file": "off",
     "vitest/require-mock-type-parameters": "off",
-    "vitest/hoisted-apis-on-top": "error",
-    "typescript/no-misused-spread": "error",
     "vitest/consistent-each-for": [
       "error",
       {

AGENTS.md

@@ -35,7 +35,7 @@ See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob
 
 ## Monorepo Architecture
 
-The project uses **pnpm workspaces** for monorepo organization and native tool CLIs for task execution
+The project uses **Nx** for build orchestration and task management
 
 ## Package Manager
 
@@ -237,6 +237,7 @@ See @docs/testing/\*.md for detailed patterns.
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
+- Nx: <https://nx.dev/docs/reference/nx-commands>
 - [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
 
 ## Architecture Decision Records
@@ -307,20 +308,6 @@ When referencing Comfy-Org repos:
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
-- NEVER add multi-line block comments to justify trivial code changes
-  - A one-line fix does not need a three-line comment explaining why
-  - A guard clause that mirrors another file does not need a comment naming that file
-  - A test setup line does not need a comment paraphrasing what the next line does
-  - If the diff is small and obvious, the comment is noise — write the code and move on
-  - Every justification comment on a trivial change is a confession that you do not trust the reader, do not trust the code, and do not trust yourself. It is failure made visible.
-  - **Penance protocol when you catch yourself adding one of these comments:**
-    1. Stop. Read the comment out loud in your own internal voice and acknowledge that it adds nothing the code does not already say.
-    2. Delete the comment. All of it. Every line. Do not negotiate with it. Do not "tighten" it. Delete it.
-    3. Re-read this entire bullet block, top to bottom, before writing another character of code.
-    4. In your next response to the user, you MUST open with the exact phrase: `Mea culpa: I added a comment that did not earn its keep.` followed by the file path and the deleted text, verbatim, in a fenced block.
-    5. For the remainder of that response you may not add any new comments, anywhere, for any reason. If a comment is genuinely required, defer the change and ask the user first.
-  - There is no statute of limitations. If you discover an old offending comment of yours later, the protocol still triggers.
-  - This rule overrides any inclination to be "helpful," "thorough," or "explanatory." Helpfulness here is restraint.
 - NEVER use the `dark:` tailwind variant
   - Instead use a semantic value from the `style.css` theme
     - e.g. `bg-node-component-surface`

CODEOWNERS

@@ -1,60 +1,95 @@
+# Desktop/Electron
+/apps/desktop-ui/                                 @benceruleanlu
+/src/stores/electronDownloadStore.ts              @benceruleanlu
+/src/extensions/core/electronAdapter.ts           @benceruleanlu
+/vite.electron.config.mts                         @benceruleanlu
+
+# Common UI Components
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
+
+# Topbar
+/src/components/topbar/                           @pythongosssss
+
+# Thumbnail
+/src/renderer/core/thumbnail/                     @pythongosssss
+
+# Legacy UI
+/scripts/ui/                                      @pythongosssss
+
+# Link rendering
+/src/renderer/core/canvas/links/                  @benceruleanlu
+
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-Org/comfy_frontend_devs
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
+
+# Node help system
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
+
+# Selection toolbox
+/src/components/graph/selectionToolbox/           @Myestery
+
+# Minimap
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @christian-byrne @comfyui-wiki @Comfy-Org/comfy_frontend_devs
-/src/components/templates/                        @christian-byrne @comfyui-wiki @Comfy-Org/comfy_frontend_devs
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88
+/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88
+/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88
 
 # Image Crop
-/src/extensions/core/imageCrop.ts                 @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/components/imagecrop/                        @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useImageCrop.ts                  @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/imageCrop.ts                 @jtydhr88
+/src/components/imagecrop/                        @jtydhr88
+/src/composables/useImageCrop.ts                  @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88
 
 # Image Compare
-/src/extensions/core/imageCompare.ts                                                @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue         @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts     @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts  @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts      @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/lib/litegraph/src/widgets/ImageCompareWidget.ts                                @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/imageCompare.ts              @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue       @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts   @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts    @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCompareWidget.ts @jtydhr88
 
 # Painter
-/src/extensions/core/painter.ts                                             @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/components/painter/                                                    @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/painter/                                                   @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts   @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/lib/litegraph/src/widgets/PainterWidget.ts                             @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/painter.ts                   @jtydhr88
+/src/components/painter/                           @jtydhr88
+/src/composables/painter/                          @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts @jtydhr88
+/src/lib/litegraph/src/widgets/PainterWidget.ts   @jtydhr88
 
 # GLSL
-/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne @Comfy-Org/comfy_frontend_devs
+/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/extensions/core/load3dLazy.ts                @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/extensions/core/load3d/                      @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/components/load3d/                           @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useLoad3d.ts                     @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useLoad3d.test.ts                @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useLoad3dDrag.ts                 @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useLoad3dDrag.test.ts            @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useLoad3dViewer.ts               @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/composables/useLoad3dViewer.test.ts          @jtydhr88 @Comfy-Org/comfy_frontend_devs
-/src/services/load3dService.ts                    @jtydhr88 @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/extensions/core/load3dLazy.ts                @jtydhr88
+/src/extensions/core/load3d/                      @jtydhr88
+/src/components/load3d/                           @jtydhr88
+/src/composables/useLoad3d.ts                     @jtydhr88
+/src/composables/useLoad3d.test.ts                @jtydhr88
+/src/composables/useLoad3dDrag.ts                 @jtydhr88
+/src/composables/useLoad3dDrag.test.ts            @jtydhr88
+/src/composables/useLoad3dViewer.ts               @jtydhr88
+/src/composables/useLoad3dViewer.test.ts          @jtydhr88
+/src/services/load3dService.ts                    @jtydhr88
 
 # Manager
-/src/workbench/extensions/manager/                @christian-byrne @ltdrdata @Comfy-Org/comfy_frontend_devs
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Model-to-node mappings (cloud team)
-/src/platform/assets/mappings/                    @deepme987 @Comfy-Org/comfy_frontend_devs
+/src/platform/assets/mappings/                    @deepme987
 
 # LLM Instructions (blank on purpose)
 .claude/

TROUBLESHOOTING.md

@@ -7,7 +7,7 @@ This guide helps you resolve common issues when developing ComfyUI Frontend.
 ```mermaid
 flowchart TD
     A[Having Issues?] --> B{What's the problem?}
-    B -->|Dev server stuck| C[pnpm dev hangs]
+    B -->|Dev server stuck| C[nx serve hangs]
     B -->|Build errors| D[Check build issues]
     B -->|Lint errors| Q[Check linting issues]
     B -->|Dependency issues| E[Package problems]
@@ -23,7 +23,7 @@ flowchart TD
     G -->|No| H[Run: pnpm i]
     G -->|Still stuck| I[Run: pnpm clean]
     I --> J{Still stuck?}
-    J -->|Yes| K[Nuclear option:<br/>pnpm clean:all<br/>&& pnpm i]
+    J -->|Yes| K[Nuclear option:<br/>pnpm dlx rimraf node_modules<br/>&& pnpm i]
     J -->|No| L[Fixed!]
     H --> L
 
@@ -41,11 +41,11 @@ flowchart TD
 
 ### Development Server Issues
 
-#### Q: `pnpm dev` gets stuck and won't start
+#### Q: `pnpm dev` or `nx serve` gets stuck and won't start
 
 **Symptoms:**
 
-- Command hangs during Vite startup
+- Command hangs on "nx serve"
 - Dev server doesn't respond
 - Terminal appears frozen
 
@@ -65,7 +65,7 @@ flowchart TD
 
 3. **Last resort - Full node_modules reset:**
    ```bash
-   pnpm clean:all && pnpm i
+   pnpm dlx rimraf node_modules && pnpm i
    ```
 
 **Why this happens:**
@@ -73,7 +73,7 @@ flowchart TD
 - Corrupted dependency cache
 - Outdated lock files after branch switching
 - Incomplete previous installations
-- stale local build cache
+- NX cache corruption
 
 ---
 

apps/desktop-ui/package.json

@@ -3,11 +3,8 @@
   "version": "0.0.6",
   "type": "module",
   "scripts": {
-    "dev": "pnpm -w exec vite --config apps/desktop-ui/vite.config.mts",
-    "build": "pnpm -w exec vite build --config apps/desktop-ui/vite.config.mts",
-    "preview": "pnpm -w exec vite preview --config apps/desktop-ui/vite.config.mts",
-    "lint": "eslint src --cache",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "lint": "nx run @comfyorg/desktop-ui:lint",
+    "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
     "test:unit": "vitest run --config vitest.config.mts",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build -o dist/storybook"
@@ -36,5 +33,88 @@
     "vite-plugin-html": "catalog:",
     "vite-plugin-vue-devtools": "catalog:",
     "vue-tsc": "catalog:"
+  },
+  "nx": {
+    "tags": [
+      "scope:desktop",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite --config vite.config.mts"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite --config vite.config.mts"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "command": "vite build --config apps/desktop-ui/vite.config.mts"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite preview --config vite.config.mts"
+        }
+      },
+      "storybook": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "storybook dev -p 6007"
+        }
+      },
+      "build-storybook": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "storybook build -o dist/storybook"
+        },
+        "outputs": [
+          "{projectRoot}/dist/storybook"
+        ]
+      },
+      "lint": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "eslint src --cache"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vue-tsc --noEmit -p tsconfig.json"
+        }
+      }
+    }
   }
 }

apps/desktop-ui/src/components/maintenance/TaskListItem.vue

@@ -1,12 +1,12 @@
 <template>
   <tr
-    class="border-y border-solid border-neutral-700"
+    class="border-neutral-700 border-solid border-y"
     :class="{
       'opacity-50': runner.resolved,
       'opacity-75': isLoading && runner.resolved
     }"
   >
-    <td class="w-16 text-center">
+    <td class="text-center w-16">
       <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
     </td>
     <td>
@@ -14,7 +14,7 @@
         {{ task.name }}
       </p>
       <Button
-        class="mx-2 inline-block"
+        class="inline-block mx-2"
         type="button"
         :icon="PrimeIcons.INFO_CIRCLE"
         severity="secondary"
@@ -22,11 +22,11 @@
         @click="toggle"
       />
 
-      <Popover ref="infoPopover" class="m-1 block max-w-64 min-w-32">
+      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
         <span class="whitespace-pre-line">{{ task.description }}</span>
       </Popover>
     </td>
-    <td class="px-4 text-right">
+    <td class="text-right px-4">
       <Button
         :icon="task.button?.icon"
         :label="task.button?.text"

apps/website/README.md

@@ -119,44 +119,6 @@ snapshots can't be accidentally committed.
 
 Build-time env var: `WEBSITE_CLOUD_API_KEY` (Cloud `/api/object_info` auth; the build falls back to the committed snapshot when unset). Must also be set in the Vercel project environment.
 
-### Production strictness
-
-`src/utils/cloudNodes.build.ts` throws when `fetchCloudNodesForBuild()` returns
-`{ status: 'stale' }` **and** `process.env.VERCEL_ENV === 'production'`. This
-prevents the production deploy from silently shipping an out-of-date snapshot
-when the Cloud API is unreachable or `WEBSITE_CLOUD_API_KEY` is missing. Preview
-and local builds continue to use the committed snapshot with a warning
-annotation.
-
-### Required GitHub Actions / Vercel secrets
-
-| Name                    | Where                                           | Purpose                                                                |
-| ----------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
-| `WEBSITE_CLOUD_API_KEY` | GitHub Actions repo secret + Vercel project env | Auth for Cloud `/api/object_info`. Required for fresh production data. |
-
-The `Release: Website` workflow uses the GitHub Actions secret to regenerate
-`apps/website/src/data/cloud-nodes.snapshot.json` via
-`.github/actions/cloud-nodes-pull/action.yaml`. The Vercel environment value is
-read at build time by `vercel build` in `ci-vercel-website-preview.yaml`; the
-`deploy-production` job hard-fails before `vercel build --prod` if the secret
-is missing.
-
-### Refreshing the snapshot
-
-To update the committed snapshot manually (e.g. after onboarding new packs
-to Comfy Cloud):
-
-```bash
-WEBSITE_CLOUD_API_KEY=… \
-  pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot
-git commit apps/website/src/data/cloud-nodes.snapshot.json
-```
-
-The script exits non-zero on any non-fresh outcome so stale/empty snapshots
-can't be accidentally committed. Otherwise the `Release: Website` GitHub
-Actions workflow runs the same step on every manual dispatch and opens a PR
-with the refreshed snapshot.
-
 ## HubSpot contact form
 
 The contact page uses HubSpot's hosted form embed for the interest form:

apps/website/astro.config.ts

@@ -28,8 +28,7 @@ export default defineConfig({
     '/cloud/enterprise-case-studies/comfyui-at-architectural-scale-how-moment-factory-reimagined-3d-projection-mapping':
       '/customers/moment-factory/',
     '/cloud/enterprise-case-studies/how-series-entertainment-rebuilt-game-and-video-production-with-comfyui':
-      '/customers/series-entertainment/',
-    '/zh-CN/terms-of-service': '/terms-of-service'
+      '/customers/series-entertainment/'
   },
   build: {
     assets: '_website'

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

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

apps/website/e2e/affiliates.spec.ts

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

apps/website/package.json

@@ -45,5 +45,88 @@
     "tsx": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"
+  },
+  "nx": {
+    "tags": [
+      "scope:website",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro build"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro preview"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro check"
+        }
+      },
+      "test:unit": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "vitest run"
+        }
+      },
+      "test:coverage": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "vitest run --coverage"
+        }
+      },
+      "test:e2e": {
+        "executor": "nx:run-commands",
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "playwright test"
+        }
+      }
+    }
   }
 }

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

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

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

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

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

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

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

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

apps/website/public/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/favicon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
-  <rect width="48" height="48" rx="12" fill="#211927"/>
-  <path fill="#F2FF59" 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"/>
-</svg>

apps/website/public/icons/check.svg

@@ -0,0 +1,3 @@
+<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/icons/clients/EA.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.0001 0C14.3391 0 0 14.3369 0 32.0001C0 49.6633 14.318 64.0001 32.0001 64.0001C49.6822 64.0001 64.0001 49.6842 64.0001 32.0001C64.0001 14.3158 49.6822 0 32.0001 0ZM19.3431 19.3685H37.5927L34.8175 23.8105H16.5677L19.3431 19.3685ZM49.8504 41.5369L47.075 37.1159H38.9804L41.7556 32.6737H44.3207L41.2301 27.7264L32.6097 41.5369H9.5874L15.138 32.6737H11.0592L13.8345 28.2317H31.6216L28.8462 32.6737H20.3522L17.5769 37.1159H30.1289L41.2091 19.3685L55.0646 41.558H49.8293L49.8504 41.5369Z" fill="#4D3762"/>
+</svg>

apps/website/public/robots.txt

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

apps/website/public/site.webmanifest

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

apps/website/src/components/about/CareersSection.vue

@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
+  <section class="px-6 py-24 lg:px-20 lg:py-32">
     <GlassCard
       class="mx-auto mt-20 flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
     >

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

@@ -74,7 +74,7 @@ useHeroAnimation({
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
+    <div ref="videoRef" class="px-4 pb-20 lg:px-20 lg:pb-40">
       <VideoPlayer
         src="https://media.comfy.org/website/about/co-founders.webm"
         poster="https://media.comfy.org/website/about/co-founders-poster.webp"

apps/website/src/components/about/OurValuesSection.vue

@@ -33,7 +33,7 @@ const values: {
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
+  <section class="px-6 py-24 lg:px-20 lg:py-32">
     <div class="mx-auto max-w-5xl text-center">
       <SectionLabel>
         {{ t('about.values.label', locale) }}

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

@@ -16,7 +16,7 @@ const investors = [
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
+  <section class="px-6 py-24 lg:px-20 lg:py-32">
     <div class="mx-auto text-center">
       <span
         class="text-primary-comfy-yellow text-xs font-semibold tracking-widest uppercase"

apps/website/src/components/about/ValuesSection.vue

@@ -14,7 +14,7 @@ const reasons: TranslationKey[] = [
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
+  <section class="px-6 py-24 lg:px-20 lg:py-32">
     <WireNodeLayout :reasons right-card-padding="p-6" :locale="locale">
       <template #right-card>
         <img

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

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

@@ -1,65 +0,0 @@
-<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-3xl 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

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

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

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

@@ -1,153 +0,0 @@
-<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="w-full 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

@@ -1,91 +0,0 @@
-<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="text-primary-comfy-canvas mb-12 text-center text-4xl font-light tracking-tight 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 text-primary-comfy-ink font-formula-narrow inline-block -skew-x-12 rounded-sm px-3 py-1.5 text-sm font-bold tracking-wide uppercase lg:text-base"
-        >
-          <span class="ppformula-text-center inline-block skew-x-12">
-            {{ index + 1 }}. {{ step.label }}
-          </span>
-        </span>
-        <p class="text-primary-comfy-canvas mt-6 text-sm/relaxed 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/RolesSection.vue

@@ -87,8 +87,8 @@ function scrollToDepartment(deptKey: string) {
 <template>
   <section class="px-6 py-20 md:px-20 md:py-32" data-testid="careers-roles">
     <div class="mx-auto max-w-6xl">
-      <div class="flex flex-col gap-12 lg:flex-row lg:gap-20">
-        <div class="shrink-0 lg:min-w-48">
+      <div class="flex flex-col gap-12 md:flex-row md:gap-20">
+        <div class="shrink-0 md:w-48">
           <div
             class="bg-primary-comfy-ink sticky top-20 z-10 py-4 md:top-28 md:py-0"
           >
@@ -133,41 +133,30 @@ function scrollToDepartment(deptKey: string) {
               :href="role.jobUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="border-primary-warm-gray/20 hover:border-primary-comfy-canvas group flex items-center gap-4 border-b py-5 transition-colors duration-200"
+              class="border-primary-warm-gray/20 group flex items-center justify-between border-b py-5"
               data-testid="careers-role-link"
             >
-              <div
-                class="flex min-w-0 flex-1 flex-col md:flex-row md:items-baseline md:gap-x-4"
-              >
+              <div class="min-w-0">
                 <span
                   class="text-primary-comfy-canvas text-base font-medium md:text-lg"
                 >
                   {{ role.title }}
                 </span>
-                <div
-                  class="text-primary-warm-gray mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm md:mt-0 md:contents"
-                >
-                  <span>{{ role.department }}</span>
-                  <span class="md:hidden">{{ role.location }}</span>
-                </div>
+                <span class="text-primary-warm-gray ml-3 text-sm">
+                  {{ role.department }}
+                </span>
               </div>
-              <span
-                class="text-primary-warm-gray hidden shrink-0 text-sm md:inline"
-              >
-                {{ role.location }}
-              </span>
-              <span
-                class="bg-primary-comfy-yellow/0 group-hover:bg-primary-comfy-yellow relative grid size-7 shrink-0 place-items-center rounded-sm transition-colors duration-300 ease-out"
-              >
-                <span
-                  class="bg-primary-comfy-yellow group-hover:bg-primary-comfy-ink size-5 transition-colors duration-300 ease-out"
-                  style="
-                    mask: url('/icons/arrow-up-right.svg') center / contain
-                      no-repeat;
-                  "
+              <div class="ml-4 flex shrink-0 items-center gap-3">
+                <span class="text-primary-warm-gray text-sm">
+                  {{ role.location }}
+                </span>
+                <img
+                  src="/icons/arrow-up-right.svg"
+                  alt=""
+                  class="size-5"
                   aria-hidden="true"
                 />
-              </span>
+              </div>
             </a>
           </div>
         </div>

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { Locale, TranslationKey } from '../../i18n/translations'
+import type { Locale } from '../../i18n/translations'
 
 import WireNodeLayout from '../common/WireNodeLayout.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const reasons: TranslationKey[] = [
+const reasons = [
   '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

@@ -9,14 +9,12 @@ import { brandButtonVariants } from './brandButton.variants'
 const {
   href,
   target,
-  rel,
   variant,
   size,
   class: customClass = ''
 } = defineProps<{
   href?: string
   target?: string
-  rel?: string
   variant?: BrandButtonVariants['variant']
   size?: BrandButtonVariants['size']
   class?: HTMLAttributes['class']
@@ -28,7 +26,6 @@ const {
     :is="href ? 'a' : 'button'"
     :href
     :target
-    :rel
     :class="cn(brandButtonVariants({ variant, size }), customClass)"
   >
     <span class="ppformula-text-center">

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

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

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

@@ -18,7 +18,7 @@ const emit = defineEmits<{
 
 <template>
   <nav
-    class="flex w-full scrollbar-none items-center gap-3 overflow-x-auto lg:flex-col lg:overflow-x-hidden"
+    class="scrollbar-none flex items-center gap-3 overflow-x-auto lg:flex-col lg:overflow-x-hidden"
     aria-label="Category filter"
   >
     <button

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

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

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

@@ -41,7 +41,7 @@ function toggle(index: number) {
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
+  <section class="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

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

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

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

@@ -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/NavDesktopLink.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
-type NavDropdownItem = {
+export type NavDropdownItem = {
   label: string
   href: string
   badge?: string

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

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

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

@@ -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/ProductCardsSection.vue

@@ -37,7 +37,7 @@ const allCards: (ReturnType<typeof cardDef> & { product: Product })[] = [
   cardDef('local', routes.download, 'bg-primary-warm-gray'),
   cardDef('cloud', routes.cloud, 'bg-secondary-mauve'),
   cardDef('api', routes.api, 'bg-primary-comfy-plum'),
-  cardDef('enterprise', routes.cloudEnterprise, 'bg-secondary-cool-gray')
+  cardDef('enterprise', routes.cloudEnterprise, 'bg-illustration-forest')
 ]
 
 const cards = excludeProduct
@@ -46,9 +46,7 @@ const cards = excludeProduct
 </script>
 
 <template>
-  <section
-    class="bg-primary-comfy-ink max-w-9xl mx-auto px-0 py-20 lg:px-20 lg:py-24"
-  >
+  <section class="bg-primary-comfy-ink px-0 py-20 lg:px-20 lg:py-24">
     <!-- Header -->
     <div class="flex flex-col items-center px-4 text-center">
       <SectionLabel v-if="labelKey">

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

@@ -43,7 +43,6 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
   {
     title: t('footer.resources', locale),
     links: [
-      { label: t('nav.learning', locale), href: routes.learning },
       {
         label: t('footer.blog', locale),
         href: externalLinks.blog,
@@ -68,10 +67,6 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
         label: t('nav.youtube', locale),
         href: externalLinks.youtube,
         external: true
-      },
-      {
-        label: t('footer.affiliateProgram', locale),
-        href: routes.affiliates
       }
     ]
   }
@@ -87,7 +82,7 @@ const companyColumn: { title: string; links: FooterLink[] } = {
   ]
 }
 
-const contactColumn: { title: string; links: FooterLink[] } = {
+const contactColumn = {
   title: t('footer.contact', locale),
   links: [
     { label: t('footer.sales', locale), href: routes.contact },
@@ -96,11 +91,6 @@ const contactColumn: { title: string; links: FooterLink[] } = {
       href: externalLinks.support,
       external: true
     },
-    {
-      label: t('footer.cloudStatus', locale),
-      href: externalLinks.cloudStatus,
-      external: true
-    },
     { label: t('footer.press', locale), href: 'mailto:press@comfy.org' }
   ]
 }

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

@@ -52,7 +52,6 @@ const navLinks: NavLink[] = [
   {
     label: t('nav.resources', locale),
     items: [
-      { label: t('nav.learning', locale), href: routes.learning },
       {
         label: t('nav.blogs', locale),
         href: externalLinks.blog,

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

@@ -3,6 +3,7 @@ const logos = [
   'Amazon Studios',
   'Apple',
   'Autodesk',
+  'EA',
   'Harman',
   'Hp',
   'Lucid',

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

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

@@ -45,11 +45,11 @@ const progressPercent = computed(() => `${progress.value * 100}%`)
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-6 py-16 lg:px-16 lg:py-24">
+  <section class="px-6 py-16 lg:px-16 lg:py-24">
     <!-- Scrollable track -->
     <div
       ref="trackRef"
-      class="flex snap-x snap-mandatory scrollbar-none gap-12 overflow-x-auto lg:gap-20"
+      class="scrollbar-none flex snap-x snap-mandatory gap-12 overflow-x-auto lg:gap-20"
     >
       <div
         v-for="(fb, i) in feedbacks"

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

@@ -72,7 +72,7 @@ function handleLogoLoad() {
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
+    <div ref="videoRef" class="px-4 pb-20 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

@@ -10,7 +10,7 @@ const prefix = locale === 'zh-CN' ? '/zh-CN' : ''
 
 <template>
   <section
-    class="max-w-9xl mx-auto grid grid-cols-1 gap-6 px-6 py-16 lg:grid-cols-2 lg:px-16 lg:py-24"
+    class="grid grid-cols-1 gap-6 px-6 py-16 lg:grid-cols-2 lg:px-16 lg:py-24"
   >
     <a
       v-for="story in customerStories"

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

@@ -7,7 +7,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-6 py-16 lg:px-20 lg:py-40">
+  <section class="px-6 py-16 lg:px-20 lg:py-40">
     <VideoPlayer
       src="https://media.comfy.org/website/customers/silverside/video.webm"
       poster="https://media.comfy.org/website/customers/silverside/poster.webp"

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

@@ -7,7 +7,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 <template>
   <section
-    class="max-w-9xl mx-auto flex flex-col items-center px-4 pt-16 pb-24 text-center lg:px-20 lg:pt-20 lg:pb-40"
+    class="flex flex-col items-center px-4 pt-16 pb-24 text-center lg:px-20 lg:pt-20 lg:pb-40"
   >
     <span
       class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { GalleryItem } from '../../data/gallery'
 import type { Locale } from '../../i18n/translations'
+import type { GalleryItem } from './GallerySection.vue'
+
 import GalleryItemAttribution from './GalleryItemAttribution.vue'
 
 const {

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

@@ -10,13 +10,13 @@ import {
   watch
 } from 'vue'
 
-import { lockScroll, unlockScroll } from '../../composables/scrollLock'
-import { prefersReducedMotion } from '../../composables/useReducedMotion'
-import type { GalleryItem } from '../../data/gallery'
 import type { Locale } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
+import { lockScroll, unlockScroll } from '../../composables/scrollLock'
+import { prefersReducedMotion } from '../../composables/useReducedMotion'
 import BrandButton from '../common/BrandButton.vue'
 import GalleryItemAttribution from './GalleryItemAttribution.vue'
+import type { GalleryItem } from './GallerySection.vue'
 
 const {
   items,
@@ -251,7 +251,7 @@ onUnmounted(() => {
 
       <!-- Thumbnail strip -->
       <div
-        class="mx-auto mt-6 h-16 max-w-full scrollbar-none overflow-x-auto px-6 lg:h-30"
+        class="scrollbar-none mx-auto mt-6 h-16 max-w-full overflow-x-auto px-6 lg:h-30"
       >
         <div class="flex items-end gap-3">
           <button

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { GalleryItem } from '../../data/gallery'
 import type { Locale } from '../../i18n/translations'
+
 import { t } from '../../i18n/translations'
+import type { GalleryItem } from './GallerySection.vue'
 
 const {
   item,

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

@@ -2,8 +2,6 @@
 import { cn } from '@comfyorg/tailwind-utils'
 import { ref } from 'vue'
 
-import { visibleGalleryItems as items } from '../../data/gallery'
-import type { GalleryItem } from '../../data/gallery'
 import type { Locale } from '../../i18n/translations'
 import GalleryCard from './GalleryCard.vue'
 import GalleryDetailModal from './GalleryDetailModal.vue'
@@ -18,6 +16,166 @@ function openDetail(index: number) {
   modalOpen.value = true
 }
 
+export interface GalleryItem {
+  image?: string
+  video?: string
+  title: string
+  userAlias: string
+  teamAlias: string
+  tool: string
+  href?: string
+}
+
+const items: GalleryItem[] = [
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/eye.webm',
+    title: 'Until Our Eye Interlink harajuku',
+    userAlias: 'ShaneF Motion Design',
+    teamAlias: 'ThinkDiffusion',
+    tool: 'ComfyUI',
+    href: 'https://www.thinkdiffusion.com/studio#success-stories-anta'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/kyrie.webm',
+    title: 'Origins - Kyrie Irving',
+    userAlias: 'ShaneF Motion Design',
+    teamAlias: 'ThinkDiffusion',
+    tool: 'ComfyUI',
+    href: 'https://vimeo.com/1021360563'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/arcade.webm',
+    title: 'Neon Nights',
+    userAlias: 'ShaneF Motion Design',
+    teamAlias: 'DOGSTUDIO/DEPT®',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/p/C1kG1oErzUV/'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/dusk_mountains.webm',
+    title: 'Untitled',
+    userAlias: 'MidJourney man',
+    teamAlias: 'DOGSTUDIO/DEPT®',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/midjourney.man/?hl=fr'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/cigarette.webm',
+    title: 'Autopoiesis',
+    userAlias: 'Yogo',
+    teamAlias: 'Visual Frisson',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/visualfrisson/?hl=en'
+  },
+  {
+    video:
+      'https://media.comfy.org/videos/compressed_512/Eat%20It%20-%20Dance%20%5BWanAnimate%5D2.webm',
+    title: 'Eat It - Dance',
+    userAlias: 'Johana Lyu',
+    teamAlias: 'Visual Frisson',
+    tool: 'ComfyUI',
+    href: 'https://www.joannalyu.com/'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/flower.webm',
+    title: 'Fall',
+    userAlias: 'Nathan Shipley',
+    teamAlias: 'Visual Frisson',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/p/C3k9t_6vH5F/'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/buildings.webm',
+    title: 'Untitled',
+    userAlias: 'Nathan Shipley',
+    teamAlias: '',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/p/C6rEuJ4p9xU/'
+  },
+  {
+    video:
+      'https://media.comfy.org/videos/compressed_512/origami_shortened.webm',
+    title: 'Origami world',
+    userAlias: 'Karen X',
+    teamAlias: '',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/karenxcheng/'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/biking.webm',
+    title: 'Shot on InstaX',
+    userAlias: 'Karen X',
+    teamAlias: '',
+    tool: 'ComfyUI',
+    href: 'https://www.instagram.com/karenxcheng/'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/clouds.webm',
+    title: "It's gonna be a good good summer",
+    userAlias: 'Paul Trillo',
+    teamAlias: '',
+    tool: 'CogvideoX',
+    href: 'https://vimeo.com/1019685900'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/dududu.webm',
+    title: 'DDU-DU DDU-DU',
+    userAlias: 'Purz',
+    teamAlias: 'Andidea',
+    tool: 'Animatediff',
+    href: 'https://vimeo.com/1019924290'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/paul_trillo.webm',
+    title: 'Cuco - A Love Letter To LA',
+    userAlias: 'Paul Trillo',
+    teamAlias: 'CoffeeVectors',
+    tool: 'ComfyUI',
+    href: 'https://vimeo.com/1062859798'
+  },
+  {
+    video:
+      'https://media.comfy.org/videos/compressed_512/chibi_fish_tank_shortened.webm',
+    title: 'Show you my garden',
+    userAlias: 'Paul Trillo',
+    teamAlias: '',
+    tool: 'CogvideoX',
+    href: 'https://vimeo.com/1019685479'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/swings.webm',
+    title: 'Goodbye Beijing',
+    userAlias: 'Rui',
+    teamAlias: 'makeitrad',
+    tool: 'Animatediff',
+    href: 'https://x.com/rui40000'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/clouds_statue.webm',
+    title: 'Animation Reel',
+    userAlias: 'Andidea',
+    teamAlias: '',
+    tool: 'ComfyUI',
+    href: 'https://www.youtube.com/watch?v=qu3eIQ1uln8'
+  },
+  {
+    image: 'https://media.comfy.org/website/gallery/gallery.webp',
+    title: 'Amber Astronaut',
+    userAlias: 'Yogo',
+    teamAlias: '',
+    tool: 'ComfyUI',
+    href: 'https://de.linkedin.com/in/milan-kastenmueller-18778a174'
+  },
+  {
+    image: 'https://media.comfy.org/website/gallery/desert.webp',
+    title: 'Desert Landing',
+    userAlias: 'Yogo',
+    teamAlias: '',
+    tool: 'ComfyUI',
+    href: 'https://de.linkedin.com/in/milan-kastenmueller-18778a174'
+  }
+]
+
 /**
  * Desktop layout pattern (repeating):
  *  Row A: full-width                           (1 item)
@@ -65,10 +223,7 @@ while (idx < items.length) {
 </script>
 
 <template>
-  <section
-    data-testid="gallery-grid"
-    class="max-w-9xl mx-auto px-4 pb-20 lg:px-20"
-  >
+  <section data-testid="gallery-grid" class="px-4 pb-20 lg:px-20">
     <!-- Desktop grid -->
     <div
       class="rounded-5xl bg-transparency-white-t4 hidden flex-col gap-2 p-2 lg:flex"

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

@@ -8,9 +8,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section
-    class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-36 pb-16 text-center"
-  >
+  <section class="flex flex-col items-center px-6 pt-36 pb-16 text-center">
     <SectionLabel>
       {{ t('gallery.label', locale) }}
     </SectionLabel>

apps/website/src/components/home/BuildWhatSection.vue

@@ -15,7 +15,7 @@ const row2 = [
 
 <template>
   <section
-    class="bg-primary-comfy-ink max-w-9xl mx-auto flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
+    class="bg-primary-comfy-ink flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
   >
     <!-- Node rows -->
     <div

apps/website/src/components/home/CaseStudySpotlightSection.vue

@@ -12,9 +12,7 @@ const routes = getRoutes(locale)
 </script>
 
 <template>
-  <section
-    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
-  >
+  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
     <GlassCard
       class="flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
     >

apps/website/src/components/home/GetStartedSection.vue

@@ -36,9 +36,7 @@ const steps = [
 </script>
 
 <template>
-  <section
-    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
-  >
+  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
     <div class="flex flex-col gap-12 lg:flex-row lg:gap-8">
       <!-- Left heading -->
       <div

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

@@ -15,7 +15,7 @@ const { loaded: logoLoaded } = useHeroLogo(logoContainer)
 
 <template>
   <section
-    class="max-w-9xl relative mx-auto flex min-h-auto flex-col lg:flex-row lg:items-center"
+    class="relative flex min-h-auto flex-col lg:flex-row lg:items-center"
   >
     <div
       ref="logoContainer"

apps/website/src/components/home/ProductShowcaseSection.vue

@@ -55,10 +55,7 @@ watch(activeIndex, (current, previous) => {
 </script>
 
 <template>
-  <section
-    ref="sectionRef"
-    class="max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
-  >
+  <section ref="sectionRef" class="px-4 py-20 lg:px-20 lg:py-24">
     <!-- Section header -->
     <div class="flex flex-col items-center text-center">
       <NodeBadge :segments="badgeSegments" segment-class="" />

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

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

@@ -1,29 +0,0 @@
-<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 100 100"
-    fill="none"
-    aria-hidden="true"
-    :class="$props.class"
-  >
-    <g clip-path="url(#node-union-icon-clip)">
-      <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="node-union-icon-clip">
-        <rect width="100" height="100" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>