From e356a5248350c4d0c92d2e710e4bc0a35a17151a Mon Sep 17 00:00:00 2001
From: Ayodejioladimeji <layobright11@gmail.com>
Date: Wed, 24 Jul 2024 14:32:35 +0100
Subject: [PATCH 1/4] added homepage changes and tests

---
 .../layouts/homepage/HowItWorks.tsx           |  6 +-
 .../layouts/homepage/Testimonials.tsx         |  6 +-
 src/test/homepage/Hero.test.tsx               | 75 +++++++++++++++++++
 src/test/homepage/HowItWorks.test.tsx         | 75 +++++++++++++++++++
 src/test/homepage/PerfectFit.test.tsx         | 47 ++++++++++++
 src/test/homepage/TestimonialCard.test.tsx    | 58 ++++++++++++++
 src/test/homepage/Testimonials.test.tsx       | 54 +++++++++++++
 src/test/homepage/UserSection.test.tsx        | 57 ++++++++++++++
 8 files changed, 372 insertions(+), 6 deletions(-)
 create mode 100644 src/test/homepage/Hero.test.tsx
 create mode 100644 src/test/homepage/HowItWorks.test.tsx
 create mode 100644 src/test/homepage/PerfectFit.test.tsx
 create mode 100644 src/test/homepage/TestimonialCard.test.tsx
 create mode 100644 src/test/homepage/Testimonials.test.tsx
 create mode 100644 src/test/homepage/UserSection.test.tsx

diff --git a/src/components/layouts/homepage/HowItWorks.tsx b/src/components/layouts/homepage/HowItWorks.tsx
index b74c1b604..ba5f78bb5 100644
--- a/src/components/layouts/homepage/HowItWorks.tsx
+++ b/src/components/layouts/homepage/HowItWorks.tsx
@@ -22,7 +22,7 @@ const HowItWorks = () => {
               </div>
               <div>
                 <h3
-                  className="md-text-2xl font-inter mb-2 text-xl font-bold"
+                  className="font-inter mb-2 text-lg text-xl font-bold md:text-xl lg:text-2xl"
                   data-testid="prebuilt"
                 >
                   Pre-Built Sections
@@ -42,7 +42,7 @@ const HowItWorks = () => {
               </div>
               <div>
                 <h3
-                  className="md-text-2xl font-inter mb-2 text-xl font-bold"
+                  className="font-inter mb-2 text-lg text-xl font-bold md:text-xl lg:text-2xl"
                   data-testid="scalable"
                 >
                   Scalable Foundation
@@ -63,7 +63,7 @@ const HowItWorks = () => {
               </div>
               <div>
                 <h3
-                  className="md-text-2xl font-inter mb-2 text-xl font-bold"
+                  className="font-inter mb-2 text-lg text-xl font-bold md:text-xl lg:text-2xl"
                   data-testid="easy"
                 >
                   Easy Customization
diff --git a/src/components/layouts/homepage/Testimonials.tsx b/src/components/layouts/homepage/Testimonials.tsx
index c86ae95bd..52dd8f6eb 100644
--- a/src/components/layouts/homepage/Testimonials.tsx
+++ b/src/components/layouts/homepage/Testimonials.tsx
@@ -53,7 +53,7 @@ const Testimonials = () => {
           <Swiper
             modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
             slidesPerView={1}
-            spaceBetween={30}
+            spaceBetween={20}
             navigation={{
               nextEl: ".custom-next",
               prevEl: ".custom-prev",
@@ -71,11 +71,11 @@ const Testimonials = () => {
               },
               650: {
                 slidesPerView: 2,
-                spaceBetween: 30,
+                spaceBetween: 20,
               },
               1024: {
                 slidesPerView: 3,
-                spaceBetween: 30,
+                spaceBetween: 20,
               },
             }}
             data-testid="swiper"
diff --git a/src/test/homepage/Hero.test.tsx b/src/test/homepage/Hero.test.tsx
new file mode 100644
index 000000000..a6c05b2f6
--- /dev/null
+++ b/src/test/homepage/Hero.test.tsx
@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import Hero from "~/components/layouts/homepage/Hero";
+
+describe("hero Component", () => {
+  it("renders the hero heading", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const heading = screen.getByRole("heading", {
+      name: /focus on what matters. we've got the foundation covered./i,
+    });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("renders the hero paragraph", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const paragraph = screen.getByText(
+      /streamline your processes with a boilerplate built for efficiency and optimal productivity./i,
+    );
+    expect(paragraph).toBeInTheDocument();
+  });
+
+  it("renders the get started button", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const button = screen.getByRole("button", { name: /get started/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  it("renders the HeroCheckMark component", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const checkMark = screen.getByTestId("hero-checkmark");
+    expect(checkMark).toBeInTheDocument();
+  });
+
+  it("renders the HeroChat component", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const chat = screen.getByTestId("hero-chat");
+    expect(chat).toBeInTheDocument();
+  });
+
+  it("renders the HeroBoilerPlate component", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const boilerPlate = screen.getByTestId("hero-boilerplate");
+    expect(boilerPlate).toBeInTheDocument();
+  });
+
+  it("renders the Swiper component", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const swiper = screen.getByTestId("swiper");
+    expect(swiper).toBeInTheDocument();
+  });
+
+  it("renders all Swiper slides", () => {
+    expect.assertions(1); // Ensure exactly one assertion
+
+    render(<Hero />);
+    const slides = screen.getAllByAltText("Hero Image");
+    expect(slides).toHaveLength(6);
+  });
+});
diff --git a/src/test/homepage/HowItWorks.test.tsx b/src/test/homepage/HowItWorks.test.tsx
new file mode 100644
index 000000000..0ba9a3e82
--- /dev/null
+++ b/src/test/homepage/HowItWorks.test.tsx
@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import HowItWorks from "~/components/layouts/homepage/HowItWorks";
+
+describe("howItWorks Component", () => {
+  it("renders the heading", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const heading = screen.getByRole("heading", {
+      name: /how it works: experience the benefits of using our product with every step./i,
+    });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("renders the description paragraph", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const paragraph = screen.getByText(
+      /we designed our product to simplify your life. it offers a comprehensive solution. here's how it works and how it benefits you at each stage./i,
+    );
+    expect(paragraph).toBeInTheDocument();
+  });
+
+  it("renders the Pre-Built component", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const preBuilt = screen.getByTestId("prebuilt");
+    expect(preBuilt).toBeInTheDocument();
+  });
+
+  it("renders the Sections component", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const preBuiltDescription = screen.getByTestId("section");
+    expect(preBuiltDescription).toBeInTheDocument();
+  });
+
+  it("renders the Scalable component", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const scalable = screen.getByTestId("scalable");
+    expect(scalable).toBeInTheDocument();
+  });
+
+  it("renders the Foundation component", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const scalableDescription = screen.getByTestId("boilerplate");
+    expect(scalableDescription).toBeInTheDocument();
+  });
+
+  it("renders the Easy component", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const easyCustomization = screen.getByTestId("easy");
+    expect(easyCustomization).toBeInTheDocument();
+  });
+
+  it("renders the Customization component", () => {
+    expect.assertions(1);
+
+    render(<HowItWorks />);
+    const easyCustomizationDescription = screen.getByTestId("tailor");
+    expect(easyCustomizationDescription).toBeInTheDocument();
+  });
+});
diff --git a/src/test/homepage/PerfectFit.test.tsx b/src/test/homepage/PerfectFit.test.tsx
new file mode 100644
index 000000000..6dfa66f73
--- /dev/null
+++ b/src/test/homepage/PerfectFit.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import PerfectFit from "~/components/layouts/homepage/PerfectFit";
+
+describe("perfectFit Component", () => {
+  it("renders the heading", () => {
+    expect.assertions(1);
+
+    render(<PerfectFit />);
+    const heading = screen.getByRole("heading", {
+      name: /find the perfect fit/i,
+    });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("renders the paragraph", () => {
+    expect.assertions(1);
+
+    render(<PerfectFit />);
+    const paragraph = screen.getByText(
+      /choose the boilerplate plan that best suits your project needs and budget. all plans include access to our comprehensive library of pre-built sections, drag-and-drop customization./i,
+    );
+    expect(paragraph).toBeInTheDocument();
+  });
+
+  it("renders the See Our Pricing Plan button", () => {
+    expect.assertions(1);
+
+    render(<PerfectFit />);
+    const button = screen.getByRole("button", {
+      name: /see our pricing plan/i,
+    });
+    expect(button).toBeInTheDocument();
+  });
+
+  it("applies the correct text color to the paragraph", () => {
+    expect.assertions(1);
+
+    render(<PerfectFit />);
+    const paragraph = screen.getByText(
+      /choose the boilerplate plan that best suits your project needs and budget. all plans include access to our comprehensive library of pre-built sections, drag-and-drop customization./i,
+    );
+    expect(paragraph).toHaveClass("text-[#525252]");
+  });
+});
diff --git a/src/test/homepage/TestimonialCard.test.tsx b/src/test/homepage/TestimonialCard.test.tsx
new file mode 100644
index 000000000..08c3ca724
--- /dev/null
+++ b/src/test/homepage/TestimonialCard.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import TestimonialCard from "~/components/layouts/homepage/TestimonialCard";
+
+describe("testimonialCard Component", () => {
+  const properties = {
+    image: "/images/testimonial-image.svg",
+    content:
+      "“I've been using this web hosting service for over a year and I'm really impressed with the uptime and support. The website has never gone down and the customer service is always quick to help with any issues I have. Highly recommend!”",
+    name: "John Doe",
+    stack: "Full Stack Developer",
+  };
+
+  it("renders the testimonial content", () => {
+    expect.assertions(1);
+
+    render(<TestimonialCard {...properties} />);
+    const content = screen.getByText(
+      /i've been using this web hosting service for over a year and i'm really impressed with the uptime and support./i,
+    );
+    expect(content).toBeInTheDocument();
+  });
+
+  it("renders the testimonial name", () => {
+    expect.assertions(1);
+
+    render(<TestimonialCard {...properties} />);
+    const name = screen.getByText(properties.name);
+    expect(name).toBeInTheDocument();
+  });
+
+  it("renders the testimonial stack", () => {
+    expect.assertions(1);
+
+    render(<TestimonialCard {...properties} />);
+    const stack = screen.getByText(properties.stack);
+    expect(stack).toBeInTheDocument();
+  });
+
+  it("renders the image with the correct src and alt attributes", () => {
+    expect.assertions(2);
+
+    render(<TestimonialCard {...properties} />);
+    const image = screen.getByAltText("testimonial-image");
+    expect(image).toHaveAttribute("src", properties.image);
+    expect(image).toHaveAttribute("alt", "testimonial-image");
+  });
+
+  it("renders the Rating component", () => {
+    expect.assertions(1);
+
+    render(<TestimonialCard {...properties} />);
+    const rating = screen.getByTestId("rating");
+    expect(rating).toBeInTheDocument();
+  });
+});
diff --git a/src/test/homepage/Testimonials.test.tsx b/src/test/homepage/Testimonials.test.tsx
new file mode 100644
index 000000000..996a66d5d
--- /dev/null
+++ b/src/test/homepage/Testimonials.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import Testimonials from "~/components/layouts/homepage/Testimonials";
+import { testimonials } from "~/components/layouts/homepage/testimonials-data";
+
+describe("testimonials Component", () => {
+  it("renders the testimonials heading", () => {
+    expect.assertions(1);
+
+    render(<Testimonials />);
+    const heading = screen.getByRole("heading", {
+      name: /client testimonials/i,
+    });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("renders the testimonials paragraph", () => {
+    expect.assertions(1);
+
+    render(<Testimonials />);
+    const paragraph = screen.getByText(
+      /don't just take our word for it - see what actual users of our product have to say about their experience./i,
+    );
+    expect(paragraph).toBeInTheDocument();
+  });
+
+  it("renders the navigation buttons", () => {
+    expect.assertions(2);
+
+    render(<Testimonials />);
+    const previousButton = screen.getByTestId("custom-prev");
+    const nextButton = screen.getByTestId("custom-next");
+    expect(previousButton).toBeInTheDocument();
+    expect(nextButton).toBeInTheDocument();
+  });
+
+  it("renders the Swiper component with testimonials", () => {
+    expect.assertions(1);
+
+    render(<Testimonials />);
+    const testimonialCards = screen.getAllByTestId("testimonial-card");
+    expect(testimonialCards.length).toBeGreaterThan(0);
+  });
+
+  it("renders the correct number of Swiper slides", () => {
+    expect.assertions(1);
+
+    render(<Testimonials />);
+    const slides = screen.getAllByRole("group");
+    expect(slides).toHaveLength(testimonials.length);
+  });
+});
diff --git a/src/test/homepage/UserSection.test.tsx b/src/test/homepage/UserSection.test.tsx
new file mode 100644
index 000000000..b0e239ca6
--- /dev/null
+++ b/src/test/homepage/UserSection.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import UserSection from "~/components/layouts/homepage/UserSection";
+
+describe("userSection Component", () => {
+  it("renders the heading with the correct text", () => {
+    expect.assertions(1);
+
+    render(<UserSection />);
+    const heading = screen.getByRole("heading", {
+      name: /more than 200 users make use of our boilerplate/i,
+    });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("renders the Unsplash logo", () => {
+    expect.assertions(1);
+
+    render(<UserSection />);
+    const unsplash = screen.getByTestId("unsplash-logo");
+    expect(unsplash).toBeInTheDocument();
+  });
+
+  it("renders the Notion logo", () => {
+    expect.assertions(1);
+
+    render(<UserSection />);
+    const notion = screen.getByTestId("notion-logo");
+    expect(notion).toBeInTheDocument();
+  });
+
+  it("renders the Intercom logo", () => {
+    expect.assertions(1);
+
+    render(<UserSection />);
+    const intercom = screen.getByTestId("intercom-logo");
+    expect(intercom).toBeInTheDocument();
+  });
+
+  it("renders the Descript logo", () => {
+    expect.assertions(1);
+
+    render(<UserSection />);
+    const descript = screen.getByTestId("descript-logo");
+    expect(descript).toBeInTheDocument();
+  });
+
+  it("renders the Grammarly logo", () => {
+    expect.assertions(1);
+
+    render(<UserSection />);
+    const grammarly = screen.getByTestId("grammarly-logo");
+    expect(grammarly).toBeInTheDocument();
+  });
+});

From 0833af030fd33557aa312cbaf1d11c02bf9b69a0 Mon Sep 17 00:00:00 2001
From: Ayodejioladimeji <layobright11@gmail.com>
Date: Wed, 24 Jul 2024 15:04:11 +0100
Subject: [PATCH 2/4] added pricing model page

---
 public/images/checkmark.svg                   |   3 +
 src/app/(landing-routes)/pricing/page.tsx     | 538 ++++++++++++++++++
 .../layouts/accordion/FaqsAccordion.tsx       |  57 ++
 .../layouts/accordion/TopicAccordion.tsx      |  42 ++
 .../layouts/careercard/CareerCard.tsx         |  65 +++
 src/components/layouts/careercard/index.tsx   |  29 +
 src/components/layouts/navbar/index.tsx       |   2 +-
 .../layouts/pagination/Pagination.tsx         | 130 +++++
 src/constants/faqsdata.ts                     |  17 +
 src/constants/templateList.ts                 |  27 +
 src/constants/topicsdata.ts                   |  47 ++
 src/test/pricingpage/pricing.test.tsx         |  38 ++
 12 files changed, 994 insertions(+), 1 deletion(-)
 create mode 100644 public/images/checkmark.svg
 create mode 100644 src/app/(landing-routes)/pricing/page.tsx
 create mode 100644 src/components/layouts/accordion/FaqsAccordion.tsx
 create mode 100644 src/components/layouts/accordion/TopicAccordion.tsx
 create mode 100644 src/components/layouts/careercard/CareerCard.tsx
 create mode 100644 src/components/layouts/careercard/index.tsx
 create mode 100644 src/components/layouts/pagination/Pagination.tsx
 create mode 100644 src/constants/faqsdata.ts
 create mode 100644 src/constants/templateList.ts
 create mode 100644 src/constants/topicsdata.ts
 create mode 100644 src/test/pricingpage/pricing.test.tsx

diff --git a/public/images/checkmark.svg b/public/images/checkmark.svg
new file mode 100644
index 000000000..90773421d
--- /dev/null
+++ b/public/images/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3337 6L8.25033 16.0833L3.66699 11.5" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/(landing-routes)/pricing/page.tsx b/src/app/(landing-routes)/pricing/page.tsx
new file mode 100644
index 000000000..ddc871d6a
--- /dev/null
+++ b/src/app/(landing-routes)/pricing/page.tsx
@@ -0,0 +1,538 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+
+import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion";
+import { Button } from "~/components/ui/button";
+import { faqData } from "~/constants/faqsdata";
+
+//
+
+const handleButtonClickTest = () => {
+  alert("Contact Button Click Test");
+};
+
+//
+
+export default function Pricing() {
+  const [toggle, setToggle] = useState(1);
+
+  return (
+    <>
+      <div
+        className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10"
+        data-testid="pricing-container"
+      >
+        <div
+          className="mb-10 text-center md:mx-auto md:mb-12"
+          data-testid="pricing-header"
+        >
+          <p
+            className="mb-6 inline-block rounded-md bg-gray-200 px-4 py-1 text-sm text-black md:text-lg"
+            data-testid="pricing-tag"
+          >
+            Pricing
+          </p>
+
+          <h2
+            className="font-inter mb-6 text-center text-3xl font-bold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-[3.2rem]"
+            data-testid="pricing-title"
+          >
+            Simple and <span className="text-orange-500">Affordable</span>{" "}
+            Pricing Plan
+          </h2>
+          <p
+            className="text-1xl md-text-xl mb-10 text-base text-gray-700"
+            data-testid="pricing-description"
+          >
+            Our flexible plans are designed to scale with your business. We have
+            a plan for you.
+          </p>
+        </div>
+
+        <div
+          className="align-center mx-auto mt-[100px] flex w-[380px] justify-between rounded-md bg-subtle p-2"
+          data-testid="pricing-toggle"
+        >
+          <div
+            onClick={() => setToggle(1)}
+            className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 1 ? "bg-white font-medium" : ""}`}
+            data-testid="monthly-toggle"
+          >
+            Monthly
+          </div>
+          <div
+            onClick={() => setToggle(2)}
+            className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 2 ? "bg-white font-medium" : ""}`}
+            data-testid="annual-toggle"
+          >
+            Annual(save 20%)
+          </div>
+        </div>
+
+        <div
+          className="align-center mt-[50px] flex flex-col justify-center gap-5 sm:flex-row"
+          data-testid="pricing-cards"
+        >
+          {toggle === 1 ? (
+            <>
+              <div
+                className="w-full rounded-xl border border-border p-[20px] hover:border-primary sm:w-[400px] md:p-[31px]"
+                data-testid="basic-card-monthly"
+              >
+                <h3
+                  className="mb-[16px] text-[25px] font-semibold"
+                  data-testid="basic-title"
+                >
+                  Basic
+                </h3>
+                <h1
+                  className="mb-[16px] text-[22px] font-bold md:text-[30px] lg:text-[40px]"
+                  data-testid="basic-price"
+                >
+                  $800 /month
+                </h1>
+                <p
+                  className="mb-[46px] text-[14px]"
+                  data-testid="basic-description"
+                >
+                  The essensitals to provide your best work for clients.
+                </p>
+                <div
+                  className="mb-3 flex items-center gap-5"
+                  data-testid="basic-feature-1"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  2 Projects
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-2"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Up to 100 subscribers
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-3"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Basic analytics
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-4"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  24-hour support response time
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-5"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Marketing advisor
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-6"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Custom integration
+                </div>
+                <Button
+                  size="lg"
+                  className="mt-[51px] w-full bg-primary text-background"
+                  data-testid="basic-button"
+                >
+                  Continue
+                </Button>
+              </div>
+
+              <div
+                className="w-full rounded-xl border border-border p-[20px] hover:border-primary sm:w-[400px] md:p-[31px]"
+                data-testid="premium-card-monthly"
+              >
+                <h3
+                  className="mb-[16px] text-[25px] font-semibold"
+                  data-testid="premium-title"
+                >
+                  Premium
+                </h3>
+                <h1
+                  className="mb-[16px] text-[22px] font-bold md:text-[30px] lg:text-[40px]"
+                  data-testid="premium-price"
+                >
+                  $3,000 /month
+                </h1>
+                <p
+                  className="mb-[46px] text-[14px]"
+                  data-testid="premium-description"
+                >
+                  The essensitals to provide your best work for clients.
+                </p>
+                <div
+                  className="mb-3 flex items-center gap-5"
+                  data-testid="premium-feature-1"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  2 Projects
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-2"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Up to 100 subscribers
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-3"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Basic analytics
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-4"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  24-hour support response time
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-5"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Marketing advisor
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-6"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Custom integration
+                </div>
+                <Button
+                  size="lg"
+                  className="mt-[51px] w-full bg-primary text-background"
+                  data-testid="premium-button"
+                >
+                  Continue
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div
+                className="w-full rounded-xl border border-border p-[20px] hover:border-primary sm:w-[400px] md:p-[31px]"
+                data-testid="basic-card-annual"
+              >
+                <h3
+                  className="mb-[16px] text-[25px] font-semibold"
+                  data-testid="basic-title"
+                >
+                  Basic
+                </h3>
+                <h1
+                  className="mb-[16px] text-[22px] font-bold md:text-[30px] lg:text-[40px]"
+                  data-testid="basic-price"
+                >
+                  $500 /month
+                </h1>
+                <p
+                  className="mb-[46px] text-[14px]"
+                  data-testid="basic-description"
+                >
+                  The essensitals to provide your best work for clients.
+                </p>
+                <div
+                  className="mb-3 flex items-center gap-5"
+                  data-testid="basic-feature-1"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  2 Projects
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-2"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Up to 100 subscribers
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-3"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Basic analytics
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-4"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  24-hour support response time
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-5"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Marketing advisor
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="basic-feature-6"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Custom integration
+                </div>
+                <Button
+                  size="lg"
+                  className="mt-[51px] w-full bg-primary text-background"
+                  data-testid="basic-button"
+                >
+                  Continue
+                </Button>
+              </div>
+
+              <div
+                className="w-full rounded-xl border border-border p-[20px] hover:border-primary sm:w-[400px] md:p-[31px]"
+                data-testid="premium-card-annual"
+              >
+                <h3
+                  className="mb-[16px] text-[25px] font-semibold"
+                  data-testid="premium-title"
+                >
+                  Premium
+                </h3>
+                <h1
+                  className="mb-[16px] text-[22px] font-bold md:text-[30px] lg:text-[40px]"
+                  data-testid="premium-price"
+                >
+                  $2,000 /month
+                </h1>
+                <p
+                  className="mb-[46px] text-[14px]"
+                  data-testid="premium-description"
+                >
+                  The essensitals to provide your best work for clients.
+                </p>
+                <div
+                  className="mb-3 flex items-center gap-5"
+                  data-testid="premium-feature-1"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  2 Projects
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-2"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Up to 100 subscribers
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-3"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Basic analytics
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-4"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  24-hour support response time
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-5"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Marketing advisor
+                </div>
+                <div
+                  className="mb-3 flex items-center gap-5 text-[16px]"
+                  data-testid="premium-feature-6"
+                >
+                  <Image
+                    src="/images/checkmark.svg"
+                    alt=""
+                    height={30}
+                    width={30}
+                  />
+                  Custom integration
+                </div>
+                <Button
+                  size="lg"
+                  className="mt-[51px] w-full bg-primary text-background"
+                  data-testid="premium-button"
+                >
+                  Continue
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <section className="bg-white">
+        <div
+          className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10"
+          data-testid="faq-section"
+        >
+          <div className="mb-20 grid w-full grid-cols-1 gap-y-10 lg:grid-cols-2">
+            <div className="flex flex-col gap-3" data-testid="faq-header">
+              <h1
+                className="self-stretch text-4xl font-semibold text-neutral-600"
+                role="heading"
+                aria-level={1}
+              >
+                Frequently Asked Questions
+              </h1>
+
+              <p className="mb-3 text-[18px] text-neutral-600">
+                We couldn’t answer your question?
+              </p>
+
+              <Button
+                onClick={handleButtonClickTest}
+                variant="outline"
+                className="h-[50px] w-[150px]"
+                size="lg"
+                data-testid="contact-button"
+              >
+                Contact us
+              </Button>
+            </div>
+
+            <FaqAccordion
+              faqs={faqData}
+              containerClassName="p-8"
+              data-testid="faq-accordion"
+            />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/src/components/layouts/accordion/FaqsAccordion.tsx b/src/components/layouts/accordion/FaqsAccordion.tsx
new file mode 100644
index 000000000..35841a8ac
--- /dev/null
+++ b/src/components/layouts/accordion/FaqsAccordion.tsx
@@ -0,0 +1,57 @@
+import clsx from "clsx";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion";
+
+interface FaqAccordionProperties {
+  faqs: { question: string; content: string }[]; // Define the shape of faq objects
+  containerClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+}
+
+const FaqAccordion = ({
+  faqs,
+  triggerClassName,
+  contentClassName,
+  containerClassName,
+}: FaqAccordionProperties) => {
+  return (
+    <div
+      role="region"
+      className={clsx(
+        "inline-flex w-full flex-col items-start justify-start rounded-xl bg-neutral-50 p-6 md:max-w-[590px]",
+        containerClassName,
+      )}
+    >
+      <Accordion type="single" collapsible className="w-full">
+        {faqs?.map((faq, index) => (
+          <AccordionItem key={faq.question} value={`item-${index}`}>
+            <AccordionTrigger
+              className={clsx(
+                "text-left text-[18px] text-base font-medium leading-normal text-neutral-950 hover:no-underline",
+                triggerClassName,
+              )}
+            >
+              {faq.question}
+            </AccordionTrigger>
+            <AccordionContent
+              className={clsx(
+                "text-[16px] font-normal leading-relaxed text-neutral-950",
+                contentClassName,
+              )}
+            >
+              {faq.content}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+export default FaqAccordion;
diff --git a/src/components/layouts/accordion/TopicAccordion.tsx b/src/components/layouts/accordion/TopicAccordion.tsx
new file mode 100644
index 000000000..f286ed4fd
--- /dev/null
+++ b/src/components/layouts/accordion/TopicAccordion.tsx
@@ -0,0 +1,42 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion";
+import { topics } from "~/constants/topicsdata";
+
+const TopicsAccordions = () => {
+  return (
+    <Accordion
+      className="px grid w-full grid-cols-1 gap-x-[20px] gap-y-[12px] md:grid-cols-2 lg:grid-cols-3"
+      type="multiple"
+    >
+      {topics.map((topic, index) => (
+        <AccordionItem
+          key={index}
+          className="flex w-full flex-col border-b-0 bg-white px-6 py-6"
+          value={`topic-${index}`}
+        >
+          <AccordionTrigger
+            id={`topic-heading-${index}`}
+            role="heading"
+            className="border-b-0 text-left hover:no-underline"
+            aria-level={2}
+          >
+            {topic.question}
+          </AccordionTrigger>
+          <AccordionContent
+            role="region"
+            className="text-sm"
+            aria-labelledby={`topic-heading-${index}`}
+          >
+            {topic.answer}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+export default TopicsAccordions;
diff --git a/src/components/layouts/careercard/CareerCard.tsx b/src/components/layouts/careercard/CareerCard.tsx
new file mode 100644
index 000000000..74a556aa1
--- /dev/null
+++ b/src/components/layouts/careercard/CareerCard.tsx
@@ -0,0 +1,65 @@
+import { FC } from "react";
+
+import { Card, CardContent, CardFooter } from "~/components/ui/card";
+import { Skeleton } from "~/components/ui/skeleton";
+import CustomButton from "../Button/button";
+
+interface CareerCardProperties {
+  isLoading: boolean;
+  jobTitle?: string;
+  location?: string;
+  description?: string;
+  amount?: string;
+}
+
+const CareerCard: FC<CareerCardProperties> = ({
+  isLoading,
+  jobTitle,
+  location,
+  description,
+  amount,
+}) => {
+  return (
+    <Card className="max-w-full text-foreground">
+      <CardContent className="pt-6">
+        {isLoading ? (
+          <div className="flex w-full max-w-6xl flex-col space-y-3">
+            <Skeleton
+              className="h-20 w-full rounded-lg md:w-full"
+              data-testid="skeleton"
+            />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-60 md:w-full" data-testid="skeleton" />
+              <Skeleton className="h-4 w-60 md:w-full" data-testid="skeleton" />
+            </div>
+          </div>
+        ) : (
+          <>
+            <h3 className="mb-2 text-xl font-semibold">{jobTitle}</h3>
+            <p className="text-sm">{location}</p>
+            <p className="mt-4 line-clamp-2 text-sm">{description}</p>
+          </>
+        )}
+      </CardContent>
+
+      <CardFooter className="flex items-center justify-between">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-6 w-1/3" data-testid="skeleton" />
+            <Skeleton className="h-10 w-28" data-testid="skeleton" />
+          </>
+        ) : (
+          <>
+            <span className="text-sm font-semibold">
+              {amount}
+              <span className="font-normal">/month</span>
+            </span>
+            <CustomButton variant="primary">View Details</CustomButton>
+          </>
+        )}
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default CareerCard;
diff --git a/src/components/layouts/careercard/index.tsx b/src/components/layouts/careercard/index.tsx
new file mode 100644
index 000000000..737247a3b
--- /dev/null
+++ b/src/components/layouts/careercard/index.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+
+import CareerCard from "./CareerCard";
+
+const CareerCardParent: FC = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <CareerCard
+      isLoading={isLoading}
+      jobTitle="Frontend Developer"
+      location="San Francisco, CA"
+      description="We are seeking a talented Frontend Developer to join our dynamic team. The ideal candidate will have strong skills in React, TypeScript, and modern CSS frameworks."
+      amount="$120K - $150K"
+    />
+  );
+};
+
+export default CareerCardParent;
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index 1aa285f11..f2f17be2b 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -9,7 +9,7 @@ import Logo from "~/components/common/logo";
 
 const navlinks = [
   { route: "Home", link: "/" },
-  { route: "Pricing", link: "/" },
+  { route: "Pricing", link: "/pricing" },
   { route: "Features", link: "/" },
 ];
 
diff --git a/src/components/layouts/pagination/Pagination.tsx b/src/components/layouts/pagination/Pagination.tsx
new file mode 100644
index 000000000..518f63d46
--- /dev/null
+++ b/src/components/layouts/pagination/Pagination.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import {
+  Pagination as PaginationComponent,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "~/components/ui/pagination";
+
+export interface PaginationProperties {
+  total: number;
+  pageSize: number;
+  currentPage: number;
+  activeVariant?: "default" | "outline";
+  navigationVariant?: "semibold" | "medium";
+  onChange?: (page: number) => void;
+}
+
+const Pagination = ({
+  total,
+  pageSize,
+  currentPage,
+  activeVariant = "default",
+  navigationVariant = "medium",
+  onChange,
+}: PaginationProperties) => {
+  const totalPages = Math.ceil(total / pageSize);
+
+  const handleChange = (page: number) => {
+    if (onChange) {
+      onChange(page);
+    }
+  };
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const showEllipsis = totalPages > 3;
+
+    if (showEllipsis === false) {
+      for (let index = 1; index <= totalPages; index++) {
+        pages.push(index);
+      }
+    } else {
+      pages.push(1);
+      if (currentPage > 4) {
+        pages.push("...");
+      }
+
+      const firstPage = Math.max(2, currentPage - 2);
+      const lastPage = Math.min(totalPages - 1, currentPage + 2);
+
+      for (let index = firstPage; index <= lastPage; index++) {
+        pages.push(index);
+      }
+
+      if (currentPage < totalPages - 3) {
+        pages.push("...");
+      }
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  return (
+    <PaginationComponent>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => currentPage > 1 && handleChange(currentPage - 1)}
+            className={`${
+              navigationVariant === "semibold"
+                ? "text-xl font-semibold leading-normal"
+                : "text-base font-medium leading-6"
+            } ${
+              currentPage > 1
+                ? "cursor-pointer"
+                : "cursor-not-allowed text-stroke-colors-stroke hover:bg-transparent hover:text-stroke-colors-stroke"
+            }`}
+            href={currentPage > 1 ? `?page=${currentPage - 1}` : "#"}
+          />
+        </PaginationItem>
+        {getPageNumbers().map((page, index) =>
+          typeof page === "number" ? (
+            <PaginationItem key={index} onClick={() => handleChange(page)}>
+              <PaginationLink
+                href={`?page=${page}`}
+                isActive={currentPage === page}
+                activeVariant={activeVariant}
+                className={
+                  currentPage === page && activeVariant === "default"
+                    ? "bg-primary"
+                    : ""
+                }
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={index} className="text-sm font-medium">
+              {page}
+            </PaginationItem>
+          ),
+        )}
+        <PaginationItem
+          onClick={() =>
+            currentPage < totalPages && handleChange(currentPage + 1)
+          }
+        >
+          <PaginationNext
+            className={`${
+              navigationVariant === "semibold"
+                ? "text-xl font-semibold leading-normal"
+                : "text-base font-medium leading-6"
+            } ${
+              currentPage < totalPages
+                ? "cursor-pointer"
+                : "cursor-not-allowed text-stroke-colors-stroke hover:bg-transparent hover:text-stroke-colors-stroke"
+            }`}
+            href={currentPage < totalPages ? `?page=${currentPage + 1}` : "#"}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </PaginationComponent>
+  );
+};
+
+export default Pagination;
diff --git a/src/constants/faqsdata.ts b/src/constants/faqsdata.ts
new file mode 100644
index 000000000..3ef833759
--- /dev/null
+++ b/src/constants/faqsdata.ts
@@ -0,0 +1,17 @@
+export const faqData = [
+  {
+    question: "What is the purpose of this application?",
+    content:
+      "This application is designed to help users manage their tasks efficiently by providing tools for scheduling, tracking progress, and setting reminders.",
+  },
+  {
+    question: "How do I reset my password?",
+    content:
+      "To reset your password, go to the login page and click on the 'Forgot Password' link. Follow the instructions to receive a password reset email and create a new password.",
+  },
+  {
+    question: "Can I use this application on multiple devices?",
+    content:
+      "Yes, the application is accessible from multiple devices including desktops, tablets, and smartphones. Your data will be synced across all devices, ensuring a seamless experience.",
+  },
+];
diff --git a/src/constants/templateList.ts b/src/constants/templateList.ts
new file mode 100644
index 000000000..72d424ee8
--- /dev/null
+++ b/src/constants/templateList.ts
@@ -0,0 +1,27 @@
+const templateTableList = [
+  { id: 1, name: "Alani", image: "" },
+  { id: 2, name: "Alani1", image: "" },
+  { id: 3, name: "Alani2", image: "" },
+  { id: 4, name: "Alani3", image: "" },
+  { id: 5, name: "Alani4", image: "" },
+  { id: 6, name: "Alani5", image: "" },
+  { id: 7, name: "Alani6", image: "" },
+  { id: 8, name: "Alani7", image: "" },
+  { id: 9, name: "Alani8", image: "" },
+  { id: 10, name: "Alani9", image: "" },
+  { id: 11, name: "Alani10", image: "" },
+  { id: 12, name: "Alani11", image: "" },
+  { id: 13, name: "Alani12", image: "" },
+  { id: 14, name: "Alani13", image: "" },
+  { id: 15, name: "Alani14", image: "" },
+  { id: 16, name: "Alani15", image: "" },
+  { id: 17, name: "Alani16", image: "" },
+  { id: 18, name: "Alani17", image: "" },
+  { id: 19, name: "Alani18", image: "" },
+  { id: 20, name: "Alani19", image: "" },
+  { id: 21, name: "Alani20", image: "" },
+  { id: 22, name: "Alani21", image: "" },
+  { id: 23, name: "Alani22", image: "" },
+];
+
+export default templateTableList;
diff --git a/src/constants/topicsdata.ts b/src/constants/topicsdata.ts
new file mode 100644
index 000000000..e5b61e58a
--- /dev/null
+++ b/src/constants/topicsdata.ts
@@ -0,0 +1,47 @@
+export const topics = [
+  {
+    id: "item-1",
+    question: "What is EcoClean?",
+    answer: "Lorem ipsum dolor sit amet, consectetur elit.",
+  },
+  {
+    id: "item-2",
+    question: "How does EcoClean work?",
+    answer: "Lorem ipsum dolor sit amet consectetur elit.",
+  },
+  {
+    id: "item-3",
+    question: "What are the key features of EcoClean?",
+    answer: "Lorem ipsum dolor sit amet, consectetur elit.",
+  },
+  {
+    id: "item-4",
+    question: "Who can benefit from using EcoClean?",
+    answer: "Lorem ipsum dolor sit amet consectetur elit.",
+  },
+  {
+    id: "item-5",
+    question: "What are the system requirements for EcoClean?",
+    answer: "Lorem ipsum dolor sit amet consectetur elit.",
+  },
+  {
+    id: "item-6",
+    question: "How do I use EcoClean?",
+    answer: "Lorem ipsum dolor sit amet, consectetur elit.",
+  },
+  {
+    id: "item-7",
+    question: "How do I store EcoClean?",
+    answer: "Lorem ipsum dolor sit amet, consectetur elit.",
+  },
+  {
+    id: "item-8",
+    question: "How much does EcoClean cost?",
+    answer: "Lorem ipsum dolor sit amet, consectetur elit.",
+  },
+  {
+    id: "item-9",
+    question: "Are there any discounts available?",
+    answer: "Lorem ipsum dolor sit amet, consectetur elit.",
+  },
+];
diff --git a/src/test/pricingpage/pricing.test.tsx b/src/test/pricingpage/pricing.test.tsx
new file mode 100644
index 000000000..e8e232bcb
--- /dev/null
+++ b/src/test/pricingpage/pricing.test.tsx
@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import Pricing from "~/app/(landing-routes)/pricing/page";
+
+//
+
+describe("pricing Component", () => {
+  it("renders the pricing header", () => {
+    expect.assertions(1);
+    render(<Pricing />);
+    const pricingHeader = screen.getByTestId("pricing-header");
+    expect(pricingHeader).toBeInTheDocument();
+  });
+
+  it("toggles between monthly and annual plans", () => {
+    expect.assertions(2);
+    render(<Pricing />);
+    const monthlyToggle = screen.getByTestId("monthly-toggle");
+    const annualToggle = screen.getByTestId("annual-toggle");
+
+    fireEvent.click(annualToggle);
+    const annualCard = screen.getByTestId("basic-card-annual");
+    expect(annualCard).toBeInTheDocument();
+
+    fireEvent.click(monthlyToggle);
+    const monthlyCard = screen.getByTestId("basic-card-monthly");
+    expect(monthlyCard).toBeInTheDocument();
+  });
+
+  it("renders FAQ section", () => {
+    expect.assertions(1);
+    render(<Pricing />);
+    const faqSection = screen.getByTestId("faq-section");
+    expect(faqSection).toBeInTheDocument();
+  });
+});

From f91d699e8fe95714f93f295482fe5585cc64eb18 Mon Sep 17 00:00:00 2001
From: Ayodejioladimeji <layobright11@gmail.com>
Date: Wed, 24 Jul 2024 15:10:14 +0100
Subject: [PATCH 3/4] fixed button import error

---
 src/components/layouts/careercard/CareerCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/layouts/careercard/CareerCard.tsx b/src/components/layouts/careercard/CareerCard.tsx
index 74a556aa1..8acf15165 100644
--- a/src/components/layouts/careercard/CareerCard.tsx
+++ b/src/components/layouts/careercard/CareerCard.tsx
@@ -1,8 +1,9 @@
 import { FC } from "react";
+import { Button } from "~/components/ui/button";
 
 import { Card, CardContent, CardFooter } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
-import CustomButton from "../Button/button";
+
 
 interface CareerCardProperties {
   isLoading: boolean;
@@ -54,7 +55,7 @@ const CareerCard: FC<CareerCardProperties> = ({
               {amount}
               <span className="font-normal">/month</span>
             </span>
-            <CustomButton variant="primary">View Details</CustomButton>
+            <Button variant="primary">View Details</Button>
           </>
         )}
       </CardFooter>

From cc7b6f51b31e3cddf11f872bd3efec6fa21e742a Mon Sep 17 00:00:00 2001
From: Ayodejioladimeji <layobright11@gmail.com>
Date: Wed, 24 Jul 2024 15:16:16 +0100
Subject: [PATCH 4/4] fixed errors

---
 .../common/CareerCard/CareerCard.tsx          |  3 +-
 .../layouts/careercard/CareerCard.tsx         | 66 -------------------
 src/components/layouts/careercard/index.tsx   | 29 --------
 3 files changed, 2 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/layouts/careercard/CareerCard.tsx
 delete mode 100644 src/components/layouts/careercard/index.tsx

diff --git a/src/components/common/CareerCard/CareerCard.tsx b/src/components/common/CareerCard/CareerCard.tsx
index 92a6aa0dd..a83bbe5c9 100644
--- a/src/components/common/CareerCard/CareerCard.tsx
+++ b/src/components/common/CareerCard/CareerCard.tsx
@@ -2,7 +2,8 @@ import { FC } from "react";
 
 import { Card, CardContent, CardFooter } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
-import CustomButton from "../Button/button";
+import CustomButton from "../button/button";
+
 
 interface CareerCardProperties {
   isLoading: boolean;
diff --git a/src/components/layouts/careercard/CareerCard.tsx b/src/components/layouts/careercard/CareerCard.tsx
deleted file mode 100644
index 8acf15165..000000000
--- a/src/components/layouts/careercard/CareerCard.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { FC } from "react";
-import { Button } from "~/components/ui/button";
-
-import { Card, CardContent, CardFooter } from "~/components/ui/card";
-import { Skeleton } from "~/components/ui/skeleton";
-
-
-interface CareerCardProperties {
-  isLoading: boolean;
-  jobTitle?: string;
-  location?: string;
-  description?: string;
-  amount?: string;
-}
-
-const CareerCard: FC<CareerCardProperties> = ({
-  isLoading,
-  jobTitle,
-  location,
-  description,
-  amount,
-}) => {
-  return (
-    <Card className="max-w-full text-foreground">
-      <CardContent className="pt-6">
-        {isLoading ? (
-          <div className="flex w-full max-w-6xl flex-col space-y-3">
-            <Skeleton
-              className="h-20 w-full rounded-lg md:w-full"
-              data-testid="skeleton"
-            />
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-60 md:w-full" data-testid="skeleton" />
-              <Skeleton className="h-4 w-60 md:w-full" data-testid="skeleton" />
-            </div>
-          </div>
-        ) : (
-          <>
-            <h3 className="mb-2 text-xl font-semibold">{jobTitle}</h3>
-            <p className="text-sm">{location}</p>
-            <p className="mt-4 line-clamp-2 text-sm">{description}</p>
-          </>
-        )}
-      </CardContent>
-
-      <CardFooter className="flex items-center justify-between">
-        {isLoading ? (
-          <>
-            <Skeleton className="h-6 w-1/3" data-testid="skeleton" />
-            <Skeleton className="h-10 w-28" data-testid="skeleton" />
-          </>
-        ) : (
-          <>
-            <span className="text-sm font-semibold">
-              {amount}
-              <span className="font-normal">/month</span>
-            </span>
-            <Button variant="primary">View Details</Button>
-          </>
-        )}
-      </CardFooter>
-    </Card>
-  );
-};
-
-export default CareerCard;
diff --git a/src/components/layouts/careercard/index.tsx b/src/components/layouts/careercard/index.tsx
deleted file mode 100644
index 737247a3b..000000000
--- a/src/components/layouts/careercard/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-
-import { FC, useEffect, useState } from "react";
-
-import CareerCard from "./CareerCard";
-
-const CareerCardParent: FC = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 2000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <CareerCard
-      isLoading={isLoading}
-      jobTitle="Frontend Developer"
-      location="San Francisco, CA"
-      description="We are seeking a talented Frontend Developer to join our dynamic team. The ideal candidate will have strong skills in React, TypeScript, and modern CSS frameworks."
-      amount="$120K - $150K"
-    />
-  );
-};
-
-export default CareerCardParent;