diff --git a/app/page.tsx b/app/page.tsx
index 8ca0bdb..05d575e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import Navbar from "@/components/layout/navbar";
+import Hero from "@/components/sections/hero";
 import ButtonGradient from "@/components/svg/button-gradient";
 import { cn } from "@/lib/utils";
 
@@ -7,6 +8,7 @@ export default function Home() {
     <main>
       <div className={cn("overflow-hidden pt-[4.75rem] lg:pt-[5.25rem]")}>
         <Navbar />
+        <Hero />
       </div>
       <ButtonGradient />
     </main>
diff --git a/components/atoms/button.tsx b/components/atoms/button.tsx
index fe8e466..95b47bc 100644
--- a/components/atoms/button.tsx
+++ b/components/atoms/button.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import Link from "next/link";
 
 type Props = {
-  className: string;
+  className?: string;
   href?: string;
   children: React.ReactNode;
   onClick?: () => void;
diff --git a/components/layout/section.tsx b/components/layout/section.tsx
new file mode 100644
index 0000000..11d6015
--- /dev/null
+++ b/components/layout/section.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import SectionSvg from "../svg/section-svg";
+
+type Props = {
+  className: string;
+  id: string;
+  crosses: boolean;
+  crossesOffset: string;
+  customPaddings: boolean;
+  children: React.ReactNode;
+};
+
+const Section = ({ className, id, crosses, crossesOffset, customPaddings, children }: Props) => {
+  return (
+    <div
+      id={id}
+      className={cn(
+        "relative",
+        customPaddings || "py-10 lg:py-16 xl:py-20",
+        !customPaddings && crosses && "lg:py-32 xl:py-40",
+        className
+      )}
+    >
+      {children}
+
+      <div
+        className={cn(
+          "pointer-events-none absolute left-5 top-0 hidden h-full w-0.25 bg-stroke-1 md:block lg:left-7.5 xl:left-10"
+        )}
+      />
+      <div
+        className={cn(
+          "pointer-events-none absolute right-5 top-0 hidden h-full w-0.25 bg-stroke-1 md:block lg:right-7.5 xl:right-10"
+        )}
+      />
+
+      {crosses && (
+        <>
+          <div
+            className={cn(
+              "hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1",
+              crossesOffset && `${crossesOffset} pointer-events-none lg:block xl:left-10 right-10`
+            )}
+          />
+          <SectionSvg crossesOffset={crossesOffset} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Section;
diff --git a/components/sections/hero/company-logos.tsx b/components/sections/hero/company-logos.tsx
new file mode 100644
index 0000000..391f13e
--- /dev/null
+++ b/components/sections/hero/company-logos.tsx
@@ -0,0 +1,22 @@
+import { companyLogos } from "@/constants";
+import React from "react";
+import Image from "next/image";
+
+const CompanyLogos = ({ className }: { className: string }) => {
+  return (
+    <div className={className}>
+      <h5 className="tagline mb-6 text-center text-n-1/50">
+        Helping people create beautiful content at
+      </h5>
+      <ul className="flex">
+        {companyLogos.map((logo, index) => (
+          <li key={index} className="flex h-[8.5rem] flex-1 items-center justify-center">
+            <Image src={logo} width={134} height={28} alt={logo} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default CompanyLogos;
diff --git a/components/sections/hero/generating.tsx b/components/sections/hero/generating.tsx
new file mode 100644
index 0000000..1bcacbe
--- /dev/null
+++ b/components/sections/hero/generating.tsx
@@ -0,0 +1,17 @@
+import { images } from "@/constants";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import React from "react";
+
+const Generating = ({ className }: { className?: string }) => {
+  return (
+    <div
+      className={cn("flex h-14 items-center rounded-[1.7rem] bg-n-8/80 px-6 text-base", className)}
+    >
+      <Image src={images.loading} className="mr-4 size-5" alt="loading" width={5} height={5} />
+      AI is generating
+    </div>
+  );
+};
+
+export default Generating;
diff --git a/components/sections/hero/index.tsx b/components/sections/hero/index.tsx
new file mode 100644
index 0000000..81b83a8
--- /dev/null
+++ b/components/sections/hero/index.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import React, { useRef } from "react";
+import Section from "../../layout/section";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { images, heroIcons } from "@/constants";
+import Button from "../../atoms/button";
+import { BackgroundCircles, BottomLine, Gradient } from "../../design/hero";
+import { ScrollParallax } from "react-just-parallax";
+import Generating from "./generating";
+import Notification from "./notification";
+import CompanyLogos from "./company-logos";
+
+type Props = {};
+
+const Hero = (props: Props) => {
+  const parallaxRef = useRef(null);
+  return (
+    <Section
+      className={cn("pt-[12rem] -mt-[5.25rem]")}
+      crosses
+      crossesOffset="lg:translate-y-[5.25rem]"
+      customPaddings
+      id="hero"
+    >
+      <div className="container relative" ref={parallaxRef}>
+        <div className="relative z-1 mx-auto mb-16 max-w-[62rem] text-center md:mb-20 lg:mb-24">
+          <h1 className="h1 mb-6">
+            Explore the Possibilities of&nbsp;AI&nbsp;Chatting with{" "}
+            <span className="relative inline-block">
+              Brainwave
+              <Image
+                src={images.curve}
+                className="absolute left-0 top-full w-full xl:-mt-2"
+                width={624}
+                height={28}
+                alt="curve"
+              />
+            </span>
+          </h1>
+          <p className={cn("body-1 max-w-3xl mx-auto mb-6 text-n-2 lg:mb-8")}>
+            Unleash the power of AI within Brainwave. Upgrade your productivity with Brainwave, the
+            open AI chat app.
+          </p>
+          <Button href="/pricing" white>
+            Get Started
+          </Button>
+        </div>
+
+        <div className={cn("relative max-w-[23rem] mx-auto md:max-w-5xl xl:mb-24")}>
+          <div className={cn("relative z-1 rounded-2xl p-0.5 bg-conic-gradient")}>
+            <div className={cn("relative bg-n-8 rounded-[1rem]")}>
+              <div className={cn("h-[1.4rem] bg-n-10 rounded-t-[0.9rem]")} />
+              <div
+                className={cn(
+                  "aspect-[33/40] rounded-b-[0.9rem] overflow-hidden md:aspect-[688/490] lg:aspect-[1024/490]"
+                )}
+              >
+                <Image
+                  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%]"
+                  alt="AI"
+                />
+
+                <Generating className="absolute inset-x-4 bottom-5 md:bottom-8 md:left-1/2 md:right-auto md:w-[31rem] md:-translate-x-1/2" />
+
+                <ScrollParallax isAbsolutelyPositioned>
+                  <ul className="absolute -left-[5.5rem] bottom-[7.5rem] hidden rounded-2xl border border-n-1/10 bg-n-9/40 p-1 backdrop-blur xl:flex">
+                    {heroIcons.map((icon, index) => (
+                      <li className="p-5" key={index}>
+                        <Image src={icon} height={24} width={25} alt={icon} />
+                      </li>
+                    ))}
+                  </ul>
+                </ScrollParallax>
+
+                <ScrollParallax isAbsolutelyPositioned>
+                  <Notification
+                    className="absolute -right-[5.5rem] bottom-44 hidden w-72 xl:flex"
+                    title="Code generation"
+                  />
+                </ScrollParallax>
+              </div>
+            </div>
+
+            <Gradient />
+          </div>
+          <div className="absolute left-1/2 top-[-54%] w-[234%] -translate-x-1/2 md:top-[-46%] md:w-[138%] lg:top-[-104%]">
+            <Image
+              src={images.heroBackground}
+              width={1440}
+              height={1880}
+              className="w-full"
+              alt="hero"
+            />
+          </div>
+
+          <BackgroundCircles parallaxRef={parallaxRef} />
+        </div>
+
+        <CompanyLogos className="relative z-10 mt-20 hidden lg:block" />
+      </div>
+      <BottomLine />
+    </Section>
+  );
+};
+
+export default Hero;
diff --git a/components/sections/hero/notification.tsx b/components/sections/hero/notification.tsx
new file mode 100644
index 0000000..358e195
--- /dev/null
+++ b/components/sections/hero/notification.tsx
@@ -0,0 +1,41 @@
+import { images, notificationImages } from "@/constants";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import React from "react";
+
+type Props = {
+  className: string;
+  title: string;
+};
+
+const Notification = ({ className, title }: Props) => {
+  return (
+    <div
+      className={cn(
+        "flex items-center p-4 pr-6 bg-n-9/40 backdrop-blur border border-n-1/10 rounded-2xl gap-5",
+        className
+      )}
+    >
+      <Image src={images.notification1} width={62} height={62} alt="image" className="rounded-xl" />
+      <div className="flex-1">
+        <h6 className="mb-1 justify-between text-base font-semibold">{title}</h6>
+
+        <div className="flex items-center justify-between">
+          <ul className="-m-0.5 flex">
+            {notificationImages.map((item, index) => (
+              <li
+                key={index}
+                className="flex size-6 overflow-hidden rounded-full border-2 border-n-12"
+              >
+                <Image src={item} className="w-full" width={20} height={20} alt={item} />
+              </li>
+            ))}
+          </ul>
+          <div className="body-2 text-n-13">1m ago</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Notification;
diff --git a/constants/index.ts b/constants/index.ts
index 8c7d3e9..1c50936 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -1,40 +1,111 @@
 import {
-  benefitIcon1,
-  benefitIcon2,
-  benefitIcon3,
-  benefitIcon4,
-  benefitImage2,
-  chromecast,
-  disc02,
-  discord,
-  discordBlack,
-  facebook,
-  figma,
-  file02,
-  framer,
   homeSmile,
-  instagram,
-  notification2,
-  notification3,
-  notification4,
-  notion,
-  photoshop,
+  file02,
+  searchMd,
   plusSquare,
-  protopie,
-  raindrop,
-  recording01,
+  notification4,
+  notification3,
+  notification2,
+  yourlogo,
   recording03,
+  recording01,
+  disc02,
+  chromecast,
+  sliders04,
   roadmap1,
   roadmap2,
   roadmap3,
   roadmap4,
-  searchMd,
+  figma,
+  notion,
+  discord,
   slack,
-  sliders04,
-  telegram,
+  photoshop,
+  protopie,
+  framer,
+  raindrop,
+  benefitIcon1,
+  benefitImage2,
+  benefitIcon2,
+  benefitIcon3,
+  benefitIcon4,
+  discordBlack,
   twitter,
-  yourlogo,
-} from "@/public/assets/index";
+  instagram,
+  telegram,
+  facebook,
+} from "@/public/assets";
+
+export const images = {
+  yourlogo: "/assets/yourlogo.svg",
+  brainwave: "/assets/brainwave.svg",
+  check: "/assets/check.svg",
+  check2: "/assets/check-02.svg",
+  loading1: "/assets/loading-01.svg",
+  brainwaveSymbol: "/assets/brainwave-symbol.svg",
+  brainwaveWhiteSymbol: "/assets/brainwave-symbol-white.svg",
+  play: "/assets/play.svg",
+  gradient: "/assets/gradient.png",
+  smallSphere: "/assets/4-small.png",
+  grid: "/assets/grid.png",
+  homeSmile: "/assets/home-smile.svg",
+  file02: "/assets/file-02.svg",
+  searchMd: "/assets/search-md.svg",
+  plusSquare: "/assets/plus-square.svg",
+  recording03: "/assets/recording-03.svg",
+  recording01: "/assets/recording-01.svg",
+  disc02: "/assets/disc-02.svg",
+  chromecast: "/assets/chrome-cast.svg",
+  sliders04: "/assets/sliders-04.svg",
+  loading: "/assets/loading.png",
+  background: "/assets/background.jpg",
+  curve: "/assets/hero/curve.png",
+  robot: "/assets/hero/robot.jpg",
+  heroBackground: "/assets/hero/hero-background.jpg",
+  curve1: "/assets/collaboration/curve-1.svg",
+  curve2: "/assets/collaboration/curve-2.svg",
+  discord: "/assets/collaboration/discord.png",
+  figma: "/assets/collaboration/figma.png",
+  framer: "/assets/collaboration/framer.png",
+  notion: "/assets/collaboration/notion.png",
+  photoshop: "/assets/collaboration/photoshop.png",
+  protopie: "/assets/collaboration/protopie.png",
+  raindrop: "/assets/collaboration/raindrop.png",
+  slack: "/assets/collaboration/slack.png",
+  service1: "/assets/services/service-1.png",
+  service2: "/assets/services/service-2.png",
+  service3: "/assets/services/service-3.png",
+  lines: "/assets/pricing/lines.svg",
+  stars: "/assets/pricing/stars.svg",
+  coins: "/assets/roadmap/coins.png",
+  done: "/assets/roadmap/done.svg",
+  hero: "/assets/roadmap/hero.png",
+  roadmap1: "/assets/roadmap/image-1.png",
+  roadmap2: "/assets/roadmap/image-2.png",
+  roadmap3: "/assets/roadmap/image-3.png",
+  roadmap4: "/assets/roadmap/image-4.png",
+  undone: "/assets/roadmap/undone.svg",
+  notification1: "/assets/notification/image-1.png",
+  notification2: "/assets/notification/image-2.png",
+  notification3: "/assets/notification/image-3.png",
+  notification4: "/assets/notification/image-4.png",
+  benefitCard1: "/assets/benefits/card-1.svg",
+  benefitCard2: "/assets/benefits/card-2.svg",
+  benefitCard3: "/assets/benefits/card-3.svg",
+  benefitCard4: "/assets/benefits/card-4.svg",
+  benefitCard5: "/assets/benefits/card-5.svg",
+  benefitCard6: "/assets/benefits/card-6.svg",
+  benefitIcon1: "/assets/benefits/icon-1.svg",
+  benefitIcon2: "/assets/benefits/icon-2.svg",
+  benefitIcon3: "/assets/benefits/icon-3.svg",
+  benefitIcon4: "/assets/benefits/icon-4.svg",
+  benefitImage2: "/assets/benefits/image-2.png",
+  discordBlack: "/assets/socials/discord.svg",
+  facebook: "/assets/socials/facebook.svg",
+  instagram: "/assets/socials/instagram.svg",
+  telegram: "/assets/socials/telegram.svg",
+  twitter: "/assets/socials/twitter.svg",
+};
 
 export const navigation = [
   {
@@ -316,74 +387,3 @@ export const socials = [
     url: "#",
   },
 ];
-
-export const images = {
-  yourlogo: "/assets/yourlogo.svg",
-  brainwave: "/assets/brainwave.svg",
-  check: "/assets/check.svg",
-  check2: "/assets/check-02.svg",
-  loading1: "/assets/loading-01.svg",
-  brainwaveSymbol: "/assets/brainwave-symbol.svg",
-  brainwaveWhiteSymbol: "/assets/brainwave-symbol-white.svg",
-  play: "/assets/play.svg",
-  gradient: "/assets/gradient.png",
-  smallSphere: "/assets/4-small.png",
-  grid: "/assets/grid.png",
-  homeSmile: "/assets/home-smile.svg",
-  file02: "/assets/file-02.svg",
-  searchMd: "/assets/search-md.svg",
-  plusSquare: "/assets/plus-square.svg",
-  recording03: "/assets/recording-03.svg",
-  recording01: "/assets/recording-01.svg",
-  disc02: "/assets/disc-02.svg",
-  chromecast: "/assets/chrome-cast.svg",
-  sliders04: "/assets/sliders-04.svg",
-  loading: "/assets/loading.png",
-  background: "/assets/background.jpg",
-  curve: "/assets/hero/curve.png",
-  robot: "/assets/hero/robot.jpg",
-  heroBackground: "/assets/hero/hero-background.jpg",
-  curve1: "/assets/collaboration/curve-1.svg",
-  curve2: "/assets/collaboration/curve-2.svg",
-  discord: "/assets/collaboration/discord.png",
-  figma: "/assets/collaboration/figma.png",
-  framer: "/assets/collaboration/framer.png",
-  notion: "/assets/collaboration/notion.png",
-  photoshop: "/assets/collaboration/photoshop.png",
-  protopie: "/assets/collaboration/protopie.png",
-  raindrop: "/assets/collaboration/raindrop.png",
-  slack: "/assets/collaboration/slack.png",
-  service1: "/assets/services/service-1.png",
-  service2: "/assets/services/service-2.png",
-  service3: "/assets/services/service-3.png",
-  lines: "/assets/pricing/lines.svg",
-  stars: "/assets/pricing/stars.svg",
-  coins: "/assets/roadmap/coins.png",
-  done: "/assets/roadmap/done.svg",
-  hero: "/assets/roadmap/hero.png",
-  roadmap1: "/assets/roadmap/image-1.png",
-  roadmap2: "/assets/roadmap/image-2.png",
-  roadmap3: "/assets/roadmap/image-3.png",
-  roadmap4: "/assets/roadmap/image-4.png",
-  undone: "/assets/roadmap/undone.svg",
-  notification1: "/assets/notification/image-1.png",
-  notification2: "/assets/notification/image-2.png",
-  notification3: "/assets/notification/image-3.png",
-  notification4: "/assets/notification/image-4.png",
-  benefitCard1: "/assets/benefits/card-1.svg",
-  benefitCard2: "/assets/benefits/card-2.svg",
-  benefitCard3: "/assets/benefits/card-3.svg",
-  benefitCard4: "/assets/benefits/card-4.svg",
-  benefitCard5: "/assets/benefits/card-5.svg",
-  benefitCard6: "/assets/benefits/card-6.svg",
-  benefitIcon1: "/assets/benefits/icon-1.svg",
-  benefitIcon2: "/assets/benefits/icon-2.svg",
-  benefitIcon3: "/assets/benefits/icon-3.svg",
-  benefitIcon4: "/assets/benefits/icon-4.svg",
-  benefitImage2: "/assets/benefits/image-2.png",
-  discordBlack: "/assets/socials/discord.svg",
-  facebook: "/assets/socials/facebook.svg",
-  instagram: "/assets/socials/instagram.svg",
-  telegram: "/assets/socials/telegram.svg",
-  twitter: "/assets/socials/twitter.svg",
-};
diff --git a/package-lock.json b/package-lock.json
index 5533b82..e34138d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "prettier": "^3.2.5",
         "react": "^18",
         "react-dom": "^18",
+        "react-just-parallax": "^3.1.16",
         "tailwind-merge": "^2.3.0"
       },
       "devDependencies": {
@@ -2118,6 +2119,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framesync": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.0.tgz",
+      "integrity": "sha512-aBX+hdWAvwiJYeQlFLY2533VxeL6OEu71CAgV4GGKksrj6+dE6i7K86WSSiRBEARCoJn5bFqffhg4l07eA27tg==",
+      "dependencies": {
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3001,6 +3010,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3616,6 +3630,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prefix": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prefix/-/prefix-1.0.0.tgz",
+      "integrity": "sha512-KtGt8TV4nQkYgO6wJ5phkBGAECZW5cs5vQhqnz1LlxGGd8y4LwpW3Bq5pofULjdiMXACDCxisDUhwtFXb7vHfQ=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3705,6 +3724,19 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-just-parallax": {
+      "version": "3.1.16",
+      "resolved": "https://registry.npmjs.org/react-just-parallax/-/react-just-parallax-3.1.16.tgz",
+      "integrity": "sha512-rbk49D/WEe/s9WPvtyO1+SUCyQ5SOvWXeg2udvVtE4cRgVAokzaS/iEdC7tz91lRSsqsSmjQj89Iwm+DtecrIQ==",
+      "dependencies": {
+        "framesync": "6.1.0",
+        "lodash.debounce": "4.0.8",
+        "prefix": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 91e8380..66b5807 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "prettier": "^3.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-just-parallax": "^3.1.16",
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {