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/sections/about/AboutTextSplit.tsx

@@ -1,5 +1,6 @@
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 
 interface AboutTextSplitProps {
   title: string;
@@ -19,6 +20,7 @@ const AboutTextSplit = ({
       <div className="flex flex-col gap-30 mx-auto w-content-width">
         <div className="flex flex-col md:flex-row gap-3 md:gap-15">
           <div className="w-full md:w-1/2">
+            <GlassmorphicBadge text="Fact: Our 'About Us' page was once accidentally replaced with a cat meme gallery for a whole day. Nobody complained." />
             <TextAnimation
               text={title}
               variant="slide-up"

src/components/sections/contact/ContactCenter.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { motion } from "motion/react";
 import TextAnimation from "@/components/ui/TextAnimation";
 import { sendContactEmail } from "@/lib/api/email";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 
 const ContactCenter = ({
   tag,
@@ -33,13 +34,14 @@ const ContactCenter = ({
 
   return (
     <section aria-label="Contact section" className="py-20">
-      <div className="w-content-width mx-auto">
+      <div className="w-content-width mx-auto flex flex-col items-center">
+        <GlassmorphicBadge text="Fact: Our contact form once tried to negotiate a higher salary for itself." />
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-15%" }}
           transition={{ duration: 0.6, ease: "easeOut" }}
-          className="flex items-center justify-center py-20 card rounded"
+          className="flex items-center justify-center py-20 card rounded w-full"
         >
           <div className="flex flex-col items-center w-full md:w-1/2 gap-3 px-5">
             <span className="card rounded px-3 py-1 text-sm">{tag}</span>

src/components/sections/faq/FaqSimple.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { Plus } from "lucide-react";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import { cls } from "@/lib/utils";
@@ -35,6 +36,7 @@ const FaqSimple = ({
     <section aria-label="FAQ section" className="py-20">
       <div className="w-content-width mx-auto flex flex-col gap-8">
         <div className="flex flex-col items-center gap-3 md:gap-2">
+          <GlassmorphicBadge text="Fact: Our FAQ section once had a question: 'Is the Wi-Fi password 'password'?' The answer was 'No, it's 'password123'." />
           <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 
           <TextAnimation

src/components/sections/footer/FooterSimpleReveal.tsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useState } from "react";
 import { useButtonClick } from "@/hooks/useButtonClick";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 
 type FooterColumn = {
   title: string;

src/components/sections/hero/HeroBillboardBrand.tsx

@@ -1,6 +1,7 @@
 import { motion } from "motion/react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AutoFillText from "@/components/ui/AutoFillText";
 
@@ -22,6 +23,9 @@ const HeroBillboardBrand = ({
   return (
     <section aria-label="Hero section" className="pt-25 pb-20 md:py-30">
       <div className="flex flex-col gap-10 md:gap-13 w-content-width mx-auto">
+        <div className="flex w-full justify-start">
+          <GlassmorphicBadge text="Fact: The IT Academy's coffee machine has written more lines of code than some junior developers (it's very efficient)." />
+        </div>
         <div className="flex flex-col items-end gap-5">
           <AutoFillText className="w-full font-semibold" paddingY="">{brand}</AutoFillText>
 

src/components/sections/metrics/MetricsFeatureCards.tsx

@@ -1,6 +1,7 @@
 import { motion } from "motion/react";
 import { Check } from "lucide-react";
 import Button from "@/components/ui/Button";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import TextAnimation from "@/components/ui/TextAnimation";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
 
@@ -28,6 +29,7 @@ const MetricsFeatureCards = ({
   <section aria-label="Metrics section" className="py-20">
     <div className="flex flex-col gap-8">
       <div className="flex flex-col items-center gap-3 md:gap-2 w-content-width mx-auto">
+        <GlassmorphicBadge text="Fact: Our student success rate is so high, even our error messages are encouraging!" />
         <span className="px-3 py-1 text-sm card rounded">{tag}</span>
 
         <TextAnimation

src/components/sections/product/ProductQuantityCards.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Plus, Minus, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
@@ -69,6 +70,7 @@ const ProductQuantityCards = ({
     <section aria-label="Products section" className="py-20">
       <div className="flex flex-col gap-8">
         <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
+          <GlassmorphicBadge text="Fact: One of our most popular courses is 'Advanced Debugging: Finding the Missing Semicolon in Life'." />
           <span className="px-3 py-1 text-sm card rounded">{tag}</span>
 
           <TextAnimation

src/components/sections/testimonial/TestimonialAvatarCard.tsx

@@ -1,6 +1,7 @@
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import Transition from "@/components/ui/Transition";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import { cls } from "@/lib/utils";
 
@@ -26,8 +27,9 @@ const TestimonialAvatarCard = ({
 
   return (
     <section aria-label="Testimonials section" className="py-20">
-      <div className="w-content-width mx-auto">
-        <Transition className="flex flex-col items-center gap-5 py-20 px-8 rounded card">
+      <div className="w-content-width mx-auto flex flex-col items-center">
+        <GlassmorphicBadge text="Fact: A former student once coded their entire final project using only voice commands because their keyboard broke. They got an A!" />
+        <Transition className="flex flex-col items-center gap-5 py-20 px-8 rounded card w-full">
           <div className="flex flex-col items-center gap-3">
             <span className="px-3 py-1 text-sm rounded card">{tag}</span>
 

src/components/ui/GlassmorphicBadge.tsx

@@ -0,0 +1,16 @@
+interface GlassmorphicBadgeProps {
+  text: string;
+  className?: string;
+}
+
+const GlassmorphicBadge = ({ text, className }: GlassmorphicBadgeProps) => {
+  return (
+    <div
+      className={`backdrop-blur-sm bg-white/30 border border-white/20 rounded-lg p-2 shadow-lg text-sm text-foreground mb-4 inline-block ${className || ''}`}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default GlassmorphicBadge;

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 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">
@@ -78,7 +68,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             ))}
           </div>
 
-          <div className="hidden md:block">
+          <div className="hidden md:flex items-center gap-4">
             <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;