set static images

src/app/page.tsx

@@ -18,33 +18,55 @@ import {
   getProducts,
   getBrandGroups,
   getStoreSpecials,
+  getStaticImageSlots,
+  imagesForSlot,
+  STATIC_IMAGE_KEYS,
 } 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 [
+    categoryGroups,
+    categories,
+    storeSpecials,
+    productsResult,
+    brandGroups,
+    businessInfo,
+    staticImageSlots,
+  ] = await Promise.all([
+    getCategoryGroups(),
+    getCategories(),
+    getStoreSpecials(),
+    getProducts({ pageSize: 12 }),
+    getBrandGroups(),
+    getBusinessInfo(),
+    getStaticImageSlots(),
+  ]);
 
   const specialSaleProducts = storeSpecials[0]?.items ?? [];
+  const twoBannerSlot = staticImageSlots.find((slot) => slot.key === STATIC_IMAGE_KEYS.twoBanner);
+  const threeBannerSlot = staticImageSlots.find(
+    (slot) => slot.key === STATIC_IMAGE_KEYS.threeBannerRow,
+  );
+  const heroImages = imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.homeHero);
 
   return (
     <>
       <TopBar />
       <Header categoryGroups={categoryGroups} categories={categories} />
       <main>
-        <HeroSlider />
+        <HeroSlider images={heroImages} />
         <SpecialSaleCarousel products={specialSaleProducts} />
         <FeatureBar />
         <FeaturedCategories categories={categories} />
-        <TwoBanners />
+        <TwoBanners
+          images={imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.twoBanner)}
+          aspectRatio={twoBannerSlot?.aspectRatio}
+        />
         <TopSellingCarousel products={productsResult.items} />
-        <ThreeBanners />
+        <ThreeBanners
+          images={imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.threeBannerRow)}
+          aspectRatio={threeBannerSlot?.aspectRatio}
+        />
         <BrandGroupCarousels brandGroups={brandGroups} />
         <AboutSanihome />
         <BlogCarousel />