FEAT: PAYMENT PAGE - team panther

src/app/dashboard/(user-dashboard)/settings/layout.tsx

@@ -9,7 +9,7 @@ const layout: FC<Iproperties> = ({ children }) => {
   return (
     <div className="grid grid-cols-[auto_1fr]">
       <SettingsSidebar />
-      <div className="mx-[41px] my-[30px] 2xl:mx-auto 2xl:max-w-[975px]">
+      <div className="sm:mx-[41px] my-[30px] 2xl:mx-auto 2xl:max-w-[975px]">
         {children}
       </div>
     </div>

src/app/dashboard/(user-dashboard)/settings/payment-information/current/PricePage.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { describe, expect, it } from "vitest";
+
+import PricingPage from "./page";
+
+describe("pricingpage", () => {
+  it("should render the current plan section", () => {
+    expect.hasAssertions();
+    render(<PricingPage />);
+    const currentPlanHeading = screen.getByText(/current plan/i);
+    expect(currentPlanHeading).toBeInTheDocument();
+
+    const freePlanTitle = screen.getByText("Free");
+    expect(freePlanTitle).toBeInTheDocument();
+
+    const freePlanDescription = screen.getByText(
+      /your account is on a free 90-day trial/i,
+    );
+    expect(freePlanDescription).toBeInTheDocument();
+
+    const freePlanPrice = screen.getByText("$0/month");
+    expect(freePlanPrice).toBeInTheDocument();
+  });
+
+  it("should render all subscription plans", () => {
+    expect.hasAssertions();
+    render(<PricingPage />);
+    const plans = ["Free", "Basic", "Advanced", "Premium"];
+
+    for (const plan of plans) {
+      const planTitle = screen.getByText(plan);
+      expect(planTitle).toBeInTheDocument();
+    }
+  });
+
+  it("should render the highlights section", () => {
+    expect.hasAssertions();
+    render(<PricingPage />);
+    const highlightsHeading = screen.getByText("Highlights");
+    expect(highlightsHeading).toBeInTheDocument();
+
+    const highlightsItems = [
+      "10 Projects",
+      "Up to 10 subscribers",
+      "Advanced analytics",
+      "100 projects",
+      "Up to 50 subscribers",
+      "24-hour support",
+      "200 projects",
+      "Up to 100 subscribers",
+      "Marketing advisor",
+      "300 Projects",
+      "Up to 500 subscribers",
+    ];
+
+    for (const item of highlightsItems) {
+      const highlightItem = screen.getByText(item);
+      expect(highlightItem).toBeInTheDocument();
+    }
+  });
+
+  it("should render the compare all features section", () => {
+    expect.hasAssertions();
+    render(<PricingPage />);
+    const compareFeaturesText = screen.getByText(/compare all features/i);
+    expect(compareFeaturesText).toBeInTheDocument();
+  });
+});

src/app/dashboard/(user-dashboard)/settings/payment-information/current/page.tsx

@@ -0,0 +1,117 @@
+import Image from "next/image";
+
+import icon from "../../../../../../../public/admin-dashboard/icons/icon.svg";
+
+const PricingPage = () => {
+  const plans = [
+    {
+      title: "Free",
+      price: "$0",
+      description: "The essential to provide your best work for clients.",
+      buttonText: "Current Plan",
+      buttonClass: "bg-[#FFF8F2] border-[#FFF8F2] text-[#525252]",
+    },
+    {
+      title: "Basic",
+      price: "$20",
+      description: "Ideal for growing needs who want more features.",
+      buttonText: "Upgrade",
+      buttonClass: "bg-[#F97316] border-[#F97316] text-[#FAFAFA]",
+    },
+    {
+      title: "Advanced",
+      price: "$50",
+      description: "Designed for power users and maximum functionalities.",
+      buttonText: "Upgrade",
+      buttonClass: "bg-[#F97316] border-[#F97316] text-[#FAFAFA]",
+    },
+    {
+      title: "Premium",
+      price: "$100",
+      description: "Perfect for users who want more features.",
+      buttonText: "Upgrade",
+      buttonClass: "bg-[#F97316] border-[#F97316] text-[#FAFAFA]",
+    },
+  ];
+
+  return (
+    <div className="">
+      <h1 className="sm:text-2xl text-lg font-semibold text-[#0A0A0A]">Current Plan</h1>
+
+      <div className="mt-5 w-full rounded-md border border-[#FFF8F2] bg-[#FFF8F2] px-3 py-5">
+        <h2 className="sm:text-xl text-lg sm:font-semibold font-medium">Free</h2>
+        <p className="sm:text-sm text-xs text-[#0A0A0A]">
+          Your account is on a free 90-day trial of our free plan, through
+          September 27th. Upgrade anytime to stay on this plan when your trial
+          ends.
+        </p>
+        <span className="text-sm text-[#525252] sm:block hidden">$0/month</span>
+      </div>
+
+      <div className="mt-10 flex sm:flex-row flex-col  gap-3 px-3">
+        <h1 className="w-[16rem] text-base font-semibold sm:block hidden">
+          Subscribe to your <br /> desired plan.
+        </h1>
+
+        {plans.map((plan, index) => (
+          <div key={index} className="sm:border-none border py-5 px-6 mx-8 rounded-lg">
+            <div className="flex flex-col sm:items-start justify-center gap-3 pt-1">
+              <h1 className="text-base font-semibold">{plan.title}</h1>
+              <h2 className="text-[25px] font-medium">
+                {plan.price}{" "}
+                <span className="text-[13px] font-normal">/month</span>
+              </h2>
+              <div className="text-sm">
+                <p>{plan.description}</p>
+              </div>
+              <button
+                className={`rounded-lg px-[49px] py-[8px] text-sm ${plan.buttonClass}`}
+              >
+                {plan.buttonText}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-10 sm:flex hidden items-start justify-center border border-[#FFF8F2] bg-[#FFF8F2] px-3 py-5 pb-20">
+        <h1 className="w-40 text-base font-semibold">Highlights</h1>
+
+        <div className="flex gap-[3rem] text-sm text-[#0A0A0A]">
+          <ul className="flex list-disc flex-col gap-2">
+            <li>10 Projects</li>
+            <li>Up to 10 subscribers</li>
+            <li>Advanced analytics</li>
+          </ul>
+          <ul className="flex list-disc flex-col gap-2 pl-6">
+            <li>100 projects</li>
+            <li>Up to 50 subscribers</li>
+            <li>Advanced analytics</li>
+            <li>24-hour support</li>
+          </ul>
+          <ul className="flex list-disc flex-col gap-2 pl-2">
+            <li>200 projects</li>
+            <li>Up to 100 subscribers</li>
+            <li>Advanced analytics</li>
+            <li>24-hour support</li>
+            <li>Marketing advisor</li>
+          </ul>
+          <ul className="flex list-disc flex-col gap-2 pl-3">
+            <li>300 Projects</li>
+            <li>Up to 500 subscribers</li>
+            <li>Advanced analytics</li>
+            <li>24-hour support</li>
+            <li>Marketing advisor</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="mt-10 flex sm:items-center sm:justify-center">
+        <h1 className="text-base">Compare all features</h1>
+        <Image src={icon} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default PricingPage;