feat: add pricing section

app/page.tsx

@@ -2,6 +2,7 @@ import Navbar from "@/components/layout/navbar";
 import Benefits from "@/components/sections/benefits";
 import Collaboration from "@/components/sections/collaboration";
 import Hero from "@/components/sections/hero";
+import Pricing from "@/components/sections/pricing";
 import Services from "@/components/sections/services";
 import ButtonGradient from "@/components/svg/button-gradient";
 import { cn } from "@/lib/utils";
@@ -15,6 +16,7 @@ export default function Home() {
         <Benefits />
         <Collaboration />
         <Services />
+        <Pricing />
       </div>
       <ButtonGradient />
     </main>

components/atoms/heading.tsx

@@ -1,15 +1,18 @@
 import { cn } from "@/lib/utils";
 import React from "react";
+import TagLine from "./tag-line";
 
 type Props = {
   className?: string;
-  title: string;
-  text: string;
+  title?: string;
+  text?: string;
+  tag?: string;
 };
 
-const Heading = ({ className, title, text }: Props) => {
+const Heading = ({ className, title, text, tag }: Props) => {
   return (
-    <div className={cn(className, "max-w-[50rem] mx-auto mb-12 lg:mb-20")}>
+    <div className={cn(className, "max-w-[50rem] mx-auto mb-12 lg:mb-20 md:text-center")}>
+      {tag && <TagLine className="mb-4 md:justify-center">{tag}</TagLine>}
       {title && <h2 className="h2">{title}</h2>}
       {text && <p className="body-2 mt-4 text-n-4">{text}</p>}
     </div>

components/atoms/tag-line.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+import brackets from "../svg/brackets";
+
+type Props = {
+  className?: string;
+  children: React.ReactNode;
+};
+
+const TagLine = ({ className, children }: Props) => {
+  return (
+    <div className={cn("tagline flex items-center", className)}>
+      {brackets("left")}
+      <div className="mx-3 text-n-3">{children}</div>
+      {brackets("right")}
+    </div>
+  );
+};
+
+export default TagLine;

components/layout/navbar.tsx

@@ -12,7 +12,7 @@ import MenuSvg from "../svg/menu-svg";
 import { HamburgerMenu } from "../design/navbar";
 
 type Props = {};
-type TSection = "hero" | "features" | "collaboration";
+type TSection = "hero" | "features" | "collaboration" | "how-to-use" | "pricing";
 
 const Navbar = (props: Props) => {
   const params = useParams();

components/sections/benefits/index.tsx

@@ -14,7 +14,7 @@ const Benefits = (props: Props) => {
     <Section id="features">
       <div className="container relative z-2">
         <Heading
-          className="text-center md:max-w-md lg:max-w-2xl"
+          className="md:max-w-md lg:max-w-2xl"
           title="Chat Smarter, Not Harder with Brainwave"
         />
 

components/sections/hero/index.tsx

@@ -43,7 +43,7 @@ const Hero = (props: Props) => {
             Unleash the power of AI within Brainwave. Upgrade your productivity with Brainwave, the
             open AI chat app.
           </p>
-          <Button href="/pricing" white>
+          <Button href="#pricing" white>
             Get Started
           </Button>
         </div>
@@ -61,7 +61,7 @@ const Hero = (props: Props) => {
                   src={images.robot}
                   width={1024}
                   height={490}
-                  className="translte-y-[8%] w-full scale-[1.7] md:-translate-y-[10%] md:scale-100 lg:-translate-y-[23%]"
+                  className="w-full translate-y-[8%] scale-[1.7] md:-translate-y-[10%] md:scale-100 lg:-translate-y-[23%]"
                   alt="AI"
                 />
 

components/sections/pricing/index.tsx

@@ -0,0 +1,51 @@
+import Heading from "@/components/atoms/heading";
+import Section from "@/components/layout/section";
+import { images } from "@/constants";
+import Image from "next/image";
+import React from "react";
+import PricingList from "./pricing-list";
+import { LeftLine, RightLine } from "@/components/design/pricing";
+import Link from "next/link";
+
+type Props = {};
+
+const Pricing = (props: Props) => {
+  return (
+    <Section id="pricing" className="overflow-hidden">
+      <div className="container relative z-2">
+        <div className="relative mb-[6.5rem] hidden justify-center lg:flex">
+          <Image
+            src={images.smallSphere}
+            className="relative z-1"
+            width={255}
+            height={255}
+            alt="small sphere"
+          />
+
+          <div className="pointer-events-none absolute left-1/2 top-1/2 w-[60rem] -translate-x-1/2 -translate-y-1/2">
+            <Image src={images.stars} className="w-full" width={950} height={400} alt="stars" />
+          </div>
+        </div>
+
+        <Heading tag="Get started with Brainwave" title="Pay once, use forever" />
+
+        <div className="relative">
+          <PricingList />
+          <LeftLine />
+          <RightLine />
+        </div>
+
+        <div className="mt-10 flex justify-center">
+          <Link
+            className="border-b font-code text-xs font-bold uppercase tracking-wider"
+            href="#pricing"
+          >
+            See the full details
+          </Link>
+        </div>
+      </div>
+    </Section>
+  );
+};
+
+export default Pricing;

components/sections/pricing/pricing-list.tsx

@@ -0,0 +1,50 @@
+import Button from "@/components/atoms/button";
+import { images, pricing } from "@/constants";
+import React from "react";
+import Image from "next/image";
+
+type Props = {};
+
+const PricingList = (props: Props) => {
+  return (
+    <div className="flex gap-4 max-lg:flex-wrap">
+      {pricing.map((item) => (
+        <div
+          key={item.id}
+          className="h-full w-[19rem] rounded-[2rem] border border-n-6 bg-n-8 px-6 odd:my-4 odd:py-8 even:py-14 max-lg:w-full lg:w-auto [&>h4]:first:text-color-2 [&>h4]:last:text-color-3 [&>h4]:even:text-color-1"
+        >
+          <h4 className="h4 mb-4">{item.title}</h4>
+          <p className="body-2 mb-3 min-h-16 text-n-1/50">{item.description}</p>
+
+          <div className="mb-6 flex h-[5.5rem] items-center">
+            {item.price && (
+              <>
+                <span className="h3">$</span>
+                <span className="text-[5.5rem] font-bold leading-none">{item.price}</span>
+              </>
+            )}
+          </div>
+
+          <Button
+            className="mb-6 w-full"
+            href={item.price ? "/pricing" : "mailto:contact@brainwave.ai"}
+            white={!!item.price}
+          >
+            {item.price ? "Get started" : "Contact us"}
+          </Button>
+
+          <ul>
+            {item.features.map((feature, index) => (
+              <li key={index} className="flex items-start border-t border-n-6 py-5">
+                <Image src={images.check} width={24} height={24} alt="check" />
+                <p className="body-2 ml-4">{feature}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PricingList;

components/sections/services/index.tsx

@@ -13,7 +13,7 @@ import { Gradient } from "@/components/design/hero";
 type Props = {};
 
 const Services = (props: Props) => {
-  const [selectedItem, setSetselectedItem] = useState<number>(2);
+  const [selectedItem, setSelectedItem] = useState<number>(2);
 
   return (
     <Section id="how-to-use">
@@ -86,7 +86,7 @@ const Services = (props: Props) => {
                   {brainwaveServicesIcons.map((item, index) => (
                     <li
                       key={index}
-                      onClick={() => setSetselectedItem(index)}
+                      onClick={() => setSelectedItem(index)}
                       className={cn(
                         "flex items-center justify-center rounded-2xl cursor-pointer",
                         index === selectedItem
@@ -120,9 +120,8 @@ const Services = (props: Props) => {
                 <VideoBar />
               </div>
             </div>
+            <Gradient />
           </div>
-
-          <Gradient />
         </div>
       </div>
     </Section>