product item + product section

app/home/Home.tsx

@@ -1,13 +1,15 @@
 import BannerSection from "./components/BannerSection";
 import CategorySection from "./components/CategorySection";
+import ProductSection from "./components/ProductSection";
 import StepSection from "./components/StepSection";
 
 const Home = () => {
   return (
-    <div>
+    <div className="pb-[120px]">
       <BannerSection />
       <StepSection />
       <CategorySection />
+      <ProductSection />
     </div>
   );
 };

app/home/components/ProductCard.tsx

@@ -0,0 +1,35 @@
+"use client";
+import Button from "@/app/components/Button";
+import ProductImage from "@/assets/images/product_image.png";
+import Image from "next/image";
+import { type FC } from "react";
+import { Rating } from "react-simple-star-rating";
+
+const ProductCard: FC = () => {
+  return (
+    <div className="rounded-xl overflow-hidden">
+      <div>
+        <Image src={ProductImage} alt="product-card" width={500} height={500} className="w-full aspect-square object-cover" />
+      </div>
+      <div className="bg-white rounded-xl -mt-6 drop-shadow-2xl shadow">
+        <div className="pt-4 text-[#2A3950] font-bold text-center">جعبه کیبوردی</div>
+        <div className="mt-2 flex justify-center items-center gap-1.5">
+          <Rating initialValue={4.5} size={20} readonly rtl allowFraction SVGstyle={{ display: "inline-block" }} />
+          <div className="text-xs mt-1">4.5</div>
+        </div>
+        <div className="mt-2 text-[#0A1B2C8F]/56 text-sm text-center">قیمت از </div>
+        <div className="flex gap-1.5 items-center justify-center">
+          <div className="text-[#0A1B2C8F]/56 line-through decoration-[#D00003] text-[10px]">10,000,000</div>
+          <div className="text-sm">1,000,000 تومان</div>
+        </div>
+        <div className="mt-3 px-4">
+          <Button variant="outline" className="h-8! w-full">
+            جزییات
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

app/home/components/ProductSection.tsx

@@ -0,0 +1,26 @@
+import { Carousel, CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
+import { type FC } from "react";
+import ProductCard from "./ProductCard";
+
+const ProductSection: FC = () => {
+  return (
+    <div className="mt-[120px] px-[120px]">
+      <Carousel slidesPerView={5} gap={40}>
+        <div className="flex justify-between items-center">
+          <div className="font-bold text-2xl">محبوب‌ترین محصولات</div>
+          <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
+        </div>
+
+        <CarouselTrack className="mt-12">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <CarouselSlide key={index}>
+              <ProductCard />
+            </CarouselSlide>
+          ))}
+        </CarouselTrack>
+      </Carousel>
+    </div>
+  );
+};
+
+export default ProductSection;

package-lock.json

@@ -12,7 +12,8 @@
         "iconsax-reactjs": "^0.0.8",
         "next": "16.2.10",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "react-simple-star-rating": "^5.1.7"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -5718,6 +5719,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-simple-star-rating": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-5.1.7.tgz",
+      "integrity": "sha512-NTFkW8W3uwvI82Fv7JW5i7gmDjEZKxJmj+Z9vn+BjYIXT6ILdnU9qnSUP2cWrWN/WAUlue81f9SgM4CQcenltQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",

package.json

@@ -13,7 +13,8 @@
     "iconsax-reactjs": "^0.0.8",
     "next": "16.2.10",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-simple-star-rating": "^5.1.7"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",