From 14ca6b39eacdf31fbbce12601ea72788f6cb3ef0 Mon Sep 17 00:00:00 2001
From: Alireza Hassani <alirezahassani@Meshkees-Mac-mini.local>
Date: Tue, 18 Aug 2026 14:24:40 +0330
Subject: [PATCH] Update static-image slot sizes for the wider layout.

Recommended widths now match the 1680px container, and the homepage slider uses 16:9.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/About.tsx              |  4 ++--
 src/components/Banners.tsx            |  8 ++++----
 src/components/FeaturedCategories.tsx |  4 ++--
 src/components/Hero.tsx               | 10 +++++-----
 src/components/ProductCarousel.tsx    |  4 ++--
 src/lib/static-images.ts              | 16 ++++++++--------
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/About.tsx b/src/components/About.tsx
index 46c95e8..11a6791 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -42,8 +42,8 @@ export function About({ slot }: { slot?: StaticImageSlot }) {
               fallbackSrc={about.image}
               fallbackAlt={about.title}
               aspectRatio={slot?.aspectRatio}
-              width={560}
-              height={400}
+              width={760}
+              height={543}
               rounded="rounded-[28px]"
               fill
               className="h-full min-h-[280px] object-cover"
diff --git a/src/components/Banners.tsx b/src/components/Banners.tsx
index f8b1145..2ff448f 100644
--- a/src/components/Banners.tsx
+++ b/src/components/Banners.tsx
@@ -17,8 +17,8 @@ export function DualBanners({ slot }: { slot?: StaticImageSlot }) {
                 fallbackSrc={fallback.image}
                 fallbackAlt={fallback.title}
                 aspectRatio={slot?.aspectRatio}
-                width={640}
-                height={280}
+                width={800}
+                height={350}
                 rounded="rounded-3xl"
                 fallbackHref="/special-sale"
               />
@@ -45,8 +45,8 @@ export function TripleBanners({ slot }: { slot?: StaticImageSlot }) {
                 fallbackSrc={fallback.image}
                 fallbackAlt={fallback.title}
                 aspectRatio={slot?.aspectRatio}
-                width={420}
-                height={240}
+                width={528}
+                height={302}
                 rounded="rounded-3xl"
               />
             </div>
diff --git a/src/components/FeaturedCategories.tsx b/src/components/FeaturedCategories.tsx
index 66dd6cc..6d9d2cd 100644
--- a/src/components/FeaturedCategories.tsx
+++ b/src/components/FeaturedCategories.tsx
@@ -54,8 +54,8 @@ export function FeaturedCategories({ slot }: Props) {
               fallbackSrc={item.fallbackSrc}
               fallbackAlt={item.title}
               aspectRatio={slot?.aspectRatio ?? "1:1"}
-              width={160}
-              height={160}
+              width={168}
+              height={168}
               rounded="rounded-2xl"
               unlinked
             />
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 332c55b..730a9f8 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -57,12 +57,12 @@ export function Hero({ slider, beside }: Props) {
       image={current.image}
       fallbackSrc={current.fallbackSrc}
       fallbackAlt={current.alt}
-      width={960}
-      height={420}
+      width={1072}
+      height={603}
       rounded="rounded-3xl"
       fill
       unlinked
-      className="aspect-[960/420] h-full w-full lg:aspect-auto"
+      className="aspect-[16/9] h-full w-full lg:aspect-auto"
     />
   ) : null;
 
@@ -121,8 +121,8 @@ export function Hero({ slider, beside }: Props) {
                   fallbackSrc={fallback.image}
                   fallbackAlt={fallback.title}
                   aspectRatio={beside?.aspectRatio}
-                  width={360}
-                  height={200}
+                  width={528}
+                  height={293}
                   rounded="rounded-3xl"
                   fill
                   className="h-full w-full"
diff --git a/src/components/ProductCarousel.tsx b/src/components/ProductCarousel.tsx
index 4b1a00a..2c7379f 100644
--- a/src/components/ProductCarousel.tsx
+++ b/src/components/ProductCarousel.tsx
@@ -55,8 +55,8 @@ export function ProductCarousel({
               fallbackSrc="/images/sale-banner.png"
               fallbackAlt="فروش ویژه"
               aspectRatio={bannerSlot?.aspectRatio}
-              width={240}
-              height={400}
+              width={300}
+              height={500}
               rounded="rounded-3xl"
               fill
               className="h-full w-full"
diff --git a/src/lib/static-images.ts b/src/lib/static-images.ts
index 64ba562..943e476 100644
--- a/src/lib/static-images.ts
+++ b/src/lib/static-images.ts
@@ -19,9 +19,9 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     label: "Homepage slider",
     kind: "list" as const,
     pageKey: "home",
-    aspectRatio: "16:7",
+    aspectRatio: "16:9",
     itemCount: null,
-    recommendedWidth: 960,
+    recommendedWidth: 1072,
   },
   {
     key: HOME_SLOT_KEYS.besideSlider,
@@ -30,7 +30,7 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     pageKey: "home",
     aspectRatio: "9:5",
     itemCount: 2,
-    recommendedWidth: 360,
+    recommendedWidth: 528,
   },
   {
     key: HOME_SLOT_KEYS.categories,
@@ -39,7 +39,7 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     pageKey: "home",
     aspectRatio: "1:1",
     itemCount: null,
-    recommendedWidth: 160,
+    recommendedWidth: 168,
   },
   {
     key: HOME_SLOT_KEYS.specialSale,
@@ -48,7 +48,7 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     pageKey: "home",
     aspectRatio: "3:5",
     itemCount: 1,
-    recommendedWidth: 240,
+    recommendedWidth: 300,
   },
   {
     key: HOME_SLOT_KEYS.twoBannerRow,
@@ -57,7 +57,7 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     pageKey: "home",
     aspectRatio: "16:7",
     itemCount: 2,
-    recommendedWidth: 640,
+    recommendedWidth: 800,
   },
   {
     key: HOME_SLOT_KEYS.threeBannerRow,
@@ -66,7 +66,7 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     pageKey: "home",
     aspectRatio: "7:4",
     itemCount: 3,
-    recommendedWidth: 420,
+    recommendedWidth: 528,
   },
   {
     key: HOME_SLOT_KEYS.aboutUs,
@@ -75,7 +75,7 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     pageKey: "home",
     aspectRatio: "7:5",
     itemCount: 1,
-    recommendedWidth: 560,
+    recommendedWidth: 760,
   },
 ];