Wire homepage images to Meshkee slots and publish the catalog.

The dashboard can refresh these keys from the live site.

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

src/app/meshkee/static-image-slots/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { STATIC_IMAGE_SLOT_CATALOG } from "@/lib/meshkee";
+
+export function GET() {
+  return NextResponse.json(
+    { slots: STATIC_IMAGE_SLOT_CATALOG },
+    {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Cache-Control": "public, max-age=60",
+      },
+    },
+  );
+}

src/app/page.tsx

@@ -11,18 +11,30 @@ import { SamsungCarousel } from "@/components/home/SamsungCarousel";
 import { AboutSanihome } from "@/components/home/AboutSanihome";
 import { BlogCarousel } from "@/components/home/BlogCarousel";
 import { Footer } from "@/components/home/Footer";
+import {
+  STATIC_IMAGE_KEYS,
+  firstImageForSlot,
+  getStaticImageSlots,
+  imagesForSlot,
+} from "@/lib/meshkee";
+
+export default async function Home() {
+  const slots = await getStaticImageSlots();
 
-export default function Home() {
   return (
     <>
       <TopBar />
       <Header />
       <main>
-        <HeroSlider />
-        <SpecialSaleCarousel />
+        <HeroSlider images={imagesForSlot(slots, STATIC_IMAGE_KEYS.slider)} />
+        <SpecialSaleCarousel
+          banner={firstImageForSlot(slots, STATIC_IMAGE_KEYS.bannerInSpecialSale)}
+        />
         <FeatureBar />
-        <FeaturedCategories />
-        <TwoBanners />
+        <FeaturedCategories
+          images={imagesForSlot(slots, STATIC_IMAGE_KEYS.categories)}
+        />
+        <TwoBanners images={imagesForSlot(slots, STATIC_IMAGE_KEYS.twoBannerRow)} />
         <TopSellingCarousel />
         <ThreeBanners />
         <SamsungCarousel />