Changes in UI of Landing Page subscription and add skeleton

src/pages/Home/PlanCardSkeleton.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const SubscriptionPlanSkeleton = () => {
+  return (
+    <div className="col-xl-4 col-lg-6 col-md-6">
+      <div className="card h-100 shadow-sm border-0 p-3 text-center">
+        {/* Header */}
+        <div className="mb-3">
+          <div className="bg-light rounded-circle mx-auto mb-3" style={{ width: "50px", height: "50px" }}></div>
+          <div className="bg-light rounded w-75 mx-auto mb-2" style={{ height: "20px" }}></div>
+          <div className="bg-light rounded w-50 mx-auto" style={{ height: "16px" }}></div>
+        </div>
+
+        {/* Price */}
+        <div className="mb-3">
+          <div className="bg-light rounded w-50 mx-auto" style={{ height: "24px" }}></div>
+        </div>
+
+        {/* Storage & Trial */}
+        <div className="d-flex justify-content-center gap-4 mb-5">
+          <div className="bg-light rounded" style={{ width: "100px", height: "16px" }}></div>
+          <div className="bg-light rounded" style={{ width: "100px", height: "16px" }}></div>
+        </div>
+
+        {/* Features */}
+        <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
+          Features
+        </h6>
+        <ul className="list-unstyled text-start mb-4 ms-7">
+          {[1, 2, 3].map((i) => (
+            <li key={i} className="mb-3">
+              <div className="bg-light rounded" style={{ width: "70%", height: "16px" }}></div>
+            </li>
+          ))}
+        </ul>
+
+        {/* Button */}
+        <div className="bg-light rounded w-100" style={{ height: "40px" }}></div>
+      </div>
+    </div>
+  );
+};
+
+export default SubscriptionPlanSkeleton;

src/pages/Home/SubscriptionPlans.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import PlanCardSkeleton from "./PlanCardSkeleton";
 
 const SubscriptionPlans = () => {
   const [plans, setPlans] = useState([]);
@@ -27,10 +28,10 @@ const SubscriptionPlans = () => {
 
   const frequencyLabel = (freq) => {
     switch (freq) {
-      case 0: return "1mo";
+      case 0: return "1 mo";
-      case 1: return "3mo";
+      case 1: return "3 mo";
-      case 2: return "6mo";
+      case 2: return "6 mo";
-      case 3: return "1yr";
+      case 3: return "1 yr";
       default: return "mo";
     }
   };
@@ -54,15 +55,20 @@ const SubscriptionPlans = () => {
       </div>
 
       {/* Cards */}
-      <div className="row g-4">
+      <div className="row g-4 mt-10">
         {loading ? (
-          <div className="text-center">Loading...</div>
+          // Show 3 skeletons
+          <>
+            <PlanCardSkeleton />
+            <PlanCardSkeleton />
+            <PlanCardSkeleton />
+          </>
         ) : plans.length === 0 ? (
           <div className="text-center">No plans found</div>
         ) : (
           plans.map((plan) => (
             <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
-              <div className="card h-100 shadow-lg border-0 p-3 text-center">
+              <div className="card h-100 shadow-lg border-0 p-3 text-center p-10">
                 {/* Header */}
                 <div className="mb-3">
                   <i className="bx bxs-package text-primary fs-1 mb-2"></i>
@@ -90,7 +96,6 @@ const SubscriptionPlans = () => {
                   </div>
                 </div>
 
-
                 {/* Features */}
                 <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
                   Features
@@ -120,7 +125,7 @@ const SubscriptionPlans = () => {
                     to="/auth/reqest/demo"
                     className="btn btn-outline-primary w-100 fw-bold"
                   >
-                    Enquiry
+                    Request a Demo
                   </Link>
                 </div>
               </div>