From f2ae56e7a2f0e499550ff7d8361e35ae209d8cc3 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:44:27 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20subscription=20pricing?=
 =?UTF-8?q?=20component=20=F0=9F=93=8A=20Implemented=20pricing=20items=20a?=
 =?UTF-8?q?nd=20features=20=F0=9F=8E=A8=20Styled=20the=20pricing=20section?=
 =?UTF-8?q?=20=F0=9F=9A=80=20Ready=20to=20showcase=20subscription=20option?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/subscription/page.tsx | 129 ++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/app/subscription/page.tsx

diff --git a/src/app/subscription/page.tsx b/src/app/subscription/page.tsx
new file mode 100644
index 0000000..a42a0a3
--- /dev/null
+++ b/src/app/subscription/page.tsx
@@ -0,0 +1,129 @@
+import { CheckIcon } from "@heroicons/react/24/solid";
+import React, { FC } from "react";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+
+export interface PageSubcriptionProps {}
+
+export interface PricingItem {
+  isPopular: boolean;
+  name: string;
+  pricing: string;
+  desc: string;
+  per: string;
+  features: string[];
+}
+
+const pricings: PricingItem[] = [
+  {
+    isPopular: false,
+    name: "Starter",
+    pricing: "$5",
+    per: "/mo",
+    features: ["Automated Reporting", "Faster Processing", "Customizations"],
+    desc: ` Literally you probably haven't heard of them jean shorts.`,
+  },
+  {
+    isPopular: true,
+    name: "Basic",
+    pricing: "$15",
+    per: "/mo",
+    features: [
+      "Everything in Starter",
+      "100 Builds",
+      "Progress Reports",
+      "Premium Support",
+    ],
+    desc: ` Literally you probably haven't heard of them jean shorts.`,
+  },
+  {
+    isPopular: false,
+    name: "Plus",
+    pricing: "$25",
+    per: "/mo",
+    features: [
+      "Everything in Basic",
+      "Unlimited Builds",
+      "Advanced Analytics",
+      "Company Evaluations",
+    ],
+    desc: ` Literally you probably haven't heard of them jean shorts.`,
+  },
+];
+
+const PageSubcription: FC<PageSubcriptionProps> = () => {
+  const renderPricingItem = (pricing: PricingItem, index: number) => {
+    return (
+      <div
+        key={index}
+        className={`h-full relative px-6 py-8 rounded-3xl border-2 flex flex-col overflow-hidden ${
+          pricing.isPopular
+            ? "border-primary-500"
+            : "border-neutral-100 dark:border-neutral-700"
+        }`}
+      >
+        {pricing.isPopular && (
+          <span className="bg-primary-500 text-white px-3 py-1 tracking-widest text-xs absolute right-3 top-3 rounded-full z-10">
+            POPULAR
+          </span>
+        )}
+        <div className="mb-8">
+          <h3 className="block text-sm uppercase tracking-widest text-neutral-6000 dark:text-neutral-300 mb-2 font-medium">
+            {pricing.name}
+          </h3>
+          <h2 className="text-5xl leading-none flex items-center text-neutral-900 dark:text-neutral-300">
+            <span>{pricing.pricing}</span>
+            <span className="text-lg ml-1 font-normal text-neutral-500">
+              {pricing.per}
+            </span>
+          </h2>
+        </div>
+        <nav className="space-y-4 mb-8">
+          {pricing.features.map((item, index) => (
+            <li className="flex items-center" key={index}>
+              <span className="mr-4 inline-flex flex-shrink-0 text-primary-6000">
+                <CheckIcon className="w-5 h-5" aria-hidden="true" />
+              </span>
+              <span className="text-neutral-700 dark:text-neutral-300">
+                {item}
+              </span>
+            </li>
+          ))}
+        </nav>
+        <div className="flex flex-col mt-auto">
+          {pricing.isPopular ? (
+            <ButtonPrimary>Submit</ButtonPrimary>
+          ) : (
+            <ButtonSecondary>
+              <span className="font-medium">Submit</span>
+            </ButtonSecondary>
+          )}
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-3">
+            {pricing.desc}
+          </p>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`nc-PageSubcription container pb-24 lg:pb-32 `}>
+      <header className="text-center max-w-2xl mx-auto my-20">
+        <h2 className="flex items-center text-3xl leading-[115%] md:text-5xl md:leading-[115%] font-semibold text-neutral-900 dark:text-neutral-100 justify-center">
+          <span className="mr-4 text-3xl md:text-4xl leading-none">💎</span>
+          Subscription
+        </h2>
+        <span className="block text-sm mt-2 text-neutral-700 sm:text-base dark:text-neutral-200">
+          Pricing to fit the needs of any companie size.
+        </span>
+      </header>
+      <section className="text-neutral-600 text-sm md:text-base overflow-hidden">
+        <div className="grid lg:grid-cols-3 gap-5 xl:gap-8">
+          {pricings.map(renderPricingItem)}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default PageSubcription;