best seller categories

app/home/Home.tsx

@@ -1,4 +1,5 @@
 import BannerSection from "./components/BannerSection";
+import BestSellerCategories from "./components/BestSellerCategories";
 import CategorySection from "./components/CategorySection";
 import OrderByApplication from "./components/OrderByApplication";
 import ProductSection from "./components/ProductSection";
@@ -12,6 +13,7 @@ const Home = () => {
       <CategorySection />
       <ProductSection />
       <OrderByApplication />
+      <BestSellerCategories />
     </div>
   );
 };

app/home/components/BestSellerCategories.tsx

@@ -0,0 +1,70 @@
+import { cn } from "@/app/lib/cn";
+import bannersImage from "@/assets/images/best-sellers/banners.jpg";
+import boxesImage from "@/assets/images/best-sellers/boxes.jpg";
+import businessCardsImage from "@/assets/images/best-sellers/business-cards.jpg";
+import calendarsImage from "@/assets/images/best-sellers/calendars.jpg";
+import catalogsImage from "@/assets/images/best-sellers/catalogs.png";
+import { ArrowLeft } from "iconsax-reactjs";
+import Image, { type StaticImageData } from "next/image";
+import { type FC } from "react";
+
+type CategoryItem = {
+  title: string;
+  image: StaticImageData;
+  featured?: boolean;
+};
+
+const categories: CategoryItem[] = [
+  { title: "جعبه ها", image: boxesImage, featured: true },
+  { title: "کاتالوگ ها", image: catalogsImage },
+  { title: "کارت ویزیت", image: businessCardsImage },
+  { title: "تقویم ها", image: calendarsImage },
+  { title: "بنرها", image: bannersImage },
+];
+
+type CategoryTileProps = {
+  title: string;
+  image: StaticImageData;
+  featured?: boolean;
+};
+
+const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-[40px]",
+        featured ? "col-span-2 row-span-2" : "aspect-square",
+      )}
+    >
+      <Image src={image} alt={title} fill className="object-cover" sizes={featured ? "50vw" : "25vw"} />
+      <div
+        className={cn(
+          "absolute inset-x-4 bottom-4 flex items-center justify-between rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
+          featured ? "px-6 py-3.5" : "px-5 py-3",
+        )}
+      >
+        <div className={cn("text-white font-bold", featured ? "text-lg" : "text-base")}>{title}</div>
+        <div className="flex items-center gap-1.5 text-white">
+          <span className={cn("font-bold", featured ? "text-sm" : "text-xs")}>مشاهده</span>
+          <ArrowLeft size={featured ? 20 : 18} color="currentColor" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BestSellerCategories: FC = () => {
+  return (
+    <div className="mt-[120px] px-[120px]">
+      <div className="font-bold text-2xl">دسته بندی های پرفروش</div>
+
+      <div className="mt-12 grid grid-cols-4 gap-10">
+        {categories.map((category) => (
+          <CategoryTile key={category.title} title={category.title} image={category.image} featured={category.featured} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BestSellerCategories;