From c68024fa3fea95a31404b6294ef9271850d2e1bc Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 21 Apr 2026 09:17:57 +0000
Subject: [PATCH] Bob AI: add a glassmorphic badge to each section of the IT
 academy w

---
 .../sections/about/AboutTextSplit.tsx         |  2 +
 src/components/sections/faq/FaqSplitMedia.tsx |  1 +
 .../features/FeaturesAlternatingSplit.tsx     |  2 +
 .../sections/hero/HeroOverlayTestimonial.tsx  |  3 ++
 .../sections/metrics/MetricsFeatureCards.tsx  |  2 +
 .../sections/pricing/PricingSimpleCards.tsx   |  2 +
 .../sections/team/TeamOverlayCards.tsx        |  2 +
 .../testimonial/TestimonialMetricsCards.tsx   | 10 +++--
 src/components/ui/GlassmorphicBadge.tsx       | 37 +++++++++++++++++++
 src/components/ui/NavbarCentered.tsx          |  4 +-
 10 files changed, 60 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..5e6acc9 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, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 interface AboutTextSplitProps {
   title: string;
@@ -25,6 +26,7 @@ const AboutTextSplit = ({
               tag="h2"
               className="text-7xl font-medium"
             />
+            <GlassmorphicBadge fact={funnyFacts[2]} className="mt-6" />
           </div>
 
           <div className="flex flex-col gap-5 w-full md:w-1/2">
diff --git a/src/components/sections/faq/FaqSplitMedia.tsx b/src/components/sections/faq/FaqSplitMedia.tsx
index 88052ce..cc0e7b1 100644
--- a/src/components/sections/faq/FaqSplitMedia.tsx
+++ b/src/components/sections/faq/FaqSplitMedia.tsx
@@ -5,6 +5,7 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import { cls } from "@/lib/utils";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type FaqItem = {
   question: string;
diff --git a/src/components/sections/features/FeaturesAlternatingSplit.tsx b/src/components/sections/features/FeaturesAlternatingSplit.tsx
index b5a1322..3c1f6a3 100644
--- a/src/components/sections/features/FeaturesAlternatingSplit.tsx
+++ b/src/components/sections/features/FeaturesAlternatingSplit.tsx
@@ -3,6 +3,7 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import { cls } from "@/lib/utils";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type FeatureItem = {
   title: string;
@@ -54,6 +55,7 @@ const FeaturesAlternatingSplit = ({
               {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
             </div>
           )}
+          <GlassmorphicBadge fact={funnyFacts[3]} className="mt-8" />
         </div>
 
         <div className="flex flex-col gap-5 w-content-width mx-auto">
diff --git a/src/components/sections/hero/HeroOverlayTestimonial.tsx b/src/components/sections/hero/HeroOverlayTestimonial.tsx
index 4c65249..c79b8df 100644
--- a/src/components/sections/hero/HeroOverlayTestimonial.tsx
+++ b/src/components/sections/hero/HeroOverlayTestimonial.tsx
@@ -5,6 +5,7 @@ import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type Testimonial = {
   name: string;
@@ -81,6 +82,8 @@ const HeroOverlayTestimonial = ({
             className="text-base md:text-lg leading-tight text-balance"
           />
 
+          <GlassmorphicBadge fact={funnyFacts[1]} className="mt-4" />
+
           <div className="flex flex-wrap gap-3 mt-1.5">
             <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animateImmediately />
             <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animateImmediately delay={0.1} />
diff --git a/src/components/sections/metrics/MetricsFeatureCards.tsx b/src/components/sections/metrics/MetricsFeatureCards.tsx
index 08ccbbf..76b6753 100644
--- a/src/components/sections/metrics/MetricsFeatureCards.tsx
+++ b/src/components/sections/metrics/MetricsFeatureCards.tsx
@@ -3,6 +3,7 @@ import { Check } from "lucide-react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type Metric = {
   value: string;
@@ -50,6 +51,7 @@ const MetricsFeatureCards = ({
             {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
           </div>
         )}
+        <GlassmorphicBadge fact={funnyFacts[5]} className="mt-8" />
       </div>
 
       <motion.div
diff --git a/src/components/sections/pricing/PricingSimpleCards.tsx b/src/components/sections/pricing/PricingSimpleCards.tsx
index eef1dc7..63bec88 100644
--- a/src/components/sections/pricing/PricingSimpleCards.tsx
+++ b/src/components/sections/pricing/PricingSimpleCards.tsx
@@ -3,6 +3,7 @@ import { Check } from "lucide-react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type PricingPlan = {
   tag: string;
@@ -51,6 +52,7 @@ const PricingSimpleCards = ({
             {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
           </div>
         )}
+        <GlassmorphicBadge fact={funnyFacts[4]} className="mt-8" />
       </div>
 
       <motion.div
diff --git a/src/components/sections/team/TeamOverlayCards.tsx b/src/components/sections/team/TeamOverlayCards.tsx
index ef4db37..700d8d2 100644
--- a/src/components/sections/team/TeamOverlayCards.tsx
+++ b/src/components/sections/team/TeamOverlayCards.tsx
@@ -3,6 +3,7 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type TeamMember = {
   name: string;
@@ -49,6 +50,7 @@ const TeamOverlayCards = ({
             {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
           </div>
         )}
+        <GlassmorphicBadge fact={funnyFacts[6]} className="mt-8" />
       </div>
 
       <motion.div
diff --git a/src/components/sections/testimonial/TestimonialMetricsCards.tsx b/src/components/sections/testimonial/TestimonialMetricsCards.tsx
index 8a3c706..34cf769 100644
--- a/src/components/sections/testimonial/TestimonialMetricsCards.tsx
+++ b/src/components/sections/testimonial/TestimonialMetricsCards.tsx
@@ -5,6 +5,7 @@ import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
 import { cls } from "@/lib/utils";
+import GlassmorphicBadge, { funnyFacts } from "@/components/ui/GlassmorphicBadge";
 
 type Testimonial = {
   name: string;
@@ -58,10 +59,11 @@ const TestimonialMetricsCards = ({
           {(primaryButton || secondaryButton) && (
             <div className="flex flex-wrap justify-center gap-3 mt-1 md:mt-2">
               {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
-            </div>
-          )}
-        </div>
+            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
+          </div>
+        )}
+        <GlassmorphicBadge fact={funnyFacts[7]} className="mt-8" />
+      </div>
 
         <div className="flex flex-col gap-5">
           <motion.div
diff --git a/src/components/ui/GlassmorphicBadge.tsx b/src/components/ui/GlassmorphicBadge.tsx
new file mode 100644
index 0000000..d0ce763
--- /dev/null
+++ b/src/components/ui/GlassmorphicBadge.tsx
@@ -0,0 +1,37 @@
+import { cls } from "@/lib/utils";
+
+export const funnyFacts = [
+  "Our mascot is a rubber duck named 'Segfault'. He's our best debugger.",
+  "We once held a competition to see who could write 'Hello World' in the most obscure language. The winner used Malbolge.",
+  "Our servers are powered by a hamster on a wheel. We call him 'Gigahertz'.",
+  "The coffee machine has its own IP address and a REST API. It's mission-critical.",
+  "We have a 'bug bounty' program where you get a cookie for every bug you find in the kitchen.",
+  "Our lead instructor can write CSS in his sleep. We've seen it. It's terrifyingly perfect.",
+  "The academy's Wi-Fi password is the first 100 digits of Pi. For security.",
+  "We have a dedicated Slack channel for debating if a hotdog is a sandwich. It's our most active channel.",
+  "All our whiteboards are smart boards, but we only use them for Pictionary during lunch breaks.",
+  "The final exam for our cybersecurity course is to successfully hack the dean's smart-toaster.",
+  "Our AI course is taught by an actual AI. It gives out grades in binary."
+];
+
+interface GlassmorphicBadgeProps {
+  fact: string;
+  className?: string;
+}
+
+const GlassmorphicBadge = ({ fact, className }: GlassmorphicBadgeProps) => {
+  return (
+    <div
+      className={cls(
+        "p-3 rounded-lg border border-accent bg-card/50 backdrop-blur-sm",
+        className
+      )}
+    >
+      <p className="text-sm text-foreground/80">
+        <span className="font-bold">Fun Fact:</span> {fact}
+      </p>
+    </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..bd0b518 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, { funnyFacts } 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 fact={funnyFacts[0]} className="hidden lg:block" />
             <Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
           </div>
 
-- 
2.49.1