slot

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,
+      },
+    ],
+  });
+}

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 (

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 ?? "#";

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">

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

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(":", "/");
+}