Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -11,9 +11,13 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 import { Shield, Sparkles, Zap } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [search, setSearch] = useState("");
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -88,6 +92,20 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="catalog" data-section="catalog">
+      <ProductCatalog
+        layout="section"
+        searchValue={search}
+        onSearchChange={setSearch}
+        products={Array.from({ length: 12 }, (_, i) => ({
+            id: `p-${i}`,
+            name: `Species Item ${i + 1}`,
+            price: "$10.00",            rating: 4.5,
+            imageSrc: "http://img.b2bpic.net/free-photo/3d-render-globe-abstract_1048-13810.jpg"
+        }))}
+      />
+  </div>
+
   <div id="about" data-section="about">
       <TextAbout
       useInvertedBackground={true}
@@ -207,4 +225,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}