fix: optimize signup page layout and styling (#2483)

Co-authored-by: JivusAyrus <suvijsurya76@gmail.com>

Author: wunderhawk

studio/src/components/auth/auth-components.tsx

@@ -132,7 +132,7 @@ export const TrustedCompanies = () => {
 export const MarketingHeader = () => {
   return (
     <div className="text-center">
-      <h1 className="bg-[linear-gradient(180deg,#FFFFFF_50%,#999999_100%)] bg-clip-text text-2xl font-normal leading-[130%] text-transparent sm:text-[32px]">
+      <h1 className="bg-[linear-gradient(180deg,#FFFFFF_50%,#999999_100%)] bg-clip-text text-2xl font-bold leading-[130%] text-transparent sm:text-[32px]">
         Cosmo: Open-Source
         <br />
         GraphQL Federation Solution
@@ -222,7 +222,7 @@ export const ProductCosmoStack = ({ variant = "login" }: { variant?: "login" | "
   const features = variant === "login" ? loginFeatures : signupFeatures;
 
   return (
-    <div className="flex w-full flex-col px-2 sm:max-w-xl sm:px-8">
+    <div className="flex w-full flex-col px-2 sm:max-w-[43.2rem] sm:px-8">
       <MarketingHeader />
       <div className="mt-10 flex flex-col gap-6">
         {features.map((feature, index) => (

studio/src/pages/login.tsx

@@ -157,7 +157,7 @@ const LoginPage: NextPageWithLayout = () => {
           </div>
 
           {/* Right section - Marketing */}
-          <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-16 lg:min-h-0 lg:w-1/2 lg:items-start lg:px-14 lg:pb-28 lg:pt-12">
+          <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-16 lg:min-h-0 lg:w-1/2 lg:items-start lg:px-14 lg:pb-40 lg:pt-8">
             <ProductCosmoStack variant="login" />
           </div>
         </div>

studio/src/pages/signup.tsx

@@ -47,16 +47,28 @@ const SignupPage: NextPageWithLayout = () => {
       {/* Main content area */}
       <div className="flex flex-1 items-center justify-center px-4 py-8 lg:px-0 lg:py-0">
         <div className="flex w-full max-w-screen-2xl flex-col lg:flex-row">
-          {/* Left section - Form */}
-          <div className="flex min-h-screen w-full flex-col items-center justify-center lg:min-h-0 lg:w-1/2 lg:p-12">
+          {/* Left section - Marketing */}
+          <div className="flex w-full flex-col items-center justify-center px-4 py-10 lg:min-h-screen lg:w-1/2 lg:items-start lg:px-14 lg:pb-40 lg:pt-2">
+            <div className="lg:mt-8">
+              <ProductCosmoStack variant="signup" />
+            </div>
+          </div>
+
+          {/* Right section - Form */}
+          <div className="mt-8 flex w-full flex-col items-center justify-center pb-10 lg:mt-0 lg:min-h-screen lg:w-1/2 lg:p-12">
             <div className="w-full max-w-md lg:max-w-lg">
               <AuthCard className="w-full rounded-xl px-6 py-8 lg:px-10 lg:py-12">
-                <AuthLogoHeader />
+                <div className="hidden lg:block">
+                  <AuthLogoHeader />
+                </div>
 
                 <div className="mt-8 lg:mt-12">
-                  <h2 className="text-2xl font-normal leading-[120%] text-white lg:text-[32px]">
+                  <h2 className="text-center text-2xl font-normal leading-[120%] text-white lg:text-[32px]">
                     Sign up for free
                   </h2>
+                  <p className="mt-2 text-center text-sm text-white/85 lg:text-base">
+                    Try Cosmo as Managed Service. No card required.
+                  </p>
 
                   <div className="mt-6 space-y-3 lg:mt-8 lg:space-y-4">
                     <Button
@@ -125,11 +137,6 @@ const SignupPage: NextPageWithLayout = () => {
               </div>
             </div>
           </div>
-
-          {/* Right section - Marketing */}
-          <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-16 lg:min-h-0 lg:w-1/2 lg:items-start lg:px-14 lg:pb-28 lg:pt-12">
-            <ProductCosmoStack variant="signup" />
-          </div>
         </div>
       </div>