carousel and header

package-lock.json

@@ -18,6 +18,7 @@
         "next": "15.4.5",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "swiper": "^11.2.10",
         "tailwind-merge": "^3.3.1",
         "zustand": "^5.0.7"
       },
@@ -5945,6 +5946,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.7"
   },

src/app/home/components/Carousel.tsx

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

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import "../../public/css/fontiran.css";
+import 'swiper/css';
 import QueryProvider from "@/config/QueryProvider";
 
 export const metadata: Metadata = {

src/app/page.tsx

@@ -1,9 +1,12 @@
 import { NextPage } from 'next'
 import withLayout from '@/hoc/withLayout'
+import Carousel from './home/components/Carousel'
 
 const Home: NextPage = () => {
   return (
-    <div></div>
+    <div>
+      <Carousel />
+    </div>
   )
 }
 

src/share/Header.tsx

@@ -1,11 +1,12 @@
 import Input from '@/components/Input'
 import { Separator } from '@/components/ui/separator'
 import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
-import { FC } from 'react'
+import { FC, Fragment } from 'react'
 import Menu from './components/Menu'
 
 const Header: FC = () => {
     return (
+        <Fragment>
             <div className='fixed top-0 bg-white w-full'>
                 <div className='flex items-center justify-between px-6 py-[18px]'>
                     <div className='flex gap-[30px] items-center'>
@@ -40,6 +41,8 @@ const Header: FC = () => {
                     </div>
                 </div>
             </div>
+            <div className='h-[140px]'></div>
+        </Fragment>
     )
 }