Style: make hero section background inverted

src/app/page.tsx

@@ -16,6 +16,7 @@ import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
 import HeroLogo from "@/components/sections/hero/HeroLogo";
 import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
 
 export default function LandingPage() {
   return (
@@ -48,10 +49,10 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
-          title="ANTON"
-          description="LOVABLE- SUCKS"
-          tag="Sample tag"
+        <HeroBillboardScroll
+          title="Revolutionize Your Brain"
+          description="Discover the future of cognitive enhancement with Brain Freedom's AI-powered neurotech solutions. Enhance memory, focus, and productivity."
+          tag="Neurotech"
           tagIcon={MessageCircle}
           buttons={[
               {
@@ -63,15 +64,12 @@ export default function LandingPage() {
                 "href": "#"
               }
             ]}
-          avatars={[]}
-          avatarText="Sample avatarText"
           imageSrc="https://images.unsplash.com/photo-1526779259212-939e64788e3c?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8ZnJlZSUyMGltYWdlc3xlbnwwfHwwfHx8MA%3D%3D"
           imageAlt=""
           videoAriaLabel="Hero video"
           ariaLabel="Hero section"
-          imagePosition="right"
-          fixedMediaHeight={true}
-        />
+        
+          className="bg-black text-white"/>
       </div>
 
       <div id="problem" data-section="problem">