From e6253c6a735520cb388f53b811f401b5124af838 Mon Sep 17 00:00:00 2001
From: shadcn <arshad@chummun.com>
Date: Mon, 21 Nov 2022 16:47:31 +0400
Subject: [PATCH] feat: implement pricing page

---
 app/(marketing)/pricing/page.tsx | 64 ++++++++++++++++++++++++++++++++
 components/icons.tsx             |  2 +
 config/marketing.ts              |  1 -
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 app/(marketing)/pricing/page.tsx

diff --git a/app/(marketing)/pricing/page.tsx b/app/(marketing)/pricing/page.tsx
new file mode 100644
index 0000000..5a840eb
--- /dev/null
+++ b/app/(marketing)/pricing/page.tsx
@@ -0,0 +1,64 @@
+import Link from "next/link"
+
+import { Icons } from "@/components/icons"
+
+export default function PricingPage() {
+  return (
+    <section className="container flex flex-col  gap-6 py-8 md:max-w-[64rem] md:py-12 lg:py-24">
+      <div className="mx-auto flex w-full flex-col gap-4 md:max-w-[52rem]">
+        <h2 className="text-3xl font-bold leading-[1.1] tracking-tighter sm:text-3xl md:text-6xl">
+          Simple, transparent pricing
+        </h2>
+        <p className="max-w-[85%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
+          Unlock all features including unlimited posts for your blog.
+        </p>
+      </div>
+      <div className="grid w-full items-start gap-10 rounded-lg border border-slate-200 p-10 md:grid-cols-[1fr_200px]">
+        <div className="grid gap-6">
+          <h3 className="text-xl font-bold sm:text-2xl">
+            What&apos;s included in the PRO plan
+          </h3>
+          <ul className="grid gap-3 text-sm text-slate-600 sm:grid-cols-2">
+            <li className="flex items-center">
+              <Icons.check className="mr-2 h-4 w-4" /> Unlimited Posts
+            </li>
+            <li className="flex items-center">
+              <Icons.check className="mr-2 h-4 w-4" /> Unlimited Users
+            </li>
+
+            <li className="flex items-center">
+              <Icons.check className="mr-2 h-4 w-4" /> Custom domain
+            </li>
+            <li className="flex items-center">
+              <Icons.check className="mr-2 h-4 w-4" /> Dashboard Analytics
+            </li>
+            <li className="flex items-center">
+              <Icons.check className="mr-2 h-4 w-4" /> Access to Discord
+            </li>
+            <li className="flex items-center">
+              <Icons.check className="mr-2 h-4 w-4" /> Premium Support
+            </li>
+          </ul>
+        </div>
+        <div className="flex flex-col gap-4 text-center">
+          <div>
+            <h4 className="text-7xl font-bold">$19</h4>
+            <p className="text-sm font-medium text-slate-600">Billed Monthly</p>
+          </div>
+          <Link
+            href="/login"
+            className="relative inline-flex h-12 items-center justify-center rounded-md border border-transparent bg-brand-500 py-6 text-center font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+          >
+            Get Started
+          </Link>
+        </div>
+      </div>
+      <div className="mx-auto flex w-full flex-col gap-4 md:max-w-[52rem]">
+        <p className="max-w-[85%] leading-normal text-slate-700 sm:leading-7">
+          Taxonomy app is a demo app.{" "}
+          <strong>You can test the upgrade and won&apos;t be charged.</strong>
+        </p>
+      </div>
+    </section>
+  )
+}
diff --git a/components/icons.tsx b/components/icons.tsx
index cc09277..b5fb6d0 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -1,6 +1,7 @@
 import {
   AlertTriangle,
   ArrowRight,
+  Check,
   ChevronLeft,
   ChevronRight,
   Command,
@@ -45,4 +46,5 @@ export const Icons = {
   pizza: Pizza,
   gitHub: Github,
   twitter: Twitter,
+  check: Check,
 }
diff --git a/config/marketing.ts b/config/marketing.ts
index e58530d..2d4533f 100644
--- a/config/marketing.ts
+++ b/config/marketing.ts
@@ -10,7 +10,6 @@ export const marketingConfig: MarketingConfig = {
     {
       title: "Pricing",
       href: "/pricing",
-      disabled: true,
     },
     {
       title: "Blog",