From e64026ad58cf0af4ea2cee335f5d7ea52c2b2b14 Mon Sep 17 00:00:00 2001
From: Harsh Patel <harshnpatel9@gmail.com>
Date: Mon, 27 May 2024 19:14:20 +0530
Subject: [PATCH] feat(web): add pricing page * added basic title

---
 apps/web/src/app/(main)/pricing/page.tsx      | 29 +++++++++++++++++++
 .../src/components/shared/navbar/index.tsx    |  3 ++
 2 files changed, 32 insertions(+)
 create mode 100644 apps/web/src/app/(main)/pricing/page.tsx

diff --git a/apps/web/src/app/(main)/pricing/page.tsx b/apps/web/src/app/(main)/pricing/page.tsx
new file mode 100644
index 00000000..0063174c
--- /dev/null
+++ b/apps/web/src/app/(main)/pricing/page.tsx
@@ -0,0 +1,29 @@
+import { ColorBGSVG } from '@public/hero'
+
+function About(): React.JSX.Element {
+  return (
+    <div className="relative flex flex-col items-center justify-center ">
+      <ColorBGSVG className="absolute -z-10 translate-y-[20rem]" />
+
+      <div className="pb-4 pt-14">
+        <h3 className="w-24 rounded-full border-[1px] border-[#FFFFFF] border-opacity-5 bg-white bg-opacity-5 p-2 text-center text-xs tracking-widest text-white md:text-sm">
+          PRICING
+        </h3>
+      </div>
+
+      <h1
+        className={` text-brandBlue/90 w-[25rem] text-center text-4xl font-extralight md:w-auto md:text-6xl`}
+      >
+        <span className="self-center font-bold tracking-wide">
+          Transparent Pricing
+        </span>
+      </h1>
+      <span className="text-brandBlue/80 mt-3 w-[20rem] text-center text-sm md:w-[35rem] md:text-xl">
+        Keyshade combines enterprise-grade capabilities with simplicity offering
+        plans tailored to users of all levels.
+      </span>
+    </div>
+  )
+}
+
+export default About
diff --git a/apps/web/src/components/shared/navbar/index.tsx b/apps/web/src/components/shared/navbar/index.tsx
index b0354a78..3c764c81 100644
--- a/apps/web/src/components/shared/navbar/index.tsx
+++ b/apps/web/src/components/shared/navbar/index.tsx
@@ -28,6 +28,9 @@ function Navbar(): React.JSX.Element {
         <li>
           <Link href="/about">About</Link>
         </li>
+        <li>
+          <Link href="/pricing">Pricing</Link>
+        </li>
         <li>
           <a
             href="https://dev.to/keyshade"