From 1cebccd9ca74eb66d532c69f56b06522b558c435 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 25 Mar 2026 19:41:27 +0000
Subject: [PATCH] Bob AI: Modify the hero section to add new 'glassy cards'
 containing

---
 src/app/page.tsx                              |  4 +++
 src/app/styles/utilities.css                  | 12 ++++++---
 .../sections/hero/HeroBillboardGallery.tsx    | 25 +++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e36257a..3a09d9a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -90,6 +90,10 @@ export default function LandingPage() {
           imageAlt: "Growth chart",
         },
       ]}
+      stats={[
+        { value: "100% ROI", label: "in conversion" },
+        { value: "100+", label: "trusted clients" },
+      ]}
       mediaAnimation="slide-up"
     />
   </div>
diff --git a/src/app/styles/utilities.css b/src/app/styles/utilities.css
index 6cea115..ea8489b 100644
--- a/src/app/styles/utilities.css
+++ b/src/app/styles/utilities.css
@@ -19,11 +19,15 @@
     @apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
   } */
 
-  .tag-card {
-    @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
-  }
+.tag-card {
+  @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
+}
 
-  .inset-glow-border {
+.glassy-card {
+  @apply backdrop-blur-md bg-card/50 border border-card/60;
+}
+
+.inset-glow-border {
     @apply relative;
   }
 
diff --git a/src/components/sections/hero/HeroBillboardGallery.tsx b/src/components/sections/hero/HeroBillboardGallery.tsx
index 7adeb2e..69d281a 100644
--- a/src/components/sections/hero/HeroBillboardGallery.tsx
+++ b/src/components/sections/hero/HeroBillboardGallery.tsx
@@ -16,6 +16,11 @@ export interface MediaItem {
   videoAriaLabel?: string;
 }
 
+export interface StatItem {
+  value: string;
+  label: string;
+}
+
 type HeroBillboardGalleryBackgroundProps = Extract<
   HeroBackgroundVariantProps,
   | { variant: "plain" }
@@ -45,6 +50,7 @@ interface HeroBillboardGalleryProps {
   buttons?: ButtonConfig[];
   buttonAnimation?: ButtonAnimationType;
   mediaItems: MediaItem[];
+  stats?: StatItem[];
   mediaAnimation?: ButtonAnimationType;
   ariaLabel?: string;
   className?: string;
@@ -70,6 +76,7 @@ const HeroBillboardGallery = ({
   buttons = [],
   buttonAnimation = "slide-up",
   mediaItems,
+  stats = [],
   mediaAnimation = "none",
   ariaLabel = "Hero section",
   className = "",
@@ -187,6 +194,24 @@ const HeroBillboardGallery = ({
                   </div>
                 );
               })}
+              {stats.length > 0 && (
+                <div className="hidden md:block absolute inset-0 z-[60] pointer-events-none">
+                  <div className="relative w-full h-full">
+                    {stats[0] && (
+                      <div className="glassy-card absolute left-[15%] top-1/2 -translate-y-1/2 w-40 text-center p-4 rounded-theme-capped pointer-events-auto">
+                        <p className="text-3xl font-bold text-foreground">{stats[0].value}</p>
+                        <p className="text-sm text-foreground/80">{stats[0].label}</p>
+                      </div>
+                    )}
+                    {stats[1] && (
+                      <div className="glassy-card absolute right-[15%] top-1/2 -translate-y-1/2 w-40 text-center p-4 rounded-theme-capped pointer-events-auto">
+                        <p className="text-3xl font-bold text-foreground">{stats[1].value}</p>
+                        <p className="text-sm text-foreground/80">{stats[1].label}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>