From 1f81236d0aabcba23f24590c725930296bcaaa6b Mon Sep 17 00:00:00 2001
From: "amirhosein.ashourloo" <amirhosein.ashourloo@gmail.com>
Date: Mon, 17 Aug 2026 11:57:46 +0330
Subject: [PATCH] set static images

---
 src/app/page.tsx                     | 46 +++++++++++++++-----
 src/components/home/HeroSlider.tsx   | 53 +++++++++++++++++------
 src/components/home/ThreeBanners.tsx | 60 ++++++++++++++++++-------
 src/components/home/TwoBanners.tsx   | 65 ++++++++++++++++++++--------
 src/lib/meshkee.ts                   | 61 ++++++++++++--------------
 5 files changed, 192 insertions(+), 93 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8943a97..0fdf1bc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -18,33 +18,55 @@ import {
   getProducts,
   getBrandGroups,
   getStoreSpecials,
+  getStaticImageSlots,
+  imagesForSlot,
+  STATIC_IMAGE_KEYS,
 } from "@/lib/meshkee";
 
 export default async function Home() {
-  const [categoryGroups, categories, storeSpecials, productsResult, brandGroups, businessInfo] =
-    await Promise.all([
-      getCategoryGroups(),
-      getCategories(),
-      getStoreSpecials(),
-      getProducts({ pageSize: 12 }),
-      getBrandGroups(),
-      getBusinessInfo(),
-    ]);
+  const [
+    categoryGroups,
+    categories,
+    storeSpecials,
+    productsResult,
+    brandGroups,
+    businessInfo,
+    staticImageSlots,
+  ] = await Promise.all([
+    getCategoryGroups(),
+    getCategories(),
+    getStoreSpecials(),
+    getProducts({ pageSize: 12 }),
+    getBrandGroups(),
+    getBusinessInfo(),
+    getStaticImageSlots(),
+  ]);
 
   const specialSaleProducts = storeSpecials[0]?.items ?? [];
+  const twoBannerSlot = staticImageSlots.find((slot) => slot.key === STATIC_IMAGE_KEYS.twoBanner);
+  const threeBannerSlot = staticImageSlots.find(
+    (slot) => slot.key === STATIC_IMAGE_KEYS.threeBannerRow,
+  );
+  const heroImages = imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.homeHero);
 
   return (
     <>
       <TopBar />
       <Header categoryGroups={categoryGroups} categories={categories} />
       <main>
-        <HeroSlider />
+        <HeroSlider images={heroImages} />
         <SpecialSaleCarousel products={specialSaleProducts} />
         <FeatureBar />
         <FeaturedCategories categories={categories} />
-        <TwoBanners />
+        <TwoBanners
+          images={imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.twoBanner)}
+          aspectRatio={twoBannerSlot?.aspectRatio}
+        />
         <TopSellingCarousel products={productsResult.items} />
-        <ThreeBanners />
+        <ThreeBanners
+          images={imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.threeBannerRow)}
+          aspectRatio={threeBannerSlot?.aspectRatio}
+        />
         <BrandGroupCarousels brandGroups={brandGroups} />
         <AboutSanihome />
         <BlogCarousel />
diff --git a/src/components/home/HeroSlider.tsx b/src/components/home/HeroSlider.tsx
index 7c2cd68..31ff912 100644
--- a/src/components/home/HeroSlider.tsx
+++ b/src/components/home/HeroSlider.tsx
@@ -3,12 +3,29 @@
 import { useState } from "react";
 import { Placeholder } from "@/components/ui/Placeholder";
 import { sliderSlides } from "@/data/sample";
+import type { StaticImageWithUrl } from "@/lib/meshkee";
 
 const PEEK_OFFSET = 70;
 
-export function HeroSlider() {
+type Slide = { id: string; title: string; image: string; href?: string };
+
+export function HeroSlider({ images = [] }: { images?: StaticImageWithUrl[] }) {
+  const slides: Slide[] =
+    images.length > 0
+      ? images.map((image) => ({
+          id: image.id,
+          title: image.titleFa ?? image.titleEn ?? "",
+          image: image.url,
+          href: image.linkUrl ?? undefined,
+        }))
+      : sliderSlides.map((slide) => ({
+          id: String(slide.id),
+          title: slide.title,
+          image: slide.image,
+        }));
+
   const [active, setActive] = useState(0);
-  const len = sliderSlides.length;
+  const len = slides.length;
 
   const getDiff = (i: number) => {
     let diff = i - active;
@@ -21,11 +38,20 @@ export function HeroSlider() {
     <section className="overflow-x-clip bg-gradient-to-b from-red-light/30 to-background py-4 md:py-6">
       <div className="relative mx-auto w-full max-w-7xl px-4">
         <div className="relative h-[220px] sm:h-[280px] md:h-[340px] lg:h-[380px]">
-          {sliderSlides.map((slide, i) => {
+          {slides.map((slide, i) => {
             const diff = getDiff(i);
             const isCenter = diff === 0;
             const isVisible = Math.abs(diff) <= 1;
 
+            const media = (
+              <Placeholder
+                src={slide.image}
+                alt={slide.title}
+                width="100%"
+                className="h-full w-full rounded-none border-0"
+              />
+            );
+
             return (
               <div
                 key={slide.id}
@@ -41,12 +67,13 @@ export function HeroSlider() {
                   } ${isVisible ? "" : "opacity-0"}`}
                   style={{ transform: `translateX(${-diff * PEEK_OFFSET}%)` }}
                 >
-                  <Placeholder
-                    src={slide.image}
-                    alt={slide.title}
-                    width="100%"
-                    className="h-full w-full rounded-none border-0"
-                  />
+                  {slide.href ? (
+                    <a href={slide.href} className="block h-full w-full">
+                      {media}
+                    </a>
+                  ) : (
+                    media
+                  )}
                 </div>
               </div>
             );
@@ -56,16 +83,14 @@ export function HeroSlider() {
         <div className="mt-5 flex items-center justify-center gap-3">
           <button
             type="button"
-            onClick={() =>
-              setActive((prev) => (prev - 1 + sliderSlides.length) % sliderSlides.length)
-            }
+            onClick={() => setActive((prev) => (prev - 1 + len) % len)}
             className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-red transition-colors hover:border-red hover:bg-red-light"
             aria-label="اسلاید قبلی"
           >
             →
           </button>
           <div className="flex gap-2">
-            {sliderSlides.map((slide, i) => (
+            {slides.map((slide, i) => (
               <button
                 key={slide.id}
                 type="button"
@@ -79,7 +104,7 @@ export function HeroSlider() {
           </div>
           <button
             type="button"
-            onClick={() => setActive((prev) => (prev + 1) % sliderSlides.length)}
+            onClick={() => setActive((prev) => (prev + 1) % len)}
             className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-red transition-colors hover:border-red hover:bg-red-light"
             aria-label="اسلاید بعدی"
           >
diff --git a/src/components/home/ThreeBanners.tsx b/src/components/home/ThreeBanners.tsx
index 974cbe8..bff69e2 100644
--- a/src/components/home/ThreeBanners.tsx
+++ b/src/components/home/ThreeBanners.tsx
@@ -1,24 +1,54 @@
-const banners = [
-  { alt: "خانه‌ای تمیزتر، نفس‌هایی آسوده‌تر", image: "/images/banner3/6.jpg" },
-  { alt: "خنکای دلنشین، در تمام لحظه‌ها", image: "/images/banner3/7.jpg" },
-  { alt: "هر تصویر، یک تجربه تازه", image: "/images/banner3/8.jpg" },
+import type { StaticImageWithUrl } from "@/lib/meshkee";
+
+const fallbackBanners = [
+  { src: "/images/banner3/6.jpg", alt: "خانه‌ای تمیزتر، نفس‌هایی آسوده‌تر" },
+  { src: "/images/banner3/7.jpg", alt: "خنکای دلنشین، در تمام لحظه‌ها" },
+  { src: "/images/banner3/8.jpg", alt: "هر تصویر، یک تجربه تازه" },
 ];
 
-export function ThreeBanners() {
+export function ThreeBanners({
+  images = [],
+  aspectRatio,
+}: {
+  images?: StaticImageWithUrl[];
+  aspectRatio?: string;
+}) {
+  const style = aspectRatio ? { aspectRatio: aspectRatio.replace(":", " / ") } : undefined;
+
   return (
     <section className="border-y border-border bg-background py-10 md:py-14">
       <div className="mx-auto max-w-7xl px-4">
         <div className="grid gap-4 md:grid-cols-3">
-          {banners.map((banner) => (
-            <a
-              key={banner.image}
-              href="#"
-              className="group overflow-hidden rounded-xl border border-border bg-surface transition-all hover:border-red hover:shadow-md"
-            >
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={banner.image} alt={banner.alt} className="h-auto w-full" />
-            </a>
-          ))}
+          {images.length > 0
+            ? images.map((image) => {
+                const frame = (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={image.url}
+                    alt={image.titleFa ?? image.titleEn ?? ""}
+                    style={style}
+                    className="h-auto w-full object-cover"
+                  />
+                );
+                return (
+                  <div
+                    key={image.id}
+                    className="group overflow-hidden rounded-xl border border-border bg-surface transition-all hover:border-red hover:shadow-md"
+                  >
+                    {image.linkUrl ? <a href={image.linkUrl}>{frame}</a> : frame}
+                  </div>
+                );
+              })
+            : fallbackBanners.map((banner) => (
+                <a
+                  key={banner.src}
+                  href="#"
+                  className="group overflow-hidden rounded-xl border border-border bg-surface transition-all hover:border-red hover:shadow-md"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={banner.src} alt={banner.alt} className="h-auto w-full" />
+                </a>
+              ))}
         </div>
       </div>
     </section>
diff --git a/src/components/home/TwoBanners.tsx b/src/components/home/TwoBanners.tsx
index d61eb2f..f87c4d1 100644
--- a/src/components/home/TwoBanners.tsx
+++ b/src/components/home/TwoBanners.tsx
@@ -1,26 +1,53 @@
-export function TwoBanners() {
+import type { StaticImageWithUrl } from "@/lib/meshkee";
+
+const fallbackBanners = [
+  { src: "/images/banner/5.jpg", alt: "وقتی که انرژی لازمی" },
+  { src: "/images/banner/4.jpg", alt: "قدرت بخار، درخشش بی‌نقص" },
+];
+
+export function TwoBanners({
+  images = [],
+  aspectRatio,
+}: {
+  images?: StaticImageWithUrl[];
+  aspectRatio?: string;
+}) {
+  const style = aspectRatio ? { aspectRatio: aspectRatio.replace(":", " / ") } : undefined;
+
   return (
     <section className="py-10 md:py-14">
       <div className="mx-auto max-w-7xl px-4">
         <div className="grid gap-4 md:grid-cols-2">
-          <a
-            href="#"
-            className="group overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/images/banner/5.jpg" alt="وقتی که انرژی لازمی" className="h-auto w-full" />
-          </a>
-          <a
-            href="#"
-            className="group overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src="/images/banner/4.jpg"
-              alt="قدرت بخار، درخشش بی‌نقص"
-              className="h-auto w-full"
-            />
-          </a>
+          {images.length > 0
+            ? images.map((image) => {
+                const frame = (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={image.url}
+                    alt={image.titleFa ?? image.titleEn ?? ""}
+                    style={style}
+                    className="h-auto w-full object-cover"
+                  />
+                );
+                return (
+                  <div
+                    key={image.id}
+                    className="group overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
+                  >
+                    {image.linkUrl ? <a href={image.linkUrl}>{frame}</a> : frame}
+                  </div>
+                );
+              })
+            : fallbackBanners.map((banner) => (
+                <a
+                  key={banner.src}
+                  href="#"
+                  className="group overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={banner.src} alt={banner.alt} className="h-auto w-full" />
+                </a>
+              ))}
         </div>
       </div>
     </section>
diff --git a/src/lib/meshkee.ts b/src/lib/meshkee.ts
index 0e81e6c..0fa5026 100644
--- a/src/lib/meshkee.ts
+++ b/src/lib/meshkee.ts
@@ -202,12 +202,13 @@ export async function getSliderSlides(): Promise<Slide[]> {
 }
 
 // Admin-managed static/marketing images (slider photos, promo banners) for
-// fixed homepage slots. Not currently wired into any page — the slot keys
-// the live API returns (e.g. "home-hero") don't match STATIC_IMAGE_KEYS yet.
+// fixed homepage slots, managed by the client through the Meshkee admin panel.
 export type StaticImage = {
   id: string;
   url?: string | null;
-  title?: string | null;
+  titleFa?: string | null;
+  titleEn?: string | null;
+  subtext?: string | null;
   linkUrl?: string | null;
   width?: number | null;
   height?: number | null;
@@ -219,62 +220,56 @@ export type StaticImageWithUrl = StaticImage & { url: string };
 export type StaticImageSlot = {
   id: string;
   key: string;
+  pageKey?: string;
   kind: "single" | "list";
   label?: string;
   aspectRatio?: string;
   recommendedWidth?: number;
+  itemCount?: number | null;
   sortOrder?: number;
   images?: StaticImage[];
 };
 
 export const STATIC_IMAGE_KEYS = {
-  slider: "slider",
-  bannerInSpecialSale: "banner-in-special-sale",
-  categories: "categories",
-  twoBannerRow: "two-banner-row",
+  homeHero: "home-hero",
+  twoBanner: "two-banner",
+  threeBannerRow: "three-banner-row",
 } as const;
 
 export const STATIC_IMAGE_SLOT_CATALOG = [
   {
-    key: STATIC_IMAGE_KEYS.slider,
-    label: "Homepage slider",
+    key: STATIC_IMAGE_KEYS.homeHero,
+    label: "Homepage hero slider",
     kind: "list" as const,
     pageKey: "home",
-    aspectRatio: "16:9",
+    aspectRatio: "21:9",
     itemCount: null,
-    recommendedWidth: 1440,
+    recommendedWidth: 1920,
   },
   {
-    key: STATIC_IMAGE_KEYS.bannerInSpecialSale,
-    label: "Banner in special sale",
-    kind: "single" as const,
-    pageKey: "home",
-    aspectRatio: "12:19",
-    itemCount: 1,
-    recommendedWidth: 480,
-  },
-  {
-    key: STATIC_IMAGE_KEYS.categories,
-    label: "Featured category images",
-    kind: "list" as const,
-    pageKey: "home",
-    aspectRatio: "1:1",
-    itemCount: null,
-    recommendedWidth: 400,
-  },
-  {
-    key: STATIC_IMAGE_KEYS.twoBannerRow,
+    key: STATIC_IMAGE_KEYS.twoBanner,
     label: "Two banner row",
     kind: "list" as const,
     pageKey: "home",
-    aspectRatio: "16:5",
+    aspectRatio: "12:5",
     itemCount: 2,
-    recommendedWidth: 1440,
+    recommendedWidth: 1200,
+  },
+  {
+    key: STATIC_IMAGE_KEYS.threeBannerRow,
+    label: "Three banner row",
+    kind: "list" as const,
+    pageKey: "home",
+    aspectRatio: "12:5",
+    itemCount: 3,
+    recommendedWidth: 1200,
   },
 ];
 
 export async function getStaticImageSlots(): Promise<StaticImageSlot[]> {
-  const res = await apiGet<{ items: StaticImageSlot[] }>(`/tenants/${DOMAIN}/website/static-images`);
+  const res = await apiGet<{ items: StaticImageSlot[] }>(`/tenants/${DOMAIN}/website/static-images`, {
+    pageKey: "home",
+  });
   return res?.items ?? [];
 }