refactor(website): review fixes from PR #11273

- Extract IsometricGrid.vue from duplicated markup in
  StepsSection and BYOKeySection
- Replace inline style transforms with Tailwind arbitrary
  values [transform:rotateX(55deg)_rotateZ(45deg)]
- Use cn() instead of template literal for class merging
  in AIModelsSection.getCardClass
- Use runtime narrowing instead of as-cast in
  cloud/ReasonSection slot
- Fix double top spacing on cloud HeroSection,
  privacy-policy, and terms-of-service caused by global
  mt-20/mt-32 on <main>

Amp-Thread-ID: https://ampcode.com/threads/T-019d9382-2e30-710b-9b86-23f773b4634b
Co-authored-by: Amp <amp@ampcode.com>

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

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { Locale } from '../../../i18n/translations'
 
-import { cn } from '@comfyorg/tailwind-utils'
-
 import { externalLinks } from '../../../config/routes'
 import { t } from '../../../i18n/translations'
 import CardGridSection from '../shared/CardGridSection.vue'
+import IsometricGrid from '../shared/IsometricGrid.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
@@ -35,28 +34,7 @@ const steps = [
       :key="step.number"
       class="bg-primary-comfy-ink flex aspect-square flex-col rounded-3xl border border-white/10 p-6"
     >
-      <!-- Isometric illustration area -->
-      <div class="flex flex-1 items-center justify-center" aria-hidden="true">
-        <div
-          class="grid grid-cols-5 gap-0.5"
-          style="transform: rotateX(55deg) rotateZ(45deg)"
-        >
-          <span
-            v-for="i in 15"
-            :key="i"
-            :class="
-              cn(
-                'block size-5 rounded-sm',
-                i === 3 || i === 8 || i === 13
-                  ? 'bg-primary-comfy-yellow'
-                  : i % 3 === 0
-                    ? 'bg-primary-comfy-plum'
-                    : 'bg-secondary-mauve'
-              )
-            "
-          />
-        </div>
-      </div>
+      <IsometricGrid />
 
       <!-- Step content -->
       <p class="text-primary-comfy-yellow text-sm font-bold tracking-wider">

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

@@ -66,7 +66,10 @@ const modelCards: ModelCard[] = [
 ]
 
 function getCardClass(layoutClass: string): string {
-  return `${layoutClass} group relative h-72 overflow-hidden rounded-4xl bg-black/40 lg:h-auto cursor-pointer`
+  return cn(
+    layoutClass,
+    'group relative h-72 cursor-pointer overflow-hidden rounded-4xl bg-black/40 lg:h-auto'
+  )
 }
 </script>
 

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

@@ -9,7 +9,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="flex flex-col items-center px-4 py-24 lg:px-20 lg:py-24">
+  <section class="flex flex-col items-center px-4 pb-24 lg:px-20 lg:pb-24">
     <ProductHeroBadge text="CLOUD" />
 
     <h1

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

@@ -41,7 +41,7 @@ const reasons: CloudReason[] = [
     :reasons="reasons"
   >
     <template #reason-extra="{ reason }">
-      <div v-if="(reason as CloudReason).badge" class="mt-3">
+      <div v-if="'badge' in reason && reason.badge" class="mt-3">
         <span
           class="font-formula-condensed text-primary-comfy-yellow text-lg font-bold tracking-wide"
         >

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Locale } from '../../../i18n/translations'
 
-import { cn } from '@comfyorg/tailwind-utils'
 import { t } from '../../../i18n/translations'
 import CardGridSection from '../shared/CardGridSection.vue'
+import IsometricGrid from '../shared/IsometricGrid.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
@@ -30,28 +30,7 @@ const cards = [
       :key="i"
       class="bg-primary-comfy-ink flex aspect-square flex-col rounded-3xl border border-white/10 p-6"
     >
-      <!-- Isometric illustration area -->
-      <div class="flex flex-1 items-center justify-center" aria-hidden="true">
-        <div
-          class="grid grid-cols-5 gap-0.5"
-          style="transform: rotateX(55deg) rotateZ(45deg)"
-        >
-          <span
-            v-for="j in 15"
-            :key="j"
-            :class="
-              cn(
-                'block size-5 rounded-sm',
-                j === 3 || j === 8 || j === 13
-                  ? 'bg-primary-comfy-yellow'
-                  : j % 3 === 0
-                    ? 'bg-primary-comfy-plum'
-                    : 'bg-secondary-mauve'
-              )
-            "
-          />
-        </div>
-      </div>
+      <IsometricGrid />
 
       <!-- Card content -->
       <h3 class="text-primary-comfy-canvas mt-2 text-xl font-semibold">

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

@@ -52,8 +52,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
         <!-- Isometric node clusters -->
         <div class="relative z-10 mt-20 flex gap-4 lg:mt-0 lg:gap-6">
           <div
-            class="grid grid-cols-3 gap-0.5"
-            style="transform: rotateX(55deg) rotateZ(45deg)"
+            class="grid transform-[rotateX(55deg)_rotateZ(45deg)] grid-cols-3 gap-0.5"
           >
             <span
               class="bg-secondary-mauve block size-7 rounded-lg lg:size-9"
@@ -84,8 +83,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
             />
           </div>
           <div
-            class="grid grid-cols-3 gap-0.5"
-            style="transform: rotateX(55deg) rotateZ(45deg)"
+            class="grid transform-[rotateX(55deg)_rotateZ(45deg)] grid-cols-3 gap-0.5"
           >
             <span
               class="bg-primary-warm-gray block size-7 rounded-lg lg:size-9"

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { count = 15, columns = 5 } = defineProps<{
+  count?: number
+  columns?: number
+}>()
+
+function cellClass(i: number): string {
+  return cn(
+    'block size-5 rounded-sm',
+    i === 3 || i === 8 || i === 13
+      ? 'bg-primary-comfy-yellow'
+      : i % 3 === 0
+        ? 'bg-primary-comfy-plum'
+        : 'bg-secondary-mauve'
+  )
+}
+</script>
+
+<template>
+  <div class="flex flex-1 items-center justify-center" aria-hidden="true">
+    <div
+      :class="cn('grid gap-0.5', `grid-cols-${columns}`)"
+      class="transform-[rotateX(55deg)_rotateZ(45deg)]"
+    >
+      <span v-for="i in count" :key="i" :class="cellClass(i)" />
+    </div>
+  </div>
+</template>

apps/website/src/pages/privacy-policy.astro

@@ -7,7 +7,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'
   description="Comfy privacy policy. Learn how we collect, use, and protect your personal information."
   noindex
 >
-  <div class="mx-auto max-w-3xl px-6 py-24">
+  <div class="mx-auto max-w-3xl px-6 pb-24">
     <h1 class="text-3xl font-bold text-white">Privacy Policy</h1>
     <p class="mt-2 text-sm text-smoke-500">Effective date: April 18, 2025</p>
 

apps/website/src/pages/terms-of-service.astro

@@ -7,7 +7,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'
   description="Terms of Service for ComfyUI and related Comfy services."
   noindex
 >
-  <div class="mx-auto max-w-3xl px-6 py-24 sm:py-32">
+  <div class="mx-auto max-w-3xl px-6 pb-24 sm:pb-32">
     <header class="mb-16">
       <h1 class="text-3xl font-bold text-white">Terms of Service</h1>
       <p class="mt-2 text-lg text-smoke-700">for ComfyUI</p>