Merge version_2 into main

Merge version_2 into main

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>

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;
   }
 

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>