Merge version_7_1776773032685 into main

Merge version_7_1776773032685 into main

src/App.tsx

@@ -8,13 +8,12 @@ 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" className="relative">
+  <div id="nav" data-section="nav">
       <NavbarCentered
       logo="NexGen IT"
       navItems={[
@@ -36,10 +35,9 @@ export default function App() {
         href: "#contact",
       }}
     />
-      <GlassmorphicBadge />
   </div>
 
-  <div id="hero" data-section="hero" className="relative">
+  <div id="hero" data-section="hero">
       <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."
@@ -53,20 +51,18 @@ 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" className="relative">
+  <div id="about" data-section="about">
       <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" className="relative">
+  <div id="services" data-section="services">
       <FeaturesMediaCards
       tag="Our Expertise"
       title="Comprehensive IT Services"
@@ -89,10 +85,9 @@ export default function App() {
         },
       ]}
     />
-      <GlassmorphicBadge />
   </div>
 
-  <div id="metrics" data-section="metrics" className="relative">
+  <div id="metrics" data-section="metrics">
       <MetricsGradientCards
       tag="Proven Success"
       title="Our Impact"
@@ -118,10 +113,9 @@ export default function App() {
         },
       ]}
     />
-      <GlassmorphicBadge />
   </div>
 
-  <div id="social-proof" data-section="social-proof" className="relative">
+  <div id="social-proof" data-section="social-proof">
       <SocialProofMarquee
       tag="Trusted By"
       title="Industry Leaders"
@@ -136,10 +130,9 @@ export default function App() {
         "Salesforce",
       ]}
     />
-      <GlassmorphicBadge />
   </div>
 
-  <div id="testimonials" data-section="testimonials" className="relative">
+  <div id="testimonials" data-section="testimonials">
       <TestimonialQuoteCards
       tag="Client Success"
       title="What They Say"
@@ -177,10 +170,9 @@ export default function App() {
         },
       ]}
     />
-      <GlassmorphicBadge />
   </div>
 
-  <div id="faq" data-section="faq" className="relative">
+  <div id="faq" data-section="faq">
       <FaqSplitMedia
       tag="FAQ"
       title="Frequently Asked Questions"
@@ -201,10 +193,9 @@ 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" className="relative">
+  <div id="contact" data-section="contact">
       <ContactSplitForm
       tag="Contact Us"
       title="Let's Build Together"
@@ -232,10 +223,9 @@ 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" className="relative">
+  <div id="footer" data-section="footer">
       <FooterBasic
       columns={[
         {
@@ -268,7 +258,6 @@ export default function App() {
       leftText="© 2024 NexGen IT Inc."
       rightText="All rights reserved."
     />
-      <GlassmorphicBadge />
   </div>
     </>
   );

src/components/common/GlassmorphicBadge.tsx

@@ -1,22 +0,0 @@
-"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>
-  );
-}

src/components/sections/about/AboutMediaOverlay.tsx

@@ -30,6 +30,9 @@ const AboutMediaOverlay = ({
 
         <div className="relative z-10 flex items-center justify-center px-5 py-10 mx-auto min-h-100 md:min-h-120 md:w-1/2 w-content-width">
           <div className="flex flex-col items-center gap-3 md:gap-1 text-center">
+            <div className="mb-2">
+              <div className="inline-block px-3 py-1 text-sm rounded-full bg-white/20 backdrop-blur-sm border border-white/30 text-foreground">We have a rubber duck for debugging. His name is Sir Quacks-A-Lot.</div>
+            </div>
             <motion.span
               initial={{ opacity: 0, y: 10 }}
               whileInView={{ opacity: 1, y: 0 }}

src/components/sections/contact/ContactSplitForm.tsx

@@ -79,6 +79,9 @@ const ContactSplitForm = ({
           <div className="p-5 md:p-10 card rounded">
             <form onSubmit={handleSubmit} className="flex flex-col gap-5">
               <div className="flex flex-col items-center gap-1 text-center">
+                <div className="mb-2">
+                  <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Our contact form is powered by a hamster on a wheel. Please be patient.</div>
+                </div>
                 <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 
                 <TextAnimation

src/components/sections/faq/FaqSplitMedia.tsx

@@ -40,6 +40,9 @@ const FaqSplitMedia = ({
     <section aria-label="FAQ section" className="py-20">
       <div className="w-content-width mx-auto flex flex-col gap-8">
         <div className="flex flex-col items-center gap-3 md:gap-2">
+          <div className="mb-2">
+            <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">FAQ: Do you sleep? Answer: Rarely.</div>
+          </div>
           <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 
           <TextAnimation

src/components/sections/features/FeaturesMediaCards.tsx

@@ -30,6 +30,9 @@ const FeaturesMediaCards = ({
     <section aria-label="Features section" className="py-20">
       <div className="flex flex-col gap-8">
         <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
+          <div className="mb-2">
+            <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Our secret feature is a button that orders pizza. It's still in beta.</div>
+          </div>
           <span className="px-3 py-1 text-sm card rounded">{tag}</span>
 
           <TextAnimation

src/components/sections/footer/FooterBasic.tsx

@@ -36,6 +36,9 @@ const FooterBasic = ({
   return (
     <footer aria-label="Site footer" className="w-full pt-20 pb-10">
       <div className="w-content-width mx-auto">
+        <div className="w-full flex justify-center mb-8">
+          <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Made with ❤️ and too many energy drinks.</div>
+        </div>
         <div className="w-full flex flex-wrap justify-between gap-y-10 mb-10">
           {columns.map((column) => (
             <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">

src/components/sections/hero/HeroBrand.tsx

@@ -36,6 +36,9 @@ const HeroBrand = ({
 
       <div className="relative z-10 w-content-width mx-auto pb-5">
         <div className="flex flex-col">
+          <div className="mb-4">
+            <div className="inline-block px-3 py-1 text-sm rounded-full bg-white/20 backdrop-blur-sm border border-white/30 text-primary-cta-text">Powered by caffeine and the occasional reboot.</div>
+          </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/sections/metrics/MetricsGradientCards.tsx

@@ -30,6 +30,9 @@ const MetricsGradientCards = ({
   <section aria-label="Metrics section" className="py-20">
     <div className="flex flex-col gap-8">
       <div className="flex flex-col items-center gap-3 md:gap-2 w-content-width mx-auto">
+        <div className="mb-2">
+          <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Our uptime is 99.9%, but our coffee machine's is closer to 50%.</div>
+        </div>
         <span className="px-3 py-1 text-sm card rounded">{tag}</span>
 
         <TextAnimation

src/components/sections/social-proof/SocialProofMarquee.tsx

@@ -21,6 +21,9 @@ const SocialProofMarquee = ({
     <section aria-label="Social proof section" className="py-20">
       <div className="flex flex-col gap-8">
         <div className="flex flex-col items-center gap-3 md:gap-2 w-content-width mx-auto">
+          <div className="mb-2">
+            <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Even our CEO's mom thinks we're a big deal.</div>
+          </div>
           <span className="px-3 py-1 text-sm rounded card">{tag}</span>
 
           <TextAnimation

src/components/sections/testimonial/TestimonialQuoteCards.tsx

@@ -28,6 +28,9 @@ const TestimonialQuoteCards = ({
   <section aria-label="Testimonials section" className="py-20">
     <div className="flex flex-col gap-8">
       <div className="flex flex-col items-center gap-3 md:gap-2 w-content-width mx-auto">
+        <div className="mb-2">
+          <div className="inline-block px-3 py-1 text-sm rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Our clients love us. We have the thank-you cards to prove it.</div>
+        </div>
         <span className="px-3 py-1 text-sm card rounded">{tag}</span>
 
         <TextAnimation

src/components/ui/NavbarCentered.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowRight } from "lucide-react";
@@ -46,25 +46,23 @@ const NavLink = ({
 };
 
 const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 50);
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
   return (
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          "sticky top-0 z-50 w-full transition-all duration-500 ease-in-out h-20 bg-background/80 backdrop-blur-md border-b border-foreground/10"
         )}
       >
         <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
-          <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
+          <div className="flex items-center gap-4">
+            <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
+            <div className="flex items-center gap-1 px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs font-medium">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-[pulse-green_2s_infinite]"></span>
+              Active Now
+            </div>
+          </div>
 
           <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
             {navItems.map((item) => (

src/styles/animations.css

@@ -169,3 +169,14 @@
 .animate-progress {
   animation: progress linear forwards;
 }
+
+@keyframes pulse-green {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+}

src/utils/facts.ts

@@ -1,17 +0,0 @@
-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];
-};