From 90706538ce01a6488ac904e1ddacbe1580d6edd7 Mon Sep 17 00:00:00 2001
From: dufferdeepu <deepeshbind@gmail.com>
Date: Fri, 4 Apr 2025 00:44:11 +0530
Subject: [PATCH 1/3] Implement floating navbar

---
 src/app/globals.css       |  17 +-
 src/components/Navbar.tsx | 356 ++++++++++++++++++++++++--------------
 2 files changed, 239 insertions(+), 134 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 4db63a850..ebe9503c5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -406,4 +406,19 @@
 
 .vjs-text-track-cue {
   display: none !important;
-}
\ No newline at end of file
+}
+
+/* CSS styles for the floating navbar */
+/* Extra shadow for floating effect */
+.floating-nav {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+    
+/* Mobile adjustment */
+@media (max-width: 640px) {
+  .floating-nav {
+   left: 0;
+   right: 0;
+  }
+}
+  
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 14e7375b5..2b26f7960 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,7 +3,7 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { useSession } from 'next-auth/react';
 import { usePathname, useRouter } from 'next/navigation';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Link from 'next/link';
 import { ArrowLeft, Menu, Search, X } from 'lucide-react';
 import { Button } from './ui/button';
@@ -13,122 +13,241 @@ import ProfileDropdown from './profile-menu/ProfileDropdown';
 import { SearchBar } from './search/SearchBar';
 
 export const Navbar = () => {
+  // Basic state for user session and navigation
   const { data: session } = useSession();
   const router = useRouter();
+  const pathname = usePathname();
+  
+  // State for menu and search toggles
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
-  const pathname = usePathname();
+  
+  // Create a reference to the navbar container element
+  const navbarRef = useRef<HTMLDivElement>(null);
+  
+  // State for controlling navbar visibility
+  const [showNavbar, setShowNavbar] = useState(true);
+  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
+
+  // Function to handle opening/closing the menu
+  function toggleMenu() {
+    setIsMenuOpen(!isMenuOpen);
+  }
+  
+  // Function to handle opening/closing the search
+  function toggleSearch() {
+    setIsSearchOpen(!isSearchOpen);
+  }
+
+  // This runs when the user scrolls
+  useEffect(() => {
+    function handleScroll() {
+      // Get current scroll position
+      const currentScrollPosition = window.scrollY;
+      
+      // At the top of the page
+      if (currentScrollPosition === 0) {
+        setShowNavbar(true);
+        // Remove floating style if navbar exists
+        if (navbarRef.current) {
+          navbarRef.current.classList.remove('floating-nav');
+        }
+      } else if (currentScrollPosition > previousScrollPosition) {
+        setShowNavbar(false);
+        // Add floating style if navbar exists
+        if (navbarRef.current) {
+          navbarRef.current.classList.add('floating-nav');
+        }
+      } else if (currentScrollPosition < previousScrollPosition) {
+        setShowNavbar(true);
+        // Add floating style if navbar exists
+        if (navbarRef.current) {
+          navbarRef.current.classList.add('floating-nav');
+        }
+      }
+      
+      // Save current position for next comparison
+      setPreviousScrollPosition(currentScrollPosition);
+    }
 
-  // Memoizing the toggleMenu and toggleSearch functions
-  const toggleMenu = useCallback(() => setIsMenuOpen((prev) => !prev), []);
-  const toggleSearch = useCallback(() => setIsSearchOpen((prev) => !prev), []);
+    // Add scroll listener when component mounts
+    window.addEventListener('scroll', handleScroll);
+    
+    // Remove scroll listener when component unmounts
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [previousScrollPosition]);
 
-  // Memoizing the navItemVariants object
-  const navItemVariants = useMemo(
-    () => ({
-      hidden: { opacity: 0, y: -20 },
-      visible: (i: number) => ({
-        opacity: 1,
-        y: 0,
-        transition: {
-          delay: i * 0.1,
-          duration: 0.5,
-          ease: [0.43, 0.13, 0.23, 0.96],
-        },
-      }),
+  // Show or hide navbar based on scroll direction
+  useEffect(() => {
+    if (navbarRef.current) {
+      if (showNavbar) {
+        // Show navbar
+        navbarRef.current.style.transform = 'translateY(0)';
+        navbarRef.current.style.opacity = '1';
+      } else {
+        // Hide navbar
+        navbarRef.current.style.transform = 'translateY(-100%)';
+        navbarRef.current.style.opacity = '0';
+      }
+    }
+  }, [showNavbar]);
+
+  // Animation settings for navbar items
+  const navItemAnimations = {
+    hidden: { opacity: 0, y: -20 },
+    visible: (i: number) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1,
+        duration: 0.5,
+        ease: [0.43, 0.13, 0.23, 0.96],
+      },
     }),
-    [],
-  );
+  };
 
   return (
     <>
-      <motion.nav
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{
-          duration: 0.5,
-          type: 'spring',
-          damping: 10,
-          stiffness: 100,
-        }}
-        className="fixed top-0 z-[999] w-full border-b border-primary/10 bg-background"
+      {/* Main navbar container */}
+      <div 
+        ref={navbarRef} 
+        className="fixed inset-x-0 top-4 z-[999] h-auto transition-all duration-300 sm:inset-x-6"
       >
-        <div className="wrapper flex w-full items-center justify-between p-3">
-          <motion.div
-            className="flex items-center gap-4"
-            initial="hidden"
-            animate="visible"
-            variants={navItemVariants}
-            custom={0}
-          >
-            {session?.user && pathname !== '/home' && (
-              <Button
-                onClick={() => router.back()}
-                variant={'ghost'}
-                size={'icon'}
-                className="flex items-center gap-2"
-              >
-                <ArrowLeft className="size-6" />
-              </Button>
-            )}
-            <Link href={'/'} className="flex items-center gap-2">
-              <img
-                src={
-                  'https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg'
-                }
-                alt="100xDevs Logo"
-                className="size-10 rounded-full"
-              />
-              <p
-                className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[410px]:block`}
-              >
-                100xDevs
-              </p>
-            </Link>
-          </motion.div>
+        {/* Navbar with animations */}
+        <motion.nav
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            duration: 0.5,
+            type: 'spring',
+            damping: 10,
+            stiffness: 100,
+          }}
+          className="w-full rounded-lg border border-primary/10 bg-background/90 backdrop-blur-md shadow-lg"
+        >
+          {/* Navbar content */}
+          <div className="wrapper flex w-full items-center justify-between p-3">
+            {/* Left side - Logo and back button */}
+            <motion.div
+              className="flex items-center gap-4"
+              initial="hidden"
+              animate="visible"
+              variants={navItemAnimations}
+              custom={0}
+            >
+              {/* Back button - only shows for logged in users not on home page */}
+              {session?.user && pathname !== '/home' && (
+                <Button
+                  onClick={() => router.back()}
+                  variant={'ghost'}
+                  size={'icon'}
+                  className="flex items-center gap-2"
+                >
+                  <ArrowLeft className="size-6" />
+                </Button>
+              )}
+              
+              {/* Logo and site name */}
+              <Link href={'/'} className="flex items-center gap-2">
+                <img
+                  src={
+                    'https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg'
+                  }
+                  alt="100xDevs Logo"
+                  className="size-10 rounded-full"
+                />
+                <p
+                  className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[410px]:block`}
+                >
+                  100xDevs
+                </p>
+              </Link>
+            </motion.div>
 
-          <motion.div
-            className="flex items-center gap-4"
-            initial="hidden"
-            animate="visible"
-            variants={navItemVariants}
-            custom={1}
-          >
-            {/* Search Bar */}
-            {session?.user && (
-              <>
-                <div className="hidden md:block">
-                  <SearchBar />
-                </div>
-                <div className="md:hidden">
+            {/* Right side - Search, theme, profile */}
+            <motion.div
+              className="flex items-center gap-4"
+              initial="hidden"
+              animate="visible"
+              variants={navItemAnimations}
+              custom={1}
+            >
+              {/* Search Bar - only for logged in users */}
+              {session?.user && (
+                <>
+                  {/* Desktop search */}
+                  <div className="hidden md:block">
+                    <SearchBar />
+                  </div>
+                  {/* Mobile search button */}
+                  <div className="md:hidden">
+                    <Button
+                      onClick={toggleSearch}
+                      variant={'ghost'}
+                      size={'icon'}
+                      className="mr-2"
+                    >
+                      <Search className="size-6" />
+                    </Button>
+                  </div>
+                </>
+              )}
+
+              {/* Theme toggle button */}
+              <ThemeToggler />
+              
+              {/* User profile dropdown - only for logged in users */}
+              {session?.user && <ProfileDropdown />}
+
+              {/* Login/signup for logged out users */}
+              {!session?.user && (
+                <>
+                  {/* Mobile menu button */}
                   <Button
-                    onClick={toggleSearch}
+                    onClick={toggleMenu}
                     variant={'ghost'}
                     size={'icon'}
-                    className="mr-2"
+                    className="md:hidden"
                   >
-                    <Search className="size-6" />
+                    <Menu className="size-6" />
                   </Button>
-                </div>
-              </>
-            )}
-
-            <ThemeToggler />
-            {session?.user && <ProfileDropdown />}
+                  
+                  {/* Desktop auth buttons */}
+                  <div className="hidden items-center gap-2 md:flex">
+                    <AppbarAuth />
+                    <Button variant={'branding'}>
+                      <Link
+                        href={'https://harkirat.classx.co.in/new-courses'}
+                        target="_blank"
+                      >
+                        Join now
+                      </Link>
+                    </Button>
+                  </div>
+                </>
+              )}
+            </motion.div>
+          </div>
 
-            {!session?.user && (
-              <>
-                <Button
-                  onClick={toggleMenu}
-                  variant={'ghost'}
-                  size={'icon'}
-                  className="md:hidden"
+          {/* Mobile menu - shows when menu button is clicked */}
+          <AnimatePresence>
+            {!session?.user && isMenuOpen && (
+              <motion.div
+                className="bg-background/90 backdrop-blur-md p-4 rounded-b-lg md:hidden"
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+              >
+                <motion.div
+                  className="flex gap-2"
+                  initial={{ opacity: 0, y: -20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
                 >
-                  <Menu className="size-6" />
-                </Button>
-                <div className="hidden items-center gap-2 md:flex">
                   <AppbarAuth />
-                  <Button variant={'branding'}>
+                  <Button variant={'branding'} className="w-full">
                     <Link
                       href={'https://harkirat.classx.co.in/new-courses'}
                       target="_blank"
@@ -136,43 +255,14 @@ export const Navbar = () => {
                       Join now
                     </Link>
                   </Button>
-                </div>
-              </>
-            )}
-          </motion.div>
-        </div>
-
-        {/* Mobile menu */}
-        <AnimatePresence>
-          {!session?.user && isMenuOpen && (
-            <motion.div
-              className="bg-background p-4 md:hidden"
-              initial={{ opacity: 0, y: -20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-            >
-              <motion.div
-                className="flex gap-2"
-                initial={{ opacity: 0, y: -20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -20 }}
-              >
-                <AppbarAuth />
-                  <Button variant={'branding'} className="w-full">
-                  <Link
-                      href={'https://harkirat.classx.co.in/new-courses'}
-                    target="_blank"
-                  >
-                    Join now
-                  </Link>
-                </Button>
+                </motion.div>
               </motion.div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </motion.nav>
+            )}
+          </AnimatePresence>
+        </motion.nav>
+      </div>
 
-      {/* Mobile search overlay */}
+      {/* Mobile search overlay - shows when search is opened on mobile */}
       <AnimatePresence>
         {isSearchOpen && (
           <motion.div
@@ -195,4 +285,4 @@ export const Navbar = () => {
       </AnimatePresence>
     </>
   );
-};
+};
\ No newline at end of file

From caedcbd6d425d4bc385f55901a860fb42ddcb617 Mon Sep 17 00:00:00 2001
From: dufferdeepu <deepeshbind@gmail.com>
Date: Fri, 4 Apr 2025 02:51:51 +0530
Subject: [PATCH 2/3] Fix issue with overflow on mobile view

---
 src/app/globals.css       | 5 +++++
 src/components/Navbar.tsx | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ebe9503c5..b912eb050 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -411,6 +411,11 @@
 /* CSS styles for the floating navbar */
 /* Extra shadow for floating effect */
 .floating-nav {
+  position: fixed; 
+  top: 0; 
+  left: 0;
+  right: 0;
+  width: 100%;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
     
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2b26f7960..3155e5b37 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -113,7 +113,7 @@ export const Navbar = () => {
       {/* Main navbar container */}
       <div 
         ref={navbarRef} 
-        className="fixed inset-x-0 top-4 z-[999] h-auto transition-all duration-300 sm:inset-x-6"
+        className="fixed w-full max-w-full px-4 top-4 z-[999] h-auto transition-all duration-300 sm:px-6"
       >
         {/* Navbar with animations */}
         <motion.nav
@@ -131,7 +131,7 @@ export const Navbar = () => {
           <div className="wrapper flex w-full items-center justify-between p-3">
             {/* Left side - Logo and back button */}
             <motion.div
-              className="flex items-center gap-4"
+              className="flex items-center gap-2 md:gap-4"
               initial="hidden"
               animate="visible"
               variants={navItemAnimations}
@@ -168,7 +168,7 @@ export const Navbar = () => {
 
             {/* Right side - Search, theme, profile */}
             <motion.div
-              className="flex items-center gap-4"
+              className="flex items-center gap-2 md:gap-4"
               initial="hidden"
               animate="visible"
               variants={navItemAnimations}
@@ -187,7 +187,7 @@ export const Navbar = () => {
                       onClick={toggleSearch}
                       variant={'ghost'}
                       size={'icon'}
-                      className="mr-2"
+                      className="mr-1 md:mr-2"
                     >
                       <Search className="size-6" />
                     </Button>

From 741795fce625518c59aff53d570c867005442ab7 Mon Sep 17 00:00:00 2001
From: dufferdeepu <deepeshbind@gmail.com>
Date: Sun, 6 Apr 2025 03:29:22 +0530
Subject: [PATCH 3/3] Added Hero Section

---
 package.json                            |   1 +
 pnpm-lock.yaml                          |   8 +
 public/fonts/font-head.woff2            | Bin 0 -> 7936 bytes
 src/app/globals.css                     |  16 +-
 src/components/landing/footer-cta.tsx   |   2 +-
 src/components/landing/landing-page.tsx | 214 +++++++++++++++---------
 6 files changed, 162 insertions(+), 79 deletions(-)
 create mode 100644 public/fonts/font-head.woff2

diff --git a/package.json b/package.json
index 6f5c62145..abb31933a 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "embla-carousel-react": "^8.0.0",
     "framer-motion": "^11.3.28",
     "fuse.js": "^7.0.0",
+    "gsap": "^3.12.7",
     "hammerjs": "^2.0.8",
     "ioredis": "^5.4.1",
     "jose": "^5.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d6bb3dc4..40292640e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,6 +104,9 @@ importers:
       fuse.js:
         specifier: ^7.0.0
         version: 7.0.0
+      gsap:
+        specifier: ^3.12.7
+        version: 3.12.7
       hammerjs:
         specifier: ^2.0.8
         version: 2.0.8
@@ -2434,6 +2437,9 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  gsap@3.12.7:
+    resolution: {integrity: sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==}
+
   hammerjs@2.0.8:
     resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==}
     engines: {node: '>=0.8.0'}
@@ -6657,6 +6663,8 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  gsap@3.12.7: {}
+
   hammerjs@2.0.8: {}
 
   hamt_plus@1.0.2: {}
diff --git a/public/fonts/font-head.woff2 b/public/fonts/font-head.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..2085440ff8752493a4a7575f8276c9ef29af107d
GIT binary patch
literal 7936
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

literal 0
HcmV?d00001

diff --git a/src/app/globals.css b/src/app/globals.css
index b912eb050..2ee6ee326 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -73,6 +73,10 @@
   body {
     @apply bg-background text-foreground;
   }
+  @font-face {
+    font-family: "font-head";
+    src: url("/fonts/font-head.woff2") format("woff2");
+  }
 }
 
 .vjs-tech {
@@ -426,4 +430,14 @@
    right: 0;
   }
 }
-  
\ No newline at end of file
+
+/* CSS styles for the font-head */
+.font-head {
+  font-family: font-head, sanf-serif;
+}
+
+.special-font b {
+  font-family: "font-head";
+  font-feature-settings: "ss01" on;
+}
+
diff --git a/src/components/landing/footer-cta.tsx b/src/components/landing/footer-cta.tsx
index fbe814fcd..56de54fd8 100644
--- a/src/components/landing/footer-cta.tsx
+++ b/src/components/landing/footer-cta.tsx
@@ -27,7 +27,7 @@ const FooterCTA = () => {
           damping: 10,
           stiffness: 100,
         }}
-        className="relative flex h-[75vh] w-full flex-col overflow-hidden rounded-3xl bg-gradient-to-b from-blue-400 to-blue-700 p-8 md:h-[45vh] md:flex-col"
+        className="relative flex h-[75vh] w-full flex-col overflow-hidden rounded-3xl bg-gradient-to-b from-blue-400 to-black p-8 md:h-[45vh] md:flex-col"
       >
         <div className="flex flex-col justify-end gap-4">
           <div className="flex flex-col gap-2 md:w-[70%]">
diff --git a/src/components/landing/landing-page.tsx b/src/components/landing/landing-page.tsx
index 3e19ad170..63410ef14 100644
--- a/src/components/landing/landing-page.tsx
+++ b/src/components/landing/landing-page.tsx
@@ -1,10 +1,18 @@
 'use client';
+import { useRef, useEffect } from 'react';
 import Link from 'next/link';
 import { Button } from '../ui/button';
 import { InfiniteMovingCards } from '../ui/infinite-moving-cards';
 import FooterCTA from './footer-cta';
 import Footer from './footer';
 import { motion } from 'framer-motion';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/all';
+
+// Register GSAP plugins
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger);
+}
 
 const heroItems = [
   {
@@ -21,7 +29,6 @@ const heroItems = [
   {
     imageUrl: 'https://100x-b-mcdn.akamai.net.in/images/ds.jpeg',
   },
-
   {
     imageUrl:
       'https://appxcontent.kaxa.in/paid_course3/2024-07-09-0.6125162399767927.png',
@@ -29,88 +36,141 @@ const heroItems = [
 ];
 
 export default function LandingPage() {
+  const heroFrameRef = useRef(null);
+
+  useEffect(() => {
+    if (!heroFrameRef.current) return;
+
+    // Initial clip path setup
+    gsap.set(heroFrameRef.current, {
+      clipPath: 'polygon(14% 0%, 72% 0%, 90% 90%, 0% 100%)',
+      borderRadius: '0 0 40% 10%',
+    });
+
+    // Animation on scroll
+    const animation = gsap.from(heroFrameRef.current, {
+      clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+      borderRadius: '0 0 0 0',
+      ease: 'power1.inOut',
+      scrollTrigger: {
+        trigger: heroFrameRef.current,
+        start: 'center center',
+        end: 'bottom center',
+        scrub: true,
+      },
+    });
+
+    return () => {
+      animation.kill();
+    };
+  }, []);
+
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex h-full flex-col items-center justify-center gap-4">
-        {/* Hero */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{
-            duration: 0.5,
-            delay: 0.25,
-            type: 'spring',
-            damping: 10,
-            stiffness: 100,
-          }}
-          className="flex max-w-7xl flex-col items-center justify-center gap-2 px-4"
+      {/* Hero Section */}
+      <div className="relative h-screen w-full overflow-hidden">
+        <div
+          ref={heroFrameRef}
+          id="hero-frame"
+          className="relative z-10 flex h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-b from-black to-blue-400"
         >
-          <h1 className="max-w-2xl py-2 pt-36 text-center text-5xl font-extrabold tracking-tighter md:text-6xl xl:text-7xl">
-            <span className="w-fit bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text pr-1.5 text-center text-transparent md:mb-4">
-              100xDevs,
-            </span>{' '}
-            <span className="bg-gradient-to-b from-primary/90 to-primary/60 bg-clip-text py-1 text-transparent">
-              because 10x ain&apos;t enough!
-            </span>
-          </h1>
+          {/* Hero content */}
+          <div className="absolute left-0 top-5 z-40 flex h-full w-full flex-col items-center justify-center px-4">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.5,
+                delay: 0.25,
+                type: 'spring',
+                damping: 10,
+                stiffness: 100,
+              }}
+              className="flex max-w-7xl flex-col items-center justify-center gap-2"
+            >
+              <h1 className="max-w-2xl py-2 text-center text-5xl font-extrabold tracking-tighter text-white md:text-6xl xl:text-7xl">
+                <span className="w-fit bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text pr-1.5 text-center text-transparent md:mb-4">
+                  100xDevs,
+                </span>{' '}
+                <span className="bg-gradient-to-b from-white/90 to-white/60 bg-clip-text py-1 text-transparent">
+                  because 10x ain&apos;t enough!
+                </span>
+              </h1>
 
-          <p className="mx-auto text-center text-lg font-medium tracking-tight text-primary/80 md:text-xl">
-            A beginner-friendly platform for mastering programming skills.
-          </p>
-        </motion.div>
-        {/* CTA Buttons */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{
-            duration: 0.5,
-            delay: 0.5,
-            type: 'spring',
-            damping: 10,
-            stiffness: 100,
-          }}
-          className="flex items-center justify-center gap-2 py-5"
-        >
-          <Button size={'lg'} asChild variant={'branding'}>
-            <Link
-              href={'https://harkirat.classx.co.in/new-courses'}
-              target="_blank"
+              <p className="mx-auto text-center text-lg font-medium tracking-tight text-white/80 md:text-xl">
+                A beginner-friendly platform for mastering programming skills.
+              </p>
+            </motion.div>
+
+            {/* CTA Buttons */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.5,
+                delay: 0.5,
+                type: 'spring',
+                damping: 10,
+                stiffness: 100,
+              }}
+              className="mt-8 flex items-center justify-center gap-2 py-5"
             >
-              Explore Courses
-            </Link>
-          </Button>
-          <Button size={'lg'} asChild>
-            <Link href={'https://projects.100xdevs.com'} target="_blank">
-              Explore Notes
-            </Link>
-          </Button>
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{
-            duration: 0.5,
-            delay: 0.75,
-            type: 'spring',
-            damping: 10,
-            stiffness: 100,
-          }}
-          className="relative mx-auto my-4 flex w-full flex-col items-center justify-center overflow-hidden antialiased"
-        >
-          <InfiniteMovingCards items={heroItems} />
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{
-            duration: 1,
-            delay: 1,
-          }}
-          className="absolute -bottom-[16rem] -z-[20] size-[24rem] overflow-hidden rounded-full bg-gradient-to-t from-blue-400 to-blue-700 blur-[16em]"
-        />
-      </main>
+              <Button size={'lg'} asChild variant={'branding'}>
+                <Link
+                  href={'https://harkirat.classx.co.in/new-courses'}
+                  target="_blank"
+                >
+                  Explore Courses
+                </Link>
+              </Button>
+              <Button size={'lg'} asChild>
+                <Link href={'https://projects.100xdevs.com'} target="_blank">
+                  Explore Notes
+                </Link>
+              </Button>
+            </motion.div>
+          </div>
+
+            {/* Decorative text elements with dark mode support */}
+            <h1 className="special-font font-head max-w-2xl font-bold absolute bottom-5 right-5 z-40 text-6xl bg-slate-900 bg-clip-text text-transparent md:text-6xl xl:text-7xl">
+            100<b>x</b>de<b>v</b>s
+          </h1>
+        </div>
+        <h1 className="special-font font-head max-w-2xl font-bold absolute bottom-5 right-5 text-6xl bg-gradient-to-b from-blue-100 to-blue-300 bg-clip-text text-transparent md:text-6xl xl:text-7xl">
+            100<b>x</b>de<b>v</b>s
+          </h1>
+      </div>
+
+      {/* Moving Cards Section */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          duration: 0.5,
+          delay: 0.75,
+          type: 'spring',
+          damping: 10,
+          stiffness: 100,
+        }}
+        className="relative mx-auto my-4 flex w-full flex-col items-center justify-center overflow-hidden antialiased"
+      >
+        <InfiniteMovingCards items={heroItems} />
+      </motion.div>
+
+      {/* Background gradient */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{
+          duration: 1,
+          delay: 1,
+        }}
+        className="absolute -bottom-[16rem] -z-[20] size-[24rem] overflow-hidden rounded-full bg-gradient-to-t from-blue-400 to-blue-700 blur-[16em]"
+      />
+
+      {/* Footer sections */}
       <FooterCTA />
       <Footer />
     </div>
   );
-}
+}
\ No newline at end of file