admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Changes in UI of Landing Page subscription and add skeleton

Browse Source
This commit is contained in:
Kartik Sharma 2025-09-18 12:07:46 +05:30
parent 1c0e8655c4
commit fd36298543
2 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/Home/PlanCardSkeleton.jsx Normal file
View File

@ -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;

15
src/pages/Home/SubscriptionPlans.jsx
View File

@ -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([]);
@ -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>