landing api

src/app/home/HeroSection.tsx

@@ -1,30 +1,47 @@
+import 'swiper/css/navigation';
 import Button from '@/components/Button'
 import Image from 'next/image'
 import { FC } from 'react'
+import { Navigation } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { useGetLanding } from './hooks/useHomeData';
 
 const HeroSection: FC = () => {
+
+    const { data } = useGetLanding()
+
     return (
-        <div className='relative'>
-            <Image
-                src={'/images/banner.webp'}
-                alt='banner'
-                width={1920}
-                height={1080}
-                className='w-full rounded-4xl object-cover xl:mt-14 mt-8 min-h-[210px]'
-            />
+        <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
+            {
+                data?.data?.sliders?.map((item) => {
+                    return (
+                        <SwiperSlide key={item.id}>
+                            <div className='relative'>
+                                <Image
+                                    src={item.imageUrl}
+                                    alt='banner'
+                                    width={1920}
+                                    height={1080}
+                                    className='w-full rounded-4xl object-cover xl:mt-14 mt-8 min-h-[210px]'
+                                />
 
-            <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl'>
-                <div className='max-w-maxWidth w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
-                    <p>داناک،</p>
-                    <p className='xl:mt-5 font-bold'>تلفیق هنر و تکنولوژی</p>
+                                <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl'>
+                                    <div className='max-w-maxWidth w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
+                                        <p>{item.title}</p>
+                                        <p className='xl:mt-5 font-bold'>{item.description}</p>
 
-                    <Button
-                        className='xl:mt-12 mt-5 !w-fit px-10 bg-white !text-black'
-                        label='درباره ی ما'
-                    />
-                </div>
-            </div>
-        </div>
+                                        <Button
+                                            className='xl:mt-12 mt-5 !w-fit px-10 bg-white !text-black'
+                                            label='درباره ی ما'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </SwiperSlide>
+                    )
+                })
+            }
+        </Swiper>
     )
 }