responsive banners + link categories

src/app/home/components/Banners3.tsx

@@ -11,7 +11,7 @@ const Banners3: FC = () => {
     const sortedBanners = data?.results?.banners?.sort((a, b) => a.order - b.order) || []
 
     return (
-        <div className='flex gap-4'>
+        <div className='flex lg:flex-row flex-col gap-4'>
             <div className='flex flex-col gap-2 h-full flex-1'>
                 <div className='flex-1 h-full'>
                     <Link href={sortedBanners[0]?.linkUrl || '#'}>

src/app/home/components/Banners4.tsx

@@ -11,27 +11,27 @@ const Banners4: FC = () => {
 
 
     return (
-        <div className='flex gap-6 h-[340px]'>
+        <div className='flex lg:flex-row flex-col gap-6 lg:h-[340px]'>
             <div className='flex-1 bg-primary/10 h-full rounded-[10px]'>
                 <Link href={sortedBanners[3]?.linkUrl || '#'}>
                     <Image src={data?.results?.banners?.[3]?.imageUrl as string} height={340} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                 </Link>
             </div>
 
-            <div className='w-[158px] flex flex-col gap-6'>
+            <div className='lg:w-[158px] flex flex-col gap-6'>
-                <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-100'>
+                <div className='lg:size-[158px] w-full h-auto rounded-[10px] bg-slate-100'>
                     <Link href={sortedBanners[4]?.linkUrl || '#'}>
                         <Image src={data?.results?.banners?.[4]?.imageUrl as string} height={158} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                     </Link>
                 </div>
-                <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-200'>
+                <div className='lg:size-[158px] w-full h-auto rounded-[10px] bg-slate-200'>
                     <Link href={sortedBanners[5]?.linkUrl || '#'}>
                         <Image src={data?.results?.banners?.[5]?.imageUrl as string} height={158} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                     </Link>
                 </div>
             </div>
 
-            <div className='w-[400px] bg-amber-50'>
+            <div className='lg:w-[400px] w-full bg-amber-50'>
                 <Link href={sortedBanners[6]?.linkUrl || '#'}>
                     <Image src={data?.results?.banners?.[6]?.imageUrl as string} height={400} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                 </Link>

src/app/home/components/Blogs.tsx

@@ -13,8 +13,8 @@ const Blogs: FC = () => {
         return (
             <div>
                 <h4 className='text-[#012B4D] text-lg'>رسانه و مطالب</h4>
-                <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
+                <div className='mt-2 flex gap-1 lg:text-sm text-xs text-[#8C8C8C]'>
-                    برای مشاهده ی آخرین مطالب رسانه و مطالب <Link href="/blogs" className='text-primary hover:underline'>اینجا کلیک کنید</Link>
+                    برای مشاهده ی آخرین مطالب رسانه و مطالب <Link href="/blogs" className='text-primary lg:text-base text-xs hover:underline'>اینجا کلیک کنید</Link>
                 </div>
                 <div className='mt-10'>
                     <div className='text-center text-gray-500'>خطا در بارگذاری مطالب</div>
@@ -27,9 +27,9 @@ const Blogs: FC = () => {
 
     return (
         <div>
-            <h4 className='text-[#012B4D] text-lg'>رسانه و مطالب</h4>
+            <h4 className='text-[#012B4D] lg:text-lg text-base'>رسانه و مطالب</h4>
-            <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
+            <div className='mt-2 flex gap-1 lg:text-sm text-xs text-[#8C8C8C]'>
-                برای مشاهده ی آخرین مطالب رسانه و مطالب <Link href="/blogs" className='text-primary hover:underline'>اینجا کلیک کنید</Link>
+                برای مشاهده ی آخرین مطالب رسانه و مطالب <Link href="/blogs" className='text-primary lg:text-base text-xs hover:underline'>اینجا کلیک کنید</Link>
             </div>
             <div className='mt-10'>
                 <GridWrapper className='items-stretch' desktop={5} mobile={1} gapDesktop={24} gapMobile={16}>

src/app/home/components/Categories.tsx

@@ -24,7 +24,7 @@ const Categories = () => {
             >
                 {parentCategories?.map((item: Category) => (
                     <SwiperSlide key={item._id} className='!w-auto'>
-                        <CategoryItem image={item.imageUrl} title={item.title_fa} />
+                        <CategoryItem image={item.imageUrl} title={item.title_fa} categoryUrl={item.title_en} />
                     </SwiperSlide>
                 ))}
             </Swiper>

src/app/home/components/CategoryItem.tsx

@@ -1,21 +1,23 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import React, { FC } from 'react'
 
 type Props = {
     image: string;
     title: string;
+    categoryUrl: string;
 }
 
 const CategoryItem: FC<Props> = (props) => {
     return (
-        <div className='text-center'>
+        <Link href={`/products/${props.categoryUrl}`} className='text-center block hover:opacity-80 transition-opacity'>
             <div className='size-[80px] sm:size-[100px] md:size-[113px] rounded-full overflow-hidden'>
                 <Image src={props.image} alt={props.title} width={113} height={113} className='w-full h-full object-cover' />
             </div>
             <div className='mt-2 sm:mt-3 text-xs sm:text-sm text-[#191919]'>
                 {props.title}
             </div>
-        </div>
+        </Link>
     )
 }