Update design

src/components/Billing/EmptyBillingScreen.tsx

@@ -5,7 +5,6 @@ import {
   MessageCircleIcon,
   SparklesIcon,
   Zap,
-  CheckCircle,
 } from 'lucide-react';
 
 type EmptyBillingScreenProps = {
@@ -39,45 +38,31 @@ export function EmptyBillingScreen(props: EmptyBillingScreenProps) {
   const { onUpgrade } = props;
 
   return (
-    <div className="mt-6 max-w-3xl">
+    <div className="mt-12 flex h-full w-full flex-col items-center">
-      <h2 className="mb-6 text-2xl font-bold text-black">Subscription Details</h2>
+      <CreditCard className="mb-3 h-12 w-12 text-gray-300" />
+      <h3 className="mb-3 text-xl font-semibold text-black">
+        No Active Subscription
+      </h3>
 
-      <div className="overflow-hidden rounded-lg bg-white shadow-sm">
+      <p className="text-balance text-gray-700">
-        <div className="p-6">
+        Unlock pro benefits by upgrading to a subscription
-          <div className="flex flex-col items-center text-center">
+      </p>
-            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
-              <CreditCard className="h-8 w-8 text-gray-500" />
-            </div>
 
-            <h3 className="mt-4 text-xl font-semibold text-black">
+      <div className="my-8 flex flex-col gap-2">
-              No Active Subscription
+        {perks.map((perk) => (
-            </h3>
+          <p className="textsm flex items-center text-gray-600" key={perk.text}>
-
+            <perk.icon className="mr-2 h-4 w-4 text-gray-500" />
-            <p className="mt-2 max-w-md text-balance text-gray-600">
+            {perk.text}
-              Unlock premium benefits by upgrading to a subscription
+          </p>
-            </p>
+        ))}
-
-            <div className="mt-6 w-full max-w-md rounded-lg border border-gray-200 bg-gray-50 p-4">
-              <h4 className="mb-3 font-medium text-gray-800">Premium Benefits</h4>
-              <div className="flex flex-col gap-3">
-                {perks.map((perk) => (
-                  <div className="flex items-center gap-2 text-gray-700" key={perk.text}>
-                    <CheckCircle className="h-5 w-5 text-green-500" />
-                    <span>{perk.text}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <button
-              onClick={onUpgrade}
-              className="mt-6 inline-flex items-center justify-center rounded-md bg-black px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-black/80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
-            >
-              Upgrade Account
-            </button>
-          </div>
-        </div>
       </div>
+
+      <button
+        onClick={onUpgrade}
+        className="inline-flex items-center justify-center rounded-lg bg-black px-6 py-2.5 text-sm font-medium text-white transition-colors hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
+      >
+        Upgrade Account
+      </button>
     </div>
   );
 }