Feature/cloud reponsive (#5580)

* fix: hero title font & responsive

* chore: text center added

* chore: style modified

* chore: delete learn about button

* chore: waitlist title added

src/platform/onboarding/cloud/CloudLoginView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex items-center justify-center p-8">
-    <div class="w-96 p-2">
+    <div class="w-96 max-w-[100vw] p-2">
       <div class="bg-[#2d2e32] p-4 rounded-lg">
         <h4 class="m-0 pb-2 text-lg">
           {{ t('cloudPrivateBeta_title') }}

src/platform/onboarding/cloud/CloudSurveyView.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <Stepper value="1" class="flex flex-col min-h-[638px] min-w-[320px]">
+    <Stepper
+      value="1"
+      class="flex flex-col max-h-[80vh] h-[638px] max-w-[90vw] w-[320px]"
+    >
       <ProgressBar
         :value="progressPercent"
         :show-value="false"
@@ -11,7 +14,7 @@
         <StepPanel
           v-slot="{ activateCallback }"
           value="1"
-          class="flex-1 min-h-full flex flex-col justify-between"
+          class="flex-1 min-h-full flex flex-col justify-between bg-transparent"
         >
           <div>
             <label class="text-lg font-medium block mb-8">{{
@@ -52,7 +55,7 @@
         <StepPanel
           v-slot="{ activateCallback }"
           value="2"
-          class="flex-1 min-h-full flex flex-col justify-between"
+          class="flex-1 min-h-full flex flex-col justify-between bg-transparent"
         >
           <div>
             <label class="text-lg font-medium block mb-8">{{
@@ -98,7 +101,7 @@
         <StepPanel
           v-slot="{ activateCallback }"
           value="3"
-          class="flex-1 min-h-full flex flex-col justify-between"
+          class="flex-1 min-h-full flex flex-col justify-between bg-transparent"
         >
           <div>
             <label class="text-lg font-medium block mb-8">{{
@@ -151,7 +154,7 @@
         <StepPanel
           v-slot="{ activateCallback }"
           value="4"
-          class="flex-1 min-h-full flex flex-col justify-between"
+          class="flex-1 min-h-full flex flex-col justify-between bg-transparent"
         >
           <div>
             <label class="text-lg font-medium block mb-8">{{

src/platform/onboarding/cloud/CloudWaitlistView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center justify-center p-8">
     <div class="w-full max-w-md text-center">
-      <h1 class="text-3xl italic font-bolder mb-8">
+      <h1 class="font-abcrom font-black italic uppercase hero-title">
         {{ t('cloudWaitlist_titleLine1') }}<br />
         {{ t('cloudWaitlist_titleLine2') }}
       </h1>

src/platform/onboarding/cloud/assets/css/fonts.css

@@ -0,0 +1,65 @@
+/* ABC ROM Extended — full face mapping */
+@font-face {
+  font-family: 'ABC ROM Extended';
+  src:
+    local('ABC ROM Extended Bold Italic'),
+    local('ABCRom BoldItalic'),
+    url('../fonts/ABCROM-BoldItalic.woff2') format('woff2');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM Extended';
+  src:
+    local('ABC ROM Extended Bold'),
+    local('ABCRom Bold'),
+    url('../fonts/ABCROM-Bold.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM Extended';
+  src:
+    local('ABC ROM Extended Medium'),
+    local('ABCRom Medium'),
+    url('../fonts/ABCROM-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM Extended';
+  src:
+    local('ABC ROM Extended Regular'),
+    local('ABCRom Regular'),
+    url('../fonts/ABCROM-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Prevent browser from synthesizing fake bold/italic which can cause mismatches */
+.hero-title,
+.font-abcrom {
+  font-family: 'ABC ROM Extended', sans-serif;
+  font-synthesis: none; /* no faux bold/italic */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Figma-like hero style */
+.hero-title {
+  font-size: 32px;
+  font-weight: 900;
+  font-style: italic;
+  text-transform: uppercase;
+  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  /* Figma has leading-trim/text-edge which CSS doesn't support; emulate with tight line-height */
+  line-height: 1.1;
+}

src/platform/onboarding/cloud/components/CloudLogo.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="px-[64px] pt-[64px]">
+  <div class="w-5/6 h-[7%] max-h-[70px] mx-auto flex items-end">
     <img
       src="/assets/images/comfy-cloud-logo.svg"
       alt="Comfy Cloud Logo"
-      class="h-10"
+      class="h-3/4 max-h-10 w-auto"
     />
   </div>
 </template>

src/platform/onboarding/cloud/components/CloudTemplate.vue

@@ -9,7 +9,7 @@
         <CloudTemplateFooter />
       </template>
     </BaseViewTemplate>
-    <div class="flex-1 relative bg-black overflow-hidden">
+    <div class="flex-1 relative bg-black overflow-hidden hidden lg:block">
       <!-- Video Background -->
       <video
         class="absolute inset-0 w-full h-full object-cover"
@@ -25,11 +25,11 @@
       <div class="absolute inset-0 w-full h-full bg-black/30"></div>
 
       <!-- Optional Overlay for better visual -->
-      <div class="absolute inset-0 flex justify-center items-center">
+      <div
+        class="absolute inset-0 flex justify-center items-center text-white text-center"
+      >
         <div>
-          <h1
+          <h1 class="font-abcrom font-black italic uppercase hero-title">
-            class="text-5xl italic font-bolder mb-8 uppercase text-center text-white"
-          >
             {{ t('cloudStart_title') }}
           </h1>
           <p class="m-2 text-xl text-center text-white">
@@ -41,17 +41,11 @@
         </div>
       </div>
       <div class="absolute inset-0 flex flex-col justify-end px-14 pb-[64px]">
-        <div class="flex items-center justify-between">
+        <div class="flex items-center justify-end">
-          <Button
-            type="button"
-            class="h-10 bg-black text-white font-bold"
-            severity="secondary"
-            @click="handleLearnAboutClick"
-          >
-            {{ t('cloudStart_learnAboutButton') }}
-          </Button>
           <div class="flex items-center gap-3">
-            <p class="text-white">{{ t('cloudStart_wantToRun') }}</p>
+            <p class="text-md text-white">
+              {{ t('cloudStart_wantToRun') }}
+            </p>
             <Button
               type="button"
               class="h-10 bg-black text-white font-bold"
@@ -77,11 +71,10 @@ import CloudLogo from '@/platform/onboarding/cloud/components/CloudLogo.vue'
 import CloudTemplateFooter from '@/platform/onboarding/cloud/components/CloudTemplateFooter.vue'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
-const handleLearnAboutClick = () => {
-  window.open('https://www.comfy.org', '_blank')
-}
-
 const handleDownloadClick = () => {
   window.open('https://www.comfy.org/download', '_blank')
 }
 </script>
+<style>
+@import '@/platform/onboarding/cloud/assets/css/fonts.css';
+</style>

src/platform/onboarding/cloud/components/CloudTemplateFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="flex gap-2.5 pl-[60px] pb-[60px]">
+  <footer class="flex gap-2.5 w-5/6 h-[5%] max-h-[60px] mx-auto items-start">
     <a
       href="https://www.comfy.org/terms-of-service"
       target="_blank"