From b5f98f04df9cbafd8d83750bee4ff3cf5d95eb2a Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 23:25:17 +0300
Subject: [PATCH] Bob AI: Add a glassmorphic badge containing a random funny
 fact abou

---
 src/App.tsx                                 | 31 ++++++++++++++-------
 src/components/common/GlassmorphicBadge.tsx | 22 +++++++++++++++
 src/utils/facts.ts                          | 17 +++++++++++
 3 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 src/components/common/GlassmorphicBadge.tsx
 create mode 100644 src/utils/facts.ts

diff --git a/src/App.tsx b/src/App.tsx
index 8c958f0..fcac2e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,12 +8,13 @@ import MetricsGradientCards from '@/components/sections/metrics/MetricsGradientC
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
 import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import GlassmorphicBadge from '@/components/common/GlassmorphicBadge';
 import { Award, Users, Zap } from "lucide-react";
 
 export default function App() {
   return (
     <>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="relative">
       <NavbarCentered
       logo="NexGen IT"
       navItems={[
@@ -35,9 +36,10 @@ export default function App() {
         href: "#contact",
       }}
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="relative">
       <HeroBrand
       brand="Empowering Your Digital Transformation"
       description="Enterprise-grade IT solutions for modern businesses. We deliver scalable infrastructure, secure cloud computing, and strategic consulting to keep your operations ahead."
@@ -51,18 +53,20 @@ export default function App() {
       }}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-it-office-interior-with-glowing-s-1776716397359-c1f0650f.png"
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="relative">
       <AboutMediaOverlay
       tag="Who We Are"
       title="Innovation Driven by Integrity"
       description="With over two decades of combined industry experience, our team specializes in building resilient IT ecosystems that foster growth, security, and operational excellence for clients globally."
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/diverse-team-of-it-professionals-in-mode-1776716405714-28746c90.png"
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="services" data-section="services">
+  <div id="services" data-section="services" className="relative">
       <FeaturesMediaCards
       tag="Our Expertise"
       title="Comprehensive IT Services"
@@ -85,9 +89,10 @@ export default function App() {
         },
       ]}
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="metrics" data-section="metrics">
+  <div id="metrics" data-section="metrics" className="relative">
       <MetricsGradientCards
       tag="Proven Success"
       title="Our Impact"
@@ -113,9 +118,10 @@ export default function App() {
         },
       ]}
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="social-proof" data-section="social-proof">
+  <div id="social-proof" data-section="social-proof" className="relative">
       <SocialProofMarquee
       tag="Trusted By"
       title="Industry Leaders"
@@ -130,9 +136,10 @@ export default function App() {
         "Salesforce",
       ]}
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div id="testimonials" data-section="testimonials" className="relative">
       <TestimonialQuoteCards
       tag="Client Success"
       title="What They Say"
@@ -170,9 +177,10 @@ export default function App() {
         },
       ]}
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="faq" data-section="faq">
+  <div id="faq" data-section="faq" className="relative">
       <FaqSplitMedia
       tag="FAQ"
       title="Frequently Asked Questions"
@@ -193,9 +201,10 @@ export default function App() {
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-minimalist-background-represent-1776716478639-65deba97.png"
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="relative">
       <ContactSplitForm
       tag="Contact Us"
       title="Let's Build Together"
@@ -223,9 +232,10 @@ export default function App() {
       buttonText="Send Inquiry"
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-workspace-with-smartphone-l-1776716485483-7b4aa711.png"
     />
+      <GlassmorphicBadge />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="relative">
       <FooterBasic
       columns={[
         {
@@ -258,6 +268,7 @@ export default function App() {
       leftText="© 2024 NexGen IT Inc."
       rightText="All rights reserved."
     />
+      <GlassmorphicBadge />
   </div>
     </>
   );
diff --git a/src/components/common/GlassmorphicBadge.tsx b/src/components/common/GlassmorphicBadge.tsx
new file mode 100644
index 0000000..718d3a1
--- /dev/null
+++ b/src/components/common/GlassmorphicBadge.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getRandomFact } from "@/utils/facts";
+
+export default function GlassmorphicBadge() {
+  const [fact, setFact] = useState<string>("");
+
+  useEffect(() => {
+    setFact(getRandomFact());
+  }, []);
+
+  if (!fact) return null;
+
+  return (
+    <div className="absolute bottom-4 right-4 z-20 max-w-[250px] p-3 rounded-[var(--radius)] shadow-lg text-xs
+                    bg-card/50 backdrop-blur-md border border-foreground/10 text-foreground">
+      <p className="font-bold mb-1">Fun Fact!</p>
+      <p>{fact}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/utils/facts.ts b/src/utils/facts.ts
new file mode 100644
index 0000000..d13add5
--- /dev/null
+++ b/src/utils/facts.ts
@@ -0,0 +1,17 @@
+export const funnyFacts = [
+  "Our office coffee machine has achieved sentient thought. We're afraid to unplug it.",
+  "The company's first server was a potato. It had amazing uptime.",
+  "We once fixed a bug by telling it a bedtime story. It fell asleep and stopped causing trouble.",
+  "Our AI is powered by a hamster on a wheel. His name is 'Kernel'.",
+  "We measure project timelines in 'how many pizzas will this take?'.",
+  "The office plant is our most senior developer. It has the most 'root' access.",
+  "Our password policy requires at least one emoji. The CEO's is 'password🦄'.",
+  "We debug with rubber ducks. We have a whole flock.",
+  "The loudest thing in our office is the collective sigh when someone says 'it worked on my machine'.",
+  "Our cloud is literally just a bunch of balloons with hard drives tied to them.",
+];
+
+export const getRandomFact = (): string => {
+  const randomIndex = Math.floor(Math.random() * funnyFacts.length);
+  return funnyFacts[randomIndex];
+};
\ No newline at end of file