From 29f6b253bf02b4d06e5093ecd7d9c12578609e48 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 21 Apr 2026 16:48:24 +0300
Subject: [PATCH] Bob AI: Modify the existing navbar component to be floating
 (fixed p

---
 src/App.tsx                          |  4 ++--
 src/components/ui/NavbarCentered.tsx | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 735123a..50dfe48 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,7 @@ import TestimonialMetricsCards from '@/components/sections/testimonial/Testimoni
 
 export default function App() {
   return (
-    <>
+    <div className="pt-24">
       <div id="nav" data-section="nav">
         <NavbarCentered
           logo="IT Academy"
@@ -168,6 +168,6 @@ export default function App() {
           ]}
         />
       </div>
-    </>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index de8cb8c..d857d62 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/src/components/ui/NavbarCentered.tsx
@@ -59,19 +59,19 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <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"
+          "fixed z-50 top-4 left-1/2 -translate-x-1/2 rounded-full shadow-lg px-6 md:px-8 py-3 backdrop-blur-xl bg-white/10 border border-white/20 transition-all duration-500 ease-in-out w-[calc(100%-2rem)] md:w-auto",
+          isScrolled ? "bg-white/15 shadow-xl" : ""
         )}
       >
-        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
-          <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
+        <div className="flex items-center justify-between md:justify-center gap-4 md:gap-8">
+          <Link to="/" className="text-xl font-medium text-foreground whitespace-nowrap">{logo}</Link>
 
-          <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
+          <div className="hidden md:flex items-center gap-6">
             {navItems.map((item) => (
               <NavLink
                 key={item.name}
                 href={item.href}
-                className="text-base text-foreground hover:opacity-70 transition-opacity"
+                className="text-base text-foreground hover:opacity-70 transition-opacity whitespace-nowrap"
               >
                 {item.name}
               </NavLink>
@@ -83,7 +83,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
           </div>
 
           <button
-            className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+            className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded-full cursor-pointer"
             onClick={() => setMenuOpen(!menuOpen)}
             aria-label="Toggle menu"
             aria-expanded={menuOpen}
@@ -103,12 +103,12 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             animate={{ y: 0 }}
             exit={{ y: "-135%" }}
             transition={{ type: "spring", damping: 26, stiffness: 170 }}
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 card rounded"
+            className="md:hidden fixed z-50 top-20 left-4 right-4 p-6 card rounded-2xl border border-white/10 shadow-2xl backdrop-blur-xl"
           >
             <div className="flex items-center justify-between mb-6">
-              <p className="text-xl text-foreground">Menu</p>
+              <p className="text-xl text-foreground font-medium">Menu</p>
               <button
-                className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+                className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded-full cursor-pointer"
                 onClick={() => setMenuOpen(false)}
                 aria-label="Close menu"
               >
@@ -144,4 +144,4 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   );
 };
 
-export default NavbarCentered;
+export default NavbarCentered;
\ No newline at end of file
-- 
2.49.1