src/app/layout.tsx

@@ -1417,4 +1417,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -9,8 +9,31 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Sparkles, Shield, Zap, Linkedin, Facebook, Instagram, Crown } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 export default function LandingPage() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY > lastScrollY && currentScrollY > 100) {
+        // Scrolling down
+        setIsVisible(false);
+      } else {
+        // Scrolling up
+        setIsVisible(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -24,7 +47,17 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
+      <div
+        id="nav"
+        data-section="nav"
+        style={{
+          transform: isVisible ? 'translateY(0)' : 'translateY(-100%)',
+          transition: 'transform 0.3s ease-in-out',
+          position: 'sticky',
+          top: 0,
+          zIndex: 50,
+        }}
+      >
         <NavbarStyleCentered
           navItems={[
             { name: "Services", id: "services" },
@@ -173,4 +206,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}