slider fix bug login

src/config/axios.ts

@@ -41,7 +41,7 @@ axiosInstance.interceptors.response.use(
         if (!refreshTokenValue) {
           removeRefreshToken();
           removeToken();
-          window.location.href = buildPath("auth/login");
+          window.location.href = "/";
           return;
         }
         const { data } = await refreshToken({

src/index.css

@@ -144,3 +144,28 @@ tbody tr {
 .overflowX::-webkit-scrollbar {
   display: none;
 }
+
+@media screen and (max-width: 768px) {
+  .swiper-button-prev:after,
+  .swiper-rtl .swiper-button-next:after {
+    font-size: 30px;
+  }
+
+  .swiper-button-next:after,
+  .swiper-rtl .swiper-button-prev:after {
+    font-size: 30px;
+  }
+}
+
+.swiper-button-next {
+  top: 55% !important;
+}
+
+.swiper-button-prev {
+  top: 55% !important;
+}
+
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+  color: #fff !important;
+}

src/pages/home/Home.tsx

@@ -1,13 +1,17 @@
 import { Building, CloseCircle, InfoCircle, TickCircle } from 'iconsax-react'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation as SwiperNavigation } from 'swiper/modules';
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { buildPath, clx } from '../../helpers/utils'
 import TitleSeeAll from '../../components/TitleSeeAll'
-import { useGetCompanies, useGetIndustry, useGetCompanyRequest } from './hooks/useHomeData'
+import { useGetCompanies, useGetIndustry, useGetCompanyRequest, useGetSliders } from './hooks/useHomeData'
-import { CompanyItemType, IndustryItemType } from './types/HomeTypes'
+import { CompanyItemType, IndustryItemType, SliderItemType } from './types/HomeTypes'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { CompanyRequestStatus } from './enum/Enum'
+import { Button } from '@headlessui/react';
+
 const Home: FC = () => {
 
     const { t } = useTranslation('global')
@@ -15,9 +19,47 @@ const Home: FC = () => {
     const { data: industry } = useGetIndustry()
     const { data: companies } = useGetCompanies(activeIndustry)
     const { data: companyRequest } = useGetCompanyRequest()
+    const { data: sliders } = useGetSliders()
 
     return (
         <div className='mt-4'>
+
+            <Swiper navigation={true} modules={[SwiperNavigation]} className="mySwiper">
+                {
+                    sliders?.data?.sliders?.map((item: SliderItemType) => {
+                        return (
+                            <SwiperSlide
+                                key={item.id}>
+                                <div className='relative rounded-3xl'>
+                                    <img
+                                        src={item.imageUrl}
+                                        alt='banner'
+                                        width={1920}
+                                        height={1080}
+                                        className='w-full rounded-3xl object-cover xl:mt-14 mt-8 min-h-[210px] max-h-[500px]'
+                                    />
+
+                                    <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-3xl'>
+                                        <div className='max-w-maxWidth flex flex-col mt-1 xl:mt-0 xl:items-start items-center w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
+                                            <p className='xl:text-lg text-sm'>{item.title}</p>
+                                            <p className='xl:mt-5 mt-2 xl:text-2xl text-sm font-bold'>{item.description}</p>
+
+                                            <Link to={item.link}>
+                                                <Button
+                                                    className='xl:mt-5 mt-2 !w-fit xl:px-10 px-5 h-8 rounded-full text-sm xl:h-10 bg-white !text-black'
+                                                >
+                                                    بیشتر بدانید
+                                                </Button>
+                                            </Link>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        )
+                    })
+                }
+            </Swiper>
+
             {
                 companyRequest?.data?.requests &&
                 <div className={clx(

src/pages/home/hooks/useHomeData.ts

@@ -6,6 +6,7 @@ import {
   getCompanyDetail,
   getCompanyRequest,
   getMyCompany,
+  getSliders,
 } from "../service/HomeService";
 
 export const useGetSlugId = () => {
@@ -44,6 +45,12 @@ export const useGetCompanyRequest = () => {
   });
 };
 
+export const useGetSliders = () => {
+  return useQuery({
+    queryKey: ["sliders"],
+    queryFn: () => getSliders(),
+  });
+};
 export const useGetMyCompany = () => {
   return useQuery({
     queryKey: ["my-company"],

src/pages/home/service/HomeService.ts

@@ -35,3 +35,8 @@ export const getCompanyRequest = async () => {
   const { data } = await axios.get(`/companies/requests/user`);
   return data;
 };
+
+export const getSliders = async () => {
+  const { data } = await axios.get(`/sliders/list/public`);
+  return data;
+};

src/pages/home/types/HomeTypes.ts

@@ -31,3 +31,14 @@ export type CompanyItemType = {
   business: string;
   invoiceCount: number;
 };
+
+export type SliderItemType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  title: string;
+  imageUrl: string;
+  description: string;
+  link: string;
+};