From 4179bf07aee36e64d0b1ac4bc0aedf01a50b7512 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 21 Jun 2026 19:34:03 +0000
Subject: [PATCH] Bob AI: Added floating gradient background for antigravity
 aesthetic

---
 src/pages/HomePage.tsx                        |  4 ++-
 .../sections/AntigravityBackground.tsx        | 10 ++++++
 src/pages/HomePage/sections/Hero.tsx          | 31 ++++++++-----------
 3 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/HomePage/sections/AntigravityBackground.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 1622106..f26ed21 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -13,7 +13,8 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import PricingSection from './HomePage/sections/Pricing';
 import FaqSection from './HomePage/sections/Faq';
 
-const Galaxy = ({ glowIntensity = 0.5 }: any) => (
+
+import AntigravityBackgroundSection from './HomePage/sections/AntigravityBackground';const Galaxy = ({ glowIntensity = 0.5 }: any) => (
   <div className="absolute inset-0 overflow-hidden pointer-events-none flex items-center justify-center bg-background">
     <div className="absolute w-[80vw] h-[80vw] max-w-[800px] max-h-[800px] bg-foreground rounded-full blur-[120px] animate-spin-slow" style={{ opacity: glowIntensity * 0.2 }} />
     <div className="absolute w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-accent rounded-full blur-[100px] animate-spin-reverse" style={{ opacity: glowIntensity * 0.3 }} />
@@ -39,6 +40,7 @@ export default function HomePage(): React.JSX.Element {
       <NoiseGradientBackground position="fixed" />
 
       <HeroSection />
+      <AntigravityBackgroundSection />
 
       <div style={{ width: '100%', height: '400px', position: 'relative' }}>
         <Galaxy 
diff --git a/src/pages/HomePage/sections/AntigravityBackground.tsx b/src/pages/HomePage/sections/AntigravityBackground.tsx
new file mode 100644
index 0000000..1b66526
--- /dev/null
+++ b/src/pages/HomePage/sections/AntigravityBackground.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import FloatingGradientBackground from '@/components/ui/FloatingGradientBackground';
+
+export default function AntigravityBackgroundSection() {
+  return (
+    <div data-webild-section="antigravity-background" id="antigravity-background" style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', zIndex: -1, pointerEvents: 'none' }}>
+      <FloatingGradientBackground position="absolute" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index 2d69bfe..e688376 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -1,25 +1,20 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "hero" section.
+// Created by add_section_from_catalog (HeroBillboardFloatingCards).
 
 import React from 'react';
-import HeroBillboardCreator from "@/components/sections/hero/HeroBillboardCreator";
+import HeroBillboardFloatingCards from '@/components/sections/hero/HeroBillboardFloatingCards';
 
 export default function HeroSection(): React.JSX.Element {
   return (
-    <div id="hero" data-section="hero">
-            <HeroBillboardCreator
-              tag="AI-Driven Style"
-              title="The Future of Fashion"
-              titleHighlight="Curated by AI."
-              description="Elevate your personal style with our AI-powered curation. Immersive experiences for men and women's fashion collections defined by innovation."
-              primaryButton={{ text: "Explore Collections", href: "#" }}
-              note="Personalized for every silhouette"
-              videos={[
-                { videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-amara.mp4", name: "Men's Tech-Wear", followers: "5M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/glowing-red-warning-triangle-with-exclamation-mark-dark-wet-surface_84443-91213.jpg" },
-                { videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-chloe.mp4", name: "Women's Luxe-Flow", followers: "8M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/letter-o-made-green-grass-with-flowers-isolated-white_169016-57035.jpg" }
-              ]}
-              badgeText="Trend-setting"
-            />
-          </div>
+    <div data-webild-section="hero" id="hero">
+      <HeroBillboardFloatingCards
+        avatarsSrc={[]}
+        avatarsLabel="…"
+        title="…"
+        description="…"
+        primaryButton={{}}
+        secondaryButton={{}}
+        floatingCardsSrc="…"
+      />
+    </div>
   );
 }