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

@@ -42,8 +42,8 @@ export function About({ slot }: { slot?: StaticImageSlot }) {
               fallbackSrc={about.image}
               fallbackAlt={about.title}
               aspectRatio={slot?.aspectRatio}
-              width={560}
+              width={760}
-              height={400}
+              height={543}
               rounded="rounded-[28px]"
               fill
               className="h-full min-h-[280px] object-cover"

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}
+                width={800}
-                height={280}
+                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}
+                width={528}
-                height={240}
+                height={302}
                 rounded="rounded-3xl"
               />
             </div>

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}
+              width={168}
-              height={160}
+              height={168}
               rounded="rounded-2xl"
               unlinked
             />

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}
+      width={1072}
-      height={420}
+      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}
+                  width={528}
-                  height={200}
+                  height={293}
                   rounded="rounded-3xl"
                   fill
                   className="h-full w-full"

src/components/ProductCarousel.tsx

@@ -55,8 +55,8 @@ export function ProductCarousel({
               fallbackSrc="/images/sale-banner.png"
               fallbackAlt="فروش ویژه"
               aspectRatio={bannerSlot?.aspectRatio}
-              width={240}
+              width={300}
-              height={400}
+              height={500}
               rounded="rounded-3xl"
               fill
               className="h-full w-full"

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