Update page.tsx

ArhanAnsari · Sep 29, 2024 · b001e8e · b001e8e
1 parent 5cbee5e
commit b001e8e
Showing 1 changed file with 10 additions and 16 deletions.
diff --git 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,49 +20,46 @@ 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>
           <p className="text-gray-600 mb-4">Basic AI content generation.</p>
           <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>
           <p className="text-gray-600 mb-4">Advanced AI content generation.</p>
           <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>
           <p className="text-gray-600 mb-4">Access to all AI features.</p>
           <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>