chore(web): improve upgrade to pro cta

web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx

@@ -4,6 +4,7 @@ import { ApiEndpoints } from '@/config/api'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { useQuery } from '@tanstack/react-query'
 import Link from 'next/link'
+import { useMemo } from 'react'
 
 export default function UpgradeToProAlert() {
   const {
@@ -18,38 +19,66 @@ export default function UpgradeToProAlert() {
         .then((res) => res.data),
   })
 
+  const ctaMessages = useMemo(() => [
+    "Upgrade to Pro for exclusive features and benefits!",
+    "Offer: You are eligible for a 50% discount when upgrading to Pro!",
+    "Unlock premium features with our Pro plan today!",
+    "Take your experience to the next level with Pro!",
+    "Pro users get priority support and advanced features!",
+    "Limited time offer: Upgrade to Pro and save 50%!",
+  ], []);
+
+  const buttonTexts = useMemo(() => [
+    "Get Pro Now!",
+    "Upgrade Today!",
+    "Go Pro!",
+    "Unlock Pro!",
+    "Claim Your Discount!",
+    "Upgrade & Save!",
+  ], []);
+
+  const randomCta = useMemo(() => {
+    const randomIndex = Math.floor(Math.random() * ctaMessages.length);
+    return ctaMessages[randomIndex];
+  }, [ctaMessages]);
+
+  const randomButtonText = useMemo(() => {
+    const randomIndex = Math.floor(Math.random() * buttonTexts.length);
+    return buttonTexts[randomIndex];
+  }, [buttonTexts]);
+
   if (isLoadingSubscription || !currentSubscription || subscriptionError) {
     return null
   }
 
-  if (['pro', 'custom'].includes(currentSubscription?.plan?.name)) {
+  if (!['pro', 'custom'].includes(currentSubscription?.plan?.name)) {
     return null
   }
 
   return (
     <Alert className='bg-gradient-to-r from-purple-500 to-pink-500 text-white'>
-      <AlertDescription className='flex flex-wrap items-center gap-2 md:gap-4'>
-        <span className='flex-1'>
-          Upgrade to Pro for exclusive features and benefits!
+      <AlertDescription className='flex flex-col sm:flex-row flex-wrap items-center gap-2 md:gap-4'>
+        <span className='w-full sm:flex-1 text-center sm:text-left text-sm md:text-base font-medium'>
+          {randomCta}
         </span>
-        <span className='flex-1'>
-          Use discount code <strong>SAVEBIG50</strong> at checkout for a 50%
+        <span className='w-full sm:flex-1 text-center sm:text-left text-xs md:text-sm'>
+          Use discount code <strong className="text-yellow-200">SAVEBIG50</strong> at checkout for a 50%
           discount!
         </span>
-        <div className='flex flex-wrap gap-1 md:gap-2'>
+        <div className='w-full sm:w-auto mt-2 sm:mt-0 flex justify-center sm:justify-end flex-wrap gap-1 md:gap-2'>
           <Button
             variant='outline'
-            size='lg'
+            size='sm'
             asChild
-            className='bg-red-500 text-white hover:bg-red-600'
+            className='bg-red-500 text-white hover:bg-red-600 text-xs md:text-sm'
           >
-            <Link href={'/checkout/pro'}>Get Pro Now!</Link>
+            <Link href={'/checkout/pro'}>{randomButtonText}</Link>
           </Button>
           <Button
             variant='outline'
-            size='lg'
+            size='sm'
             asChild
-            className='bg-orange-500 text-white hover:bg-orange-600'
+            className='bg-orange-500 text-white hover:bg-orange-600 text-xs md:text-sm'
           >
             <Link href={'/#pricing'}>Learn More</Link>
           </Button>