From 181837f5a4704376a3fcf715dd4fe2959481cc81 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 31 Jan 2026 19:51:05 +0100
Subject: [PATCH] refactor: enhance layout of PricingSection by restructuring
 button group and adding promotional text for yearly subscription

---
 components/PricingSection.tsx | 50 ++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index f9e3570..c2384f4 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -245,30 +245,32 @@ export default function PricingSection() {
             />
           </div>
 
-          <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex shrink-0">
-            <button
-              onClick={() => setIsYearly(false)}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
-                !isYearly 
-                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' 
-                  : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
-              }`}
-            >
-              Monthly
-            </button>
-            <button
-              onClick={() => setIsYearly(true)}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${
-                isYearly 
-                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' 
-                  : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
-              }`}
-            >
-              Yearly
-              <span className="text-[10px] bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded-full font-bold uppercase tracking-wide">
-                1 month free
-              </span>
-            </button>
+          <div className="flex flex-col items-end gap-2 shrink-0">
+            <span className="text-[10px] text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
+              Get 1 month free with yearly
+            </span>
+            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex">
+              <button
+                onClick={() => setIsYearly(false)}
+                className={`min-w-[88px] px-4 py-2 rounded-md text-sm font-medium transition-all ${
+                  !isYearly
+                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+                }`}
+              >
+                Monthly
+              </button>
+              <button
+                onClick={() => setIsYearly(true)}
+                className={`min-w-[88px] px-4 py-2 rounded-md text-sm font-medium transition-all ${
+                  isYearly
+                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+                }`}
+              >
+                Yearly
+              </button>
+            </div>
           </div>
         </div>