From a7e094b0bec432aa13f187f4075f825db72c46cd Mon Sep 17 00:00:00 2001
From: Ashish Mohapatra <ashishmohapatra240@gmail.com>
Date: Sat, 6 Sep 2025 14:12:31 +0530
Subject: [PATCH 1/2] fix: improve pricing card UX and update pro features list

---
 apps/mail/components/pricing/comparision.tsx  | 4 ++--
 apps/mail/components/pricing/pricing-card.tsx | 6 ++++--
 apps/mail/components/ui/nav-user.tsx          | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/mail/components/pricing/comparision.tsx b/apps/mail/components/pricing/comparision.tsx
index 209c8d660e..fcc2341c75 100644
--- a/apps/mail/components/pricing/comparision.tsx
+++ b/apps/mail/components/pricing/comparision.tsx
@@ -164,7 +164,7 @@ export default function Comparision() {
                     );
                   }
                 }}
-                className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10"
+                className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer"
               >
                 <div className="flex items-center justify-center">
                   <div className="justify-start text-center text-base font-semibold leading-none text-white/80">
@@ -276,7 +276,7 @@ export default function Comparision() {
               </div>
               <button
                 onClick={handleUpgrade}
-                className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10"
+                className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer"
               >
                 <div className="flex items-center justify-center">
                   <div className="justify-start text-center text-base font-semibold leading-none text-white/80">
diff --git a/apps/mail/components/pricing/pricing-card.tsx b/apps/mail/components/pricing/pricing-card.tsx
index 9035d40600..ea1d33df38 100644
--- a/apps/mail/components/pricing/pricing-card.tsx
+++ b/apps/mail/components/pricing/pricing-card.tsx
@@ -21,6 +21,8 @@ const PRICING_CONSTANTS = {
     'Auto labeling',
     'One-click AI email writing & replies',
     'Instant thread AI-generated summaries',
+    'Priority customer support',
+    'Access to private Discord community'
   ],
   ENTERPRISE_FEATURES: [
     'Unlimited email connections',
@@ -168,7 +170,7 @@ export default function PricingCard() {
                 });
               }
             }}
-            className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343]"
+            className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer"
           >
             <div className="flex items-center justify-center gap-2.5 px-1">
               <div className="justify-start text-center font-semibold leading-none text-[#D5D5D5]">
@@ -286,7 +288,7 @@ export default function PricingCard() {
             </div>
           </div>
           <button
-            className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343]"
+            className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer"
             onClick={() => window.open('https://cal.com/team/0/chat', '_blank')}
           >
             <div className="flex items-center justify-center gap-2.5 px-1">
diff --git a/apps/mail/components/ui/nav-user.tsx b/apps/mail/components/ui/nav-user.tsx
index 2d6a372c5c..09802f71db 100644
--- a/apps/mail/components/ui/nav-user.tsx
+++ b/apps/mail/components/ui/nav-user.tsx
@@ -649,7 +649,7 @@ export function NavUser() {
             {!isPro && (
               <button
                 onClick={() => setPricingDialog('true')}
-                className="flex h-5 items-center gap-1 rounded-full border px-1 pr-1.5 hover:bg-transparent"
+                className="flex h-5 items-center gap-1 rounded-full border px-1 pr-1.5 hover:bg-transparent cursor-pointer"
               >
                 <BadgeCheck className="h-4 w-4 text-white dark:text-[#141414]" fill="#1D9BF0" />
                 <span className="text-muted-foreground text-[10px] uppercase">Get verified</span>

From d8db13a1aa09a5b56146f552178aa24185a461ef Mon Sep 17 00:00:00 2001
From: Ashish Mohapatra <ashishmohapatra240@gmail.com>
Date: Sat, 6 Sep 2025 15:51:28 +0530
Subject: [PATCH 2/2] feat: add monthly price display in strikethrough for
 annual pricing in pricing card

---
 apps/mail/components/pricing/pricing-card.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/mail/components/pricing/pricing-card.tsx b/apps/mail/components/pricing/pricing-card.tsx
index ea1d33df38..aab1cce155 100644
--- a/apps/mail/components/pricing/pricing-card.tsx
+++ b/apps/mail/components/pricing/pricing-card.tsx
@@ -218,6 +218,11 @@ export default function PricingCard() {
                   <div className="justify-center text-4xl font-semibold leading-10 text-white">
                     ${isAnnual ? annualPrice : monthlyPrice}
                   </div>
+                  {isAnnual && (
+                    <div className="justify-center text-base font-medium leading-tight text-white/40 line-through ml-2">
+                      ${monthlyPrice}
+                    </div>
+                  )}
                   <div className="flex items-center justify-center gap-2.5 pb-0.5">
                     <div className="justify-center text-sm font-medium leading-tight text-white/40">
                       {isAnnual ? '/MONTH (billed annually)' : '/MONTH'}