From 08364595ee88f7fefcd97ff4cc4681c684aa7530 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 25 Mar 2026 10:53:53 +0000
Subject: [PATCH] Bob AI: Add a glassmorphic badge with the text '5000 happy
 students'

---
 src/app/page.tsx                                     |  1 +
 .../sections/hero/HeroBillboardRotatedCarousel.tsx   | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b3585a0..212bfd9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -73,6 +73,7 @@ export default function LandingPage() {
       title="Unlock Your Tech Potential"
       description="Join our IT Academy and transform your career. Learn from industry experts and master the skills to thrive in the digital world."
       tag="Your Future Starts Here"
+      badge="5000 happy students"
       buttons={[
         {
           text: "Explore Courses",
diff --git a/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx b/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
index 2f0f1de..b7115e5 100644
--- a/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-
 import TextBox from "@/components/Textbox";
 import AngledCarousel from "@/components/cardStack/layouts/carousels/AngledCarousel";
 import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
@@ -39,6 +38,7 @@ interface HeroBillboardRotatedCarouselProps {
   title: string;
   description: string;
   background: HeroBillboardRotatedCarouselBackgroundProps;
+  badge?: string;
   tag?: string;
   tagIcon?: LucideIcon;
   tagAnimation?: ButtonAnimationType;
@@ -64,6 +64,7 @@ const HeroBillboardRotatedCarousel = ({
   title,
   description,
   background = { variant: "plain" },
+  badge,
   tag,
   tagIcon,
   tagAnimation = "opacity",
@@ -87,11 +88,16 @@ const HeroBillboardRotatedCarousel = ({
   return (
     <section
       aria-label={ariaLabel}
-      className={cls("relative w-full h-fit md:min-h-svh flex items-center justify-center py-hero-page-padding", className)}
+      className={cls("relative w-full h-fit md:min-h-svh flex items-center justify-center py-hero-page-padding text-primary-cta-text", className)}
     >
       <HeroBackgrounds {...background} />
       <div className={cls("w-full flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
-        <div className="w-content-width mx-auto" >
+        <div className="w-content-width mx-auto flex flex-col items-center gap-3" >
+          {badge && (
+            <div className="rounded-full px-4 py-1 text-sm backdrop-blur-sm bg-card/20 border border-card/30">
+              {badge}
+            </div>
+          )}
           <TextBox
             title={title}
             description={description}