fix header menu

src/app/home/components/Carousel.tsx

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

src/app/home/components/HotOffer.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { FC } from 'react'
+import ProductCard from '@/components/ProductCard'
+import Image from 'next/image'
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+
+const HotOffer: FC = () => {
+    return (
+        <div className='h-[300px] 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'>
+                    پیشنهاد های
+                    <br />
+                    داغ
+                    <br />
+                    سندس
+                    کالا
+                </div>
+                <div className='mt-6 flex justify-center'>
+                    <Image
+                        src={'/images/hot_offer.png'}
+                        alt=''
+                        width={120}
+                        height={150}
+                        className='max-w-full h-auto'
+                    />
+                </div>
+            </div>
+
+            <div className='flex-1 overflow-hidden px-4'>
+                <Swiper
+                    spaceBetween={16}
+                    slidesPerView={'auto'}
+                    className='h-full'
+                >
+                    <SwiperSlide className='!w-auto'>
+                        <ProductCard />
+                    </SwiperSlide>
+                    <SwiperSlide className='!w-auto'>
+                        <ProductCard />
+                    </SwiperSlide>
+                </Swiper>
+            </div>
+        </div>
+    )
+}
+
+export default HotOffer

src/app/page.tsx

@@ -1,11 +1,15 @@
 import { NextPage } from 'next'
 import withLayout from '@/hoc/withLayout'
 import Carousel from './home/components/Carousel'
+import HotOffer from './home/components/HotOffer'
 
 const Home: NextPage = () => {
   return (
     <div>
       <Carousel />
+      <div className='mt-24 px-20'>
+        <HotOffer />
+      </div>
     </div>
   )
 }

src/components/ProductCard.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+const ProductCard: FC = () => {
+    return (
+        <div className='bg-white rounded-[40px] p-6 w-full min-w-[280px] mx-auto'>
+
+        </div>
+    )
+}
+
+export default ProductCard

src/hoc/withLayout.tsx

@@ -1,4 +1,5 @@
 
+import Footer from '@/share/Footer'
 import Header from '@/share/Header'
 import { FC, ComponentType } from 'react'
 // import Header from '@/share/Header'
@@ -14,7 +15,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
             <main className="flex-1">
                 {children}
             </main>
-            {/* <Footer /> */}
+            <Footer />
         </div>
     )
 }

src/share/Footer.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+const Footer: FC = () => {
+    return (
+        <div className='h-[100px]'>
+
+        </div>
+    )
+}
+
+export default Footer

src/share/Header.tsx

@@ -7,7 +7,7 @@ import Menu from './components/Menu'
 const Header: FC = () => {
     return (
         <Fragment>
-            <div className='fixed top-0 bg-white w-full'>
+            <div className='fixed top-0 bg-white w-full z-[9998]'>
                 <div className='flex items-center justify-between px-6 py-[18px]'>
                     <div className='flex gap-[30px] items-center'>
                         <div>LOGO</div>

src/share/components/Menu.tsx

@@ -76,7 +76,7 @@ const Menu: FC = () => {
 
             {isOpen && (
                 <div
-                    className='absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 z-50 flex max-w-[90vw] max-h-screen overflow-hidden'
+                    className='absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] max-h-screen overflow-hidden'
                     onMouseLeave={() => {
                         setIsOpen(false)
                         setHoveredPath([])