diff --git a/public/images/hero/6wrdcrSa7g.jpg b/public/images/hero/6wrdcrSa7g.jpg
new file mode 100644
index 0000000..69eacc7
Binary files /dev/null and b/public/images/hero/6wrdcrSa7g.jpg differ
diff --git a/public/images/hero/9tmu77oId5.jpg b/public/images/hero/9tmu77oId5.jpg
new file mode 100644
index 0000000..dba7cd0
Binary files /dev/null and b/public/images/hero/9tmu77oId5.jpg differ
diff --git a/public/images/hero/uXfI5MfsWm.jpg b/public/images/hero/uXfI5MfsWm.jpg
new file mode 100644
index 0000000..015b680
Binary files /dev/null and b/public/images/hero/uXfI5MfsWm.jpg differ
diff --git a/src/app/meshkee/static-image-slots/route.ts b/src/app/meshkee/static-image-slots/route.ts
new file mode 100644
index 0000000..a590b47
--- /dev/null
+++ b/src/app/meshkee/static-image-slots/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+
+// Slot catalog for this website, read by the business dashboard's "sync"
+// button (GET https://<domain>/meshkee/static-image-slots) so it knows
+// which static-image keys this site expects. This only *describes* the
+// slots — images themselves are still uploaded/managed from the dashboard.
+export async function GET() {
+  return NextResponse.json({
+    slots: [
+      {
+        key: "slider",
+        label: "اسلایدر اصلی صفحه اول",
+        kind: "list",
+        pageKey: "home",
+        aspectRatio: "32:9",
+        itemCount: null,
+        recommendedWidth: 1600,
+      },
+      {
+        key: "two-banner-row",
+        label: "دو بنر کنار هم",
+        kind: "list",
+        pageKey: "home",
+        aspectRatio: "16:8",
+        itemCount: 2,
+        recommendedWidth: 770,
+      },
+      {
+        key: "one-banner-row",
+        label: "بنر تمام عرض",
+        kind: "single",
+        pageKey: "home",
+        aspectRatio: "16:4",
+        itemCount: 1,
+        recommendedWidth: 1600,
+      },
+      {
+        key: "aboutus-row",
+        label: "تصویر بخش درباره ما",
+        kind: "single",
+        pageKey: "home",
+        aspectRatio: "9:8",
+        itemCount: 1,
+        recommendedWidth: 720,
+      },
+    ],
+  });
+}
diff --git a/src/components/AboutUs.tsx b/src/components/AboutUs.tsx
index 6825d6d..574f148 100644
--- a/src/components/AboutUs.tsx
+++ b/src/components/AboutUs.tsx
@@ -1,4 +1,5 @@
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 import { ShieldIcon, TagIcon, TruckIcon } from "./icons";
 
 const points = [
@@ -21,7 +22,8 @@ const points = [
 
 export default function AboutUs({ slot }: { slot?: StaticImageSlot }) {
   const img = slot?.images[0];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
   const src = img?.url ?? "/images/about/about.svg";
 
   return (
diff --git a/src/components/FullBanner.tsx b/src/components/FullBanner.tsx
index ad8a6dc..17b2988 100644
--- a/src/components/FullBanner.tsx
+++ b/src/components/FullBanner.tsx
@@ -1,8 +1,10 @@
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 
 export default function FullBanner({ slot }: { slot?: StaticImageSlot }) {
   const img = slot?.images[0];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
 
   const src = img?.url ?? "/images/banners/full-banner.svg";
   const href = img?.linkUrl ?? "#";
diff --git a/src/components/HeroSlider.tsx b/src/components/HeroSlider.tsx
index bd8c4cf..939d1b0 100644
--- a/src/components/HeroSlider.tsx
+++ b/src/components/HeroSlider.tsx
@@ -5,6 +5,7 @@ import { Autoplay, Pagination } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 
 const fallbackSlides = [
   "/images/hero/slide-1.svg",
@@ -14,7 +15,8 @@ const fallbackSlides = [
 
 export default function HeroSlider({ slot }: { slot?: StaticImageSlot }) {
   const slides = slot?.images ?? [];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
 
   return (
     <section className="boxed pt-4 md:pt-6">
diff --git a/src/components/TwoBanners.tsx b/src/components/TwoBanners.tsx
index db3cde1..44c18e3 100644
--- a/src/components/TwoBanners.tsx
+++ b/src/components/TwoBanners.tsx
@@ -1,4 +1,5 @@
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 
 const fallbackBanners = [
   { image: "/images/banners/banner-1.svg", href: "#" },
@@ -7,7 +8,8 @@ const fallbackBanners = [
 
 export default function TwoBanners({ slot }: { slot?: StaticImageSlot }) {
   const images = slot?.images ?? [];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
 
   const banners =
     images.length > 0
diff --git a/src/lib/format.ts b/src/lib/format.ts
index ad40b38..2271e9a 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -1,3 +1,10 @@
 export function formatToman(value: number): string {
   return `${value.toLocaleString("en-US")} تومان`;
 }
+
+// The static-image-slot API documents aspectRatio as "16:9", but CSS's
+// aspect-ratio property needs a slash ("16/9"), not a colon.
+export function toCssAspectRatio(value: string | number | null | undefined): string | undefined {
+  if (value == null) return undefined;
+  return String(value).replace(":", "/");
+}