diff --git a/next.config.mjs b/next.config.mjs
index 4678774..3811d3f 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    
+        images: {
+          remotePatterns: [
+            {
+              protocol: 'https',
+              hostname: 'tedx-sjec.github.io',
+              port: '',
+              pathname: '/**',
+            },
+          ],
+        },
+      
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 85a7ae8..b84e39e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "tedx",
       "version": "0.1.0",
       "dependencies": {
+        "@gsap/react": "^2.1.1",
         "@hookform/resolvers": "^3.9.0",
         "@libsql/client": "^0.8.1",
         "@next-auth/prisma-adapter": "^1.0.7",
@@ -41,8 +42,10 @@
         "clsx": "^2.1.1",
         "crypto": "^1.0.1",
         "framer-motion": "^11.9.0",
+        "gsap": "^3.12.5",
         "ioredis": "^5.4.1",
         "jest": "^29.7.0",
+        "lenis": "^1.1.13",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.441.0",
         "next": "14.2.6",
@@ -720,6 +723,11 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
+    "node_modules/@darkroom.engineering/tempus": {
+      "version": "0.0.46",
+      "resolved": "https://registry.npmjs.org/@darkroom.engineering/tempus/-/tempus-0.0.46.tgz",
+      "integrity": "sha512-s5vav3KMHYezvUCl4ee5epg0oimF6M8C9gAaKxFnFaTvX2q3ywFDryIv6XLd0mRFUt3S1uHDJqKaiEcs2ZVSvw=="
+    },
     "node_modules/@effect/platform": {
       "version": "0.63.2",
       "resolved": "https://registry.npmjs.org/@effect/platform/-/platform-0.63.2.tgz",
@@ -1204,6 +1212,15 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
       "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
     },
+    "node_modules/@gsap/react": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-apGPRrmpqxvl1T6Io1KgT8tFU+IuACI6z4zmT7t8+PASserJeLVRFJdSNUFA2Xb/eVkZI1noE8LIrY/w/oJECw==",
+      "dependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=16"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
@@ -7184,6 +7201,11 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -9098,6 +9120,30 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.1.13.tgz",
+      "integrity": "sha512-iny+vWwUHcZGbJz+p2I75H1muLBRZqSG7t04jnhA+CWOQDFL1vt9bsZDwPPtYEmYVVvqAdo5MbXVFzNOlbgUkQ==",
+      "dependencies": {
+        "@darkroom.engineering/tempus": "^0.0.46"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
diff --git a/package.json b/package.json
index 748273b..651c5a0 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "migrate-latest-w": "wsl sh -c \"export $(grep -v '^#' .env.local | xargs) && LATEST_MIGRATION=$(find prisma/migrations/*/ -type d -name '[0-9]*_*' | sort -r | head -n 1) && turso db shell $TURSO_DB_NAME < '${LATEST_MIGRATION}migration.sql'\""
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "@hookform/resolvers": "^3.9.0",
     "@libsql/client": "^0.8.1",
     "@next-auth/prisma-adapter": "^1.0.7",
@@ -46,8 +47,10 @@
     "clsx": "^2.1.1",
     "crypto": "^1.0.1",
     "framer-motion": "^11.9.0",
+    "gsap": "^3.12.5",
     "ioredis": "^5.4.1",
     "jest": "^29.7.0",
+    "lenis": "^1.1.13",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.441.0",
     "next": "14.2.6",
diff --git a/src/app/globals.css b/src/app/globals.css
index f4447b4..115e38f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -86,3 +86,27 @@
     @apply bg-background text-foreground;
   }
 }
+
+.about{
+  background-color:rgb(255,255,255,0.3)  
+}
+html.lenis,
+html.lenis body {
+  height: auto !important;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain !important;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden !important;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none !important;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2c76e09..4b813b6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { StarsCanvas } from "@/components/ui/stars";
-
+import Nav from "@/components/widget/header";
+// import ScrollProgress from "@/components/ui/progressBar";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -18,8 +19,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={inter.className}>
-        <StarsCanvas />
+      <body className={inter.className="overflow-x-hidden"}>
+       <Nav/>
+          <StarsCanvas />
         <Providers>{children} </Providers>
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 01663c1..bbd9b3a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,8 +5,21 @@ import HorizontalScroll from "@/components/HorizontalScrollCarousel";
 import TextReveal from "@/components/ui/text-reveal";
 import HeroVideoDialog from "@/components/ui/hero-video-dialog";
 import ParallaxFooter from "@/components/Footer";
+// import Lenis from 'lenis'
 
 export default function Home() {
+  // const lenis = new Lenis()
+
+  // lenis.on('scroll', (e) => {
+  //   console.log(e)
+  // })
+  
+  // function raf(time: number) {
+  //   lenis.raf(time)
+  //   requestAnimationFrame(raf)
+  // }
+  
+  // requestAnimationFrame(raf)
   return (
     <>
       <div className="z-20 relative bg-black ">
diff --git a/src/components/ui/progressBar.tsx b/src/components/ui/progressBar.tsx
new file mode 100644
index 0000000..1cd0f3a
--- /dev/null
+++ b/src/components/ui/progressBar.tsx
@@ -0,0 +1,52 @@
+// "use client"
+// import { useEffect } from 'react';
+// import React from 'react';
+// const ScrollProgress: React.FC = () => {
+//   useEffect(() => {
+//     const scrollProgressBar = document.getElementById('scroll-progress-bar');
+
+//     const handleScroll = () => {
+//       // const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+//       // const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+//       // const scrollPercentage = scrollTop / scrollHeight;
+
+//       if (scrollProgressBar) {
+//         scrollProgressBar.style.transform = `scaleX(${Math.min(Math.max(scrollPercentage, 0), 1)})`;
+//       }
+//     };
+
+//     window.addEventListener('scroll', handleScroll);
+
+//     return () => {
+//       window.removeEventListener('scroll', handleScroll);
+//     };
+//   }, []);
+
+//   return (
+//     <>
+//       <style jsx>{`
+//         #scroll-progress-bar {
+//           position: fixed;
+//           top: 0;
+//           left: 0;
+//           height: 2px;
+//           background-color: #EB0028;
+//           transform-origin: left;
+//           transform: scaleX(0);
+//           transition: transform 0.1s ease-out, opacity 0.2s ease-out;
+//           z-index: 9999;
+//           width: 100%;
+//           opacity: 1;
+//         }
+//         #scroll-progress-bar.hidden {
+//           visibility: hidden;
+//           opacity: 0;
+//         }
+//       `}</style>
+
+//       <div id="scroll-progress-bar"></div>
+//     </>
+//   );
+// };
+
+// export default ScrollProgress;
diff --git a/src/components/ui/stars.tsx b/src/components/ui/stars.tsx
index 61ce7f3..d49ffe2 100644
--- a/src/components/ui/stars.tsx
+++ b/src/components/ui/stars.tsx
@@ -41,7 +41,7 @@ export const StarBackground = (props: PointsProps) => {
 };
 
 export const StarsCanvas = () => (
-  <div className="w-full h-auto fixed inset-0 -z-50 ">
+  <div className="w-screen h-screen fixed inset-0 -z-50 ">
     <Canvas camera={{ position: [0, 0, 1] }}>
       <Suspense fallback={null}>
         <StarBackground />
diff --git a/src/components/ui/text-reveal.tsx b/src/components/ui/text-reveal.tsx
index 782f2cf..cedcfb0 100644
--- a/src/components/ui/text-reveal.tsx
+++ b/src/components/ui/text-reveal.tsx
@@ -32,11 +32,11 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
     <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
       <div
         className={
-          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent px-[7rem] py-[1rem]"
+          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent py-[1rem]"
         }
       >
         <motion.h1
-          className="text-8xl text-start px-12 font-extrabold uppercase text-[#ff0000]"
+          className="text-8xl text-start font-extrabold uppercase text-[#ff0000]"
           // ref={ref}
           initial={{ opacity: 1, y: -30 }}
           // animate={isInView ? { opacity: 1, y: 0 } : {}}
diff --git a/src/components/widget/header.tsx b/src/components/widget/header.tsx
new file mode 100644
index 0000000..d162292
--- /dev/null
+++ b/src/components/widget/header.tsx
@@ -0,0 +1,183 @@
+"use client"  
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import Image from 'next/image';
+import { useRef } from 'react';
+import { FiInstagram } from "react-icons/fi";
+import { FaLinkedinIn } from "react-icons/fa";
+import { IoMail } from "react-icons/io5";
+import { FaLocationArrow } from "react-icons/fa";
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { tedxsjecAssetsPrefix } from '@/lib/utils';
+import React from 'react';
+const Nav = () => {
+
+  gsap.registerPlugin(ScrollTrigger);
+
+  const menuToggle = useRef(null);
+
+  const menuBar = gsap.timeline({ paused: true });
+  const tl = gsap.timeline({ paused: true }); 
+
+  useGSAP(() => {
+  //   ScrollTrigger.create({
+  //     trigger: ".aboute",
+  //     markers: true,
+  //     toggleClass: "about",
+  //     start: "top 50%",
+  //     end: "+=9999", // Prevents it from ending
+  //   });
+
+    menuBar.to('.bar-1', 2, {
+      attr: { d: 'M8,2 L2,8' },
+      stroke:"#000",
+      x: 1,
+      ease: "Power2.easeInOut",
+    }, 'start')
+      .to('.bar-2', 2, { autoAlpha: 0, stroke:"#000" }, 'start')
+      .to('.bar-3', 2, {
+        attr: { d: 'M8,8 L2,2' },
+        x: 1,
+        stroke:"#000",
+        ease: "Power2.easeInOut",
+      }, 'start');
+
+    tl.to('.logo', { x: -300 },"go")
+       .to('.reg',{y:-300},"go")
+      .to('.fullpage-menu', { duration: 0, display: 'block', ease: 'Expo.easeInOut' })
+      .from('.menu-bg span', { duration: 0.3, x: '100%', stagger: 0.1, ease: 'Expo.easeInOut' })
+      .from('.header-2', { x: -300 })
+      .from('.listo', { duration: 0.3, x: '-50%', stagger: 0.1, opacity: 0 }, '-=0.5')
+      .from('.social-links li', { duration: 0.3, y: '-100%', opacity: 0, stagger: 0.1   , ease: 'Expo.easeInOut' }, '-=0.5')
+      .from('.hero-icon', { scale: 0, duration: 0.5 }, 'end')
+      .from('.life', { x: 800, duration: 0.5 }, 'end');
+
+
+      // gsap.to('.hero-icon', {
+      //   repeat: -1,
+      //   keyframes: [
+      //     { translateX: 10, translateY: 10, duration: 0.5 },
+      //     { translateX: 10, translateY: -10, duration: 0.5 },
+      //     { translateX: -10, translateY: 10, duration: 0.5 },
+      //     { translateX: 10, translateY: -10, duration: 0.5 }
+      //   ],
+      //   yoyo: true
+      // });
+
+
+
+      
+    menuBar.reverse();
+    tl.reverse(); 
+  }, [menuBar, tl]);
+
+  const handleClick = () => {
+    menuBar.reversed(!menuBar.reversed());
+    tl.reversed(!tl.reversed());
+  };
+
+  return (
+<>
+
+<header className='fixed  z-[100] aboute left-0 top-0 w-screen'>
+  <div className="header-1 flex md:py-[20px] md:px-[30px] p-[30px]  justify-between  items-center  ">
+    <div className="logo">
+      <a href="">
+
+      <Image
+  src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
+  height={200}
+  width={200}
+  alt="logo"
+/>
+
+      </a>
+</div>
+<div className='flex justify-between items-center '>
+<li className='list-none overflow-hidden  leading-[1] font-bold text-white reg'><a href=""><button className='px-3 shadow-sm  py-4 lg:block hidden  mr-7 rounded-md  bg-[#EB0028]'>REGISTER</button></a></li>
+<button id='menuToggle' ref={menuToggle} onClick={handleClick} className="menu-toggle bg-transparent border-none cursor-pointer">
+<svg viewBox="0 0 12 10" className="hamburger" height="40px" width="40px">
+                    <path d="M10,2 L2,2" className="bar-1 fill-none stroke-white"></path>
+                    <path d="M2,5 L10,5" className="bar-2 fill-none stroke-white"></path>
+                    <path d="M10,8 L2,8" className="bar-3 fill-none stroke-white"></path>
+
+                </svg>
+</button>
+</div>
+  </div>
+</header>
+
+<section  className="fullpage-menu hidden fixed left-0 top-0 w-screen z-50  h-screen ">
+  <div className='header-2 fixed left-0 top-0 w-full  flex md:py-[20px] md:px-[30px] p-[30px] z-[60]  justify-between  items-center'>
+  <Image
+  src={`${tedxsjecAssetsPrefix}/logo/blackLogo.webp`}
+  height={200}
+  width={200}
+    alt="logo"
+/>
+  </div>
+  <div className="fullpage-menu-inner flex items-center  h-full px-[50px] py-[10px] md:px-[80px] md:py-[40px]">
+    <div className="menu-bg h-full w-full  absolute  left-0 top-0">
+      <span className='bg-white    block back w-full h-[34%]'></span>
+      <span className='bg-white   block back w-full h-[34%]'></span>
+      <span className='bg-white   block back w-full h-[34%]'></span>
+      
+    </div>
+    <nav className=' relative z-10 flex flex-row  w-full'>
+      <div>
+      <ul className="main-menu mt-10">
+        <li className='listo list-none overflow-hidden mt-[20px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]'><a href="">ABOUT</a></li>
+        <li className='listo list-none overflow-hidden mt-[20px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]'><a href="">SPEAKERS</a></li>
+        <li className='listo list-none overflow-hidden mt-[20px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]'><a href="">PERFORMERS</a></li>
+        <li className='listo list-none overflow-hidden mt-[20px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]'><a href="">TEAM</a></li>
+        <li className='listo list-none overflow-hidden mt-[20px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]'><a href="">GALLARY</a></li>
+        <li className='listo list-none overflow-hidden mt-[20px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]'><a href="">CONTACT</a></li>
+        <li className='list-none listo overflow-hidden  leading-[1] font-bold text-white mt-[30px]'><a href=""><button className='px-8 shadow-sm  py-5 rounded-md  bg-[#EB0028]'>REGISTER</button></a></li>
+        
+          </ul>
+          </div>
+    </nav>
+    <div className='w-full flex flex-col items-center'>
+      
+  <div className='lg:self-center  lg:flex hidden lg:flex-col'>
+    <Image className='mt-10 hero-icon' 
+      src={`${tedxsjecAssetsPrefix}/logo/ActualLogo.PNG`}
+      height={550} 
+      width={550} 
+      alt="logo" 
+    />  
+  </div>
+  <div className='lg:flex hidden text-nowrap  text-4xl relative bottom-32 justify-center items-center text-center'>
+  <h1 className="life uppercase font-bold text-black">Life - Explore What&#39;s Worth Living</h1>
+  </div>
+</div>
+
+    <div className="header-nav-footer absolute z-10 bottom-2 md:bottom-3 lg:bottom-10  w-full">
+<ul className="social-links  cursor-pointer list-none flex items-center w-full">
+  <li className="text-[16px] md:text-[18px] text-black   hover:text-[#EB0028]">
+    <a><FiInstagram size={36} className='hover:-translate-y-4 transition duration-300'  /></a>
+  </li>
+  <li className="ml-[16px] text-[16px] md:text-[18px] text-black  hover:text-[#EB0028]">
+    <a><FaLinkedinIn size={36} className='hover:-translate-y-4 transition duration-300'  /></a>
+  </li>
+  <li className="ml-[16px] text-[16px] md:text-[18px] text-black  hover:text-[#EB0028]">
+    <a><IoMail size={36} className='hover:-translate-y-4 transition duration-300'  /></a>
+  </li>
+  <li className="ml-[16px] text-[16px] md:text-[18px] text-black   hover:text-[#EB0028]">
+    <a className=''><FaLocationArrow size={36} className='hover:-translate-y-4 transition duration-300' /></a>
+  </li>
+</ul>
+
+
+    </div>
+  </div>
+</section>
+
+
+
+
+</>
+  )
+}
+
+export default Nav;