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">

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;

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">

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} />

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

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

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

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

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;

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>