From df9107f0d830a51dcdb5f4fc5a32904b368ab905 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 17 Sep 2025 16:49:52 +0530
Subject: [PATCH] Changes in UI of Subscription-plan.

---
 src/pages/Home/SubscriptionPlans.jsx | 45 +++++++++++++++-------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx
index 7c06a751..6799efb6 100644
--- a/src/pages/Home/SubscriptionPlans.jsx
+++ b/src/pages/Home/SubscriptionPlans.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
+import { Link } from "react-router-dom";
 
 const SubscriptionPlans = () => {
   const [plans, setPlans] = useState([]);
@@ -26,10 +27,10 @@ const SubscriptionPlans = () => {
 
   const frequencyLabel = (freq) => {
     switch (freq) {
-      case 0: return "mo";
+      case 0: return "1mo";
       case 1: return "3mo";
       case 2: return "6mo";
-      case 3: return "yr";
+      case 3: return "1yr";
       default: return "mo";
     }
   };
@@ -61,28 +62,25 @@ const SubscriptionPlans = () => {
         ) : (
           plans.map((plan) => (
             <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
-              <div className="card h-100 shadow-sm border-0 p-3">
+              <div className="card h-100 shadow-lg border-0 p-3 text-center">
                 {/* Header */}
-                <div className="d-flex align-items-center gap-3 mb-3">
-                  <i className="bx bxs-package text-primary fs-1"></i>
-                  <div>
-                    <p className="card-title fs-4 fw-bold mb-1 me-6">
-                      {plan.planName}
-                    </p>
-                    <p className="text-muted mb-0">{plan.description}</p>
-                  </div>
+                <div className="mb-3">
+                  <i className="bx bxs-package text-primary fs-1 mb-2"></i>
+                  <p className="card-title fs-3 fw-bold mb-1">{plan.planName}</p>
+                  <p className="text-muted mb-0 fs-5">{plan.description}</p>
                 </div>
 
                 {/* Price */}
-                <div className="text-start mb-3">
-                  <h4 className="fw-semibold mt-auto mb-3">
+                <div className="mb-3">
+                  <h4 className="fw-semibold mt-auto mb-0 fs-3">
                     {plan.currency?.symbol} {plan.price}
+                    <small className="text-muted ms-1">/ {frequencyLabel(frequency)}</small>
                   </h4>
                 </div>
 
                 {/* Storage & Trial */}
-                <div className="text-start text-muted mb-3">
-                  <div className="mb-1">
+                <div className="text-muted mb-5 d-flex justify-content-center gap-4">
+                  <div>
                     <i className="fa-solid fa-hdd me-2"></i>
                     Storage {plan.maxStorage} MB
                   </div>
@@ -92,17 +90,18 @@ const SubscriptionPlans = () => {
                   </div>
                 </div>
 
+
                 {/* Features */}
-                <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-start">
+                <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
                   Features
                 </h6>
-                <ul className="list-unstyled text-start mb-4">
+                <ul className="list-unstyled text-start mb-4 ms-7 fs-5">
                   {plan.features?.modules &&
                     Object.values(plan.features.modules).map((mod) =>
                       mod && mod.name ? (
                         <li
                           key={mod.id}
-                          className="d-flex align-items-center mb-2"
+                          className="d-flex align-items-center mb-4"
                         >
                           {mod.enabled ? (
                             <i className="fa-regular fa-circle-check text-success me-2"></i>
@@ -117,15 +116,19 @@ const SubscriptionPlans = () => {
 
                 {/* Button */}
                 <div className="mt-auto">
-                  <button className="btn btn-outline-primary w-100 fw-bold">
-                    Select Plan
-                  </button>
+                  <Link
+                    to="/auth/reqest/demo"
+                    className="btn btn-outline-primary w-100 fw-bold"
+                  >
+                    Enquiry
+                  </Link>
                 </div>
               </div>
             </div>
           ))
         )}
       </div>
+
     </div>
   );
 };