Repository: dscnitrourkela/project-huckleberry
Pull request #58: Added Hero Section
Author: login: PratyushPanda2005
Created: 2025-05-12T17:47:28Z | Merged: 2025-05-13T08:16:07Z

- Added Hero Section 
- Added Respective Animations as per the design


Diff:
diff --git a/README.md b/README.md
index 3b0ab62..7e06b76 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
 [![Starware](https://img.shields.io/badge/Starware-⭐-black?labelColor=f9b00d)](https://github.com/zepfietje/starware)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
diff --git a/package.json b/package.json
index 620d959..6c5629f 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "prettier:fix": "prettier --write \"./**/*.{ts,tsx,js,jsx,css,scss,md}\" --ignore-pattern node_modules/"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^3.10.0",
     "@prisma/client": "^6.5.0",
     "@radix-ui/react-avatar": "^1.1.2",
diff --git a/public/GDGLogo.png b/public/GDGLogo.png
new file mode 100644
index 0000000..bef9929
Binary files /dev/null and b/public/GDGLogo.png differ
diff --git a/public/fonts/productsansfull/ProductSans-Black.ttf b/public/fonts/productsansfull/ProductSans-Black.ttf
new file mode 100644
index 0000000..5864e26
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Black.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-BlackItalic.ttf b/public/fonts/productsansfull/ProductSans-BlackItalic.ttf
new file mode 100644
index 0000000..869037b
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-BlackItalic.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-Bold.ttf b/public/fonts/productsansfull/ProductSans-Bold.ttf
new file mode 100644
index 0000000..96619df
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Bold.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-BoldItalic.ttf b/public/fonts/productsansfull/ProductSans-BoldItalic.ttf
new file mode 100644
index 0000000..bdd22b0
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-BoldItalic.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-Italic.ttf b/public/fonts/productsansfull/ProductSans-Italic.ttf
new file mode 100644
index 0000000..5b44037
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Italic.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-Light.ttf b/public/fonts/productsansfull/ProductSans-Light.ttf
new file mode 100644
index 0000000..33de1c3
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Light.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-LightItalic.ttf b/public/fonts/productsansfull/ProductSans-LightItalic.ttf
new file mode 100644
index 0000000..00c76b8
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-LightItalic.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-Medium.ttf b/public/fonts/productsansfull/ProductSans-Medium.ttf
new file mode 100644
index 0000000..fd818d6
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Medium.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-MediumItalic.ttf b/public/fonts/productsansfull/ProductSans-MediumItalic.ttf
new file mode 100644
index 0000000..ec70cd3
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-MediumItalic.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-Regular.ttf b/public/fonts/productsansfull/ProductSans-Regular.ttf
new file mode 100644
index 0000000..e2c69c3
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Regular.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-Thin.ttf b/public/fonts/productsansfull/ProductSans-Thin.ttf
new file mode 100644
index 0000000..5e046b5
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-Thin.ttf differ
diff --git a/public/fonts/productsansfull/ProductSans-ThinItalic.ttf b/public/fonts/productsansfull/ProductSans-ThinItalic.ttf
new file mode 100644
index 0000000..7b04955
Binary files /dev/null and b/public/fonts/productsansfull/ProductSans-ThinItalic.ttf differ
diff --git a/public/shapes/YellowDark.svg b/public/shapes/YellowDark.svg
new file mode 100644
index 0000000..e83f7d4
--- /dev/null
+++ b/public/shapes/YellowDark.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.5" cy="11.5598" r="11.5" fill="#EC8600"/>
+</svg>
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 9145661..b495c4b 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,80 +1,11 @@
-'use client';
-
-import React from 'react';
-import { Construction } from 'lucide-react';
-import Link from 'next/link';
+import Hero from '@/components/hero/hero';
 
 const Index = () => {
   return (
-    <div className="min-h-screen w-full overflow-hidden relative bg-gradient-to-br from-white to-blue-50 flex flex-col items-center justify-center px-4 py-12">
-      {/* Background Elements */}
-      <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
-        <div
-          className="absolute top-10 left-10 w-56 h-56 rounded-full bg-gdg-blue/5 animate-float"
-          style={{ animationDelay: '0s' }}
-        ></div>
-        <div
-          className="absolute bottom-10 right-10 w-72 h-72 rounded-full bg-gdg-green/5 animate-float"
-          style={{ animationDelay: '1s' }}
-        ></div>
-        <div
-          className="absolute top-1/3 right-1/4 w-48 h-48 rounded-full bg-gdg-yellow/5 animate-float"
-          style={{ animationDelay: '2s' }}
-        ></div>
-        <div
-          className="absolute bottom-1/4 left-1/5 w-64 h-64 rounded-full bg-gdg-red/5 animate-float"
-          style={{ animationDelay: '3s' }}
-        ></div>
-      </div>
-
-      {/* Main Content */}
-      <div className="container max-w-4xl relative z-10 flex flex-col items-center">
-        {/* Caption */}
-        <div className="text-center mb-16 animate-fade-in-delay-1">
-          <span className="inline-block px-4 py-1 rounded-full bg-gdg-blue/10 text-gdg-blue text-sm font-medium mb-4">
-            Building for the Future
-          </span>
-          <h1 className="text-4xl md:text-6xl font-bold mb-4 tracking-tight">
-            <span className="text-gdg-dark">Google Developers Student </span>
-            <span className="text-gradient">Groups Rourkela</span>
-          </h1>
-          <p className="text-lg md:text-xl text-gdg-gray max-w-2xl mx-auto">
-            We're working hard to bring you an amazing new experience. Stay
-            tuned for updates on our progress and upcoming events.
-          </p>
-        </div>
-
-        {/* Construction Icon */}
-        <div className="flex justify-center mb-12 animate-fade-in-delay-2">
-          <div className="p-6 rounded-full bg-white/80 shadow-lg">
-            <Construction className="w-16 h-16 text-gdg-blue" />
-          </div>
-        </div>
-
-        {/* Login Button */}
-        <Link href="/login" className="mb-8 animate-fade-in-delay-2">
-          <button className="px-6 py-3 bg-gdg-blue hover:bg-gdg-blue/90 text-white rounded-full font-medium transition-all shadow-md hover:shadow-lg flex items-center justify-center">
-            Login to Dashboard
-          </button>
-        </Link>
-
-        {/* Google Colors Bar */}
-        <div className="w-full max-w-md h-2 rounded-full mb-12 flex overflow-hidden animate-fade-in-delay-2">
-          <div className="w-1/4 bg-gdg-blue"></div>
-          <div className="w-1/4 bg-gdg-red"></div>
-          <div className="w-1/4 bg-gdg-yellow"></div>
-          <div className="w-1/4 bg-gdg-green"></div>
-        </div>
-
-        {/* Footer */}
-        <div className="text-center text-gdg-gray text-sm animate-fade-in-delay-3">
-          <p>
-            © {new Date().getFullYear()} Google Developers Student Groups
-            Rourkela. All rights reserved.
-          </p>
-        </div>
-      </div>
-    </div>
+    <main>
+      <Hero />
+      <div className="h-dvh" />
+    </main>
   );
 };
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 6a83b24..e7af66e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,6 +6,17 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+@font-face {
+  font-family: 'Product Sans';
+  src: url('../../public/fonts/productsansfull/ProductSans-Bold.ttf')
+    format('truetype');
+}
+@font-face {
+  font-family: 'Product Sans Light';
+  src: url('../..//public/fonts/productsansfull/ProductSans-Light.ttf')
+    format('truetype');
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -78,6 +89,10 @@ body {
   .button-gradient {
     @apply bg-gradient-to-r from-gdg-blue to-gdg-green hover:from-gdg-green hover:to-gdg-blue transition-all duration-500;
   }
+
+  .navlink {
+    @apply hover:text-blue-600 cursor-pointer hover:font-[700] transition duration-300;
+  }
 }
 
 /* Add this to your existing globals.css file */
@@ -89,3 +104,16 @@ body {
 .hide-scrollbar::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+.button {
+  background: var(
+    --Ascent,
+    linear-gradient(82deg, #4379e0 -4.79%, #1b66f6 103.83%)
+  );
+}
+
+#hero {
+  background-image: url('https://res.cloudinary.com/db4zbyipc/image/upload/v1747121185/herobg_dwtxlw.png');
+  background-size: cover;
+  background-position: center;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 703ca6f..702f32a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import { dmSans, geistMono, geistSans, poppins, productSans } from './fonts';
 import { Toaster } from '@/components/ui/sonner';
 import HOC from '@/components/shared/hoc/HOC';
+import Navbar from '@/components/marginals/navbar/Navbar';
 
 export const metadata: Metadata = {
   title: 'DSC NIT Rourkela',
@@ -19,6 +20,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} ${poppins.variable} ${dmSans.variable} ${productSans.variable}  antialiased`}
       >
+        <Navbar />
         <Toaster position="top-right" />
         <HOC>{children}</HOC>
       </body>
diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
new file mode 100644
index 0000000..6333c61
--- /dev/null
+++ b/src/components/hero/hero.tsx
@@ -0,0 +1,475 @@
+'use client';
+import React, { useEffect } from 'react';
+import gsap from 'gsap';
+import { useRef } from 'react';
+import Image from 'next/image';
+import {
+  polygon,
+  rectver,
+  darkBlueCir,
+  blueRectHor,
+  yellowVer,
+  yellowVerSmall,
+  redHorRect,
+  yellowDark,
+  yellowDarkMed,
+  yellowLight,
+  yellowMed,
+  botPolygon,
+  concentricCircles,
+  greenVer,
+  blueCircle,
+  darkGreenDot,
+  lightGreenDot,
+  redDot,
+} from '@/config/home';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText } from 'gsap/SplitText';
+
+gsap.registerPlugin(ScrollTrigger);
+gsap.registerPlugin(SplitText);
+
+const Hero = () => {
+  const rectRef = useRef<HTMLImageElement>(null);
+  const yelRectRef = useRef<HTMLImageElement>(null);
+  const rectRefsec = useRef<HTMLImageElement>(null);
+  const redHor = useRef<HTMLImageElement>(null);
+  const redHorSec = useRef<HTMLImageElement>(null);
+  const circles = useRef<HTMLImageElement>(null);
+  const polygonRef1 = useRef<HTMLImageElement>(null);
+  const polygonRef2 = useRef<HTMLImageElement>(null);
+  const rectRef1 = useRef<HTMLImageElement>(null);
+  const rectRef2 = useRef<HTMLImageElement>(null);
+  const svgcontainer = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    gsap.to(rectRef.current, {
+      height: '25px',
+      duration: 3,
+      yoyo: true,
+      repeat: -1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(yelRectRef.current, {
+      height: '100px',
+      duration: 3,
+      yoyo: true,
+      repeat: -1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(rectRefsec.current, {
+      width: '25px',
+      duration: 3,
+      yoyo: true,
+      repeat: -1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(redHor.current, {
+      width: '25px',
+      duration: 3,
+      yoyo: true,
+      repeat: -1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(redHorSec.current, {
+      width: '25px',
+      duration: 3,
+      yoyo: true,
+      repeat: -1,
+      ease: 'power1.inOut',
+    });
+
+    gsap.to(circles.current, {
+      rotate: -360,
+      repeat: -1,
+      duration: 10,
+      ease: 'none',
+    });
+
+    gsap.to(polygonRef1.current, {
+      y: 100,
+      ease: 'none',
+      scrollTrigger: {
+        trigger: '#hero',
+        start: 'top top',
+        end: 'bottom top',
+        scrub: true,
+      },
+    });
+
+    gsap.to(polygonRef2.current, {
+      y: 130,
+      ease: 'none',
+      scrollTrigger: {
+        trigger: '#hero',
+        start: 'top top',
+        end: 'bottom top',
+        scrub: true,
+      },
+    });
+
+    gsap.to(rectRef1.current, {
+      y: -100,
+      ease: 'none',
+      scrollTrigger: {
+        trigger: '#hero',
+        start: 'top top',
+        end: 'bottom top',
+        scrub: true,
+      },
+    });
+
+    gsap.to(rectRef2.current, {
+      y: -110,
+      ease: 'none',
+      scrollTrigger: {
+        trigger: '#hero',
+        start: 'top top',
+        end: 'bottom top',
+        scrub: true,
+      },
+    });
+
+    gsap.set('#head', { opacity: 1 });
+    gsap.set('#subhead', { opacity: 1 });
+    gsap.set('#para', { opacity: 1 });
+
+    SplitText.create('#head', {
+      type: 'words,lines',
+      wordsClass: 'words',
+      autoSplit: true,
+      mask: 'words',
+      onSplit: (self) => {
+        gsap.from(self.words, {
+          duration: 4,
+          yPercent: 100,
+          opacity: 0,
+          stagger: 0.23,
+          ease: 'expo.out',
+        });
+      },
+    });
+
+    SplitText.create('#subhead', {
+      type: 'words,lines',
+      wordsClass: 'words',
+      autoSplit: true,
+      mask: 'words',
+      onSplit: (self) => {
+        gsap.from(self.words, {
+          duration: 4,
+          yPercent: 100,
+          opacity: 0,
+          stagger: 0.23,
+          ease: 'expo.out',
+        });
+      },
+    });
+
+    SplitText.create('#para', {
+      type: 'words,lines',
+      wordsClass: 'words',
+      autoSplit: true,
+      mask: 'words',
+      onSplit: (self) => {
+        gsap.from(self.words, {
+          duration: 4,
+          yPercent: 150,
+          opacity: 0,
+          stagger: 0.02,
+          ease: 'expo.out',
+        });
+      },
+    });
+
+    gsap.set(svgcontainer.current, { opacity: 0 });
+    gsap.set(polygonRef1.current, { opacity: 0 });
+    gsap.set(polygonRef2.current, { opacity: 0 });
+    gsap.set(circles.current, { opacity: 0 });
+    gsap.set(rectRef1.current, { opacity: 0 });
+    gsap.set(rectRef2.current, { opacity: 0 });
+
+    gsap.to(svgcontainer.current, {
+      opacity: 1,
+      delay: 1,
+      duration: 1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(polygonRef1.current, {
+      opacity: 1,
+      delay: 1,
+      duration: 1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(polygonRef2.current, {
+      opacity: 1,
+      delay: 1,
+      duration: 1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(circles.current, {
+      opacity: 1,
+      delay: 1,
+      duration: 1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(rectRef1.current, {
+      opacity: 1,
+      delay: 1,
+      duration: 1,
+      ease: 'power1.inOut',
+    });
+    gsap.to(rectRef2.current, {
+      opacity: 1,
+      delay: 1,
+      duration: 1,
+      ease: 'power1.inOut',
+    });
+  }, []);
+
+  return (
+    <>
+      <main className="relative">
+        <section
+          id="hero"
+          className="h-dvh relative w-full px-6 lg:px-0 overflow-hidden"
+        >
+          <div className="h-full w-full flex justify-center items-center ">
+            <div className="flex flex-col gap-12 relative z-10">
+              <div className="flex flex-col gap-7">
+                <h1
+                  id="head"
+                  className="text-center text-[40px] sm:text-[52px] md:text-[60px] xl:text-[68px] text-[#646464] leading-tight font-bold font-productsans"
+                >
+                  Google Developer Groups
+                </h1>
+                <h1
+                  id="subhead"
+                  className="text-center text-[#646464] xl:text-2xl font-[700] font-productsans"
+                >
+                  National Institute of Technology, Rourkela
+                </h1>
+              </div>
+              <div className="flex justify-center">
+                <p
+                  id="para"
+                  className="text-center md:w-[720px] leading-6 font-productsans"
+                >
+                  Fueling innovation and collaboration at NIT Rourkela through
+                  hands-on learning, events, and impactful tech projects.
+                </p>
+              </div>
+              <div className=" flex justify-center">
+                <button className="button text-white font-[700] px-6 xl:px-12 py-[18px] rounded-[8px] border border-black font-productsans">
+                  Apply For Membership
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <Image
+            ref={polygonRef1}
+            className="absolute top-0 lg:top-12 -left-[120px] lg:-left-[72px]"
+            src={polygon}
+            width={240}
+            height={240}
+            alt="Top Polygon"
+          />
+          <Image
+            ref={polygonRef2}
+            className="absolute top-20 lg:top-32 -left-[100px] lg:-left-[48px]"
+            src={polygon}
+            width={240}
+            height={240}
+            alt="Bottom Polygon"
+          />
+
+          {/* SVG Bottom Left Elements */}
+
+          <div ref={svgcontainer} className="svgcomponents hidden md:flex">
+            <Image
+              ref={rectRef}
+              src={rectver}
+              className="w-[25px] absolute bottom-20 left-12 rounded-full"
+              alt="Vertical Blue Rectangle"
+              width={25}
+              height={24}
+            />
+
+            <Image
+              src={darkBlueCir}
+              className="w-auto absolute bottom-4 left-12"
+              alt="Dark Blue Circle"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={darkBlueCir}
+              className="w-auto absolute bottom-12 left-12"
+              alt="Dark Blue Circle"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={darkBlueCir}
+              className="w-auto absolute bottom-44 left-4"
+              alt="Dark Blue Circle"
+              width={25}
+              height={25}
+            />
+
+            <Image
+              ref={yelRectRef}
+              src={yellowVer}
+              className="w-[24px] h-[25px] absolute bottom-12 left-20 rounded-full"
+              alt="Yellow Vertical Rectangle"
+              width={24}
+              height={25}
+            />
+            <Image
+              ref={rectRefsec}
+              src={blueRectHor}
+              className="h-[25px] w-auto absolute bottom-12 left-28 rounded-full"
+              alt="Blue Horizontal Rectangle"
+              height={25}
+              width={100}
+            />
+            <Image
+              src={darkBlueCir}
+              className="w-auto absolute bottom-12 left-28"
+              alt="Dark Blue Circle"
+              width={25}
+              height={25}
+            />
+
+            <Image
+              src={yellowVerSmall}
+              className="w-auto absolute bottom-24 left-4"
+              alt="Yellow Vertical small bar"
+              height={25}
+              width={25}
+            />
+
+            <Image
+              ref={redHorSec}
+              src={redHorRect}
+              className="w-auto h-[25px] absolute bottom-4 left-20 rounded-full"
+              alt="Red Horizontal bar"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={redDot}
+              className=" absolute bottom-4 left-44 rounded-full"
+              width={24}
+              height={24}
+              alt="Red Horizontal bar"
+            />
+
+            <Image
+              src={yellowDark}
+              className="w-auto absolute bottom-12 left-20"
+              alt="Dark Yellow Circle"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={blueCircle}
+              className="w-auto absolute bottom-40 left-4"
+              alt="Blue Circle"
+              width={25}
+              height={25}
+            />
+
+            <Image
+              className="absolute left-28 bottom-20"
+              src={greenVer}
+              width={24}
+              height={25}
+              alt="Green Vertical Rectangle"
+            />
+            <Image
+              className="absolute left-28 bottom-36"
+              src={darkGreenDot}
+              width={24}
+              height={25}
+              alt="Dark Green Circle"
+            />
+            <Image
+              className="absolute left-28 bottom-32"
+              src={lightGreenDot}
+              width={24}
+              height={25}
+              alt="Light Green Circle"
+            />
+            <Image
+              className="absolute left-28 bottom-44"
+              src={darkGreenDot}
+              width={24}
+              height={25}
+              alt="Dark Green Circle"
+            />
+            {/* Yellow Dots */}
+
+            <Image
+              src={yellowLight}
+              className="absolute bottom-4 left-4 z-5"
+              alt="Yellow Light Dot"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={yellowMed}
+              className="absolute bottom-8 left-4 z-5"
+              alt="Yellow Medium Dot"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={yellowDarkMed}
+              className="absolute bottom-12 left-4 z-5"
+              alt="Yellow Dark Medium Dot"
+              width={25}
+              height={25}
+            />
+            <Image
+              src={yellowDark}
+              className="absolute bottom-16 left-4 z-5"
+              alt="Yellow Dark Dot"
+              width={25}
+              height={25}
+            />
+          </div>
+
+          <Image
+            ref={circles}
+            className="absolute w-[15rem] lg:w-[20rem] -right-[160px] top-[80px] z-5"
+            src={concentricCircles}
+            width={240}
+            height={160}
+            alt="Concentric Circles"
+          />
+
+          <Image
+            ref={rectRef1}
+            className="absolute -right-24 md:right-0 -bottom-64 md:-bottom-[15rem] lg:-bottom-[12rem]"
+            src={botPolygon}
+            width={240}
+            height={240}
+            alt="Bottom Right Red Polygon"
+          />
+          <Image
+            ref={rectRef2}
+            className="absolute -right-8  md:right-0 -bottom-80  md:-bottom-[10rem] lg:-bottom-[6rem]"
+            src={botPolygon}
+            width={240}
+            height={240}
+            alt="Bottom Right Red Polygon"
+          />
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Hero;
diff --git a/src/components/marginals/navbar/Navbar.tsx b/src/components/marginals/navbar/Navbar.tsx
new file mode 100644
index 0000000..8bda8c0
--- /dev/null
+++ b/src/components/marginals/navbar/Navbar.tsx
@@ -0,0 +1,94 @@
+'use client';
+import React, { useState } from 'react';
+import GDGLogo from '../../../../public/GDGLogo.png';
+import Image from 'next/image';
+import Link from 'next/link';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { navLinks } from '@/config/marginal/navbar';
+gsap.registerPlugin(useGSAP);
+
+const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useGSAP(() => {
+    gsap.from('#nav', {
+      y: -100,
+      opacity: 0,
+      duration: 1.03,
+      delay: 1.6,
+      ease: 'power2.inOut',
+    });
+  }, []);
+
+  const toggleMenu = () => {
+    setIsMenuOpen((prev) => !prev);
+  };
+
+  return (
+    <>
+      {/* Desktop Navbar */}
+      <nav
+        id="nav"
+        className="absolute top-0 left-0 h-[92px] w-full hidden lg:flex z-10 bg-white font-productsans"
+      >
+        <div className="w-full h-full px-6 xl:px-[120px] py-4">
+          <div className="w-full h-full relative flex items-center justify-between">
+            <Image src={GDGLogo} alt="GDG Logo" className="h-full w-auto" />
+            <div className="flex gap-4 xl:gap-6 items-center">
+              {navLinks.map((link, index) => (
+                <Link key={index} href={link.href} className="navlink">
+                  {link.text}
+                </Link>
+              ))}
+              <div className="xl:ml-6">
+                <button className="button text-white font-[700] px-6 xl:px-12 py-[18px] rounded-[12px]">
+                  Join Community
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Navbar */}
+      <nav className="lg:hidden fixed top-0 left-0 w-full bg-white z-20 font-product  px-4 py-3">
+        <div className="flex items-center justify-between">
+          <Image src={GDGLogo} alt="GDG Logo" className="h-10 w-auto" />
+          <button onClick={toggleMenu} className="focus:outline-none">
+            <div className="space-y-1.5">
+              <div className="w-6 h-0.5 bg-black"></div>
+              <div className="w-6 h-0.5 bg-black"></div>
+              <div className="w-6 h-0.5 bg-black"></div>
+            </div>
+          </button>
+        </div>
+
+        {/* Slide-out menu */}
+        <div
+          className={`transition-all duration-300 ease-in-out overflow-hidden ${
+            isMenuOpen ? 'max-h-96 mt-4' : 'max-h-0'
+          }`}
+        >
+          <div className="flex flex-col gap-4">
+            {navLinks.map((link, index) => (
+              <Link
+                key={index}
+                href={link.href}
+                onClick={() => setIsMenuOpen(false)}
+                className="text-black text-lg py-2 border-b border-gray-200"
+              >
+                {link.text}
+              </Link>
+            ))}
+            <button className="mt-4 button text-white font-[700] px-6 py-[14px] rounded-[12px]">
+              Join Community
+            </button>
+          </div>
+        </div>
+      </nav>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/src/config/home/index.ts b/src/config/home/index.ts
new file mode 100644
index 0000000..18b9038
--- /dev/null
+++ b/src/config/home/index.ts
@@ -0,0 +1,53 @@
+export const polygon =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747030648/Polygon_3_ueu5r4.png';
+
+export const rectver =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747033244/Rectangle_803_rvyfbh.png';
+
+export const darkBlueCir =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747036734/Ellipse_117_nmggli.png';
+
+export const blueRectHor =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747037084/Rectangle_800_v3877p.png';
+
+export const yellowVer =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747037538/Rectangle_802_hp2sow.png';
+
+export const yellowVerSmall =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747037802/Rectangle_804_glirdm.png';
+
+export const redHorRect =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747038923/Rectangle_801_jmlyww.png';
+
+export const yellowDark =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747039279/Ellipse_114_2_gjmrzf.svg';
+
+export const yellowDarkMed =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747039287/Ellipse_115_2_uiny4g.svg';
+
+export const yellowMed =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747039293/Ellipse_116_2_vwamir.svg';
+
+export const yellowLight =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747039298/Ellipse_117_1_pbnl26.png';
+
+export const botPolygon =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747040828/Rectangle_27_eevc4j.png';
+
+export const concentricCircles =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747042564/Group_81_1_rwqmtm.png';
+
+export const greenVer =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747042988/Rectangle_805_p7a56n.png';
+
+export const blueCircle =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747043150/Ellipse_110_l4vwh4.png';
+
+export const darkGreenDot =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747043337/Ellipse_116_q5vgud.svg';
+
+export const lightGreenDot =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747043382/Ellipse_114_gonzcn.svg';
+
+export const redDot =
+  'https://res.cloudinary.com/db4zbyipc/image/upload/v1747043538/Ellipse_137_bxdwt5.svg';
diff --git a/src/config/marginal/navbar.ts b/src/config/marginal/navbar.ts
new file mode 100644
index 0000000..a7df34f
--- /dev/null
+++ b/src/config/marginal/navbar.ts
@@ -0,0 +1,7 @@
+export const navLinks = [
+  { href: '/', text: 'Home' },
+  { href: '/about', text: 'About Us' },
+  { href: '/event', text: 'Events' },
+  { href: '/project', text: 'Projects' },
+  { href: '/team', text: 'Team' },
+];


Reviews:
user: login: swaindhruti
body: LGTM🚀
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-05-12T17:54:15Z
user: login: ayussh-2
body: some minor changes requested rest all looks good
state: DISMISSED
author_association: COLLABORATOR
submitted_at: 2025-05-12T18:37:30Z
user: login: ayussh-2
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-12T18:51:28Z
user: login: swaindhruti
body: Good Work🚀
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-13T08:14:14Z

Review comments:
diff_hunk: @@ -0,0 +1,102 @@
+'use client';
+import React, { useState } from 'react';
+import GDGLogo from '../../../../public/GDGLogo.png';
+import Image from 'next/image';
+import Link from 'next/link';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+
+gsap.registerPlugin(useGSAP);
+
+const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const navLinks = [
path: src/components/marginals/navbar/Navbar.tsx
user: login: ayussh-2
body: move it to config folder
created_at: 2025-05-12T18:34:52Z
author_association: COLLABORATOR
path: public/herobg.png
user: login: ayussh-2
body: if used then upload it on cloudinary
created_at: 2025-05-12T18:35:26Z
author_association: COLLABORATOR
diff_hunk: @@ -6,6 +6,17 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+@font-face {
path: src/app/globals.css
user: login: ayussh-2
body: check for fonts.ts and then use the font in the same manner
created_at: 2025-05-12T18:35:52Z
author_association: COLLABORATOR
diff_hunk: @@ -92,6 +92,8 @@ export default {
         poppins: 'var(--font-poppins)',
         mono: ['Roboto Mono', 'monospace'],
         productsans: ['var(--font-product-sans)'],
+        product: ['Product Sans', 'sans-serif'],
path: tailwind.config.ts
user: login: ayussh-2
body: check fonts.ts folder for application of the same font
created_at: 2025-05-12T18:37:00Z
author_association: COLLABORATOR
path: public/herobg.png
user: login: ayussh-2
body: else delete it
created_at: 2025-05-12T18:51:27Z
author_association: COLLABORATOR

PR comments:
user: login: netlify[bot]
created_at: 2025-05-12T17:47:31Z
body: ### <span aria-hidden="true">👷</span> Deploy request for *gdsc-nitr* pending review.
[Visit the deploys page to approve it](https://app.netlify.com/sites/gdsc-nitr/deploys)

|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 4977fdfaec7068e6b6a830efae4b89397438eb27 |
author_association: NONE
user: login: ayussh-2
created_at: 2025-05-13T11:27:05Z
body: @all-contributors please add @PratyushPanda2005  for code

author_association: COLLABORATOR
user: login: allcontributors[bot]
created_at: 2025-05-13T11:27:15Z
body: @ayussh-2 

I've put up [a pull request](https://github.com/dscnitrourkela/project-huckleberry/pull/63) to add @PratyushPanda2005! :tada:
author_association: CONTRIBUTOR