Merge version_6_1776768369206 into main

Merge version_6_1776768369206 into main

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

@@ -4,7 +4,6 @@ import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
-import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 
 interface NavbarCenteredProps {
   logo: string;
@@ -47,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 top-0 inset-x-0 z-50 w-full h-[var(--navbar-height)] 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">
+        <div className="relative flex items-center justify-between h-full w-content-width mx-auto 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">
@@ -80,7 +69,6 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
           </div>
 
           <div className="hidden md:flex items-center gap-4">
-            <GlassmorphicBadge text="Fact: Our first student accidentally enrolled in a cooking class instead of coding, and still learned to debug a recipe!" className="!mb-0" />
             <Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
           </div>
 

src/index.css

@@ -4,6 +4,7 @@
 @import "./styles/animations.css";
 
 :root {
+  --navbar-height: 4rem;
   /* @colorThemes/lightTheme/grayBlueAccent */
   --background: #ffffff;
   --card: #f9f9f9;