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={{