From fcf89eb2a137e86fb460eb2142159f8e762014bf Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 19 Jul 2026 12:35:46 +0330
Subject: [PATCH] fix shadow

---
 app/home/components/OrderByApplication.tsx | 2 +-
 app/home/components/ProductCard.tsx        | 8 ++++----
 app/home/components/ProductSection.tsx     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/home/components/OrderByApplication.tsx b/app/home/components/OrderByApplication.tsx
index 00768f8..154e986 100644
--- a/app/home/components/OrderByApplication.tsx
+++ b/app/home/components/OrderByApplication.tsx
@@ -30,7 +30,7 @@ const OrderByApplication: FC = () => {
           <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
         </div>
 
-        <CarouselTrack className="mt-12">
+        <CarouselTrack className="mt-12 px-3 py-4 -mx-3">
           {Array.from({ length: 10 }).map((_, index) => (
             <CarouselSlide key={index}>
               <ProductCard />
diff --git a/app/home/components/ProductCard.tsx b/app/home/components/ProductCard.tsx
index fcc555a..b1207f9 100644
--- a/app/home/components/ProductCard.tsx
+++ b/app/home/components/ProductCard.tsx
@@ -7,12 +7,12 @@ import { Rating } from "react-simple-star-rating";
 
 const ProductCard: FC = () => {
   return (
-    <div className="rounded-xl overflow-hidden">
-      <div>
+    <div>
+      <div className="rounded-xl overflow-hidden">
         <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="relative bg-white p-4 rounded-xl -mt-6 shadow-[0_4px_20px_rgba(0,0,0,0.1)]">
+        <div className="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>
diff --git a/app/home/components/ProductSection.tsx b/app/home/components/ProductSection.tsx
index 0de8182..a5d42fe 100644
--- a/app/home/components/ProductSection.tsx
+++ b/app/home/components/ProductSection.tsx
@@ -11,7 +11,7 @@ const ProductSection: FC = () => {
           <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
         </div>
 
-        <CarouselTrack className="mt-12">
+        <CarouselTrack className="mt-12 px-3 py-4 -mx-3">
           {Array.from({ length: 10 }).map((_, index) => (
             <CarouselSlide key={index}>
               <ProductCard />