Expand homepage category banners from three to four

- Rename the three-banner-row slot to four-banner-row (itemCount 4) to
  match the actual count
- Rename ThreeBanners to FourBanners, add a fourth fallback image, and
  switch the grid to 2x2 on mobile/tablet, 1x4 on desktop

src/app/meshkee/static-image-slots/route.ts

@@ -44,12 +44,12 @@ export async function GET() {
         recommendedWidth: 720,
       },
       {
-        key: "three-banner-row",
-        label: "سه بنر دسته‌بندی",
+        key: "four-banner-row",
+        label: "چهار بنر دسته‌بندی",
         kind: "list",
         pageKey: "home",
         aspectRatio: "1:1",
-        itemCount: 3,
+        itemCount: 4,
         recommendedWidth: 520,
       },
       {

src/app/page.tsx

@@ -1,6 +1,6 @@
 import HeroSlider from "@/components/HeroSlider";
 import SpecialSaleCarousel from "@/components/SpecialSaleCarousel";
-import ThreeBanners from "@/components/ThreeBanners";
+import FourBanners from "@/components/FourBanners";
 import TwoBanners from "@/components/TwoBanners";
 import TopSellingCarousel from "@/components/TopSellingCarousel";
 import FullBanner from "@/components/FullBanner";
@@ -78,7 +78,7 @@ export default async function Home() {
     <main>
       <HeroSlider slot={findSlot(slots, "slider")} />
       <SpecialSaleCarousel items={specialItems} bannerSlot={findSlot(slots, "sale-banner")} />
-      <ThreeBanners slot={findSlot(slots, "three-banner-row")} />
+      <FourBanners slot={findSlot(slots, "four-banner-row")} />
       <TwoBanners slot={findSlot(slots, "two-banner-row")} />
       <TopSellingCarousel items={topSellingItems} />
       <FullBanner slot={findSlot(slots, "one-banner-row")} />

src/components/FourBanners.tsx

@@ -6,9 +6,10 @@ const fallbackBanners = [
   { image: "/images/categories/girls.svg", href: "#" },
   { image: "/images/categories/boys.svg", href: "#" },
   { image: "/images/categories/baby.svg", href: "#" },
+  { image: "/images/categories/party.svg", href: "#" },
 ];
 
-export default function ThreeBanners({ slot }: { slot?: StaticImageSlot }) {
+export default function FourBanners({ slot }: { slot?: StaticImageSlot }) {
   const images = slot?.images ?? [];
   const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
   const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
@@ -22,7 +23,7 @@ export default function ThreeBanners({ slot }: { slot?: StaticImageSlot }) {
     <section className="boxed py-10 md:py-14">
       <SectionHeading kicker="Categories" title="دسته‌بندی‌ها" />
 
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5">
         {banners.map((b, i) => {
           const Wrapper = b.href ? "a" : "div";
           return (