admin + loader fix

package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
-		"build": "set NODE_OPTIONS=--max-old-space-size=4096 && next build",
+		"build": "next build",
 		"start": "next start -p 8080 -H 0.0.0.0",
 		"lint": "next lint"
 	},

src/app/admin/auth/page.tsx

@@ -1,10 +1,8 @@
-import Auth from '@/components/screens/admin/auth/Auth'
+import Auth from "@/components/screens/admin/auth/Auth";
-import React from 'react'
+import React from "react";
 
-type Props = {}
+type Props = {};
 
 export default function page({}: Props) {
-	return (
+  return <Auth />;
-		<Auth />
-	)
 }

src/app/admin/page.tsx

@@ -1,23 +1,24 @@
-'use client'
+"use client";
 
-import { useRouter } from 'next/navigation'
+import Auth from "@/components/screens/admin/auth/Auth";
-import { useEffect } from 'react'
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-type Props = {}
+type Props = {};
 
 export default function page({}: Props) {
-	const router = useRouter()
+  const router = useRouter();
 
-	useEffect(() => {
+  // useEffect(() => {
-		const hasCookie = document.cookie.includes('_identid')
+  // 	const hasCookie = document.cookie.includes('_identid')
-		if (!hasCookie) {
+  // 	if (!hasCookie) {
-			router.push('/admin/auth')
+  // 		router.push('/admin/auth')
-			return
+  // 		return
-		}
+  // 	}
-		else {
+  // 	else {
-			router.push('/admin/applications')
+  // 		router.push('/admin/applications')
-		}
+  // 	}
-	}, [])
+  // }, [])
 
-	return <></>
+  return <Auth />;
 }

src/components/UI/loader/Loader.tsx

@@ -32,8 +32,8 @@ export const LoadingSpinner = styled.div`
 export default function Loader({}: Props) {
 	return (
     <LoadingSpinner>
-			<img src='/loader_1.svg' alt='loader' />
+      <img src="/image/loader_1.svg" alt="loader" />
-			<img src='/loader_2.svg' alt='loader' />
+      <img src="/image/loader_2.svg" alt="loader" />
     </LoadingSpinner>
-	)
+  );
 }

src/components/blocks/AddApplicationForm.tsx

@@ -1,11 +1,11 @@
-import MainButton from '@/components/UI/button/MainButton'
+import MainButton from "@/components/UI/button/MainButton";
-import FormInput from '@/components/UI/input/FormInput'
+import FormInput from "@/components/UI/input/FormInput";
-import OrdersService from '@/services/order/ordersServices'
+import OrdersService from "@/services/order/ordersServices";
-import { T_Product } from '@/services/product/type'
+import { T_Product } from "@/services/product/type";
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
-import styled from 'styled-components'
+import styled from "styled-components";
-import PhoneInput from '../UI/input/PhoneInput'
+import PhoneInput from "../UI/input/PhoneInput";
-import Loader from '../UI/loader/Loader'
+import Loader from "../UI/loader/Loader";
 
 const Container = styled.form`
   display: flex;
@@ -16,7 +16,7 @@ const Container = styled.form`
   ${(props) => props.theme.mediaQueries.mobile} {
     width: 100%;
   }
-`
+`;
 
 const Notification = styled.div`
   z-index: 5;
@@ -43,98 +43,102 @@ const Notification = styled.div`
     border-radius: 12px;
     background: ${(props) => props.theme.colors.white};
   }
-`
+`;
 
 type Props = {
-	setModal: (param: boolean) => void
+  setModal: (param: boolean) => void;
-	item?: T_Product
+  item?: T_Product;
-	modal?: boolean
+  modal?: boolean;
-}
+};
 
 export default function AddApplicationForm({ setModal, item, modal }: Props) {
-	const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState("");
-	const [errorState, setErrorState] = useState(false)
+  const [errorState, setErrorState] = useState(false);
-	const [notificationModalState, setNotificationModalState] = useState(false)
+  const [notificationModalState, setNotificationModalState] = useState(false);
-	const [loadingState, setLoadingState] = useState(false)
+  const [loadingState, setLoadingState] = useState(false);
 
-	const [buttonDisabledState, setButtonDisabledState] = useState(true)
+  const [buttonDisabledState, setButtonDisabledState] = useState(true);
 
   const [newApp, setNewApp] = useState({
-		email: '',
+    email: "",
-		phone: ''
+    phone: "",
-	})
+  });
 
   useEffect(() => {
     setNewApp({
-			email: '',
+      email: "",
-			phone: ''
+      phone: "",
-		})
+    });
-	}, [modal])
+  }, [modal]);
 
   useEffect(() => {
-		if (newApp.email === '' || newApp.phone === '') {
+    if (newApp.email === "" || newApp.phone === "") {
-			setButtonDisabledState(true)
+      setButtonDisabledState(true);
     } else {
-			setButtonDisabledState(false)
+      setButtonDisabledState(false);
     }
-	}, [newApp])
+  }, [newApp]);
 
   const createCallApp = async (e: FormEvent<HTMLFormElement>) => {
-		e.preventDefault()
+    e.preventDefault();
-		if (errorState) return
+    if (errorState) return;
-		try {
-			const newAppData = {
-				Phone: newApp.phone,
-				Email: newApp.email
-			}
-			const response = await OrdersService.createCall(newAppData)
-
-			if (response.status === 200) {
-				setNotificationModalState(true)
-			} else {
-				setErrorMessage(response.data)
-				setErrorState(true)
-			}
-		} catch (error) {
-			console.log(error)
-		}
-	}
-
-	const createApp = async (e: FormEvent<HTMLFormElement>) => {
-		e.preventDefault()
-		if (errorState) return
-		setLoadingState(true)
     try {
       const newAppData = {
         Phone: newApp.phone,
         Email: newApp.email,
-				Positions: item ? [{ Id: item.Id, Count: 1 }] : []
+      };
+      const response = await OrdersService.createCall(newAppData);
+
+      if (response.status === 200) {
+        setNotificationModalState(true);
+      } else {
+        setErrorMessage(response.data);
+        setErrorState(true);
       }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const createApp = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (errorState) return;
+    setLoadingState(true);
+    try {
+      const newAppData = {
+        Phone: newApp.phone,
+        Email: newApp.email,
+        Positions: item ? [{ Id: item.Id, Count: 1 }] : [],
+      };
 
       const response = await (item
         ? OrdersService.create(newAppData)
-				: OrdersService.createCall(newAppData))
+        : OrdersService.createCall(newAppData));
 
       if (response.status === 200) {
-				setNotificationModalState(true)
+        setNotificationModalState(true);
+      } else if (response.status === 404) {
+        setErrorMessage("Сервер не доступен, повторите попытку позже.");
+        setErrorState(true);
       } else {
-				setErrorMessage(response.data)
+        setErrorMessage(response.data);
-				setErrorState(true)
+        setErrorState(true);
       }
     } catch (error) {
-			console.log(error)
+      setErrorMessage("Сервер не доступен, повторите попытку позже.");
-		}
+      setErrorState(true);
-		setLoadingState(false)
     }
+    setLoadingState(false);
+  };
 
   const handlePhoneChange = (value: string) => {
-		setNewApp({ ...newApp, phone: value })
+    setNewApp({ ...newApp, phone: value });
-	}
+  };
 
   const closeModal = () => {
-		setModal(false)
+    setModal(false);
-		setNotificationModalState(false)
+    setNotificationModalState(false);
-	}
+  };
 
   return (
     <>
@@ -145,7 +149,7 @@ export default function AddApplicationForm({ setModal, item, modal }: Props) {
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setNewApp({ ...newApp, email: e.target.value })
           }
-					placeholder='Ваш email'
+          placeholder="Ваш email"
         />
         <PhoneInput value={newApp.phone} onChange={handlePhoneChange} />
         {item && <h3>Услуга: {item.Name}</h3>}
@@ -155,14 +159,14 @@ export default function AddApplicationForm({ setModal, item, modal }: Props) {
       </Container>
       {loadingState && (
         <Notification>
-					<div className='container'>
+          <div className="container">
             <Loader />
           </div>
         </Notification>
       )}
       {errorState && (
         <Notification>
-					<div className='container'>
+          <div className="container">
             <h4>{errorMessage}</h4>
             <MainButton fullWidth={true} onClick={() => setErrorState(false)}>
               Закрыть
@@ -172,7 +176,7 @@ export default function AddApplicationForm({ setModal, item, modal }: Props) {
       )}
       {notificationModalState && (
         <Notification>
-					<div className='container'>
+          <div className="container">
             <h4>Заявка успешно отправлена</h4>
             <MainButton fullWidth={true} onClick={closeModal}>
               Закрыть
@@ -181,5 +185,5 @@ export default function AddApplicationForm({ setModal, item, modal }: Props) {
         </Notification>
       )}
     </>
-	)
+  );
 }

src/components/layout/AdminSideBar.tsx

@@ -1,12 +1,12 @@
-'use client'
+"use client";
 
-import UserService from '@/services/user/userServices'
+import UserService from "@/services/user/userServices";
-import Link from 'next/link'
+import Link from "next/link";
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from 'react'
+import { useEffect } from "react";
-import styled from 'styled-components'
+import styled from "styled-components";
 
-type Props = {}
+type Props = {};
 
 const Container = styled.div`
   background: ${(props) => props.theme.colors.green};
@@ -34,62 +34,56 @@ const Container = styled.div`
       color: ${(props) => props.theme.colors.white};
     }
   }
-`
+`;
 
 export default function AdminSideBar({}: Props) {
-	const pathname = usePathname()
+  const pathname = usePathname();
-	const router = useRouter()
+  const router = useRouter();
 
-		useEffect(() => {
+  // useEffect(() => {
-			const hasCookie = document.cookie.includes('_identid')
+  //   const hasCookie = document.cookie.includes("_identid");
-			if (!hasCookie && pathname.startsWith('/admin')) {
+  //   if (!hasCookie && pathname.startsWith("/admin")) {
-				router.push('/admin/auth')
+  //     router.push("/admin/auth");
-				return
+  //     return;
-			}
+  //   }
-		}, [])
+  // }, []);
 
   const logout = async () => {
     try {
-				const response = await UserService.exit()
+      const response = await UserService.exit();
       if (response.status === 200) {
-					router.push('/admin/auth')
+        router.push("/admin");
         document.cookie =
-						'_identid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
+          "_identid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
       }
     } catch (error) {
       console.log(error);
     }
-		}
+  };
 
-	return pathname.startsWith('/admin') &&
+  return pathname.startsWith("/admin") &&
-		pathname !== '/admin/auth' &&
+    pathname !== "/admin/auth" &&
-		pathname !== '/admin' ? (
+    pathname !== "/admin" ? (
     <Container>
-			<img src='/logo.svg' alt='' />
+      <img src="/image/logo.svg" alt="" />
-			<div className='menu'>
+      <div className="menu">
-				<Link href='/admin/applications'>
+        <Link href="/admin/applications">
-					<div className='item'>
+          <div className="item">
-						<img src='/applications.svg' alt='' />
+            <img src="/image/applications.svg" alt="" />
             <p>Заявки</p>
           </div>
         </Link>
-				<Link href='/admin/services'>
+        <Link href="/admin/services">
-					<div className='item'>
+          <div className="item">
-						<img src='/services.svg' alt='' />
+            <img src="/image/services.svg" alt="" />
             <p>Услуги</p>
           </div>
         </Link>
-				{/* <Link href='/admin/virtualCemetery'>
+        <div className="item" onClick={logout}>
-					<div className='item'>
+          <img src="/image/log-out.svg" alt="" />
-						<img src='/grave.svg' alt='' />
-						<p>Вечная память</p>
-					</div>
-				</Link> */}
-					<div className='item' onClick={logout}>
-						<img src='/log-out.svg' alt='' />
           <p>Выйти</p>
         </div>
       </div>
     </Container>
-	) : null
+  ) : null;
 }

src/components/layout/Header/Header.tsx

@@ -1,57 +1,74 @@
-'use client'
+"use client";
 
-import { Container } from '@/app/GlobalStyles'
+import { Container } from "@/app/GlobalStyles";
-import Image from 'next/image'
+import Image from "next/image";
-import Link from 'next/link'
+import Link from "next/link";
-import { usePathname } from 'next/navigation'
+import { usePathname } from "next/navigation";
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
-import LandingButton from '../../UI/button/LandingButton'
+import LandingButton from "../../UI/button/LandingButton";
-import Modal from '../../UI/modal/Modal'
+import Modal from "../../UI/modal/Modal";
-import { BurgerMenu, HeaderContainer } from './styles'
+import { BurgerMenu, HeaderContainer } from "./styles";
-import AddApplicationForm from '@/components/blocks/AddApplicationForm'
+import AddApplicationForm from "@/components/blocks/AddApplicationForm";
 
-type Props = {}
+type Props = {};
 
 export default function Header({}: Props) {
-	const [modal, setModal] = useState(false)
+  const [modal, setModal] = useState(false);
 
-	const [menuState, setMenuState] = useState(false)
+  const [menuState, setMenuState] = useState(false);
 
-	const pathname = usePathname()
+  const pathname = usePathname();
 
   useEffect(() => {
-		setMenuState(false)
+    setMenuState(false);
-	}, [pathname])
+  }, [pathname]);
 
-	return !pathname.startsWith('/admin') ? (
+  return !pathname.startsWith("/admin") ? (
     <>
       <HeaderContainer>
         <Container>
-					<div className='content'>
+          <div className="content">
-						<div className='logo'>
+            <div className="logo">
-							<img src='/logo.svg' alt='phone' />
+              <img src="/image/logo.svg" alt="phone" />
               <span>Городская похоронная служба</span>
             </div>
-						<div className='contact-block'>
+            <div className="contact-block">
-							<div className='addresses'>
+              <div className="addresses">
-								<span>ул. Курчатова, д. 4</span>
+                <span>
-								<span>ул. Героев Танкограда, д.61а</span>
+                  <a href="https://yandex.ru/maps/56/chelyabinsk/house/ulitsa_kurchatova_4/YkgYdQ5mTUYBQFtvfX11dntgYw==/?ll=61.396436%2C55.147737&z=17.08">
+                    ул. Курчатова, д. 4
+                  </a>
+                </span>
+                <span>
+                  <a href="https://yandex.ru/maps/56/chelyabinsk/house/ulitsa_geroyev_tankograda_61a/YkgYcgJhT0IEQFtvfX12d31lZg==/?ll=61.451673%2C55.176162&z=17.08">
+                    ул. Героев Танкограда, д.61а
+                  </a>
+                </span>
               </div>
-							<div className='phones'>
+              <div className="phones">
-								<div className='phone'>
+                <div className="phone">
-									<Image src='/phone.svg' width={20} height={20} alt='phone' />
-									<p>+7 (951) 773-34-53</p>
-								</div>
-								<div className='phone-all-time'>
-									<div className='top'>
                   <Image
-											src='/phone.svg'
+                    src="/image/phone.svg"
                     width={20}
                     height={20}
-											alt='phone'
+                    alt="phone"
                   />
+                  <a href="tel:+79517733453">
+                    <p>+7 (951) 773-34-53</p>
+                  </a>
+                </div>
+                <div className="phone-all-time">
+                  <div className="top">
+                    <Image
+                      src="/image/phone.svg"
+                      width={20}
+                      height={20}
+                      alt="phone"
+                    />
+                    <a href="tel:+79323079454">
                       <p>+7 (932) 307-94-54</p>
+                    </a>
                   </div>
                   <span>Круглосуточно</span>
                 </div>
@@ -61,57 +78,57 @@ export default function Header({}: Props) {
               Заказать звонок
             </LandingButton>
           </div>
-					<div className='navbar'>
+          <div className="navbar">
-						<Link href='/'>Главная</Link>
+            <Link href="/">Главная</Link>
-						<Link href='/services'>Услуги</Link>
+            <Link href="/services">Услуги</Link>
-						<Link href='/aboutUs'>О нас</Link>
+            <Link href="/aboutUs">О нас</Link>
-						<Link href='/ourCemeteries'>Наши кладбища</Link>
+            <Link href="/ourCemeteries">Наши кладбища</Link>
             {/* <Link href='/everlastingMemory'>Вечная память</Link> */}
           </div>
         </Container>
         <BurgerMenu state={menuState}>
-					<div className='title'>
+          <div className="title">
-						<div className='logo-container'>
+            <div className="logo-container">
-							<img src='/logo.svg' alt='' className='logo-image' />
+              <img src="/image/logo.svg" alt="" className="logo-image" />
             </div>
-						<div className='menu-icon-container'>
+            <div className="menu-icon-container">
               <img
-								src='/burger-menu.svg'
+                src="/image/burger-menu.svg"
-								alt=''
+                alt=""
                 onClick={() => setMenuState(true)}
               />
             </div>
           </div>
-					<div className='menu-container'>
+          <div className="menu-container">
-						<div className='title-active'>
+            <div className="title-active">
-							<div className='contact'>
+              <div className="contact">
-								<div className='addresses'>
+                <div className="addresses">
                   <p>ул. Курчатова, д. 4</p>
                   <p>ул. Героев Танкограда, д.61а</p>
                 </div>
-								<div className='number'>
+                <div className="number">
                   <p>+7 (951) 773-34-53</p>
                   <p>+7 (932) 307-94-54</p>
                 </div>
               </div>
               <img
-								src='/close-menu.svg'
+                src="/image/close-menu.svg"
-								alt=''
+                alt=""
                 onClick={() => setMenuState(false)}
               />
             </div>
-						<div className='menu'>
+            <div className="menu">
               <LandingButton
                 onClick={() => {
-									setModal(true), setMenuState(false)
+                  setModal(true), setMenuState(false);
                 }}
               >
                 Заказать звонок
               </LandingButton>
-							<Link href='/'>Главная</Link>
+              <Link href="/">Главная</Link>
-							<Link href='/services'>Услуги</Link>
+              <Link href="/services">Услуги</Link>
-							<Link href='/aboutUs'>О нас</Link>
+              <Link href="/aboutUs">О нас</Link>
-							<Link href='/ourCemeteries'>Наши кладбища</Link>
+              <Link href="/ourCemeteries">Наши кладбища</Link>
               {/* <Link href='/everlastingMemory'>Вечная память</Link> */}
             </div>
           </div>
@@ -122,5 +139,5 @@ export default function Header({}: Props) {
         <AddApplicationForm setModal={setModal} />
       </Modal>
     </>
-	) : null
+  ) : null;
 }

src/components/layout/Header/styles.ts

@@ -15,6 +15,10 @@ export const HeaderContainer = styled.div`
     display: flex;
     align-items: start;
     gap: 30px;
+
+    a {
+      font-size: 18px;
+    }
   }
 
   .logo {
@@ -201,7 +205,7 @@ export const HeaderContainer = styled.div`
       display: none;
     }
   }
-`
+`;
 
 interface I_Menu {
 	state: boolean

src/components/layout/footer/Footer.tsx

@@ -1,35 +1,35 @@
-'use client'
+"use client";
 
-import { Container } from '@/app/GlobalStyles'
+import { Container } from "@/app/GlobalStyles";
-import AddApplicationForm from '@/components/blocks/AddApplicationForm'
+import AddApplicationForm from "@/components/blocks/AddApplicationForm";
-import Link from 'next/link'
+import Link from "next/link";
-import { usePathname } from 'next/navigation'
+import { usePathname } from "next/navigation";
-import { useState } from 'react'
+import { useState } from "react";
-import LandingButton from '../../UI/button/LandingButton'
+import LandingButton from "../../UI/button/LandingButton";
-import Modal from '../../UI/modal/Modal'
+import Modal from "../../UI/modal/Modal";
 import {
   ContentContainer,
   ContentSection,
   FooterContainer,
   FooterContent,
-	LogoSection
+  LogoSection,
-} from './styels'
+} from "./styels";
 
-type Props = {}
+type Props = {};
 
 export default function Footer({}: Props) {
-	const [modal, setModal] = useState(false)
+  const [modal, setModal] = useState(false);
 
-	const pathname = usePathname()
+  const pathname = usePathname();
 
-	return !pathname.startsWith('/admin') ? (
+  return !pathname.startsWith("/admin") ? (
     <>
       <FooterContainer>
         <Container>
           <FooterContent>
             <ContentContainer>
               <LogoSection>
-								<img src='/logo.svg' alt='phone' />
+                <img src="/image/logo.svg" alt="phone" />
                 <span>Городская похоронная служба</span>
                 <LandingButton onClick={() => setModal(true)}>
                   Заказать звонок
@@ -37,23 +37,31 @@ export default function Footer({}: Props) {
               </LogoSection>
               <ContentSection>
                 <h3>Наши контакты</h3>
+                <a href="https://yandex.ru/maps/56/chelyabinsk/house/ulitsa_kurchatova_4/YkgYdQ5mTUYBQFtvfX11dntgYw==/?ll=61.396436%2C55.147737&z=17.08">
                   <p>ул. Курчатова, д. 4</p>
+                </a>
+                <a href="https://yandex.ru/maps/56/chelyabinsk/house/ulitsa_geroyev_tankograda_61a/YkgYcgJhT0IEQFtvfX12d31lZg==/?ll=61.451673%2C55.176162&z=17.08">
                   <p>ул. Героев Танкограда, д.61а</p>
+                </a>
+                <a href="tel:+79517733453">
                   <p>+7 (951) 773-34-53</p>
+                </a>
+                <a href="tel:+79323079454">
                   <p>+7 (932) 307-94-54</p>
+                </a>
               </ContentSection>
               <ContentSection>
                 <h3>Навигация</h3>
-								<Link href='/'>
+                <Link href="/">
                   <p>На главную</p>
                 </Link>
-								<Link href='/aboutUs'>
+                <Link href="/aboutUs">
                   <p>О нас</p>
                 </Link>
-								<Link href='/services'>
+                <Link href="/services">
                   <p>Услуги</p>
                 </Link>
-								<Link href='/ourCemeteries'>
+                <Link href="/ourCemeteries">
                   <p>Наши кладбища</p>
                 </Link>
               </ContentSection>
@@ -65,5 +73,5 @@ export default function Footer({}: Props) {
         <AddApplicationForm setModal={setModal} />
       </Modal>
     </>
-	) : null
+  ) : null;
 }

src/components/screens/about-us/AboutUs.tsx

@@ -105,7 +105,7 @@ export default function AboutUs({}: Props) {
 							потребностям и возможностям клиента.
 						</p>
 					</div>
-					<img src='/image 6.png' alt='' className='item' />
+					<img src='/image/about_us_image.png' alt='' className='item' />
 				</div>
 				<div className='bottom'>
 					<h3>Принципы прозрачности и заботы о клиентах</h3>

src/components/screens/admin/auth/Auth.tsx

@@ -13,7 +13,7 @@ type Props = {}
 const Container = styled.div`
   width: 100%;
   height: 100vh;
-	background-image: url('/image 12.jpg');
+  background-image: url("/image/admin_login_bg.jpg");
   background-position: center;
   background-size: cover;
 
@@ -37,7 +37,7 @@ const Container = styled.div`
     color: ${(props) => props.theme.colors.white};
     border-radius: 12px;
   }
-`
+`;
 
 const NotificationContainer = styled.div`
 	position: absolute;

src/components/screens/admin/service/Services.tsx

@@ -115,19 +115,19 @@ export default function Services({}: Props) {
             <>
               <AdminContainer>
                 <Container>
-									{!(services.length === 0 && searchQuery === '') ? (
+                  {!(services.length === 0 && searchQuery === "") ? (
                     <>
                       <h1>Услуги</h1>
-											<div className='search-block'>
+                      <div className="search-block">
-												<div className='input-block'>
+                        <div className="input-block">
                           <FormInput
                             value={searchQuery}
                             onChange={(e: ChangeEvent<HTMLInputElement>) =>
                               setSearchQuery(e.target.value)
                             }
-														placeholder='Введите название услуги'
+                            placeholder="Введите название услуги"
                           />
-													<img src='/search.svg' alt='' />
+                          <img src="/image/search.svg" alt="" />
                         </div>
                         <MainButton
                           fullWidth={true}
@@ -141,7 +141,7 @@ export default function Services({}: Props) {
                           <Loader />
                         </NotificationContainer>
                       ) : services.length !== 0 ? (
-												<div className='list'>
+                        <div className="list">
                           {services.map((item: T_Product, index) => (
                             <ServiceItem
                               item={item}
@@ -183,5 +183,5 @@ export default function Services({}: Props) {
         <MainButton>Закрыть</MainButton>
       </Modal>
     </>
-	)
+  );
 }

src/components/screens/admin/service/blocks/ServiceItem.tsx

@@ -1,10 +1,9 @@
-import MainButton from '@/components/UI/button/MainButton'
+import MainButton from "@/components/UI/button/MainButton";
-import ProductService from '@/services/product/productServeces'
+import ProductService from "@/services/product/productServeces";
-import { useState } from 'react'
+import { useState } from "react";
-import styled from 'styled-components'
+import styled from "styled-components";
-import { T_Product } from '../../../../../services/product/type'
+import { T_Product } from "../../../../../services/product/type";
-import UpdateServiceForm from './UpdateServiceForm'
+import UpdateServiceForm from "./UpdateServiceForm";
-import { hostName } from '../../../../../../config'
 
 const Cart = styled.div`
   display: flex;
@@ -46,35 +45,35 @@ const Cart = styled.div`
       object-fit: cover;
     }
   }
-`
+`;
 
 type Props = {
-	item: T_Product
+  item: T_Product;
-	getServices: () => void
+  getServices: () => void;
-}
+};
 
 export default function ServiceItem({ item, getServices }: Props) {
-	const [modal, setModal] = useState(false)
+  const [modal, setModal] = useState(false);
 
   const deleteService = async () => {
-		await ProductService.delete(item.Id)
+    await ProductService.delete(item.Id);
-		getServices()
+    getServices();
-	}
+  };
 
   return (
     <>
       <Cart>
-				<div className='block'>
+        <div className="block">
-					<img src={'/'+item.ImageUrls[0]} alt='' />
+          <img src={"/" + item.ImageUrls[0]} alt="" />
           <h3>{item.Name}</h3>
           <p>{item.FullDesc}</p>
         </div>
-				<div className='block'>
+        <div className="block">
           <h2>От {item.OldPrice} руб.</h2>
           <MainButton onClick={() => setModal(true)}>Редактировать</MainButton>
         </div>
-				<div className='delete-button' onClick={deleteService}>
+        <div className="delete-button" onClick={deleteService}>
-					<img src='/trash.svg' alt='' />
+          <img src="/image/trash.svg" alt="" />
         </div>
       </Cart>
       <UpdateServiceForm
@@ -84,5 +83,5 @@ export default function ServiceItem({ item, getServices }: Props) {
         item={item}
       />
     </>
-	)
+  );
 }

src/components/screens/home/blocks/AboutUs.tsx

@@ -36,23 +36,23 @@ export default function AboutUs({}: Props) {
 	return (
     <Container>
       <IconContainer>
-				<div className='item'>
+        <div className="item">
-					<img src='/cemetery.svg' alt='' />
+          <img src="/image/cemetery.svg" alt="" />
           <p>Разнообразные похоронные услуги для всех</p>
         </div>
-				<div className='item'>
+        <div className="item">
-					<img src='/agreement.svg' alt='' />
+          <img src="/image/agreement.svg" alt="" />
           <p>Четкие цены на все услуги</p>
         </div>
-				<div className='item'>
+        <div className="item">
-					<img src='/operator.svg' alt='' />
+          <img src="/image/operator.svg" alt="" />
           <p>Круглосуточная поддержка специалистов</p>
         </div>
-				<div className='item'>
+        <div className="item">
-					<img src='/deal.svg' alt='' />
+          <img src="/image/deal.svg" alt="" />
           <p>Договор без скрытых платежей</p>
         </div>
       </IconContainer>
     </Container>
-	)
+  );
 }

src/components/screens/home/blocks/CreateOrder.tsx

@@ -1,6 +1,8 @@
-import { Container } from '@/app/GlobalStyles'
+import { Container } from "@/app/GlobalStyles";
-import React from 'react'
+import Modal from "@/components/UI/modal/Modal";
-import styled from 'styled-components'
+import AddApplicationForm from "@/components/blocks/AddApplicationForm";
+import React, { useState } from "react";
+import styled from "styled-components";
 
 const OrderContainer = styled.div`
   display: flex;
@@ -20,28 +22,36 @@ const OrderContainer = styled.div`
       padding: 30px 70px;
       border-radius: 12px;
       border: none;
+      cursor: pointer;
     }
   }
 
   h3 {
     text-align: center;
   }
-`
+`;
 
-type Props = {}
+type Props = {};
 
 export default function CreateOrder({}: Props) {
+  const [modal, setModal] = useState(false);
+
   return (
+    <>
       <Container>
         <OrderContainer>
           <h1>Закажи обратный звонок</h1>
           <h3>Круглосуточно принимаем заказы любой сложности</h3>
-					<div className='button'>
+          <div className="button">
-						<button>
+            <button onClick={() => setModal(true)}>
               <h2>Оставить заявку</h2>
             </button>
           </div>
         </OrderContainer>
       </Container>
-  )
+      <Modal modal={modal} setModal={setModal}>
+        <AddApplicationForm setModal={setModal} />
+      </Modal>
+    </>
+  );
 }

src/components/screens/home/blocks/Instructions.tsx

@@ -48,21 +48,21 @@ export default function Instructions({}: Props) {
     <Container>
       <InstructionsContainer>
         <h2>Порядок действий в случае смерти человека</h2>
-				<div className='list'>
+        <div className="list">
-					<div className='item'>
+          <div className="item">
-						<img src='/telephone.svg' alt='' />
+            <img src="/image/telephone.svg" alt="" />
             <h3>Шаг 1: Обратитесь в нашу службу</h3>
             <p>
               Позвоните по номеру <span>+7 (932) 307-94-54</span>.
             </p>
           </div>
-					<div className='item'>
+          <div className="item">
-						<img src='/ambulance.svg' alt='' />
+            <img src="/image/ambulance.svg" alt="" />
             <h3>Шаг 2: Дождитесь полицию и скорую помощь</h3>
             <p>Дождитесь получения необходимого направления от полиции.</p>
           </div>
-					<div className='item'>
+          <div className="item">
-						<img src='/hospital.svg' alt='' />
+            <img src="/image/hospital.svg" alt="" />
             <h3>Шаг 3: Дождитесь эвакуацию</h3>
             <p>
               Дождитесь прибытия службы эвакуации для транспортировки тела в
@@ -72,5 +72,5 @@ export default function Instructions({}: Props) {
         </div>
       </InstructionsContainer>
     </Container>
-	)
+  );
 }

src/components/screens/home/blocks/MapSection.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React from "react";
-import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps'
+import { Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
-import styled from 'styled-components'
+import styled from "styled-components";
 
 const MapContainer = styled.div`
   margin: 50px 0;
@@ -54,44 +54,52 @@ const MapContainer = styled.div`
       display: grid;
       grid-template-columns: 1fr 1fr;
 
-			p{
+      p {
         max-width: 200px;
         width: 100%;
       }
     }
   }
-`
+`;
 
-type Props = {}
+type Props = {};
 
 export default function MapSection({}: Props) {
   return (
     <MapContainer>
       <YMaps>
         <Map
-					className='map'
+          className="map"
           defaultState={{
             center: [55.159902, 61.402554],
-						zoom: 12
+            zoom: 12,
           }}
           options={{
             yandexMapDisablePoiInteractivity: true,
             copyrightLogoVisible: true,
             copyrightProvidersVisible: true,
-						copyrightUaVisible: true
+            copyrightUaVisible: true,
           }}
         >
           <Placemark geometry={[55.147737, 61.396436]} />
           <Placemark geometry={[55.176162, 61.451673]} />
         </Map>
       </YMaps>
-			<div className='content'>
+      <div className="content">
         <h3>Наши контакты</h3>
+        <a href="https://yandex.ru/maps/56/chelyabinsk/house/ulitsa_kurchatova_4/YkgYdQ5mTUYBQFtvfX11dntgYw==/?ll=61.396436%2C55.147737&z=17.08">
           <p>ул. Курчатова, д. 4</p>
+        </a>
+        <a href="https://yandex.ru/maps/56/chelyabinsk/house/ulitsa_geroyev_tankograda_61a/YkgYcgJhT0IEQFtvfX12d31lZg==/?ll=61.451673%2C55.176162&z=17.08">
           <p>ул. Героев Танкограда, д.61а</p>
+        </a>
+        <a href="tel:+79517733453">
           <p>+7 (951) 773-34-53</p>
+        </a>
+        <a href="tel:+79323079454">
           <p>+7 (932) 307-94-54 (Круглосуточно)</p>
+        </a>
       </div>
     </MapContainer>
-	)
+  );
 }

src/components/screens/home/blocks/Review.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react'
+import { useState } from "react";
-import Slider from 'react-slick'
+import Slider from "react-slick";
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const ReviewsContainer = styled.div`
   gap: 50px;
@@ -55,7 +55,7 @@ export const ReviewsContainer = styled.div`
       }
     }
   }
-`
+`;
 
 export const MobileReviewsContainer = styled.div`
   display: none;
@@ -165,9 +165,9 @@ export const MobileReviewsContainer = styled.div`
       }
     }
   }
-`
+`;
 
-type Props = {}
+type Props = {};
 
 export default function Review({}: Props) {
   const settings = {
@@ -179,7 +179,7 @@ export default function Review({}: Props) {
     speed: 500,
     arrows: false,
     centerMode: true,
-		centerPadding: '60px',
+    centerPadding: "60px",
     responsive: [
       {
         breakpoint: 1024,
@@ -188,8 +188,8 @@ export default function Review({}: Props) {
           slidesToScroll: 1,
           infinite: true,
           dots: true,
-					centerMode: true
+          centerMode: true,
-				}
+        },
       },
       {
         breakpoint: 1550,
@@ -198,50 +198,50 @@ export default function Review({}: Props) {
           slidesToScroll: 1,
           infinite: true,
           dots: true,
-					centerMode: true
+          centerMode: true,
-				}
+        },
-			}
+      },
-		]
+    ],
-	}
+  };
 
   const [users, setUsers] = useState([
     {
-			name: 'Анна Иванова',
+      name: "Анна Иванова",
-			image: '/review/person_1.jpg',
+      image: "/review/person_2.jpg",
       review:
-				'Профессиональное и сочувственное обслуживание. Помогли организовать похороны без лишних хлопот. Благодарна за их поддержку в трудный момент.'
+        "Профессиональное и сочувственное обслуживание. Помогли организовать похороны без лишних хлопот. Благодарна за их поддержку в трудный момент.",
     },
     {
-			name: 'Сергей Петров',
+      name: "Сергей Петров",
-			image: '/review/person_2.jpg',
+      image: "/review/person_1.jpg",
       review:
-				'Отличное соотношение цены и качества услуг. Все выполнено аккуратно и в срок. Рекомендую это агентство в сложные времена.'
+        "Отличное соотношение цены и качества услуг. Все выполнено аккуратно и в срок. Рекомендую это агентство в сложные времена.",
     },
     {
-			name: 'Елена Козлова',
+      name: "Елена Козлова",
-			image: '/review/person_3.jpg',
+      image: "/review/person_3.jpg",
       review:
-				'Искренне признательна за заботу и профессионализм. Организация похорон прошла гладко, учли все наши пожелания. Спасибо за поддержку.'
+        "Искренне признательна за заботу и профессионализм. Организация похорон прошла гладко, учли все наши пожелания. Спасибо за поддержку.",
     },
     {
-			name: 'Александр Смирнов',
+      name: "Александр Смирнов",
-			image: '/review/person_4.jpg',
+      image: "/review/person_4.jpg",
       review:
-				'Эмпатичные сотрудники, готовые помочь в любое время суток. Сделали все возможное, чтобы облегчить бремя нашей утраты. Благодарим за помощь.'
+        "Эмпатичные сотрудники, готовые помочь в любое время суток. Сделали все возможное, чтобы облегчить бремя нашей утраты. Благодарим за помощь.",
-		}
+    },
-	])
+  ]);
 
   return (
     <>
       <ReviewsContainer>
         <h2>Отзывы о проведенных церемониях</h2>
-				<div className='slider-container'>
+        <div className="slider-container">
           <Slider {...settings}>
             {users.map((user, index) => (
               <div key={index}>
-								<div className='item'>
+                <div className="item">
-									<img src={user.image} alt='' />
+                  <img src={user.image} alt="" />
-									<div className='content'>
+                  <div className="content">
                     <h3>{user.name}</h3>
                     <p>{user.review}</p>
                   </div>
@@ -253,37 +253,22 @@ export default function Review({}: Props) {
       </ReviewsContainer>
       <MobileReviewsContainer>
         <h2>Отзывы о проведенных церемониях</h2>
-				<div className='slider-container'>
+        <div className="slider-container">
           <Slider {...settings}>
-						{[...Array(4)].map((_, index) => (
+            {users.map((user, index) => (
-							<div>
+              <div key={index}>
-								<div className='item'>
+                <div className="item">
-									<img src='/image 4.png' alt='' />
+                  <img src={user.image} alt="" />
-									<div className='content'>
+                  <div className="content">
-										<h3>Виктор Иванов</h3>
+                    <h3>{user.name}</h3>
-										<p>
+                    <p>{user.review}</p>
-											Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-											sed do eiusmod tempor incididunt ut labore et dolore magna
-											aliqua.
-										</p>
                   </div>
                 </div>
-								<div className='mobile-item'>
-									<div className='content'>
-										<img src='/image 4.png' alt='' />
-										<h3>Виктор Иванов</h3>
-									</div>
-									<p>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-										do eiusmod tempor incididunt ut labore et dolore magna
-										aliqua.
-									</p>
-								</div>
               </div>
             ))}
           </Slider>
         </div>
       </MobileReviewsContainer>
     </>
-	)
+  );
 }

src/components/screens/home/blocks/SliderSection.tsx

@@ -1,12 +1,15 @@
-'use client'
+"use client";
 
-import { Container } from '@/app/GlobalStyles'
+import { Container } from "@/app/GlobalStyles";
-import LandingButton from '@/components/UI/button/LandingButton'
+import LandingButton from "@/components/UI/button/LandingButton";
-import { useState } from 'react'
+import Modal from "@/components/UI/modal/Modal";
-import Slider from 'react-slick'
+import AddApplicationForm from "@/components/blocks/AddApplicationForm";
-import 'slick-carousel/slick/slick-theme.css'
+import Link from "next/link";
-import 'slick-carousel/slick/slick.css'
+import { useState } from "react";
-import styled from 'styled-components'
+import Slider from "react-slick";
+import "slick-carousel/slick/slick-theme.css";
+import "slick-carousel/slick/slick.css";
+import styled from "styled-components";
 
 const Item = styled.div`
   position: relative;
@@ -94,7 +97,7 @@ const Item = styled.div`
       }
     }
   }
-`
+`;
 
 const RightArrow = styled.img`
   position: absolute;
@@ -111,7 +114,7 @@ const RightArrow = styled.img`
   &:hover {
     background: ${(props) => props.theme.colors.black};
   }
-`
+`;
 
 const LeftArrow = styled.img`
   position: absolute;
@@ -132,7 +135,7 @@ const LeftArrow = styled.img`
   ${(props) => props.theme.mediaQueries.mobile} {
     display: none;
   }
-`
+`;
 
 const SliderContainer = styled.div`
   margin-top: 50px;
@@ -147,7 +150,7 @@ const SliderContainer = styled.div`
   ${(props) => props.theme.mediaQueries.mobile} {
     display: none;
   }
-`
+`;
 
 const MobileSliderContainer = styled.div`
   display: none;
@@ -163,17 +166,17 @@ const MobileSliderContainer = styled.div`
       display: none !important;
     }
   }
-`
+`;
 
-type Props = {}
+type Props = {};
 
 export default function SliderSection({}: Props) {
   const settings = {
     infinite: true,
     slidesToShow: 1,
     slidesToScroll: 1,
-		nextArrow: <RightArrow src='/left arrow.svg' alt='' />,
+    nextArrow: <RightArrow src="/image/left arrow.svg" alt="" />,
-		prevArrow: <LeftArrow src='/left arrow.svg' alt='' />,
+    prevArrow: <LeftArrow src="/image/left arrow.svg" alt="" />,
     autoplay: true,
     speed: 2000,
     autoplaySpeed: 4000,
@@ -181,46 +184,48 @@ export default function SliderSection({}: Props) {
       {
         breakpoint: 640,
         settings: {
-					dots: true
+          dots: true,
-				}
+        },
-			}
+      },
-		]
+    ],
-	}
+  };
 
   const [slides, setSlides] = useState([
     {
-			title: 'Мы принимаем заявки прямо сейчас',
+      title: "Мы принимаем заявки прямо сейчас",
       content:
-				'Просто оставьте заявку, и мы свяжемся с вами для уточнения деталей и предоставления всей необходимой информации.',
+        "Просто оставьте заявку, и мы свяжемся с вами для уточнения деталей и предоставления всей необходимой информации.",
-			image: '/home_slider/slide_4.jpg',
+      image: "/home_slider/slide_4.jpg",
-			link: '',
+      link: "",
-			button: 'Оставить заявку'
+      button: "Заказать звонок",
     },
     {
-			title: 'Мы предлагаем разнообразные услуги',
+      title: "Мы предлагаем разнообразные услуги",
       content:
-				'Широкий спектр услуг для достойного прощания и помощи в трудный момент. У нас вы найдете все необходимое для организации похоронных церемоний.',
+        "Широкий спектр услуг для достойного прощания и помощи в трудный момент. У нас вы найдете все необходимое для организации похоронных церемоний.",
-			image: '/home_slider/slide_1.jpg',
+      image: "/home_slider/slide_1.jpg",
-			link: '',
+      link: "/services",
-			button: 'Узнать больше'
+      button: "Узнать больше",
     },
     {
-			title: 'Мы работаем со всеми кладбищами в области',
+      title: "Мы работаем со всеми кладбищами в области",
       content:
-				'Наши услуги доступны на всех кладбищах в этой области для вашего удобства. Мы готовы помочь вам в любом месте и в любое время.',
+        "Наши услуги доступны на всех кладбищах в этой области для вашего удобства. Мы готовы помочь вам в любом месте и в любое время.",
-			image: '/home_slider/slide_2.png',
+      image: "/home_slider/slide_2.png",
-			link: '',
+      link: "/ourCemeteries",
-			button: 'Смотреть кладбища'
+      button: "Смотреть кладбища",
     },
     {
-			title: 'Мы работаем давно и многое можем предложить',
+      title: "Мы работаем давно и многое можем предложить",
       content:
-				'Наша команда специалистов - залог профессионализма и заботы. Мы основываемся на принципах честности, сочувствия и уважения.',
+        "Наша команда специалистов - залог профессионализма и заботы. Мы основываемся на принципах честности, сочувствия и уважения.",
-			image: '/home_slider/slide_3.jpg',
+      image: "/home_slider/slide_3.jpg",
-			link: '',
+      link: "/aboutUs",
-			button: 'Подробнее о нас'
+      button: "Подробнее о нас",
-		}
+    },
-	])
+  ]);
+
+  const [modal, setModal] = useState(false)
 
   return (
     <>
@@ -229,12 +234,20 @@ export default function SliderSection({}: Props) {
           <Slider {...settings}>
             {slides.map((item, index) => (
               <Item key={index}>
-								<img src={item.image} alt='' />
+                <img src={item.image} alt="" />
-								<div className='content'>
+                <div className="content">
                   <h2>{item.title}</h2>
                   <h3>{item.title}</h3>
                   <h4>{item.content}</h4>
+                  {item.link !== "" ? (
+                    <Link href={item.link}>
                       <LandingButton>{item.button}</LandingButton>
+                    </Link>
+                  ) : (
+                    <LandingButton onClick={() => setModal(true)}>
+                      {item.button}
+                    </LandingButton>
+                  )}
                 </div>
               </Item>
             ))}
@@ -243,22 +256,30 @@ export default function SliderSection({}: Props) {
       </Container>
       <MobileSliderContainer>
         <Slider {...settings}>
-					{[...Array(2)].map((_, index) => (
+          {slides.map((item, index) => (
-						<Item>
+            <Item key={index}>
-							<img src='/image 1.png' alt='' />
+              <img src={item.image} alt="" />
-							<div className='content'>
+              <div className="content">
-								<h2>Предоставление похоронных услуг в Челябинске.</h2>
+                <h2>{item.title}</h2>
-								<h3>Предоставление похоронных услуг в Челябинске.</h3>
+                <h3>{item.title}</h3>
-								<h4>
+                <h4>{item.content}</h4>
-									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                {item.link !== "" ? (
-									do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  <Link href={item.link}>
-								</h4>
+                    <LandingButton>{item.button}</LandingButton>
-								<LandingButton>Подробнее о нас</LandingButton>
+                  </Link>
+                ) : (
+                  <LandingButton onClick={() => setModal(true)}>
+                    {item.button}
+                  </LandingButton>
+                )}
               </div>
             </Item>
           ))}
         </Slider>
       </MobileSliderContainer>
+      <Modal modal={modal} setModal={setModal}>
+        <AddApplicationForm setModal={setModal} />
+      </Modal>
     </>
-	)
+  );
 }

src/components/screens/our-cemeteries/OurCemetery.tsx

@@ -72,35 +72,15 @@ export default function OurCemetery({}: Props) {
 	return (
     <MapContainer>
       <h1>Наши кладбища</h1>
-			{/* <YMaps>
-				<Map
-					className='map'
-					defaultState={{
-						center: [55.159897, 61.402554],
-						zoom: 6
-					}}
-				>
-					<Circle
-						geometry={[[55.159897, 61.402554], 10000]}
-						options={{
-							draggable: true,
-							fillColor: '#DB709377',
-							strokeColor: '#990066',
-							strokeOpacity: 0.8,
-							strokeWidth: 5
-						}}
-					/>
-				</Map>
-			</YMaps> */}
       <iframe
-				src='https://yandex.ru/map-widget/v1/?um=constructor%3Aa53366eeae5cb98c21ef9f499da6647e293da5152591b651ff9474f6215833a0&amp;source=constructor'
+        src="https://yandex.ru/map-widget/v1/?um=constructor%3Aa53366eeae5cb98c21ef9f499da6647e293da5152591b651ff9474f6215833a0&amp;source=constructor"
-				width='100%'
+        width="100%"
-				height='450'
+        height="450"
       ></iframe>
-			<div className='content'>
+      <div className="content">
         <h3>Наши Кладбища</h3>
-				<p>Мы работаем по всей облачти</p>
+        <p>Мы работаем по всей области</p>
       </div>
     </MapContainer>
-	)
+  );
 }

src/components/screens/services/Services.tsx

@@ -1,14 +1,14 @@
-'use client'
+"use client";
 
-import { Container } from '@/app/GlobalStyles'
+import { Container } from "@/app/GlobalStyles";
-import MainButton from '@/components/UI/button/MainButton'
+import MainButton from "@/components/UI/button/MainButton";
-import ProductService from '@/services/product/productServeces'
+import ProductService from "@/services/product/productServeces";
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import styled from 'styled-components'
+import styled from "styled-components";
-import ServiceItem from './ServiceItem'
+import ServiceItem from "./ServiceItem";
-import Loader from '@/components/UI/loader/Loader'
+import Loader from "@/components/UI/loader/Loader";
 
-type Props = {}
+type Props = {};
 
 const ServicesContainer = styled.div`
   display: flex;
@@ -16,7 +16,7 @@ const ServicesContainer = styled.div`
   flex-direction: column;
   margin: 50px 0;
   gap: 50px;
-`
+`;
 
 const List = styled.div`
   display: grid;
@@ -35,7 +35,7 @@ const List = styled.div`
   ${(props) => props.theme.mediaQueries.mobile} {
     grid-template-columns: 1fr;
   }
-`
+`;
 
 const MessageContainer = styled.div`
   position: absolute;
@@ -50,26 +50,30 @@ const MessageContainer = styled.div`
     padding: 20px;
     margin-top: 30px;
   }
-`
+`;
 
 export default function Services({}: Props) {
-	const [services, setServices] = useState([])
+  const [services, setServices] = useState([]);
-	const [loadingState, setLoadingState] = useState(true)
+  const [loadingState, setLoadingState] = useState(true);
-	const [errorState, setErrorState] = useState(false)
+  const [errorState, setErrorState] = useState(false);
 
   const getServices = async () => {
     try {
-			const response = await ProductService.get('')
+      const response = await ProductService.get("");
-			setServices(response.data.Data)
+      if (response.status === 200) {
+        setServices(response.data.Data);
+      } else {
+        setErrorState(false);
+      }
     } catch (error) {
-			setErrorState(true)
+      setErrorState(true);
-		}
-		setLoadingState(false)
     }
+    setLoadingState(false);
+  };
 
   useEffect(() => {
-		getServices()
+    getServices();
-	}, [])
+  }, []);
 
   return (
     <Container>
@@ -98,5 +102,5 @@ export default function Services({}: Props) {
         )}
       </ServicesContainer>
     </Container>
-	)
+  );
 }