Принципы прозрачности и заботы о клиентах
diff --git a/src/components/screens/admin/auth/Auth.tsx b/src/components/screens/admin/auth/Auth.tsx
index b93501b..3dbd3c3 100644
--- a/src/components/screens/admin/auth/Auth.tsx
+++ b/src/components/screens/admin/auth/Auth.tsx
@@ -11,33 +11,33 @@ import styled from 'styled-components'
type Props = {}
const Container = styled.div`
- width: 100%;
- height: 100vh;
- background-image: url('/image 12.jpg');
- background-position: center;
- background-size: cover;
+ width: 100%;
+ height: 100vh;
+ background-image: url("/image/admin_login_bg.jpg");
+ background-position: center;
+ background-size: cover;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- top: 0;
- left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 0;
+ left: 0;
- .form {
- width: 440px;
- padding: 20px;
- text-align: center;
- display: flex;
- justify-content: center;
- flex-direction: column;
- gap: 20px;
- backdrop-filter: blur(4px);
- background: rgba(129, 129, 129, 0.4);
- color: ${(props) => props.theme.colors.white};
- border-radius: 12px;
- }
-`
+ .form {
+ width: 440px;
+ padding: 20px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ gap: 20px;
+ backdrop-filter: blur(4px);
+ background: rgba(129, 129, 129, 0.4);
+ color: ${(props) => props.theme.colors.white};
+ border-radius: 12px;
+ }
+`;
const NotificationContainer = styled.div`
position: absolute;
diff --git a/src/components/screens/admin/service/Services.tsx b/src/components/screens/admin/service/Services.tsx
index 4eaeb36..696a9d5 100644
--- a/src/components/screens/admin/service/Services.tsx
+++ b/src/components/screens/admin/service/Services.tsx
@@ -100,88 +100,88 @@ export default function Services({}: Props) {
}, [])
return (
- <>
- {firstLoadingState ? (
-
-
-
- ) : (
- <>
- {ConnectServerError ? (
-
- Сервер не доступен...
-
- ) : (
- <>
-
-
- {!(services.length === 0 && searchQuery === '') ? (
- <>
- Услуги
-
-
-
) =>
- setSearchQuery(e.target.value)
- }
- placeholder='Введите название услуги'
- />
- 
-
-
setModal(true)}
- >
- Добавить
-
-
- {services.map((item: T_Product, index) => (
-
- ))}
-
- ) : (
-
- Ничего не найдено
-
- )}
-
- ) : (
-
- Список товаров пуст
- setModal(true)}
- >
- Добавить
-
-
- )}
-
-
-
-
- )}
-
- )}
-
- {errorMessage}
- Закрыть
-
-
- )
+ <>
+ {firstLoadingState ? (
+
+
+
+ ) : (
+ <>
+ {ConnectServerError ? (
+
+ Сервер не доступен...
+
+ ) : (
+ <>
+
+
+ {!(services.length === 0 && searchQuery === "") ? (
+ <>
+ Услуги
+
+
+
) =>
+ setSearchQuery(e.target.value)
+ }
+ placeholder="Введите название услуги"
+ />
+ 
+
+
setModal(true)}
+ >
+ Добавить
+
+
+ {services.map((item: T_Product, index) => (
+
+ ))}
+
+ ) : (
+
+ Ничего не найдено
+
+ )}
+
+ ) : (
+
+ Список товаров пуст
+ setModal(true)}
+ >
+ Добавить
+
+
+ )}
+
+
+
+
+ )}
+
+ )}
+
+ {errorMessage}
+ Закрыть
+
+
+ );
}
diff --git a/src/components/screens/admin/service/blocks/ServiceItem.tsx b/src/components/screens/admin/service/blocks/ServiceItem.tsx
index 83d88f0..81c027a 100644
--- a/src/components/screens/admin/service/blocks/ServiceItem.tsx
+++ b/src/components/screens/admin/service/blocks/ServiceItem.tsx
@@ -1,88 +1,87 @@
-import MainButton from '@/components/UI/button/MainButton'
-import ProductService from '@/services/product/productServeces'
-import { useState } from 'react'
-import styled from 'styled-components'
-import { T_Product } from '../../../../../services/product/type'
-import UpdateServiceForm from './UpdateServiceForm'
-import { hostName } from '../../../../../../config'
+import MainButton from "@/components/UI/button/MainButton";
+import ProductService from "@/services/product/productServeces";
+import { useState } from "react";
+import styled from "styled-components";
+import { T_Product } from "../../../../../services/product/type";
+import UpdateServiceForm from "./UpdateServiceForm";
const Cart = styled.div`
- display: flex;
- flex-direction: column;
- align-items: start;
- width: 280px;
- gap: 10px;
- position: relative;
- justify-content: space-between;
- border-radius: 12px 12px 0 0;
- overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ width: 280px;
+ gap: 10px;
+ position: relative;
+ justify-content: space-between;
+ border-radius: 12px 12px 0 0;
+ overflow: hidden;
- text-align: justify;
+ text-align: justify;
- .delete-button {
- position: absolute;
- top: 10px;
- right: 10px;
- background: ${(props) => props.theme.colors.white};
- width: 30px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50px;
- cursor: pointer;
- }
+ .delete-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: ${(props) => props.theme.colors.white};
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50px;
+ cursor: pointer;
+ }
- .block {
- display: flex;
- flex-direction: column;
- align-items: start;
- width: 280px;
- gap: 10px;
+ .block {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ width: 280px;
+ gap: 10px;
- img {
- width: 280px;
- height: 200px;
- object-fit: cover;
- }
- }
-`
+ img {
+ width: 280px;
+ height: 200px;
+ object-fit: cover;
+ }
+ }
+`;
type Props = {
- item: T_Product
- getServices: () => void
-}
+ item: T_Product;
+ 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)
- getServices()
- }
+ const deleteService = async () => {
+ await ProductService.delete(item.Id);
+ getServices();
+ };
- return (
- <>
-
-
-
-
{item.Name}
-
{item.FullDesc}
-
-
От {item.OldPrice} руб.
- setModal(true)}>Редактировать
-
-
-
-
-
-
- )
+ return (
+ <>
+
+
+
![]({"/")
+
{item.Name}
+
{item.FullDesc}
+
+
От {item.OldPrice} руб.
+ setModal(true)}>Редактировать
+
+
+
+
+
+
+ );
}
diff --git a/src/components/screens/home/blocks/AboutUs.tsx b/src/components/screens/home/blocks/AboutUs.tsx
index ed5a513..952b491 100644
--- a/src/components/screens/home/blocks/AboutUs.tsx
+++ b/src/components/screens/home/blocks/AboutUs.tsx
@@ -34,25 +34,25 @@ type Props = {}
export default function AboutUs({}: Props) {
return (
-
-
-
-
-
Разнообразные похоронные услуги для всех
-
-
-
Четкие цены на все услуги
-
-
-
Круглосуточная поддержка специалистов
-
-
-
Договор без скрытых платежей
-
- )
+
+
+
+
+
Разнообразные похоронные услуги для всех
+
+
+
Четкие цены на все услуги
+
+
+
Круглосуточная поддержка специалистов
+
+
+
Договор без скрытых платежей
+
+ );
}
diff --git a/src/components/screens/home/blocks/CreateOrder.tsx b/src/components/screens/home/blocks/CreateOrder.tsx
index ac7d1d0..e8b394d 100644
--- a/src/components/screens/home/blocks/CreateOrder.tsx
+++ b/src/components/screens/home/blocks/CreateOrder.tsx
@@ -1,47 +1,57 @@
-import { Container } from '@/app/GlobalStyles'
-import React from 'react'
-import styled from 'styled-components'
+import { Container } from "@/app/GlobalStyles";
+import Modal from "@/components/UI/modal/Modal";
+import AddApplicationForm from "@/components/blocks/AddApplicationForm";
+import React, { useState } from "react";
+import styled from "styled-components";
const OrderContainer = styled.div`
- display: flex;
- align-items: center;
- flex-direction: column;
- gap: 30px;
- margin-top: 50px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: 30px;
+ margin-top: 50px;
- .button {
- padding: 10px;
- border-radius: 12px;
- border: 3px solid ${(props) => props.theme.colors.green};
+ .button {
+ padding: 10px;
+ border-radius: 12px;
+ border: 3px solid ${(props) => props.theme.colors.green};
- button {
- background: ${(props) => props.theme.colors.green};
- color: ${(props) => props.theme.colors.white};
- padding: 30px 70px;
- border-radius: 12px;
- border: none;
- }
- }
+ button {
+ background: ${(props) => props.theme.colors.green};
+ color: ${(props) => props.theme.colors.white};
+ padding: 30px 70px;
+ border-radius: 12px;
+ border: none;
+ cursor: pointer;
+ }
+ }
- h3 {
- text-align: center;
- }
-`
+ h3 {
+ text-align: center;
+ }
+`;
-type Props = {}
+type Props = {};
export default function CreateOrder({}: Props) {
+ const [modal, setModal] = useState(false);
+
return (
-
-
- Закажи обратный звонок
- Круглосуточно принимаем заказы любой сложности
-
-
-
-
-
- )
-}
\ No newline at end of file
+ <>
+
+
+ Закажи обратный звонок
+ Круглосуточно принимаем заказы любой сложности
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/screens/home/blocks/Instructions.tsx b/src/components/screens/home/blocks/Instructions.tsx
index 13ff421..efaebf2 100644
--- a/src/components/screens/home/blocks/Instructions.tsx
+++ b/src/components/screens/home/blocks/Instructions.tsx
@@ -45,32 +45,32 @@ type Props = {}
export default function Instructions({}: Props) {
return (
-
-
- Порядок действий в случае смерти человека
-
-
-
-
Шаг 1: Обратитесь в нашу службу
-
- Позвоните по номеру +7 (932) 307-94-54.
-
-
-
-
-
Шаг 2: Дождитесь полицию и скорую помощь
-
Дождитесь получения необходимого направления от полиции.
-
-
-
-
Шаг 3: Дождитесь эвакуацию
-
- Дождитесь прибытия службы эвакуации для транспортировки тела в
- морг.
-
-
-
- )
+
+
+ Порядок действий в случае смерти человека
+
+
+
+
Шаг 1: Обратитесь в нашу службу
+
+ Позвоните по номеру +7 (932) 307-94-54.
+
+
+
+
+
Шаг 2: Дождитесь полицию и скорую помощь
+
Дождитесь получения необходимого направления от полиции.
+
+
+
+
Шаг 3: Дождитесь эвакуацию
+
+ Дождитесь прибытия службы эвакуации для транспортировки тела в
+ морг.
+
+
+
+ );
}
diff --git a/src/components/screens/home/blocks/MapSection.tsx b/src/components/screens/home/blocks/MapSection.tsx
index a4071c7..bbe791e 100644
--- a/src/components/screens/home/blocks/MapSection.tsx
+++ b/src/components/screens/home/blocks/MapSection.tsx
@@ -1,97 +1,105 @@
-import React from 'react'
-import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps'
-import styled from 'styled-components'
+import React from "react";
+import { Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
+import styled from "styled-components";
const MapContainer = styled.div`
- margin: 50px 0;
- position: relative;
+ margin: 50px 0;
+ position: relative;
- .content {
- padding: 15px;
- display: flex;
- flex-direction: column;
- gap: 10px;
- background: ${(props) => props.theme.colors.white};
- border-radius: 12px;
- position: absolute;
- top: 50%;
- left: 10%;
- transform: translateY(-50%);
- z-index: 1;
- }
+ .content {
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ background: ${(props) => props.theme.colors.white};
+ border-radius: 12px;
+ position: absolute;
+ top: 50%;
+ left: 10%;
+ transform: translateY(-50%);
+ z-index: 1;
+ }
- .map {
- width: 100%;
- height: 450px;
- }
+ .map {
+ width: 100%;
+ height: 450px;
+ }
- ${(props) => props.theme.mediaQueries.tabletLandscape} {
- .content {
- gap: 5px;
- left: 5%;
+ ${(props) => props.theme.mediaQueries.tabletLandscape} {
+ .content {
+ gap: 5px;
+ left: 5%;
- h3 {
- font-size: 16px;
- }
+ h3 {
+ font-size: 16px;
+ }
- p {
- font-size: 14px;
- }
- }
- }
+ p {
+ font-size: 14px;
+ }
+ }
+ }
- ${(props) => props.theme.mediaQueries.tabletPortrait} {
- h3 {
- display: none;
- }
+ ${(props) => props.theme.mediaQueries.tabletPortrait} {
+ h3 {
+ display: none;
+ }
- .content {
- left: 0;
- right: 0;
- border-radius: 0;
- position: relative;
- transform: translateY(0);
- display: grid;
- grid-template-columns: 1fr 1fr;
+ .content {
+ left: 0;
+ right: 0;
+ border-radius: 0;
+ position: relative;
+ transform: translateY(0);
+ display: grid;
+ grid-template-columns: 1fr 1fr;
- p{
- max-width: 200px;
- width: 100%;
- }
- }
- }
-`
+ p {
+ max-width: 200px;
+ width: 100%;
+ }
+ }
+ }
+`;
-type Props = {}
+type Props = {};
export default function MapSection({}: Props) {
return (
-
-
-
-
-
-
Наши контакты
-
ул. Курчатова, д. 4
-
ул. Героев Танкограда, д.61а
-
+7 (951) 773-34-53
-
+7 (932) 307-94-54 (Круглосуточно)
-
- )
-}
\ No newline at end of file
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/screens/home/blocks/Review.tsx b/src/components/screens/home/blocks/Review.tsx
index dfb0d4f..509ef8c 100644
--- a/src/components/screens/home/blocks/Review.tsx
+++ b/src/components/screens/home/blocks/Review.tsx
@@ -1,289 +1,274 @@
-import { useState } from 'react'
-import Slider from 'react-slick'
-import styled from 'styled-components'
+import { useState } from "react";
+import Slider from "react-slick";
+import styled from "styled-components";
export const ReviewsContainer = styled.div`
- gap: 50px;
- width: 100%;
+ gap: 50px;
+ width: 100%;
- h2 {
- margin: 50px 0;
- text-align: center;
- }
+ h2 {
+ margin: 50px 0;
+ text-align: center;
+ }
- .item {
- padding: 25px;
- gap: 30px;
- background: ${(props) => props.theme.colors.black};
- max-width: 580px;
- height: 190px;
- border-radius: 12px;
- color: ${(props) => props.theme.colors.white};
- display: flex;
+ .item {
+ padding: 25px;
+ gap: 30px;
+ background: ${(props) => props.theme.colors.black};
+ max-width: 580px;
+ height: 190px;
+ border-radius: 12px;
+ color: ${(props) => props.theme.colors.white};
+ display: flex;
- img {
- border-radius: 100px;
- height: 120px;
- max-height: 120px;
- width: 120px;
- min-width: 120px;
- object-fit: cover;
- }
- }
+ img {
+ border-radius: 100px;
+ height: 120px;
+ max-height: 120px;
+ width: 120px;
+ min-width: 120px;
+ object-fit: cover;
+ }
+ }
- .slick-slide {
- display: flex;
- justify-content: center;
- padding: 0 10px;
- }
+ .slick-slide {
+ display: flex;
+ justify-content: center;
+ padding: 0 10px;
+ }
- ${(props) => props.theme.mediaQueries.tabletLandscape} {
- display: none;
- .item {
- h3 {
- font-style: 14px;
- }
+ ${(props) => props.theme.mediaQueries.tabletLandscape} {
+ display: none;
+ .item {
+ h3 {
+ font-style: 14px;
+ }
- p {
- font-size: 12px;
- }
+ p {
+ font-size: 12px;
+ }
- img {
- border-radius: 100px;
- height: 90px;
- width: 90px;
- }
- }
- }
-`
+ img {
+ border-radius: 100px;
+ height: 90px;
+ width: 90px;
+ }
+ }
+ }
+`;
export const MobileReviewsContainer = styled.div`
- display: none;
- gap: 50px;
+ display: none;
+ gap: 50px;
- h2 {
- margin: 50px 0;
- text-align: center;
- }
+ h2 {
+ margin: 50px 0;
+ text-align: center;
+ }
- .item {
- padding: 25px;
- gap: 30px;
- background: ${(props) => props.theme.colors.black};
- max-width: 580px;
- border-radius: 12px;
- color: ${(props) => props.theme.colors.white};
- display: flex;
+ .item {
+ padding: 25px;
+ gap: 30px;
+ background: ${(props) => props.theme.colors.black};
+ max-width: 580px;
+ border-radius: 12px;
+ color: ${(props) => props.theme.colors.white};
+ display: flex;
- img {
- border-radius: 100px;
- }
- }
+ img {
+ border-radius: 100px;
+ }
+ }
- .slick-slide {
- display: flex;
- justify-content: center;
- padding: 0 10px;
- }
+ .slick-slide {
+ display: flex;
+ justify-content: center;
+ padding: 0 10px;
+ }
- .mobile-item {
- display: none;
- }
+ .mobile-item {
+ display: none;
+ }
- ${(props) => props.theme.mediaQueries.tabletLandscape} {
- display: block;
- .item {
- h3 {
- font-style: 14px;
- }
+ ${(props) => props.theme.mediaQueries.tabletLandscape} {
+ display: block;
+ .item {
+ h3 {
+ font-style: 14px;
+ }
- p {
- font-size: 12px;
- }
+ p {
+ font-size: 12px;
+ }
- img {
- border-radius: 100px;
- height: 90px;
- width: 90px;
- }
- }
- }
+ img {
+ border-radius: 100px;
+ height: 90px;
+ width: 90px;
+ }
+ }
+ }
- ${(props) => props.theme.mediaQueries.mobile} {
- .item {
- display: none;
- }
+ ${(props) => props.theme.mediaQueries.mobile} {
+ .item {
+ display: none;
+ }
- .mobile-item {
- display: flex;
- flex-direction: column;
- padding: 15px;
- gap: 20px;
- background: ${(props) => props.theme.colors.black};
- border-radius: 12px;
- color: ${(props) => props.theme.colors.white};
+ .mobile-item {
+ display: flex;
+ flex-direction: column;
+ padding: 15px;
+ gap: 20px;
+ background: ${(props) => props.theme.colors.black};
+ border-radius: 12px;
+ color: ${(props) => props.theme.colors.white};
- .content {
- display: flex;
- gap: 20px;
- align-items: center;
+ .content {
+ display: flex;
+ gap: 20px;
+ align-items: center;
- img {
- border-radius: 100px;
- height: 80px;
- width: 80px;
- }
+ img {
+ border-radius: 100px;
+ height: 80px;
+ width: 80px;
+ }
- h3 {
- font-style: 14px;
- }
+ h3 {
+ font-style: 14px;
+ }
- p {
- font-size: 12px;
- }
- }
- }
- }
+ p {
+ font-size: 12px;
+ }
+ }
+ }
+ }
- ${(props) => props.theme.mediaQueries.slimMobile} {
- .mobile-item {
- .content {
- gap: 10px;
+ ${(props) => props.theme.mediaQueries.slimMobile} {
+ .mobile-item {
+ .content {
+ gap: 10px;
- img {
- height: 60px;
- width: 60px;
- }
+ img {
+ height: 60px;
+ width: 60px;
+ }
- h3 {
- font-style: 10px;
- }
+ h3 {
+ font-style: 10px;
+ }
- p {
- font-size: 8px;
- }
- }
- }
- }
-`
+ p {
+ font-size: 8px;
+ }
+ }
+ }
+ }
+`;
-type Props = {}
+type Props = {};
export default function Review({}: Props) {
- const settings = {
- autoplay: true,
- dots: true,
- autoplaySpeed: 4000,
- infinite: true,
- slidesToShow: 3,
- speed: 500,
- arrows: false,
- centerMode: true,
- centerPadding: '60px',
- responsive: [
- {
- breakpoint: 1024,
- settings: {
- slidesToShow: 1,
- slidesToScroll: 1,
- infinite: true,
- dots: true,
- centerMode: true
- }
- },
- {
- breakpoint: 1550,
- settings: {
- slidesToShow: 2,
- slidesToScroll: 1,
- infinite: true,
- dots: true,
- centerMode: true
- }
- }
- ]
- }
+ const settings = {
+ autoplay: true,
+ dots: true,
+ autoplaySpeed: 4000,
+ infinite: true,
+ slidesToShow: 3,
+ speed: 500,
+ arrows: false,
+ centerMode: true,
+ centerPadding: "60px",
+ responsive: [
+ {
+ breakpoint: 1024,
+ settings: {
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ infinite: true,
+ dots: true,
+ centerMode: true,
+ },
+ },
+ {
+ breakpoint: 1550,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ infinite: true,
+ dots: true,
+ centerMode: true,
+ },
+ },
+ ],
+ };
- const [users, setUsers] = useState([
- {
- name: 'Анна Иванова',
- image: '/review/person_1.jpg',
- review:
- 'Профессиональное и сочувственное обслуживание. Помогли организовать похороны без лишних хлопот. Благодарна за их поддержку в трудный момент.'
- },
- {
- name: 'Сергей Петров',
- image: '/review/person_2.jpg',
- review:
- 'Отличное соотношение цены и качества услуг. Все выполнено аккуратно и в срок. Рекомендую это агентство в сложные времена.'
- },
- {
- name: 'Елена Козлова',
- image: '/review/person_3.jpg',
- review:
- 'Искренне признательна за заботу и профессионализм. Организация похорон прошла гладко, учли все наши пожелания. Спасибо за поддержку.'
- },
- {
- name: 'Александр Смирнов',
- image: '/review/person_4.jpg',
- review:
- 'Эмпатичные сотрудники, готовые помочь в любое время суток. Сделали все возможное, чтобы облегчить бремя нашей утраты. Благодарим за помощь.'
- }
- ])
+ const [users, setUsers] = useState([
+ {
+ name: "Анна Иванова",
+ image: "/review/person_2.jpg",
+ review:
+ "Профессиональное и сочувственное обслуживание. Помогли организовать похороны без лишних хлопот. Благодарна за их поддержку в трудный момент.",
+ },
+ {
+ name: "Сергей Петров",
+ image: "/review/person_1.jpg",
+ review:
+ "Отличное соотношение цены и качества услуг. Все выполнено аккуратно и в срок. Рекомендую это агентство в сложные времена.",
+ },
+ {
+ name: "Елена Козлова",
+ image: "/review/person_3.jpg",
+ review:
+ "Искренне признательна за заботу и профессионализм. Организация похорон прошла гладко, учли все наши пожелания. Спасибо за поддержку.",
+ },
+ {
+ name: "Александр Смирнов",
+ image: "/review/person_4.jpg",
+ review:
+ "Эмпатичные сотрудники, готовые помочь в любое время суток. Сделали все возможное, чтобы облегчить бремя нашей утраты. Благодарим за помощь.",
+ },
+ ]);
- return (
- <>
-
- Отзывы о проведенных церемониях
-
-
- {users.map((user, index) => (
-
-
-
-
-
{user.name}
-
{user.review}
-
-
-
-
-
- Отзывы о проведенных церемониях
-
-
- {[...Array(4)].map((_, index) => (
-
-
-
-
-
Виктор Иванов
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua.
-
-
-
-
-
-
-
Виктор Иванов
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
- do eiusmod tempor incididunt ut labore et dolore magna
- aliqua.
-
-
-
-
-
- )
+ return (
+ <>
+
+ Отзывы о проведенных церемониях
+
+
+ {users.map((user, index) => (
+
+
+
+
+
{user.name}
+
{user.review}
+
+
+
+
+
+ Отзывы о проведенных церемониях
+
+
+ {users.map((user, index) => (
+
+
+
+
+
{user.name}
+
{user.review}
+
+
+
+
+
+ );
}
diff --git a/src/components/screens/home/blocks/SliderSection.tsx b/src/components/screens/home/blocks/SliderSection.tsx
index 75d11d1..adbd6a9 100644
--- a/src/components/screens/home/blocks/SliderSection.tsx
+++ b/src/components/screens/home/blocks/SliderSection.tsx
@@ -1,264 +1,285 @@
-'use client'
+"use client";
-import { Container } from '@/app/GlobalStyles'
-import LandingButton from '@/components/UI/button/LandingButton'
-import { useState } from 'react'
-import Slider from 'react-slick'
-import 'slick-carousel/slick/slick-theme.css'
-import 'slick-carousel/slick/slick.css'
-import styled from 'styled-components'
+import { Container } from "@/app/GlobalStyles";
+import LandingButton from "@/components/UI/button/LandingButton";
+import Modal from "@/components/UI/modal/Modal";
+import AddApplicationForm from "@/components/blocks/AddApplicationForm";
+import Link from "next/link";
+import { useState } from "react";
+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;
+ position: relative;
- img {
- width: 100%;
- height: 400px;
- object-fit: cover;
- }
+ img {
+ width: 100%;
+ height: 400px;
+ object-fit: cover;
+ }
- .content {
- position: absolute;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: column;
- width: 400px;
- height: 400px;
- align-items: start;
- padding: 30px 40px;
- color: ${(props) => props.theme.colors.white};
- z-index: 2;
- background: rgba(53, 53, 53, 0.5);
- box-sizing: border-box;
+ .content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ width: 400px;
+ height: 400px;
+ align-items: start;
+ padding: 30px 40px;
+ color: ${(props) => props.theme.colors.white};
+ z-index: 2;
+ background: rgba(53, 53, 53, 0.5);
+ box-sizing: border-box;
- h3 {
- text-align: start;
- display: none;
- }
+ h3 {
+ text-align: start;
+ display: none;
+ }
- h2 {
- text-align: start;
- margin-bottom: 20px;
- }
+ h2 {
+ text-align: start;
+ margin-bottom: 20px;
+ }
- h4 {
- margin-bottom: 50px;
- }
- }
+ h4 {
+ margin-bottom: 50px;
+ }
+ }
- ${(props) => props.theme.mediaQueries.tabletLandscape} {
- .content {
- width: 400px;
- height: 400px;
- padding: 30px 40px;
+ ${(props) => props.theme.mediaQueries.tabletLandscape} {
+ .content {
+ width: 400px;
+ height: 400px;
+ padding: 30px 40px;
- h3 {
- display: block;
- margin-bottom: 20px;
- }
+ h3 {
+ display: block;
+ margin-bottom: 20px;
+ }
- h2 {
- display: none;
- }
+ h2 {
+ display: none;
+ }
- h4 {
- margin-bottom: auto;
- }
- }
- }
+ h4 {
+ margin-bottom: auto;
+ }
+ }
+ }
- ${(props) => props.theme.mediaQueries.tabletPortrait} {
- height: 300px;
+ ${(props) => props.theme.mediaQueries.tabletPortrait} {
+ height: 300px;
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
- .content {
- height: 100%;
- }
- }
+ .content {
+ height: 100%;
+ }
+ }
- ${(props) => props.theme.mediaQueries.mobile} {
- .content {
- width: 100%;
- h3 {
- font-size: 18px;
- }
+ ${(props) => props.theme.mediaQueries.mobile} {
+ .content {
+ width: 100%;
+ h3 {
+ font-size: 18px;
+ }
- h4 {
- font-size: 14px;
- }
- }
- }
-`
+ h4 {
+ font-size: 14px;
+ }
+ }
+ }
+`;
const RightArrow = styled.img`
- position: absolute;
- right: 0;
- top: 50%;
- z-index: 1;
- transform: rotate(180deg) translateY(50%);
- padding: 10px 5px;
- background: ${(props) => props.theme.colors.black};
- border-radius: 0 12px 12px 0;
- height: 45px;
- width: 35px;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ z-index: 1;
+ transform: rotate(180deg) translateY(50%);
+ padding: 10px 5px;
+ background: ${(props) => props.theme.colors.black};
+ border-radius: 0 12px 12px 0;
+ height: 45px;
+ width: 35px;
- &:hover {
- background: ${(props) => props.theme.colors.black};
- }
-`
+ &:hover {
+ background: ${(props) => props.theme.colors.black};
+ }
+`;
const LeftArrow = styled.img`
- position: absolute;
- left: 0;
- z-index: 1;
- top: 50%;
- transform: translateY(-50%);
- padding: 10px 5px;
- background: ${(props) => props.theme.colors.black};
- border-radius: 0 12px 12px 0;
- height: 45px;
- width: 35px;
+ position: absolute;
+ left: 0;
+ z-index: 1;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 10px 5px;
+ background: ${(props) => props.theme.colors.black};
+ border-radius: 0 12px 12px 0;
+ height: 45px;
+ width: 35px;
- &:hover {
- background: ${(props) => props.theme.colors.black};
- }
+ &:hover {
+ background: ${(props) => props.theme.colors.black};
+ }
- ${(props) => props.theme.mediaQueries.mobile} {
- display: none;
- }
-`
+ ${(props) => props.theme.mediaQueries.mobile} {
+ display: none;
+ }
+`;
const SliderContainer = styled.div`
- margin-top: 50px;
- overflow: hidden;
- border-radius: 12px;
- height: 400px;
+ margin-top: 50px;
+ overflow: hidden;
+ border-radius: 12px;
+ height: 400px;
- ${(props) => props.theme.mediaQueries.tabletPortrait} {
- height: 300px;
- }
+ ${(props) => props.theme.mediaQueries.tabletPortrait} {
+ height: 300px;
+ }
- ${(props) => props.theme.mediaQueries.mobile} {
- display: none;
- }
-`
+ ${(props) => props.theme.mediaQueries.mobile} {
+ display: none;
+ }
+`;
const MobileSliderContainer = styled.div`
- display: none;
+ display: none;
- ${(props) => props.theme.mediaQueries.mobile} {
- overflow: hidden;
- display: block;
- height: 300px;
- }
+ ${(props) => props.theme.mediaQueries.mobile} {
+ overflow: hidden;
+ display: block;
+ height: 300px;
+ }
- .slick-arrow {
- ${(props) => props.theme.mediaQueries.mobile} {
- display: none !important;
- }
- }
-`
+ .slick-arrow {
+ ${(props) => props.theme.mediaQueries.mobile} {
+ display: none !important;
+ }
+ }
+`;
-type Props = {}
+type Props = {};
export default function SliderSection({}: Props) {
- const settings = {
- infinite: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- nextArrow:
,
- prevArrow:
,
- autoplay: true,
- speed: 2000,
- autoplaySpeed: 4000,
- responsive: [
- {
- breakpoint: 640,
- settings: {
- dots: true
- }
- }
- ]
- }
+ const settings = {
+ infinite: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ nextArrow:
,
+ prevArrow:
,
+ autoplay: true,
+ speed: 2000,
+ autoplaySpeed: 4000,
+ responsive: [
+ {
+ breakpoint: 640,
+ settings: {
+ dots: true,
+ },
+ },
+ ],
+ };
- const [slides, setSlides] = useState([
- {
- title: 'Мы принимаем заявки прямо сейчас',
- content:
- 'Просто оставьте заявку, и мы свяжемся с вами для уточнения деталей и предоставления всей необходимой информации.',
- image: '/home_slider/slide_4.jpg',
- link: '',
- button: 'Оставить заявку'
- },
- {
- title: 'Мы предлагаем разнообразные услуги',
- content:
- 'Широкий спектр услуг для достойного прощания и помощи в трудный момент. У нас вы найдете все необходимое для организации похоронных церемоний.',
- image: '/home_slider/slide_1.jpg',
- link: '',
- button: 'Узнать больше'
- },
- {
- title: 'Мы работаем со всеми кладбищами в области',
- content:
- 'Наши услуги доступны на всех кладбищах в этой области для вашего удобства. Мы готовы помочь вам в любом месте и в любое время.',
- image: '/home_slider/slide_2.png',
- link: '',
- button: 'Смотреть кладбища'
- },
- {
- title: 'Мы работаем давно и многое можем предложить',
- content:
- 'Наша команда специалистов - залог профессионализма и заботы. Мы основываемся на принципах честности, сочувствия и уважения.',
- image: '/home_slider/slide_3.jpg',
- link: '',
- button: 'Подробнее о нас'
- }
- ])
+ const [slides, setSlides] = useState([
+ {
+ title: "Мы принимаем заявки прямо сейчас",
+ content:
+ "Просто оставьте заявку, и мы свяжемся с вами для уточнения деталей и предоставления всей необходимой информации.",
+ image: "/home_slider/slide_4.jpg",
+ link: "",
+ button: "Заказать звонок",
+ },
+ {
+ title: "Мы предлагаем разнообразные услуги",
+ content:
+ "Широкий спектр услуг для достойного прощания и помощи в трудный момент. У нас вы найдете все необходимое для организации похоронных церемоний.",
+ image: "/home_slider/slide_1.jpg",
+ link: "/services",
+ button: "Узнать больше",
+ },
+ {
+ title: "Мы работаем со всеми кладбищами в области",
+ content:
+ "Наши услуги доступны на всех кладбищах в этой области для вашего удобства. Мы готовы помочь вам в любом месте и в любое время.",
+ image: "/home_slider/slide_2.png",
+ link: "/ourCemeteries",
+ button: "Смотреть кладбища",
+ },
+ {
+ title: "Мы работаем давно и многое можем предложить",
+ content:
+ "Наша команда специалистов - залог профессионализма и заботы. Мы основываемся на принципах честности, сочувствия и уважения.",
+ image: "/home_slider/slide_3.jpg",
+ link: "/aboutUs",
+ button: "Подробнее о нас",
+ },
+ ]);
- return (
- <>
-
-
-
- {slides.map((item, index) => (
- -
-
-
-
{item.title}
- {item.title}
- {item.content}
- {item.button}
-
-
- ))}
-
-
-
-
-
- {[...Array(2)].map((_, index) => (
- -
-
-
-
Предоставление похоронных услуг в Челябинске.
- Предоставление похоронных услуг в Челябинске.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
- Подробнее о нас
-
-
- ))}
-
-
-
- )
+ const [modal, setModal] = useState(false)
+
+ return (
+ <>
+
+
+
+ {slides.map((item, index) => (
+ -
+
+
+
{item.title}
+ {item.title}
+ {item.content}
+ {item.link !== "" ? (
+
+ {item.button}
+
+ ) : (
+ setModal(true)}>
+ {item.button}
+
+ )}
+
+
+ ))}
+
+
+
+
+
+ {slides.map((item, index) => (
+ -
+
+
+
{item.title}
+ {item.title}
+ {item.content}
+ {item.link !== "" ? (
+
+ {item.button}
+
+ ) : (
+ setModal(true)}>
+ {item.button}
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+ );
}
diff --git a/src/components/screens/our-cemeteries/OurCemetery.tsx b/src/components/screens/our-cemeteries/OurCemetery.tsx
index 4ed201d..61d3764 100644
--- a/src/components/screens/our-cemeteries/OurCemetery.tsx
+++ b/src/components/screens/our-cemeteries/OurCemetery.tsx
@@ -70,37 +70,17 @@ const MapContainer = styled.div`
export default function OurCemetery({}: Props) {
return (
-
- Наши кладбища
- {/*
-
- */}
-
-
-
Наши Кладбища
-
Мы работаем по всей облачти
-
- )
+
+ Наши кладбища
+
+
+
Наши Кладбища
+
Мы работаем по всей области
+
+ );
}
diff --git a/src/components/screens/services/Services.tsx b/src/components/screens/services/Services.tsx
index 57a4e78..61418f8 100644
--- a/src/components/screens/services/Services.tsx
+++ b/src/components/screens/services/Services.tsx
@@ -1,102 +1,106 @@
-'use client'
+"use client";
-import { Container } from '@/app/GlobalStyles'
-import MainButton from '@/components/UI/button/MainButton'
-import ProductService from '@/services/product/productServeces'
-import { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import ServiceItem from './ServiceItem'
-import Loader from '@/components/UI/loader/Loader'
+import { Container } from "@/app/GlobalStyles";
+import MainButton from "@/components/UI/button/MainButton";
+import ProductService from "@/services/product/productServeces";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import ServiceItem from "./ServiceItem";
+import Loader from "@/components/UI/loader/Loader";
-type Props = {}
+type Props = {};
const ServicesContainer = styled.div`
- display: flex;
- align-items: center;
- flex-direction: column;
- margin: 50px 0;
- gap: 50px;
-`
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ margin: 50px 0;
+ gap: 50px;
+`;
const List = styled.div`
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- justify-items: center;
- gap: 30px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ justify-items: center;
+ gap: 30px;
- ${(props) => props.theme.mediaQueries.tabletLandscape} {
- grid-template-columns: 1fr 1fr 1fr;
- }
+ ${(props) => props.theme.mediaQueries.tabletLandscape} {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
- ${(props) => props.theme.mediaQueries.tabletPortrait} {
- grid-template-columns: 1fr 1fr;
- }
+ ${(props) => props.theme.mediaQueries.tabletPortrait} {
+ grid-template-columns: 1fr 1fr;
+ }
- ${(props) => props.theme.mediaQueries.mobile} {
- grid-template-columns: 1fr;
- }
-`
+ ${(props) => props.theme.mediaQueries.mobile} {
+ grid-template-columns: 1fr;
+ }
+`;
const MessageContainer = styled.div`
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- padding: 20px;
- text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 20px;
+ text-align: center;
- ${(props) => props.theme.mediaQueries.tabletPortrait} {
- position: relative;
- padding: 20px;
- margin-top: 30px;
- }
-`
+ ${(props) => props.theme.mediaQueries.tabletPortrait} {
+ position: relative;
+ padding: 20px;
+ margin-top: 30px;
+ }
+`;
export default function Services({}: Props) {
- const [services, setServices] = useState([])
- const [loadingState, setLoadingState] = useState(true)
- const [errorState, setErrorState] = useState(false)
+ const [services, setServices] = useState([]);
+ const [loadingState, setLoadingState] = useState(true);
+ const [errorState, setErrorState] = useState(false);
- const getServices = async () => {
- try {
- const response = await ProductService.get('')
- setServices(response.data.Data)
- } catch (error) {
- setErrorState(true)
- }
- setLoadingState(false)
- }
+ const getServices = async () => {
+ try {
+ const response = await ProductService.get("");
+ if (response.status === 200) {
+ setServices(response.data.Data);
+ } else {
+ setErrorState(false);
+ }
+ } catch (error) {
+ setErrorState(true);
+ }
+ setLoadingState(false);
+ };
- useEffect(() => {
- getServices()
- }, [])
+ useEffect(() => {
+ getServices();
+ }, []);
- return (
-
-
- Наши услуги
- {loadingState ? (
- <>
-
-
-
-
- ) : errorState ? (
-
- Ошибка, не удалось получить услуги, сервер не доступен.
-
- ) : services.length === 0 ? (
-
- Услуг пока нет
-
- ) : (
-
- {services.map((item, index) => (
-
- ))}
-
- )}
-
-
- )
+ return (
+
+
+ Наши услуги
+ {loadingState ? (
+ <>
+
+
+
+
+ ) : errorState ? (
+
+ Ошибка, не удалось получить услуги, сервер не доступен.
+
+ ) : services.length === 0 ? (
+
+ Услуг пока нет
+
+ ) : (
+
+ {services.map((item, index) => (
+
+ ))}
+
+ )}
+
+
+ );
}
- 
- 
+ 
+ 
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
setMenuState(true)}
- />
- 
setMenuState(false)}
- />
- 
setMenuState(true)}
+ />
+ 
setMenuState(false)}
+ />
+ 
+ 