From f91af0744c28515599687e9bb2f00eaa672b6d59 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Tue, 20 Jan 2026 20:16:18 +0000
Subject: [PATCH] singup page toggle centered

---
 .../src/components/auth/SignUpFormUnified.tsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/auth/SignUpFormUnified.tsx b/frontend/src/components/auth/SignUpFormUnified.tsx
index 6ffeb8a6..7b6cc065 100644
--- a/frontend/src/components/auth/SignUpFormUnified.tsx
+++ b/frontend/src/components/auth/SignUpFormUnified.tsx
@@ -459,8 +459,20 @@ export default function SignUpFormUnified({
           document.getElementById('signup-pricing-plans') &&
           ReactDOM.createPortal(
             <div className="space-y-6">
-              {/* Billing Toggle - Centered with inline discount */}
-              <div className="flex items-center justify-center gap-3 w-full max-w-[640px] mx-auto">
+              {/* Billing Toggle - Centered with discount badge above */}
+              <div className="flex flex-col items-center gap-2 w-full max-w-[640px] mx-auto">
+                {/* Savings Badge - Fixed height to prevent layout shift */}
+                <div className="h-8 flex items-center justify-center">
+                  <p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-all duration-300 ${
+                    billingPeriod === 'annually' ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+                  }`}>
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    Save up to {annualDiscountPercent}%
+                  </p>
+                </div>
+                {/* Toggle Switch */}
                 <div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm">
                   <span
                     className={`absolute top-1/2 left-1 flex h-11 w-32 -translate-y-1/2 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
@@ -486,14 +498,6 @@ export default function SignUpFormUnified({
                     Annually
                   </button>
                 </div>
-                <p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
-                  billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
-                }`}>
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  Save up to {annualDiscountPercent}%
-                </p>
               </div>
 
               {/* Plan Cards - Single column, stacked vertically */}