From 9c75a341b997d98fa6b87f6d0b5e09f4e5abc608 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 23:33:17 +0300
Subject: [PATCH] Bob AI: add a glassmorphic badge with a random funny fact
 about the

---
 src/components/sections/hero/HeroBrand.tsx | 11 +++++++-
 src/components/ui/GlassmorphicBadge.tsx    | 31 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/GlassmorphicBadge.tsx

diff --git a/src/components/sections/hero/HeroBrand.tsx b/src/components/sections/hero/HeroBrand.tsx
index 2239e0f..a3739f5 100644
--- a/src/components/sections/hero/HeroBrand.tsx
+++ b/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}
diff --git a/src/components/ui/GlassmorphicBadge.tsx b/src/components/ui/GlassmorphicBadge.tsx
new file mode 100644
index 0000000..ad8bd31
--- /dev/null
+++ b/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;
\ No newline at end of file