create banner

src/app/page.tsx

@@ -7,29 +7,49 @@ import { SpecialSaleCarousel } from "@/components/home/SpecialSaleCarousel";
 import { TwoBanners } from "@/components/home/TwoBanners";
 import { TopSellingCarousel } from "@/components/home/TopSellingCarousel";
 import { ThreeBanners } from "@/components/home/ThreeBanners";
-import { SamsungCarousel } from "@/components/home/SamsungCarousel";
+import { BrandGroupCarousels } from "@/components/home/BrandGroupCarousels";
 import { AboutSanihome } from "@/components/home/AboutSanihome";
 import { BlogCarousel } from "@/components/home/BlogCarousel";
 import { Footer } from "@/components/home/Footer";
+import {
+  getBusinessInfo,
+  getCategories,
+  getCategoryGroups,
+  getProducts,
+  getBrandGroups,
+  getStoreSpecials,
+} from "@/lib/meshkee";
+
+export default async function Home() {
+  const [categoryGroups, categories, storeSpecials, productsResult, brandGroups, businessInfo] =
+    await Promise.all([
+      getCategoryGroups(),
+      getCategories(),
+      getStoreSpecials(),
+      getProducts({ pageSize: 12 }),
+      getBrandGroups(),
+      getBusinessInfo(),
+    ]);
+
+  const specialSaleProducts = storeSpecials[0]?.items ?? [];
 
-export default function Home() {
   return (
     <>
       <TopBar />
-      <Header />
+      <Header categoryGroups={categoryGroups} categories={categories} />
       <main>
         <HeroSlider />
-        <SpecialSaleCarousel />
+        <SpecialSaleCarousel products={specialSaleProducts} />
         <FeatureBar />
-        <FeaturedCategories />
+        <FeaturedCategories categories={categories} />
         <TwoBanners />
-        <TopSellingCarousel />
+        <TopSellingCarousel products={productsResult.items} />
         <ThreeBanners />
-        <SamsungCarousel />
+        <BrandGroupCarousels brandGroups={brandGroups} />
         <AboutSanihome />
         <BlogCarousel />
       </main>
-      <Footer />
+      <Footer businessInfo={businessInfo} categories={categories} />
     </>
   );
 }