From 76c46fb7ae8f0415c86e9ae81d8236964a989609 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 8 Jun 2026 16:09:01 +0000
Subject: [PATCH] Bob AI: Add floating KPI cards around hero image

---
 src/pages/HomePage/sections/Hero.tsx | 94 ++++++++++++++++++++++++----
 1 file changed, 82 insertions(+), 12 deletions(-)

diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index d7f2a31..c400608 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -1,19 +1,89 @@
-// Created by add_section_from_catalog (HeroBillboard).
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import AvatarGroup from "@/components/ui/AvatarGroup";
 
-import React from 'react';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+const primaryButton = {
+  href: "#pricing",
+  text: "Start Your Transformation"
+};
+const secondaryButton = {
+  href: "#features",
+  text: "Explore Programs"
+};
 
-export default function HeroSection(): React.JSX.Element {
+type HeroBillboardProps = {
+  tag?: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  avatarsSrc?: string[];
+  avatarsLabel?: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30">
+      <HeroBackgroundSlot />
+      <div className="flex flex-col gap-12 md:gap-15 w-content-width mx-auto">
+        <div className="flex flex-col items-center gap-3 text-center">
+          {undefined && undefined.length > 0 ? (
+            <AvatarGroup className="mb-1" />
+          ) : "Unleash Your Potential" ? (
+            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+              <p>{"Unleash Your Potential"}</p>
+            </div>
+          ) : null}
+
+          <TextAnimation
+            text={"Forge Your Best Self"}
+            variant="slide-up"
+            gradientText={true}
+            tag="h1"
+            className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"Transform your body and mind with personalized training, expert guidance, and a community that empowers you every step of the way. Start your journey to strength, health, and confidence."}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
+          />
+
+          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
+          </div>
+        </div>
+
+        <div className="relative w-full">
+          <ScrollReveal variant="fade" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
+            <ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/full-length-portrait-muscular-adult-sportswoman_171337-8704.jpg"} className="aspect-4/5 md:aspect-video" />
+          </ScrollReveal>
+          <div className="absolute top-12 -left-4 md:-left-10 p-4 md:p-6 card rounded-xl shadow-xl z-10 border border-border/50 backdrop-blur-sm bg-card/90 animate-bounce" style={{ animationDuration: '3s' }}>
+            <p className="text-3xl md:text-4xl font-bold text-primary-cta">500+</p>
+            <p className="text-sm md:text-base text-muted-foreground font-medium mt-1">Active Members</p>
+          </div>
+          <div className="absolute bottom-12 -right-4 md:-right-10 p-4 md:p-6 card rounded-xl shadow-xl z-10 border border-border/50 backdrop-blur-sm bg-card/90 animate-bounce" style={{ animationDuration: '4s', animationDelay: '1s' }}>
+            <p className="text-3xl md:text-4xl font-bold text-primary-cta">98%</p>
+            <p className="text-sm md:text-base text-muted-foreground font-medium mt-1">Success Rate</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
   return (
     <div data-webild-section="hero" id="hero">
-      <HeroBillboard
-        description="Transform your body and mind with personalized training, expert guidance, and a community that empowers you every step of the way. Start your journey to strength, health, and confidence."
-        primaryButton={{"href":"#pricing","text":"Start Your Transformation"}}
-        tag="Unleash Your Potential"
-        title="Forge Your Best Self"
-        secondaryButton={{"href":"#features","text":"Explore Programs"}}
-        imageSrc="http://img.b2bpic.net/free-photo/full-length-portrait-muscular-adult-sportswoman_171337-8704.jpg"
-      />
+      <HeroInline />
     </div>
   );
 }
-- 
2.49.1