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

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