feat(hero): Add Hero section with gradient background and CTA buttons

src/app/globals.css

@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply inline-flex align-baseline justify-center font-medium tracking-tight bg-black text-white px-4 py-2 rounded-lg;
+  }
+
+  .btn-primary {
+    @apply bg-black text-white;
+  }
+
+  .btn-text {
+    @apply text-black bg-transparent;
+  }
+}

src/app/page.tsx

@@ -1,9 +1,11 @@
 import { Header } from "@/src/sections/Header";
+import { Hero } from "../sections/Hero";
 
 export default function Home() {
   return (
     <main>
       <Header />
+      <Hero />
     </main>
   );
 }

src/assets/index.ts

@@ -1,3 +1,6 @@
 export { default as ArrowRight } from "/src/assets/arrow-right.svg";
 export { default as Logo } from "/src/assets/logosaas.png";
 export { default as Menu } from "/src/assets/menu.svg";
+export { default as CogImage } from "/src/assets/cog.png";
+export { default as CylinderImage } from "/src/assets/cylinder.png";
+export { default as NoodleImage } from "/src/assets/noodle.png";

src/sections/Header.tsx

@@ -4,7 +4,7 @@ import { Logo, Menu } from "@/src/assets";
 
 export const Header = () => {
   return (
-    <header className="sticky top-0">
+    <header className="sticky top-0 backdrop-blur-md z-20">
       <Banner />
       <div className="py-5">
         <div className="container">

src/sections/Hero.tsx

@@ -1,3 +1,60 @@
+import {
+  ArrowRight as Icon,
+  CogImage,
+  CylinderImage,
+  NoodleImage,
+} from "@/src/assets";
+import Image from "next/image";
+
 export const Hero = () => {
-  return null;
+  return (
+    <section className="pt-8 pb-20 md:pt-5 md:mb-10 bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#183EC2,#EAEEFE_100%)] overflow-x-clip">
+      <div className="container">
+        <div className="md:flex items-center">
+          <div className="md:w-[478px]">
+            <div className="inline-flex text-sm border border-[#222]/10 px-3 py-1 rounded-lg tracking-tight">
+              Version 2.0 is here
+            </div>
+            <h1 className="text-5xl md:text-7xl font-bold tracking-tighter md:leading-tight bg-gradient-to-b from-black to-[#001E80] text-transparent bg-clip-text mt-6">
+              Pathway to productivity
+            </h1>
+            <p className="text-xl text-[#010D3E] tracking-tight mt-6">
+              Celebrate the joy of accomplishment with an app designed to track
+              your progress, motivate your efforts, and celebrate your
+              successes.
+            </p>
+            <div className="flex items-center gap-1 mt-[30px]">
+              <button type="button" className="btn btn-primary">
+                Get for free
+              </button>
+              <button type="button" className="btn btn-text gap-1">
+                <span>Learn more</span>
+                <Icon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+          <div className="mt-20 md:mt-0 md:h-[648px] md:flex-1 relative">
+            <Image
+              src={CogImage}
+              alt="Cog Image"
+              className="md:absolute md:h-full md:w-auto md:max-w-none md:-left-6 lg:left-0"
+            />
+            <Image
+              src={CylinderImage}
+              alt="Cylinder Image"
+              width={220}
+              height={220}
+              className="hidden md:block -top-8 -left-32 md:absolute"
+            />
+            <Image
+              src={NoodleImage}
+              alt="Noodle Image"
+              width={220}
+              className="hidden lg:block absolute top-[524px] left-[488px] rotate-[30deg]"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };