feat(website): address brand portal design feedback

Add click-to-copy on all four swatch values, swap the Icon card to the ink square / yellow C (brand page only), route the contact links to the support site, match the stacked hero CTA widths on mobile, and remove the halo ring from the background nodes.

Author: mobeenabdullah

apps/website/src/pages/brand.astro

@@ -20,7 +20,7 @@ const locale = 'en' as const
     <BrandBackground client:idle />
     <BrandHeroSection />
     <BrandLogosSection />
-    <BrandColorSection />
+    <BrandColorSection client:visible />
     <BrandVoiceSection />
     <BrandTrademarkSection />
     <BrandQuestionsSection />

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

@@ -18,7 +18,7 @@ import { t } from '../../i18n/translations'
     <BrandBackground client:idle />
     <BrandHeroSection locale="zh-CN" />
     <BrandLogosSection locale="zh-CN" />
-    <BrandColorSection locale="zh-CN" />
+    <BrandColorSection client:visible locale="zh-CN" />
     <BrandVoiceSection locale="zh-CN" />
     <BrandTrademarkSection locale="zh-CN" />
     <BrandQuestionsSection locale="zh-CN" />

apps/website/src/templates/brand/BrandBackground.vue

@@ -65,16 +65,11 @@ function draw() {
   }
 
   ctx.globalAlpha = 1
+  ctx.fillStyle = 'rgba(242, 255, 89, 0.9)'
   for (const n of nodes) {
-    ctx.fillStyle = 'rgba(242, 255, 89, 0.9)'
     ctx.beginPath()
     ctx.arc(n.x * w, n.y * h, 2.5 * dpr, 0, Math.PI * 2)
     ctx.fill()
-
-    ctx.strokeStyle = 'rgba(242, 255, 89, 0.25)'
-    ctx.beginPath()
-    ctx.arc(n.x * w, n.y * h, 8 * dpr, 0, Math.PI * 2)
-    ctx.stroke()
   }
 }
 

apps/website/src/templates/brand/BrandColorSection.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { Locale } from '../../i18n/translations'
 
+import { Check } from '@lucide/vue'
 import { cn } from '@comfyorg/tailwind-utils'
+import { useClipboard } from '@vueuse/core'
+import { ref } from 'vue'
 
 import SectionHeader from '../../components/common/SectionHeader.vue'
 import { brandColors } from '../../data/brandColors'
@@ -10,6 +13,14 @@ import { t } from '../../i18n/translations'
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 const specRows = ['hex', 'rgb', 'hsl', 'cmyk'] as const
+
+const { copy, copied } = useClipboard({ copiedDuring: 1500 })
+const copiedId = ref<string | null>(null)
+
+function copyValue(id: string, value: string) {
+  copiedId.value = id
+  void copy(value)
+}
 </script>
 
 <template>
@@ -39,11 +50,25 @@ const specRows = ['hex', 'rgb', 'hsl', 'cmyk'] as const
       >
         <span class="text-xs font-semibold">{{ color.name }}</span>
         <dl
-          class="mt-3 grid grid-cols-[auto_1fr] gap-x-4 text-xs leading-[1.4]"
+          class="mt-3 grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 text-xs leading-[1.4]"
         >
           <template v-for="row in specRows" :key="row">
             <dt class="uppercase opacity-50">{{ row }}</dt>
-            <dd>{{ color[row] }}</dd>
+            <dd>
+              <button
+                type="button"
+                :aria-label="`Copy ${row} value ${color[row]}`"
+                class="inline-flex cursor-pointer items-center gap-1 text-left hover:underline"
+                @click="copyValue(`${color.hex}-${row}`, color[row])"
+              >
+                {{ color[row] }}
+                <Check
+                  v-if="copied && copiedId === `${color.hex}-${row}`"
+                  class="size-3"
+                  aria-hidden="true"
+                />
+              </button>
+            </dd>
           </template>
         </dl>
       </li>

apps/website/src/templates/brand/BrandHeroSection.vue

@@ -36,7 +36,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
         :href="BRAND_GUIDELINES_PDF"
         download
         variant="default"
-        class="h-12 px-5 text-sm font-extrabold"
+        class="h-12 w-full px-5 text-sm font-extrabold sm:w-auto"
       >
         {{ t('brand.hero.viewGuidelines', locale) }}
       </Button>
@@ -45,7 +45,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
         :href="BRAND_ASSETS_ZIP"
         download
         variant="outline"
-        class="h-12 px-5 text-sm font-extrabold"
+        class="h-12 w-full px-5 text-sm font-extrabold sm:w-auto"
       >
         {{ t('brand.hero.downloadLogos', locale) }}
       </Button>

apps/website/src/templates/brand/BrandLogosSection.vue

@@ -9,6 +9,12 @@ import { BRAND_ASSETS_ZIP } from '../../data/brandAssets'
 import { t } from '../../i18n/translations'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const assets = affiliateBrandAssets.map((asset) =>
+  asset.id === 'icon'
+    ? { ...asset, preview: '/affiliates/brand/comfy-color-combo-ink.svg' }
+    : asset
+)
 </script>
 
 <template>
@@ -33,7 +39,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
     <ul class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
       <li
-        v-for="asset in affiliateBrandAssets"
+        v-for="asset in assets"
         :key="asset.id"
         class="flex min-h-60 flex-col rounded-[30px] border-[1.5px] border-white/8 lg:min-h-[285px]"
       >

apps/website/src/templates/brand/BrandQuestionsSection.vue

@@ -2,12 +2,10 @@
 import type { Locale } from '../../i18n/translations'
 
 import SectionHeader from '../../components/common/SectionHeader.vue'
-import { getRoutes } from '../../config/routes.ts'
+import { externalLinks } from '../../config/routes.ts'
 import { t } from '../../i18n/translations'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const routes = getRoutes(locale)
 </script>
 
 <template>
@@ -20,7 +18,12 @@ const routes = getRoutes(locale)
 
     <p class="text-primary-warm-gray mt-6 max-w-2xl text-sm leading-[1.6]">
       {{ t('brand.questions.body', locale) }}
-      <a :href="routes.contact" class="text-primary-comfy-yellow underline">
+      <a
+        :href="externalLinks.support"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary-comfy-yellow underline"
+      >
         {{ t('brand.questions.contact', locale) }}
       </a>
     </p>

apps/website/src/templates/brand/BrandTrademarkSection.vue

@@ -2,12 +2,10 @@
 import type { Locale } from '../../i18n/translations'
 
 import SectionHeader from '../../components/common/SectionHeader.vue'
-import { getRoutes } from '../../config/routes.ts'
+import { externalLinks } from '../../config/routes.ts'
 import { t } from '../../i18n/translations'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const routes = getRoutes(locale)
 </script>
 
 <template>
@@ -23,7 +21,12 @@ const routes = getRoutes(locale)
       <p>{{ t('brand.trademark.body2', locale) }}</p>
       <p>
         {{ t('brand.trademark.body3', locale) }}
-        <a :href="routes.contact" class="text-primary-comfy-yellow underline">
+        <a
+          :href="externalLinks.support"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-primary-comfy-yellow underline"
+        >
           {{ t('brand.trademark.contact', locale) }}
         </a>
       </p>