responsive base v1

src/app/home/components/Carousel.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { FC } from 'react'
+import { FC, useState, useEffect } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
 import Image from 'next/image';
@@ -7,10 +7,25 @@ import { useGetLanding } from '../hooks/useHomeData';
 
 const Carousel: FC = () => {
     const { data } = useGetLanding()
+    const [isMobile, setIsMobile] = useState(false)
 
-    if (!data?.results?.sliders?.desktop || data.results.sliders.desktop.length === 0) {
+    useEffect(() => {
+        const checkIsMobile = () => {
+            setIsMobile(window.innerWidth < 768) // md breakpoint
+        }
+
+        checkIsMobile()
+        window.addEventListener('resize', checkIsMobile)
+
+        return () => window.removeEventListener('resize', checkIsMobile)
+    }, [])
+
+    // Choose appropriate sliders based on device type
+    const sliders = isMobile ? data?.results?.sliders?.mobile : data?.results?.sliders?.desktop
+
+    if (!sliders || sliders.length === 0) {
         return (
-            <div className='mt-5 h-[400px] bg-gray-200 rounded-lg flex items-center justify-center'>
+            <div className='mt-5 h-[200px] sm:h-[300px] md:h-[400px] bg-gray-200 rounded-lg flex items-center justify-center'>
                 <p className="text-gray-500">اسلایدری موجود نیست</p>
             </div>
         );
@@ -19,9 +34,9 @@ const Carousel: FC = () => {
     return (
         <div className='mt-5 relative' style={{ zIndex: 0 }}>
             <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
-                {data.results.sliders.desktop.map((slider) => (
+                {sliders.map((slider) => (
                     <SwiperSlide key={slider._id}>
-                        <div className='h-[400px] relative'>
+                        <div className='h-[200px] sm:h-[300px] md:h-[400px] relative'>
                             <Image
                                 src={slider.imageUrl}
                                 alt={slider.altText}