fix: update externalLinks.app to cloud and add locale reactivity

- Rename externalLinks.app to externalLinks.cloud across 5 consumers
- Make routes/features computed in enterprise HeroSection and TeamSection
- Make faqs computed in FAQSection for locale reactivity

Amp-Thread-ID: https://ampcode.com/threads/T-019d93ac-259a-76e8-93cc-603867aa5d6e
Co-authored-by: Amp <amp@ampcode.com>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 
 import type { Locale, TranslationKey } from '../../i18n/translations'
 
@@ -26,12 +26,15 @@ const faqKeys: Array<{ q: TranslationKey; a: TranslationKey }> = Array.from(
   })
 )
 
-const faqs = faqKeys.map(({ q, a }) => ({
-  question: t(q, locale),
-  answer: t(a, locale)
-}))
+const faqs = computed(() =>
+  faqKeys.map(({ q, a }) => ({
+    question: t(q, locale),
+    answer: t(a, locale)
+  }))
+)
 
-const expanded = reactive(faqs.map(() => true))
+// Start expanded so answers are visible on load
+const expanded = reactive(faqKeys.map(() => true))
 
 function toggle(index: number) {
   expanded[index] = !expanded[index]

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

@@ -87,7 +87,7 @@ const ctaButtons = [
   },
   {
     label: t('nav.launchCloud', locale),
-    href: externalLinks.app,
+    href: externalLinks.cloud,
     primary: true
   }
 ]

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

@@ -14,27 +14,33 @@ const FRAME_COUNT = 75
 const images: HTMLImageElement[] = []
 let ctx: gsap.Context | undefined
 
+function drawFrame(
+  canvas: HTMLCanvasElement,
+  draw: CanvasRenderingContext2D,
+  frame: number
+) {
+  const index = Math.round(frame)
+  const img = images[index]
+  if (!img) return
+  canvas.width = img.width
+  canvas.height = img.height
+  draw.drawImage(img, 0, 0)
+}
+
 onMounted(() => {
-  if (!canvasRef.value || prefersReducedMotion()) return
   const canvas = canvasRef.value
+  if (!canvas) return
   const draw = canvas.getContext('2d')
   if (!draw) return
 
+  const reducedMotion = prefersReducedMotion()
   let loadedCount = 0
 
-  function drawFrame(frame: number) {
-    const index = Math.round(frame)
-    const img = images[index]
-    if (!img || !draw) return
-    canvas.width = img.width
-    canvas.height = img.height
-    draw.drawImage(img, 0, 0)
-  }
-
   function onFrameReady() {
     loadedCount++
     if (loadedCount === FRAME_COUNT) {
-      drawFrame(0)
+      drawFrame(canvas, draw, 0)
+      if (reducedMotion) return
       const proxy = { frame: 0 }
       ctx = gsap.context(() => {
         gsap.to(proxy, {
@@ -43,7 +49,7 @@ onMounted(() => {
           ease: 'none',
           repeat: -1,
           onUpdate() {
-            drawFrame(proxy.frame)
+            drawFrame(canvas, draw, proxy.frame)
           }
         })
       })

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

@@ -131,6 +131,7 @@ useParallax([leftImgRef], { trigger: sectionRef, y: -60 })
         <button
           v-for="(category, index) in categories"
           :key="category.label"
+          type="button"
           :class="
             cn(
               'lg:text-6.5xl cursor-pointer text-center text-4xl font-light whitespace-pre-line transition-colors',

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

@@ -30,7 +30,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
           class="mt-10 flex w-full max-w-md flex-col gap-4 lg:w-auto lg:max-w-none lg:flex-row"
         >
           <a
-            :href="externalLinks.app"
+            :href="externalLinks.cloud"
             target="_blank"
             rel="noopener noreferrer"
             class="bg-primary-comfy-yellow text-primary-comfy-ink rounded-full px-8 py-4 text-center text-sm font-bold tracking-wider transition-opacity hover:opacity-90 lg:min-w-60"

apps/website/src/components/product/api/StepsSection.vue

@@ -54,7 +54,7 @@ const steps = [
         class="mt-12 flex flex-col items-center gap-4 lg:flex-row lg:justify-center"
       >
         <a
-          :href="externalLinks.app"
+          :href="externalLinks.cloud"
           target="_blank"
           rel="noopener"
           class="bg-primary-comfy-yellow text-primary-comfy-ink w-full rounded-full px-8 py-4 text-center text-sm font-bold tracking-wider transition-opacity hover:opacity-90 lg:w-auto lg:min-w-48"

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

@@ -26,7 +26,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
     </p>
 
     <BrandButton
-      :href="externalLinks.app"
+      :href="externalLinks.cloud"
       :label="t('cloud.hero.cta', locale)"
       class="mt-12 w-full text-center lg:mt-8 lg:w-auto"
     />

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { Locale } from '../../../i18n/translations'
 
 import { getRoutes } from '../../../config/routes'
@@ -7,7 +9,7 @@ import ProductHeroBadge from '../../common/ProductHeroBadge.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const routes = getRoutes(locale)
+const routes = computed(() => getRoutes(locale))
 </script>
 
 <template>

apps/website/src/components/product/enterprise/TeamSection.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { Locale } from '../../../i18n/translations'
 
 import { getRoutes } from '../../../config/routes'
@@ -7,9 +9,9 @@ import FeatureShowcaseSection from '../shared/FeatureShowcaseSection.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const routes = getRoutes(locale)
+const routes = computed(() => getRoutes(locale))
 
-const features = [
+const features = computed(() => [
   {
     title: t('enterprise.team.feature1.title', locale),
     description: t('enterprise.team.feature1.description', locale)
@@ -18,15 +20,15 @@ const features = [
     title: t('enterprise.team.feature2.title', locale),
     description: t('enterprise.team.feature2.description', locale),
     ctaText: t('enterprise.team.feature2.cta', locale),
-    ctaHref: routes.cloud
+    ctaHref: routes.value.cloud
   },
   {
     title: t('enterprise.team.feature3.title', locale),
     description: t('enterprise.team.feature3.description', locale),
     ctaText: t('enterprise.hero.contactSales', locale),
-    ctaHref: routes.contact
+    ctaHref: routes.value.contact
   }
-]
+])
 </script>
 
 <template>

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

@@ -14,7 +14,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
     >
       {{ t('download.cloud.prefix', locale) }}
       <a
-        :href="externalLinks.app"
+        :href="externalLinks.cloud"
         class="text-primary-comfy-yellow mx-1 font-bold tracking-widest uppercase hover:underline"
       >
         {{ t('download.cloud.cta', locale) }}

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

@@ -21,7 +21,8 @@ function cellClass(i: number): string {
 <template>
   <div class="flex flex-1 items-center justify-center" aria-hidden="true">
     <div
-      :class="cn('grid gap-0.5', `grid-cols-${columns}`)"
+      :class="cn('grid gap-0.5')"
+      :style="{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }"
       class="transform-[rotateX(55deg)_rotateZ(45deg)]"
     >
       <span v-for="i in count" :key="i" :class="cellClass(i)" />