src/App.tsx

@@ -39,8 +39,9 @@ export default function App() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardBrand
+  <main className="pt-[var(--navbar-height)]">
+    <div id="hero" data-section="hero">
+        <HeroBillboardBrand
       brand="Empowering Future Tech Leaders"
       description="Master cutting-edge technologies with our industry-led, hands-on certification programs designed to launch your career in IT."
       primaryButton={{
@@ -260,6 +261,7 @@ export default function App() {
       ]}
     />
   </div>
+  </main>
     </>
   );
 }

src/components/ui/NavbarCentered.tsx

@@ -51,7 +51,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   return (
     <>
       <nav
-        className="fixed top-0 left-0 right-0 z-50 h-20 backdrop-blur-md bg-white/30 border-b border-gray-200"
+        className="fixed top-0 inset-x-0 z-50 h-16 backdrop-blur-lg bg-white/30 dark:bg-gray-800/30"
       >
         <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>

src/index.css

@@ -4,6 +4,7 @@
 @import "./styles/animations.css";
 
 :root {
+  --navbar-height: 4rem;
   /* @colorThemes/lightTheme/grayBlueAccent */
   --background: #ffffff;
   --card: #f9f9f9;
@@ -133,7 +134,6 @@ html {
 }
 
 body {
-  padding-top: 4rem;
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);