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>

components/AboutUs.tsx

@@ -1,8 +1,17 @@
 import Image from "next/image";
 import Link from "next/link";
+import { SlotImage } from "@/components/SlotImage";
 import { SITE } from "@/lib/site";
+import type { StaticImageWithUrl } from "@/lib/static-images";
+import { slotAlt, slotAspectStyle } from "@/lib/static-images";
 
-export function AboutUs() {
+export function AboutUs({
+  image,
+  aspectRatio,
+}: {
+  image?: StaticImageWithUrl;
+  aspectRatio?: string;
+}) {
   return (
     <section id="about" className="container-site mt-14">
       <div className="grid md:grid-cols-2 gap-8 items-center rounded-2xl bg-zinc-50 p-5 md:p-8">
@@ -14,15 +23,21 @@ export function AboutUs() {
             مشاهده بیشتر
           </Link>
         </div>
-        <div className="relative flex aspect-[16/10] items-center justify-center rounded-2xl bg-white p-8 md:p-12">
-          <Image
-            src="/images/logo/logo.png"
-            alt={SITE.nameFa}
-            width={360}
-            height={120}
-            className="h-auto w-full max-w-sm object-contain"
-          />
-        </div>
+        {image ? (
+          <div className="relative overflow-hidden rounded-2xl bg-white" style={slotAspectStyle(aspectRatio, "8:5")}>
+            <SlotImage image={image} fill alt={slotAlt(image, SITE.nameFa)} />
+          </div>
+        ) : (
+          <div className="relative flex aspect-[16/10] items-center justify-center rounded-2xl bg-white p-8 md:p-12">
+            <Image
+              src="/images/logo/logo.png"
+              alt={SITE.nameFa}
+              width={360}
+              height={120}
+              className="h-auto w-full max-w-sm object-contain"
+            />
+          </div>
+        )}
       </div>
     </section>
   );