From 9e17897d508e2204d8cf8f92fb97789cfce8551c Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 21 Apr 2026 12:21:13 +0300
Subject: [PATCH] Bob AI: add a glassmorphic badge to each section of the IT
 Academy w

---
 src/components/sections/about/AboutTextSplit.tsx |  2 ++
 .../sections/contact/ContactCenter.tsx           |  6 ++++--
 src/components/sections/faq/FaqSimple.tsx        |  2 ++
 .../sections/footer/FooterSimpleReveal.tsx       |  1 +
 .../sections/hero/HeroBillboardBrand.tsx         |  4 ++++
 .../sections/metrics/MetricsFeatureCards.tsx     |  2 ++
 .../sections/product/ProductQuantityCards.tsx    |  2 ++
 .../testimonial/TestimonialAvatarCard.tsx        |  6 ++++--
 src/components/ui/GlassmorphicBadge.tsx          | 16 ++++++++++++++++
 src/components/ui/NavbarCentered.tsx             |  4 +++-
 10 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ui/GlassmorphicBadge.tsx

diff --git a/src/components/sections/about/AboutTextSplit.tsx b/src/components/sections/about/AboutTextSplit.tsx
index 7bf90d1..7e73412 100644
--- a/src/components/sections/about/AboutTextSplit.tsx
+++ b/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"
diff --git a/src/components/sections/contact/ContactCenter.tsx b/src/components/sections/contact/ContactCenter.tsx
index 218919f..19c7193 100644
--- a/src/components/sections/contact/ContactCenter.tsx
+++ b/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>
diff --git a/src/components/sections/faq/FaqSimple.tsx b/src/components/sections/faq/FaqSimple.tsx
index eee6ed9..5c9d49f 100644
--- a/src/components/sections/faq/FaqSimple.tsx
+++ b/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
diff --git a/src/components/sections/footer/FooterSimpleReveal.tsx b/src/components/sections/footer/FooterSimpleReveal.tsx
index d57b344..1d0c1fa 100644
--- a/src/components/sections/footer/FooterSimpleReveal.tsx
+++ b/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;
diff --git a/src/components/sections/hero/HeroBillboardBrand.tsx b/src/components/sections/hero/HeroBillboardBrand.tsx
index 9ba18f2..dd5465d 100644
--- a/src/components/sections/hero/HeroBillboardBrand.tsx
+++ b/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>
 
diff --git a/src/components/sections/metrics/MetricsFeatureCards.tsx b/src/components/sections/metrics/MetricsFeatureCards.tsx
index 08ccbbf..d78b72b 100644
--- a/src/components/sections/metrics/MetricsFeatureCards.tsx
+++ b/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
diff --git a/src/components/sections/product/ProductQuantityCards.tsx b/src/components/sections/product/ProductQuantityCards.tsx
index 0c9dac9..e3cfe25 100644
--- a/src/components/sections/product/ProductQuantityCards.tsx
+++ b/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
diff --git a/src/components/sections/testimonial/TestimonialAvatarCard.tsx b/src/components/sections/testimonial/TestimonialAvatarCard.tsx
index dd7b47f..23bd2fc 100644
--- a/src/components/sections/testimonial/TestimonialAvatarCard.tsx
+++ b/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>
 
diff --git a/src/components/ui/GlassmorphicBadge.tsx b/src/components/ui/GlassmorphicBadge.tsx
new file mode 100644
index 0000000..dabcbc7
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index de8cb8c..2063e5e 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/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>
 
-- 
2.49.1