Added Pricing screen

src/app/ar/price/page.tsx

@@ -0,0 +1,5 @@
+import Price from "@/templates/Price";
+
+export default function Page() {
+  return <Price language="ar" />;
+}

src/app/price/page.tsx

@@ -0,0 +1,5 @@
+import Price from "@/templates/Price";
+
+export default function Page() {
+	return <Price language="en" />;
+}

src/templates/Price.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { capitalize } from "lodash";
+import getSymbolFromCurrency from "currency-symbol-map";
+import clsx from "clsx";
+import Navbar from "@/components/Navbar";
+import Link from "next/link";
+import Footer from "@/components/Footer";
+
+type DurationUnit = "weeks" | "days" | "months" | "years";
+
+interface Package {
+  id: string;
+  currency: string;
+  duration: number;
+  duration_unit: DurationUnit;
+  price: number;
+}
+
+export default function Page({ language }: { language: "en" | "ar" }) {
+  const [payments, setPayments] = React.useState<Package[]>([]);
+  const getData = async () => {
+    // Fetch data from external API
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_APP_URL}/api/packages`,
+      {
+        method: "GET",
+      }
+    );
+
+    if (response.status === 200) {
+      const payments = await response.json();
+      // Pass data to the page via props
+      setPayments(payments);
+      return;
+    }
+  };
+
+  React.useEffect(() => {
+    getData();
+  }, []);
+  return (
+    <main className="h-screen w-full bg-white text-mti-black flex flex-col">
+      <Navbar currentPage="/join" language="en" />
+
+      <section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
+        <h2 className="text-3xl font-bold">Available Packages</h2>
+        <div className="grid grid-cols-2 gap-8">
+          {payments.map((p) => (
+            <div
+              key={p.id}
+              className={clsx(
+                "p-4 bg-white rounded-xl flex flex-col gap-6 items-start"
+              )}
+            >
+              <div className="flex flex-col items-start mb-2">
+                <Image
+                  src="/logo_title.png"
+                  alt="EnCoach's Logo"
+                  width={32}
+                  height={32}
+                />
+                <span className="font-semibold text-xl">
+                  EnCoach - {p.duration}{" "}
+                  {capitalize(
+                    p.duration === 1
+                      ? p.duration_unit.slice(0, p.duration_unit.length - 1)
+                      : p.duration_unit
+                  )}
+                </span>
+              </div>
+              <div className="flex flex-col gap-2 items-start w-full">
+                <span className="text-2xl">
+                  {p.price}
+                  {getSymbolFromCurrency(p.currency)}
+                </span>
+              </div>
+              <div className="flex flex-col gap-1 items-start">
+                <span>This includes:</span>
+                <ul className="flex flex-col items-start text-sm">
+                  <li>- Train your abilities for the IELTS exam</li>
+                  <li>- Gain insights into your weaknesses and strengths</li>
+                  <li>- Allow yourself to correctly prepare for the exam</li>
+                </ul>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Link
+          className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl mb-8"
+          href={`${process.env.NEXT_PUBLIC_APP_URL}/register`}
+        >
+          Join us
+        </Link>
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}