src/app/page.tsx

@@ -7,7 +7,7 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
@@ -41,7 +41,7 @@ export default function LandingPage() {
         </div>
 
         <div id="home" data-section="home">
-          <HeroBrand
+          <HeroSplit
             background={{ variant: "plain" }}
             title="Quality Staples for Your Business"
             description="Sam's Trading delivers premium rice, sugar, and cooking oil across Lebanon and Iraq. Trusted quality for every home and business."
@@ -49,20 +49,21 @@ export default function LandingPage() {
               { text: "Explore Products", href: "#products" },
               { text: "Contact Us", href: "#contact" }
             ]}
-            mediaSrc="http://img.b2bpic.net/free-photo/spoons-bag-with-rice_23-2147897533.jpg"
+            imageSrc="http://img.b2bpic.net/free-photo/spoons-bag-with-rice_23-2147897533.jpg"
+            mediaAnimation="slide-up"
           />
         </div>
 
         <div id="about" data-section="about">
           <AboutMetric
-            useInvertedBackground={false}
             title="Serving Across Borders"
             metrics={[
-              { icon: MapPin, label: "Regional Presence", value: "2 Countries" },
-              { icon: Truck, label: "Supply Capacity", value: "10000+ Tons" },
-              { icon: Award, label: "Customer Satisfaction", value: "99%" }
+              { id: "m1", icon: MapPin, label: "Regional Presence", value: "2 Countries" },
+              { id: "m2", icon: Truck, label: "Supply Capacity", value: "10000+ Tons" },
+              { id: "m3", icon: Award, label: "Customer Satisfaction", value: "99%" }
             ]}
             metricsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>