Wire homepage banners to Meshkee static-image slots.

Publish a slot catalog so the dashboard can import keys, and keep local placeholders when a slot is empty.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/page.tsx

@@ -6,18 +6,46 @@ import { Categories } from "@/components/Categories";
 import { HeroSlider } from "@/components/HeroSlider";
 import { SpecialSale } from "@/components/SpecialSale";
 import { TopSelling } from "@/components/TopSelling";
+import {
+  STATIC_IMAGE_KEYS,
+  firstImageForSlot,
+  getStaticImageSlots,
+  imagesForSlot,
+  slotByKey,
+} from "@/lib/static-images";
+
+export default async function Home() {
+  const slots = await getStaticImageSlots("home");
+  const sliderSlot = slotByKey(slots, STATIC_IMAGE_KEYS.slider);
+  const sideSlot = slotByKey(slots, STATIC_IMAGE_KEYS.bannersBelowSlider);
+  const fourSlot = slotByKey(slots, STATIC_IMAGE_KEYS.fourBannerSection);
+  const threeSlot = slotByKey(slots, STATIC_IMAGE_KEYS.threeBannerRow);
+  const aboutSlot = slotByKey(slots, STATIC_IMAGE_KEYS.aboutUsImage);
 
-export default function Home() {
   return (
     <>
-      <HeroSlider />
+      <HeroSlider
+        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.slider)}
+        aspectRatio={sliderSlot?.aspectRatio}
+        sideImages={imagesForSlot(slots, STATIC_IMAGE_KEYS.bannersBelowSlider)}
+        sideAspectRatio={sideSlot?.aspectRatio}
+      />
       <SpecialSale />
-      <Categories />
-      <BannerGrid4 />
+      <Categories images={imagesForSlot(slots, STATIC_IMAGE_KEYS.categories)} />
+      <BannerGrid4
+        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.fourBannerSection)}
+        aspectRatio={fourSlot?.aspectRatio}
+      />
       <TopSelling />
-      <BannerRow3 />
+      <BannerRow3
+        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.threeBannerRow)}
+        aspectRatio={threeSlot?.aspectRatio}
+      />
       <Brands />
-      <AboutUs />
+      <AboutUs
+        image={firstImageForSlot(slots, STATIC_IMAGE_KEYS.aboutUsImage)}
+        aspectRatio={aboutSlot?.aspectRatio}
+      />
       <BlogCarousel />
     </>
   );