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/aboutus/page.tsx

@@ -1,27 +1,41 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 import { PageHero } from "@/components/PageHero";
+import { SlotImage } from "@/components/SlotImage";
 import { SITE } from "@/lib/site";
+import {
+  STATIC_IMAGE_KEYS,
+  firstImageForSlot,
+  getStaticImageSlot,
+  slotAlt,
+} from "@/lib/static-images";
 
 export const metadata: Metadata = {
   title: `درباره ما | ${SITE.nameFa}`,
   description: SITE.about,
 };
 
-export default function AboutPage() {
+export default async function AboutPage() {
+  const slot = await getStaticImageSlot(STATIC_IMAGE_KEYS.aboutUsImage);
+  const image = slot ? firstImageForSlot([slot], STATIC_IMAGE_KEYS.aboutUsImage) : undefined;
+
   return (
     <>
       <PageHero title="درباره ما" english="About Us" />
       <section className="container-site py-10 md:py-14">
         <div className="relative overflow-hidden rounded-2xl min-h-[280px] md:min-h-[360px]">
-          <Image
-            src="/images/pages/about-bg.webp"
-            alt=""
-            fill
-            priority
-            sizes="1200px"
-            className="object-cover object-center"
-          />
+          {image ? (
+            <SlotImage image={image} fill alt={slotAlt(image, SITE.nameFa)} />
+          ) : (
+            <Image
+              src="/images/pages/about-bg.webp"
+              alt={SITE.nameFa}
+              fill
+              priority
+              sizes="1200px"
+              className="object-cover object-center"
+            />
+          )}
           <div
             className="pointer-events-none absolute inset-0"
             style={{

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

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

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 />
     </>
   );