Bob AI: add a glassmorphic badge with a random funny fact about the

src/components/sections/hero/HeroBrand.tsx

@@ -2,6 +2,8 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AutoFillText from "@/components/ui/AutoFillText";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
+import { motion } from "motion/react";
 
 type HeroBrandProps = {
   brand: string;
@@ -35,7 +37,14 @@ const HeroBrand = ({
       />
 
       <div className="relative z-10 w-content-width mx-auto pb-5">
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+          >
+            <GlassmorphicBadge />
+          </motion.div>
           <div className="w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-5">
             <TextAnimation
               text={description}

src/components/ui/GlassmorphicBadge.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+const funnyFacts = [
+  "Our office coffee machine is secretly a sentient AI planning world domination, one espresso at a time.",
+  "We once replaced all the office chairs with exercise balls for a week. Productivity bounced back eventually.",
+  "The company's first server was a modified toaster. It served web pages and, occasionally, slightly burnt bread.",
+  "Our lead developer codes exclusively in Comic Sans. He claims it's 'more approachable'.",
+  "The office plant is officially listed as an employee and receives a quarterly performance review."
+];
+
+const GlassmorphicBadge = () => {
+  const [fact, setFact] = useState("");
+
+  useEffect(() => {
+    setFact(funnyFacts[Math.floor(Math.random() * funnyFacts.length)]);
+  }, []);
+
+  if (!fact) {
+    return null;
+  }
+
+  return (
+    <div className="self-start backdrop-blur-md bg-white/20 border border-white/30 rounded-lg p-3 text-sm text-primary-cta-text max-w-md">
+      <strong>Fun Fact:</strong> {fact}
+    </div>
+  );
+};
+
+export default GlassmorphicBadge;