From d0a90fbc24fedf7c3d9eb9036494e2d9491eff9b Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 21 Apr 2026 11:56:52 +0000
Subject: [PATCH] Bob AI: Change the navigation bar to a floating position,
 typically

---
 src/App.tsx                          |  6 ++++--
 src/components/ui/NavbarCentered.tsx | 14 ++------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 24aa376..3ed401e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,8 +40,9 @@ export default function App() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+  <main className="pt-24">
+    <div id="hero" data-section="hero">
+        <HeroBillboardScroll
       tag="Future of Tech"
       title="Master Your Future at IT Academy"
       description="Gain industry-ready skills with our hands-on software development and data science programs."
@@ -345,6 +346,7 @@ export default function App() {
       ]}
     />
   </div>
+  </main>
     </>
   );
 }
diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index de8cb8c..a309e0b 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/src/components/ui/NavbarCentered.tsx
@@ -46,24 +46,14 @@ const NavLink = ({
 };
 
 const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 50);
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
   return (
     <>
       <nav
-        className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
-        )}
+        className="fixed z-1000 top-4 left-1/2 -translate-x-1/2 w-[95%] max-w-6xl h-16 bg-background/50 backdrop-blur-lg rounded-lg border border-white/10"
       >
-        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
+        <div className="relative flex items-center justify-between h-full w-full px-6">
           <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
 
           <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">