From b001e8e9938a350dcdbb513f1b5f11559f1e5bf0 Mon Sep 17 00:00:00 2001
From: Arhan Ansari <arhanansari2009@gmail.com>
Date: Sun, 29 Sep 2024 23:59:59 +0530
Subject: [PATCH] Update page.tsx

---
 app/plans/page.tsx | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/app/plans/page.tsx b/app/plans/page.tsx
index 9f21b63..e7b8aa8 100644
--- a/app/plans/page.tsx
+++ b/app/plans/page.tsx
@@ -10,10 +10,7 @@ export default function PlansPage() {
       .then(async (body) => {
         const sessionId = body.sessionId;
         const stripe = await getStripe();
-
-        await stripe?.redirectToCheckout({
-          sessionId,
-        });
+        await stripe?.redirectToCheckout({ sessionId });
       });
   };
 
@@ -23,6 +20,7 @@ export default function PlansPage() {
       <SEO title="Plans - InspireGem" description="Explore the available plans on InspireGem and choose the one that fits your content generation needs." />
 
       <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
+        {/* Free Plan */}
         <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition duration-300 transform hover:scale-105">
           <h2 className="text-3xl font-bold text-blue-600 mb-4">Free Plan</h2>
           <p className="text-gray-600 mb-4">Up to 50 requests per month.</p>
@@ -30,15 +28,14 @@ export default function PlansPage() {
           <p className="text-gray-600 mb-6">Community support.</p>
           <button
             type="button"
-            className="w-full block text-center text-white bg-blue-500 hover:bg-blue-600 font-bold py-2 rounded"
-            onClick={() => {
-              getPriceFn("free");
-            }}
+            className="w-full text-center text-white bg-blue-500 hover:bg-blue-600 font-bold py-3 rounded-lg transition duration-300 transform hover:scale-105"
+            onClick={() => getPriceFn("free")}
           >
             Get Started
           </button>
         </div>
 
+        {/* Pro Plan */}
         <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition duration-300 transform hover:scale-105">
           <h2 className="text-3xl font-bold text-green-600 mb-4">Pro Plan</h2>
           <p className="text-gray-600 mb-4">500 requests per month.</p>
@@ -46,15 +43,14 @@ export default function PlansPage() {
           <p className="text-gray-600 mb-6">Priority email support.</p>
           <button
             type="button"
-            className="w-full block text-center text-white bg-green-500 hover:bg-green-600 font-bold py-2 rounded"
-            onClick={() => {
-              getPriceFn("pro");
-            }}
+            className="w-full text-center text-white bg-green-500 hover:bg-green-600 font-bold py-3 rounded-lg transition duration-300 transform hover:scale-105"
+            onClick={() => getPriceFn("pro")}
           >
             Subscribe for ₹499/month
           </button>
         </div>
 
+        {/* Enterprise Plan */}
         <div className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition duration-300 transform hover:scale-105">
           <h2 className="text-3xl font-bold text-red-600 mb-4">Enterprise Plan</h2>
           <p className="text-gray-600 mb-4">Unlimited requests.</p>
@@ -62,10 +58,8 @@ export default function PlansPage() {
           <p className="text-gray-600 mb-6">24/7 premium support.</p>
           <button
             type="button"
-            className="w-full block text-center text-white bg-red-500 hover:bg-red-600 font-bold py-2 rounded"
-            onClick={() => {
-              getPriceFn("enterprise");
-            }}
+            className="w-full text-center text-white bg-red-500 hover:bg-red-600 font-bold py-3 rounded-lg transition duration-300 transform hover:scale-105"
+            onClick={() => getPriceFn("enterprise")}
           >
             Subscribe for ₹1,999/month
           </button>