product card

src/app/globals.css

@@ -167,3 +167,20 @@ textarea.place-black::placeholder {
     @apply bg-background text-foreground;
   }
 }
+
+/* Ensure Swiper components don't interfere with header z-index */
+.swiper,
+.swiper-container,
+.mySwiper {
+  z-index: 0 !important;
+  position: relative !important;
+}
+
+.swiper-wrapper,
+.swiper-slide {
+  z-index: 0 !important;
+}
+
+.swiper-pagination {
+  z-index: 1 !important;
+}

src/app/home/components/Carousel.tsx

@@ -5,8 +5,8 @@ import { Pagination } from 'swiper/modules';
 
 const Carousel: FC = () => {
     return (
-        <div className='mt-5'>
-            <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 1 }}>
+        <div className='mt-5 relative' style={{ zIndex: 0 }}>
+            <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
                 <SwiperSlide>
                     <div className='h-[400px] bg-red-50'>
                         1

src/app/home/components/HotOffer.tsx

@@ -7,7 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 const HotOffer: FC = () => {
     return (
-        <div className='h-[300px] bg-[#F2F2F2] rounded-2xl flex py-6'>
+        <div className=' bg-[#F2F2F2] rounded-2xl flex py-6'>
             <div className='px-6 min-w-[140px] max-w-[180px] flex flex-col justify-center'>
                 <div className='text-center text-primary font-extrabold text-sm'>
                     پیشنهاد های
@@ -40,6 +40,12 @@ const HotOffer: FC = () => {
                     <SwiperSlide className='!w-auto'>
                         <ProductCard />
                     </SwiperSlide>
+                    <SwiperSlide className='!w-auto'>
+                        <ProductCard />
+                    </SwiperSlide>
+                    <SwiperSlide className='!w-auto'>
+                        <ProductCard />
+                    </SwiperSlide>
                 </Swiper>
             </div>
         </div>

src/components/ProductCard.tsx

@@ -1,8 +1,41 @@
+import { Heart } from 'iconsax-react'
+import Image from 'next/image'
 import { FC } from 'react'
 
 const ProductCard: FC = () => {
     return (
-        <div className='bg-white rounded-[40px] p-6 w-full min-w-[280px] mx-auto'>
+        <div className='bg-white rounded-[40px] p-6 w-full min-w-[280px] max-w-[280px] mx-auto'>
+            <div className='flex justify-center'>
+                <Image
+                    src={`https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80`}
+                    width={170}
+                    height={170}
+                    alt=''
+                    className='max-w-[150px] max-h-[150px] object-contain'
+                />
+            </div>
+
+            <h4 className='line-clamp-2 text-[#383E43] mt-6 text-sm text-center leading-5'>
+                شارژر دیواری 65 وات سامسونگ سه پورت Type-C مدل EP-T6530- اورجینال
+            </h4>
+
+            <div className='flex justify-end items-center gap-1.5 mt-4'>
+                <div className='size-2 rounded-full bg-red-500'></div>
+                <div className='size-2 rounded-full bg-red-500'></div>
+                <div className='size-2 rounded-full bg-red-500'></div>
+            </div>
+
+            <div className='mt-5 text-sm'>
+                260,000 تومان
+            </div>
+            <div className='mt-1 text-sm text-[#7F7F7F] line-through'>
+                70,400,000
+            </div>
+
+            <div className='flex justify-end'>
+                <Heart size={20} color='#000' />
+            </div>
+
 
         </div>
     )