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;