admin + loader fix
|
@ -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"
|
||||
},
|
||||
|
|
Before Width: | Height: | Size: 119 KiB |
Before Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 490 KiB After Width: | Height: | Size: 490 KiB |
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 216 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 707 B After Width: | Height: | Size: 707 B |
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
Before Width: | Height: | Size: 686 B After Width: | Height: | Size: 686 B |
Before Width: | Height: | Size: 674 B After Width: | Height: | Size: 674 B |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 643 B After Width: | Height: | Size: 643 B |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 663 B After Width: | Height: | Size: 663 B |
Before Width: | Height: | Size: 783 B After Width: | Height: | Size: 783 B |
Before Width: | Height: | Size: 708 B After Width: | Height: | Size: 708 B |
Before Width: | Height: | Size: 442 B After Width: | Height: | Size: 442 B |
Before Width: | Height: | Size: 732 B After Width: | Height: | Size: 732 B |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 461 B After Width: | Height: | Size: 461 B |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 422 B After Width: | Height: | Size: 422 B |
Before Width: | Height: | Size: 446 B After Width: | Height: | Size: 446 B |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 881 B After Width: | Height: | Size: 881 B |
Before Width: | Height: | Size: 678 B After Width: | Height: | Size: 678 B |
Before Width: | Height: | Size: 132 KiB |
Before Width: | Height: | Size: 457 KiB After Width: | Height: | Size: 327 KiB |
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 612 KiB |
Before Width: | Height: | Size: 801 KiB After Width: | Height: | Size: 612 KiB |
|
@ -1,10 +1,8 @@
|
|||
import Auth from '@/components/screens/admin/auth/Auth'
|
||||
import React from 'react'
|
||||
import Auth from "@/components/screens/admin/auth/Auth";
|
||||
import React from "react";
|
||||
|
||||
type Props = {}
|
||||
type Props = {};
|
||||
|
||||
export default function page({}: Props) {
|
||||
return (
|
||||
<Auth />
|
||||
)
|
||||
return <Auth />;
|
||||
}
|
|
@ -1,23 +1,24 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect } from 'react'
|
||||
import Auth from "@/components/screens/admin/auth/Auth";
|
||||
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(() => {
|
||||
const hasCookie = document.cookie.includes('_identid')
|
||||
if (!hasCookie) {
|
||||
router.push('/admin/auth')
|
||||
return
|
||||
}
|
||||
else {
|
||||
router.push('/admin/applications')
|
||||
}
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// const hasCookie = document.cookie.includes('_identid')
|
||||
// if (!hasCookie) {
|
||||
// router.push('/admin/auth')
|
||||
// return
|
||||
// }
|
||||
// else {
|
||||
// router.push('/admin/applications')
|
||||
// }
|
||||
// }, [])
|
||||
|
||||
return <></>
|
||||
return <Auth />;
|
||||
}
|
||||
|
|
|
@ -31,9 +31,9 @@ export const LoadingSpinner = styled.div`
|
|||
|
||||
export default function Loader({}: Props) {
|
||||
return (
|
||||
<LoadingSpinner>
|
||||
<img src='/loader_1.svg' alt='loader' />
|
||||
<img src='/loader_2.svg' alt='loader' />
|
||||
</LoadingSpinner>
|
||||
)
|
||||
<LoadingSpinner>
|
||||
<img src="/image/loader_1.svg" alt="loader" />
|
||||
<img src="/image/loader_2.svg" alt="loader" />
|
||||
</LoadingSpinner>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,185 +1,189 @@
|
|||
import MainButton from '@/components/UI/button/MainButton'
|
||||
import FormInput from '@/components/UI/input/FormInput'
|
||||
import OrdersService from '@/services/order/ordersServices'
|
||||
import { T_Product } from '@/services/product/type'
|
||||
import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import PhoneInput from '../UI/input/PhoneInput'
|
||||
import Loader from '../UI/loader/Loader'
|
||||
import MainButton from "@/components/UI/button/MainButton";
|
||||
import FormInput from "@/components/UI/input/FormInput";
|
||||
import OrdersService from "@/services/order/ordersServices";
|
||||
import { T_Product } from "@/services/product/type";
|
||||
import { ChangeEvent, FormEvent, useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import PhoneInput from "../UI/input/PhoneInput";
|
||||
import Loader from "../UI/loader/Loader";
|
||||
|
||||
const Container = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 500px;
|
||||
|
||||
${(props) => props.theme.mediaQueries.mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
${(props) => props.theme.mediaQueries.mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const Notification = styled.div`
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
border-radius: 12px;
|
||||
background: ${(props) => props.theme.colors.white};
|
||||
}
|
||||
`
|
||||
.container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
border-radius: 12px;
|
||||
background: ${(props) => props.theme.colors.white};
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
setModal: (param: boolean) => void
|
||||
item?: T_Product
|
||||
modal?: boolean
|
||||
}
|
||||
setModal: (param: boolean) => void;
|
||||
item?: T_Product;
|
||||
modal?: boolean;
|
||||
};
|
||||
|
||||
export default function AddApplicationForm({ setModal, item, modal }: Props) {
|
||||
const [errorMessage, setErrorMessage] = useState('')
|
||||
const [errorState, setErrorState] = useState(false)
|
||||
const [notificationModalState, setNotificationModalState] = useState(false)
|
||||
const [loadingState, setLoadingState] = useState(false)
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const [errorState, setErrorState] = useState(false);
|
||||
const [notificationModalState, setNotificationModalState] = useState(false);
|
||||
const [loadingState, setLoadingState] = useState(false);
|
||||
|
||||
const [buttonDisabledState, setButtonDisabledState] = useState(true)
|
||||
const [buttonDisabledState, setButtonDisabledState] = useState(true);
|
||||
|
||||
const [newApp, setNewApp] = useState({
|
||||
email: '',
|
||||
phone: ''
|
||||
})
|
||||
const [newApp, setNewApp] = useState({
|
||||
email: "",
|
||||
phone: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setNewApp({
|
||||
email: '',
|
||||
phone: ''
|
||||
})
|
||||
}, [modal])
|
||||
useEffect(() => {
|
||||
setNewApp({
|
||||
email: "",
|
||||
phone: "",
|
||||
});
|
||||
}, [modal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (newApp.email === '' || newApp.phone === '') {
|
||||
setButtonDisabledState(true)
|
||||
} else {
|
||||
setButtonDisabledState(false)
|
||||
}
|
||||
}, [newApp])
|
||||
useEffect(() => {
|
||||
if (newApp.email === "" || newApp.phone === "") {
|
||||
setButtonDisabledState(true);
|
||||
} else {
|
||||
setButtonDisabledState(false);
|
||||
}
|
||||
}, [newApp]);
|
||||
|
||||
const createCallApp = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (errorState) return
|
||||
try {
|
||||
const newAppData = {
|
||||
Phone: newApp.phone,
|
||||
Email: newApp.email
|
||||
}
|
||||
const response = await OrdersService.createCall(newAppData)
|
||||
const createCallApp = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
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)
|
||||
}
|
||||
}
|
||||
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 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))
|
||||
const response = await (item
|
||||
? OrdersService.create(newAppData)
|
||||
: OrdersService.createCall(newAppData));
|
||||
|
||||
if (response.status === 200) {
|
||||
setNotificationModalState(true)
|
||||
} else {
|
||||
setErrorMessage(response.data)
|
||||
setErrorState(true)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
setLoadingState(false)
|
||||
}
|
||||
if (response.status === 200) {
|
||||
setNotificationModalState(true);
|
||||
} else if (response.status === 404) {
|
||||
setErrorMessage("Сервер не доступен, повторите попытку позже.");
|
||||
setErrorState(true);
|
||||
} else {
|
||||
setErrorMessage(response.data);
|
||||
setErrorState(true);
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage("Сервер не доступен, повторите попытку позже.");
|
||||
setErrorState(true);
|
||||
}
|
||||
setLoadingState(false);
|
||||
};
|
||||
|
||||
const handlePhoneChange = (value: string) => {
|
||||
setNewApp({ ...newApp, phone: value })
|
||||
}
|
||||
const handlePhoneChange = (value: string) => {
|
||||
setNewApp({ ...newApp, phone: value });
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setModal(false)
|
||||
setNotificationModalState(false)
|
||||
}
|
||||
const closeModal = () => {
|
||||
setModal(false);
|
||||
setNotificationModalState(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container onSubmit={createApp}>
|
||||
<h2>Новая заявка</h2>
|
||||
<FormInput
|
||||
value={newApp.email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setNewApp({ ...newApp, email: e.target.value })
|
||||
}
|
||||
placeholder='Ваш email'
|
||||
/>
|
||||
<PhoneInput value={newApp.phone} onChange={handlePhoneChange} />
|
||||
{item && <h3>Услуга: {item.Name}</h3>}
|
||||
<MainButton onClick={createApp} disabled={buttonDisabledState}>
|
||||
Оставить заявку
|
||||
</MainButton>
|
||||
</Container>
|
||||
{loadingState && (
|
||||
<Notification>
|
||||
<div className='container'>
|
||||
<Loader />
|
||||
</div>
|
||||
</Notification>
|
||||
)}
|
||||
{errorState && (
|
||||
<Notification>
|
||||
<div className='container'>
|
||||
<h4>{errorMessage}</h4>
|
||||
<MainButton fullWidth={true} onClick={() => setErrorState(false)}>
|
||||
Закрыть
|
||||
</MainButton>
|
||||
</div>
|
||||
</Notification>
|
||||
)}
|
||||
{notificationModalState && (
|
||||
<Notification>
|
||||
<div className='container'>
|
||||
<h4>Заявка успешно отправлена</h4>
|
||||
<MainButton fullWidth={true} onClick={closeModal}>
|
||||
Закрыть
|
||||
</MainButton>
|
||||
</div>
|
||||
</Notification>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Container onSubmit={createApp}>
|
||||
<h2>Новая заявка</h2>
|
||||
<FormInput
|
||||
value={newApp.email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setNewApp({ ...newApp, email: e.target.value })
|
||||
}
|
||||
placeholder="Ваш email"
|
||||
/>
|
||||
<PhoneInput value={newApp.phone} onChange={handlePhoneChange} />
|
||||
{item && <h3>Услуга: {item.Name}</h3>}
|
||||
<MainButton onClick={createApp} disabled={buttonDisabledState}>
|
||||
Оставить заявку
|
||||
</MainButton>
|
||||
</Container>
|
||||
{loadingState && (
|
||||
<Notification>
|
||||
<div className="container">
|
||||
<Loader />
|
||||
</div>
|
||||
</Notification>
|
||||
)}
|
||||
{errorState && (
|
||||
<Notification>
|
||||
<div className="container">
|
||||
<h4>{errorMessage}</h4>
|
||||
<MainButton fullWidth={true} onClick={() => setErrorState(false)}>
|
||||
Закрыть
|
||||
</MainButton>
|
||||
</div>
|
||||
</Notification>
|
||||
)}
|
||||
{notificationModalState && (
|
||||
<Notification>
|
||||
<div className="container">
|
||||
<h4>Заявка успешно отправлена</h4>
|
||||
<MainButton fullWidth={true} onClick={closeModal}>
|
||||
Закрыть
|
||||
</MainButton>
|
||||
</div>
|
||||
</Notification>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,95 +1,89 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import UserService from '@/services/user/userServices'
|
||||
import Link from 'next/link'
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import { useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import UserService from "@/services/user/userServices";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
type Props = {}
|
||||
type Props = {};
|
||||
|
||||
const Container = styled.div`
|
||||
background: ${(props) => props.theme.colors.green};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 260px;
|
||||
padding: 30px 40px;
|
||||
gap: 20px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: ${(props) => props.theme.colors.green};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 260px;
|
||||
padding: 30px 40px;
|
||||
gap: 20px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
color: ${(props) => props.theme.colors.white};
|
||||
}
|
||||
}
|
||||
`
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
color: ${(props) => props.theme.colors.white};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function AdminSideBar({}: Props) {
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const hasCookie = document.cookie.includes('_identid')
|
||||
if (!hasCookie && pathname.startsWith('/admin')) {
|
||||
router.push('/admin/auth')
|
||||
return
|
||||
}
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// const hasCookie = document.cookie.includes("_identid");
|
||||
// if (!hasCookie && pathname.startsWith("/admin")) {
|
||||
// router.push("/admin/auth");
|
||||
// return;
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
const response = await UserService.exit()
|
||||
if (response.status === 200) {
|
||||
router.push('/admin/auth')
|
||||
document.cookie =
|
||||
'_identid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
const logout = async () => {
|
||||
try {
|
||||
const response = await UserService.exit();
|
||||
if (response.status === 200) {
|
||||
router.push("/admin");
|
||||
document.cookie =
|
||||
"_identid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return pathname.startsWith('/admin') &&
|
||||
pathname !== '/admin/auth' &&
|
||||
pathname !== '/admin' ? (
|
||||
<Container>
|
||||
<img src='/logo.svg' alt='' />
|
||||
<div className='menu'>
|
||||
<Link href='/admin/applications'>
|
||||
<div className='item'>
|
||||
<img src='/applications.svg' alt='' />
|
||||
<p>Заявки</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href='/admin/services'>
|
||||
<div className='item'>
|
||||
<img src='/services.svg' alt='' />
|
||||
<p>Услуги</p>
|
||||
</div>
|
||||
</Link>
|
||||
{/* <Link href='/admin/virtualCemetery'>
|
||||
<div className='item'>
|
||||
<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
|
||||
return pathname.startsWith("/admin") &&
|
||||
pathname !== "/admin/auth" &&
|
||||
pathname !== "/admin" ? (
|
||||
<Container>
|
||||
<img src="/image/logo.svg" alt="" />
|
||||
<div className="menu">
|
||||
<Link href="/admin/applications">
|
||||
<div className="item">
|
||||
<img src="/image/applications.svg" alt="" />
|
||||
<p>Заявки</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/admin/services">
|
||||
<div className="item">
|
||||
<img src="/image/services.svg" alt="" />
|
||||
<p>Услуги</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="item" onClick={logout}>
|
||||
<img src="/image/log-out.svg" alt="" />
|
||||
<p>Выйти</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
) : null;
|
||||
}
|
||||
|
|
|
@ -1,126 +1,143 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import { Container } from '@/app/GlobalStyles'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Container } from "@/app/GlobalStyles";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import LandingButton from '../../UI/button/LandingButton'
|
||||
import Modal from '../../UI/modal/Modal'
|
||||
import { BurgerMenu, HeaderContainer } from './styles'
|
||||
import AddApplicationForm from '@/components/blocks/AddApplicationForm'
|
||||
import LandingButton from "../../UI/button/LandingButton";
|
||||
import Modal from "../../UI/modal/Modal";
|
||||
import { BurgerMenu, HeaderContainer } from "./styles";
|
||||
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)
|
||||
}, [pathname])
|
||||
useEffect(() => {
|
||||
setMenuState(false);
|
||||
}, [pathname]);
|
||||
|
||||
return !pathname.startsWith('/admin') ? (
|
||||
<>
|
||||
<HeaderContainer>
|
||||
<Container>
|
||||
<div className='content'>
|
||||
<div className='logo'>
|
||||
<img src='/logo.svg' alt='phone' />
|
||||
<span>Городская похоронная служба</span>
|
||||
</div>
|
||||
<div className='contact-block'>
|
||||
<div className='addresses'>
|
||||
<span>ул. Курчатова, д. 4</span>
|
||||
<span>ул. Героев Танкограда, д.61а</span>
|
||||
</div>
|
||||
<div className='phones'>
|
||||
<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'
|
||||
width={20}
|
||||
height={20}
|
||||
alt='phone'
|
||||
/>
|
||||
<p>+7 (932) 307-94-54</p>
|
||||
</div>
|
||||
<span>Круглосуточно</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LandingButton onClick={() => setModal(true)}>
|
||||
Заказать звонок
|
||||
</LandingButton>
|
||||
</div>
|
||||
<div className='navbar'>
|
||||
<Link href='/'>Главная</Link>
|
||||
<Link href='/services'>Услуги</Link>
|
||||
<Link href='/aboutUs'>О нас</Link>
|
||||
<Link href='/ourCemeteries'>Наши кладбища</Link>
|
||||
{/* <Link href='/everlastingMemory'>Вечная память</Link> */}
|
||||
</div>
|
||||
</Container>
|
||||
<BurgerMenu state={menuState}>
|
||||
<div className='title'>
|
||||
<div className='logo-container'>
|
||||
<img src='/logo.svg' alt='' className='logo-image' />
|
||||
</div>
|
||||
<div className='menu-icon-container'>
|
||||
<img
|
||||
src='/burger-menu.svg'
|
||||
alt=''
|
||||
onClick={() => setMenuState(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='menu-container'>
|
||||
<div className='title-active'>
|
||||
<div className='contact'>
|
||||
<div className='addresses'>
|
||||
<p>ул. Курчатова, д. 4</p>
|
||||
<p>ул. Героев Танкограда, д.61а</p>
|
||||
</div>
|
||||
<div className='number'>
|
||||
<p>+7 (951) 773-34-53</p>
|
||||
<p>+7 (932) 307-94-54</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src='/close-menu.svg'
|
||||
alt=''
|
||||
onClick={() => setMenuState(false)}
|
||||
/>
|
||||
</div>
|
||||
<div className='menu'>
|
||||
<LandingButton
|
||||
onClick={() => {
|
||||
setModal(true), setMenuState(false)
|
||||
}}
|
||||
>
|
||||
Заказать звонок
|
||||
</LandingButton>
|
||||
<Link href='/'>Главная</Link>
|
||||
<Link href='/services'>Услуги</Link>
|
||||
<Link href='/aboutUs'>О нас</Link>
|
||||
<Link href='/ourCemeteries'>Наши кладбища</Link>
|
||||
{/* <Link href='/everlastingMemory'>Вечная память</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</BurgerMenu>
|
||||
</HeaderContainer>
|
||||
return !pathname.startsWith("/admin") ? (
|
||||
<>
|
||||
<HeaderContainer>
|
||||
<Container>
|
||||
<div className="content">
|
||||
<div className="logo">
|
||||
<img src="/image/logo.svg" alt="phone" />
|
||||
<span>Городская похоронная служба</span>
|
||||
</div>
|
||||
<div className="contact-block">
|
||||
<div className="addresses">
|
||||
<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="phone">
|
||||
<Image
|
||||
src="/image/phone.svg"
|
||||
width={20}
|
||||
height={20}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<LandingButton onClick={() => setModal(true)}>
|
||||
Заказать звонок
|
||||
</LandingButton>
|
||||
</div>
|
||||
<div className="navbar">
|
||||
<Link href="/">Главная</Link>
|
||||
<Link href="/services">Услуги</Link>
|
||||
<Link href="/aboutUs">О нас</Link>
|
||||
<Link href="/ourCemeteries">Наши кладбища</Link>
|
||||
{/* <Link href='/everlastingMemory'>Вечная память</Link> */}
|
||||
</div>
|
||||
</Container>
|
||||
<BurgerMenu state={menuState}>
|
||||
<div className="title">
|
||||
<div className="logo-container">
|
||||
<img src="/image/logo.svg" alt="" className="logo-image" />
|
||||
</div>
|
||||
<div className="menu-icon-container">
|
||||
<img
|
||||
src="/image/burger-menu.svg"
|
||||
alt=""
|
||||
onClick={() => setMenuState(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="menu-container">
|
||||
<div className="title-active">
|
||||
<div className="contact">
|
||||
<div className="addresses">
|
||||
<p>ул. Курчатова, д. 4</p>
|
||||
<p>ул. Героев Танкограда, д.61а</p>
|
||||
</div>
|
||||
<div className="number">
|
||||
<p>+7 (951) 773-34-53</p>
|
||||
<p>+7 (932) 307-94-54</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/image/close-menu.svg"
|
||||
alt=""
|
||||
onClick={() => setMenuState(false)}
|
||||
/>
|
||||
</div>
|
||||
<div className="menu">
|
||||
<LandingButton
|
||||
onClick={() => {
|
||||
setModal(true), setMenuState(false);
|
||||
}}
|
||||
>
|
||||
Заказать звонок
|
||||
</LandingButton>
|
||||
<Link href="/">Главная</Link>
|
||||
<Link href="/services">Услуги</Link>
|
||||
<Link href="/aboutUs">О нас</Link>
|
||||
<Link href="/ourCemeteries">Наши кладбища</Link>
|
||||
{/* <Link href='/everlastingMemory'>Вечная память</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</BurgerMenu>
|
||||
</HeaderContainer>
|
||||
|
||||
<Modal modal={modal} setModal={setModal}>
|
||||
<AddApplicationForm setModal={setModal} />
|
||||
</Modal>
|
||||
</>
|
||||
) : null
|
||||
<Modal modal={modal} setModal={setModal}>
|
||||
<AddApplicationForm setModal={setModal} />
|
||||
</Modal>
|
||||
</>
|
||||
) : null;
|
||||
}
|
||||
|
|
|
@ -1,207 +1,211 @@
|
|||
import styled, { css } from 'styled-components'
|
||||
export const HeaderContainer = styled.div`
|
||||
background: ${(props) => props.theme.colors.green};
|
||||
background: ${(props) => props.theme.colors.green};
|
||||
|
||||
color: ${(props) => props.theme.colors.white};
|
||||
color: ${(props) => props.theme.colors.white};
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contact-block {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 30px;
|
||||
}
|
||||
.contact-block {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 30px;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
a {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
|
||||
.addresses {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.phones {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
}
|
||||
.addresses {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.phones {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.phone-all-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
.phone-all-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-around;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${(props) => props.theme.colors.white};
|
||||
width: 190px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-around;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
${(props) => props.theme.mediaQueries.tabletLandscape} {
|
||||
.contact-block {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
a {
|
||||
color: ${(props) => props.theme.colors.white};
|
||||
width: 190px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.addresses {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
${(props) => props.theme.mediaQueries.tabletLandscape} {
|
||||
.contact-block {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.logo {
|
||||
width: 250px;
|
||||
.addresses {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
}
|
||||
.logo {
|
||||
width: 250px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
}
|
||||
|
||||
.navbar {
|
||||
a {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.phones {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navbar {
|
||||
a {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
.phones {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
|
||||
.phone-all-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.phone-all-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.top {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
${(props) => props.theme.mediaQueries.tabletPortrait} {
|
||||
.content {
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.top {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-block {
|
||||
flex-direction: row;
|
||||
${(props) => props.theme.mediaQueries.tabletPortrait} {
|
||||
.content {
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.addresses {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
.contact-block {
|
||||
flex-direction: row;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.addresses {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phones {
|
||||
flex-direction: column;
|
||||
.logo {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.phones {
|
||||
flex-direction: column;
|
||||
|
||||
.navbar {
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) => props.theme.mediaQueries.mobile} {
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
.navbar {
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
${(props) => props.theme.mediaQueries.mobile} {
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface I_Menu {
|
||||
state: boolean
|
||||
|
|
|
@ -1,69 +1,77 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import { Container } from '@/app/GlobalStyles'
|
||||
import AddApplicationForm from '@/components/blocks/AddApplicationForm'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
import LandingButton from '../../UI/button/LandingButton'
|
||||
import Modal from '../../UI/modal/Modal'
|
||||
import { Container } from "@/app/GlobalStyles";
|
||||
import AddApplicationForm from "@/components/blocks/AddApplicationForm";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import LandingButton from "../../UI/button/LandingButton";
|
||||
import Modal from "../../UI/modal/Modal";
|
||||
import {
|
||||
ContentContainer,
|
||||
ContentSection,
|
||||
FooterContainer,
|
||||
FooterContent,
|
||||
LogoSection
|
||||
} from './styels'
|
||||
ContentContainer,
|
||||
ContentSection,
|
||||
FooterContainer,
|
||||
FooterContent,
|
||||
LogoSection,
|
||||
} 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') ? (
|
||||
<>
|
||||
<FooterContainer>
|
||||
<Container>
|
||||
<FooterContent>
|
||||
<ContentContainer>
|
||||
<LogoSection>
|
||||
<img src='/logo.svg' alt='phone' />
|
||||
<span>Городская похоронная служба</span>
|
||||
<LandingButton onClick={() => setModal(true)}>
|
||||
Заказать звонок
|
||||
</LandingButton>
|
||||
</LogoSection>
|
||||
<ContentSection>
|
||||
<h3>Наши контакты</h3>
|
||||
<p>ул. Курчатова, д. 4</p>
|
||||
<p>ул. Героев Танкограда, д.61а</p>
|
||||
<p>+7 (951) 773-34-53</p>
|
||||
<p>+7 (932) 307-94-54</p>
|
||||
</ContentSection>
|
||||
<ContentSection>
|
||||
<h3>Навигация</h3>
|
||||
<Link href='/'>
|
||||
<p>На главную</p>
|
||||
</Link>
|
||||
<Link href='/aboutUs'>
|
||||
<p>О нас</p>
|
||||
</Link>
|
||||
<Link href='/services'>
|
||||
<p>Услуги</p>
|
||||
</Link>
|
||||
<Link href='/ourCemeteries'>
|
||||
<p>Наши кладбища</p>
|
||||
</Link>
|
||||
</ContentSection>
|
||||
</ContentContainer>
|
||||
</FooterContent>
|
||||
</Container>
|
||||
</FooterContainer>
|
||||
<Modal modal={modal} setModal={setModal}>
|
||||
<AddApplicationForm setModal={setModal} />
|
||||
</Modal>
|
||||
</>
|
||||
) : null
|
||||
return !pathname.startsWith("/admin") ? (
|
||||
<>
|
||||
<FooterContainer>
|
||||
<Container>
|
||||
<FooterContent>
|
||||
<ContentContainer>
|
||||
<LogoSection>
|
||||
<img src="/image/logo.svg" alt="phone" />
|
||||
<span>Городская похоронная служба</span>
|
||||
<LandingButton onClick={() => setModal(true)}>
|
||||
Заказать звонок
|
||||
</LandingButton>
|
||||
</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="/">
|
||||
<p>На главную</p>
|
||||
</Link>
|
||||
<Link href="/aboutUs">
|
||||
<p>О нас</p>
|
||||
</Link>
|
||||
<Link href="/services">
|
||||
<p>Услуги</p>
|
||||
</Link>
|
||||
<Link href="/ourCemeteries">
|
||||
<p>Наши кладбища</p>
|
||||
</Link>
|
||||
</ContentSection>
|
||||
</ContentContainer>
|
||||
</FooterContent>
|
||||
</Container>
|
||||
</FooterContainer>
|
||||
<Modal modal={modal} setModal={setModal}>
|
||||
<AddApplicationForm setModal={setModal} />
|
||||
</Modal>
|
||||
</>
|
||||
) : null;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -100,88 +100,88 @@ export default function Services({}: Props) {
|
|||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{firstLoadingState ? (
|
||||
<NotificationContainer>
|
||||
<Loader />
|
||||
</NotificationContainer>
|
||||
) : (
|
||||
<>
|
||||
{ConnectServerError ? (
|
||||
<NotificationContainer>
|
||||
<h2>Сервер не доступен...</h2>
|
||||
</NotificationContainer>
|
||||
) : (
|
||||
<>
|
||||
<AdminContainer>
|
||||
<Container>
|
||||
{!(services.length === 0 && searchQuery === '') ? (
|
||||
<>
|
||||
<h1>Услуги</h1>
|
||||
<div className='search-block'>
|
||||
<div className='input-block'>
|
||||
<FormInput
|
||||
value={searchQuery}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setSearchQuery(e.target.value)
|
||||
}
|
||||
placeholder='Введите название услуги'
|
||||
/>
|
||||
<img src='/search.svg' alt='' />
|
||||
</div>
|
||||
<MainButton
|
||||
fullWidth={true}
|
||||
onClick={() => setModal(true)}
|
||||
>
|
||||
Добавить
|
||||
</MainButton>
|
||||
</div>
|
||||
{loadingState ? (
|
||||
<NotificationContainer>
|
||||
<Loader />
|
||||
</NotificationContainer>
|
||||
) : services.length !== 0 ? (
|
||||
<div className='list'>
|
||||
{services.map((item: T_Product, index) => (
|
||||
<ServiceItem
|
||||
item={item}
|
||||
key={index}
|
||||
getServices={getServices}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<NotificationContainer>
|
||||
<h3>Ничего не найдено</h3>
|
||||
</NotificationContainer>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<NotificationContainer>
|
||||
<h2>Список товаров пуст</h2>
|
||||
<MainButton
|
||||
fullWidth={true}
|
||||
onClick={() => setModal(true)}
|
||||
>
|
||||
Добавить
|
||||
</MainButton>
|
||||
</NotificationContainer>
|
||||
)}
|
||||
</Container>
|
||||
</AdminContainer>
|
||||
<AddServiceForm
|
||||
getServices={getServices}
|
||||
modal={modal}
|
||||
setModal={setModal}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Modal setModal={setErrorState} modal={errorState}>
|
||||
<h3>{errorMessage}</h3>
|
||||
<MainButton>Закрыть</MainButton>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
<>
|
||||
{firstLoadingState ? (
|
||||
<NotificationContainer>
|
||||
<Loader />
|
||||
</NotificationContainer>
|
||||
) : (
|
||||
<>
|
||||
{ConnectServerError ? (
|
||||
<NotificationContainer>
|
||||
<h2>Сервер не доступен...</h2>
|
||||
</NotificationContainer>
|
||||
) : (
|
||||
<>
|
||||
<AdminContainer>
|
||||
<Container>
|
||||
{!(services.length === 0 && searchQuery === "") ? (
|
||||
<>
|
||||
<h1>Услуги</h1>
|
||||
<div className="search-block">
|
||||
<div className="input-block">
|
||||
<FormInput
|
||||
value={searchQuery}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setSearchQuery(e.target.value)
|
||||
}
|
||||
placeholder="Введите название услуги"
|
||||
/>
|
||||
<img src="/image/search.svg" alt="" />
|
||||
</div>
|
||||
<MainButton
|
||||
fullWidth={true}
|
||||
onClick={() => setModal(true)}
|
||||
>
|
||||
Добавить
|
||||
</MainButton>
|
||||
</div>
|
||||
{loadingState ? (
|
||||
<NotificationContainer>
|
||||
<Loader />
|
||||
</NotificationContainer>
|
||||
) : services.length !== 0 ? (
|
||||
<div className="list">
|
||||
{services.map((item: T_Product, index) => (
|
||||
<ServiceItem
|
||||
item={item}
|
||||
key={index}
|
||||
getServices={getServices}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<NotificationContainer>
|
||||
<h3>Ничего не найдено</h3>
|
||||
</NotificationContainer>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<NotificationContainer>
|
||||
<h2>Список товаров пуст</h2>
|
||||
<MainButton
|
||||
fullWidth={true}
|
||||
onClick={() => setModal(true)}
|
||||
>
|
||||
Добавить
|
||||
</MainButton>
|
||||
</NotificationContainer>
|
||||
)}
|
||||
</Container>
|
||||
</AdminContainer>
|
||||
<AddServiceForm
|
||||
getServices={getServices}
|
||||
modal={modal}
|
||||
setModal={setModal}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Modal setModal={setErrorState} modal={errorState}>
|
||||
<h3>{errorMessage}</h3>
|
||||
<MainButton>Закрыть</MainButton>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
<Cart>
|
||||
<div className='block'>
|
||||
<img src={'/'+item.ImageUrls[0]} alt='' />
|
||||
<h3>{item.Name}</h3>
|
||||
<p>{item.FullDesc}</p>
|
||||
</div>
|
||||
<div className='block'>
|
||||
<h2>От {item.OldPrice} руб.</h2>
|
||||
<MainButton onClick={() => setModal(true)}>Редактировать</MainButton>
|
||||
</div>
|
||||
<div className='delete-button' onClick={deleteService}>
|
||||
<img src='/trash.svg' alt='' />
|
||||
</div>
|
||||
</Cart>
|
||||
<UpdateServiceForm
|
||||
getServices={getServices}
|
||||
modal={modal}
|
||||
setModal={setModal}
|
||||
item={item}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Cart>
|
||||
<div className="block">
|
||||
<img src={"/" + item.ImageUrls[0]} alt="" />
|
||||
<h3>{item.Name}</h3>
|
||||
<p>{item.FullDesc}</p>
|
||||
</div>
|
||||
<div className="block">
|
||||
<h2>От {item.OldPrice} руб.</h2>
|
||||
<MainButton onClick={() => setModal(true)}>Редактировать</MainButton>
|
||||
</div>
|
||||
<div className="delete-button" onClick={deleteService}>
|
||||
<img src="/image/trash.svg" alt="" />
|
||||
</div>
|
||||
</Cart>
|
||||
<UpdateServiceForm
|
||||
getServices={getServices}
|
||||
modal={modal}
|
||||
setModal={setModal}
|
||||
item={item}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -34,25 +34,25 @@ type Props = {}
|
|||
|
||||
export default function AboutUs({}: Props) {
|
||||
return (
|
||||
<Container>
|
||||
<IconContainer>
|
||||
<div className='item'>
|
||||
<img src='/cemetery.svg' alt='' />
|
||||
<p>Разнообразные похоронные услуги для всех</p>
|
||||
</div>
|
||||
<div className='item'>
|
||||
<img src='/agreement.svg' alt='' />
|
||||
<p>Четкие цены на все услуги</p>
|
||||
</div>
|
||||
<div className='item'>
|
||||
<img src='/operator.svg' alt='' />
|
||||
<p>Круглосуточная поддержка специалистов</p>
|
||||
</div>
|
||||
<div className='item'>
|
||||
<img src='/deal.svg' alt='' />
|
||||
<p>Договор без скрытых платежей</p>
|
||||
</div>
|
||||
</IconContainer>
|
||||
</Container>
|
||||
)
|
||||
<Container>
|
||||
<IconContainer>
|
||||
<div className="item">
|
||||
<img src="/image/cemetery.svg" alt="" />
|
||||
<p>Разнообразные похоронные услуги для всех</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/image/agreement.svg" alt="" />
|
||||
<p>Четкие цены на все услуги</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/image/operator.svg" alt="" />
|
||||
<p>Круглосуточная поддержка специалистов</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/image/deal.svg" alt="" />
|
||||
<p>Договор без скрытых платежей</p>
|
||||
</div>
|
||||
</IconContainer>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<Container>
|
||||
<OrderContainer>
|
||||
<h1>Закажи обратный звонок</h1>
|
||||
<h3>Круглосуточно принимаем заказы любой сложности</h3>
|
||||
<div className='button'>
|
||||
<button>
|
||||
<h2>Оставить заявку</h2>
|
||||
</button>
|
||||
</div>
|
||||
</OrderContainer>
|
||||
</Container>
|
||||
)
|
||||
<>
|
||||
<Container>
|
||||
<OrderContainer>
|
||||
<h1>Закажи обратный звонок</h1>
|
||||
<h3>Круглосуточно принимаем заказы любой сложности</h3>
|
||||
<div className="button">
|
||||
<button onClick={() => setModal(true)}>
|
||||
<h2>Оставить заявку</h2>
|
||||
</button>
|
||||
</div>
|
||||
</OrderContainer>
|
||||
</Container>
|
||||
<Modal modal={modal} setModal={setModal}>
|
||||
<AddApplicationForm setModal={setModal} />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -45,32 +45,32 @@ type Props = {}
|
|||
|
||||
export default function Instructions({}: Props) {
|
||||
return (
|
||||
<Container>
|
||||
<InstructionsContainer>
|
||||
<h2>Порядок действий в случае смерти человека</h2>
|
||||
<div className='list'>
|
||||
<div className='item'>
|
||||
<img src='/telephone.svg' alt='' />
|
||||
<h3>Шаг 1: Обратитесь в нашу службу</h3>
|
||||
<p>
|
||||
Позвоните по номеру <span>+7 (932) 307-94-54</span>.
|
||||
</p>
|
||||
</div>
|
||||
<div className='item'>
|
||||
<img src='/ambulance.svg' alt='' />
|
||||
<h3>Шаг 2: Дождитесь полицию и скорую помощь</h3>
|
||||
<p>Дождитесь получения необходимого направления от полиции.</p>
|
||||
</div>
|
||||
<div className='item'>
|
||||
<img src='/hospital.svg' alt='' />
|
||||
<h3>Шаг 3: Дождитесь эвакуацию</h3>
|
||||
<p>
|
||||
Дождитесь прибытия службы эвакуации для транспортировки тела в
|
||||
морг.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</InstructionsContainer>
|
||||
</Container>
|
||||
)
|
||||
<Container>
|
||||
<InstructionsContainer>
|
||||
<h2>Порядок действий в случае смерти человека</h2>
|
||||
<div className="list">
|
||||
<div className="item">
|
||||
<img src="/image/telephone.svg" alt="" />
|
||||
<h3>Шаг 1: Обратитесь в нашу службу</h3>
|
||||
<p>
|
||||
Позвоните по номеру <span>+7 (932) 307-94-54</span>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/image/ambulance.svg" alt="" />
|
||||
<h3>Шаг 2: Дождитесь полицию и скорую помощь</h3>
|
||||
<p>Дождитесь получения необходимого направления от полиции.</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/image/hospital.svg" alt="" />
|
||||
<h3>Шаг 3: Дождитесь эвакуацию</h3>
|
||||
<p>
|
||||
Дождитесь прибытия службы эвакуации для транспортировки тела в
|
||||
морг.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</InstructionsContainer>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<MapContainer>
|
||||
<YMaps>
|
||||
<Map
|
||||
className='map'
|
||||
defaultState={{
|
||||
center: [55.159902, 61.402554],
|
||||
zoom: 12
|
||||
}}
|
||||
options={{
|
||||
yandexMapDisablePoiInteractivity: true,
|
||||
copyrightLogoVisible: true,
|
||||
copyrightProvidersVisible: true,
|
||||
copyrightUaVisible: true
|
||||
}}
|
||||
>
|
||||
<Placemark geometry={[55.147737, 61.396436]} />
|
||||
<Placemark geometry={[55.176162, 61.451673]} />
|
||||
</Map>
|
||||
</YMaps>
|
||||
<div className='content'>
|
||||
<h3>Наши контакты</h3>
|
||||
<p>ул. Курчатова, д. 4</p>
|
||||
<p>ул. Героев Танкограда, д.61а</p>
|
||||
<p>+7 (951) 773-34-53</p>
|
||||
<p>+7 (932) 307-94-54 (Круглосуточно)</p>
|
||||
</div>
|
||||
</MapContainer>
|
||||
)
|
||||
<MapContainer>
|
||||
<YMaps>
|
||||
<Map
|
||||
className="map"
|
||||
defaultState={{
|
||||
center: [55.159902, 61.402554],
|
||||
zoom: 12,
|
||||
}}
|
||||
options={{
|
||||
yandexMapDisablePoiInteractivity: true,
|
||||
copyrightLogoVisible: true,
|
||||
copyrightProvidersVisible: true,
|
||||
copyrightUaVisible: true,
|
||||
}}
|
||||
>
|
||||
<Placemark geometry={[55.147737, 61.396436]} />
|
||||
<Placemark geometry={[55.176162, 61.451673]} />
|
||||
</Map>
|
||||
</YMaps>
|
||||
<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>
|
||||
);
|
||||
}
|
|
@ -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 (
|
||||
<>
|
||||
<ReviewsContainer>
|
||||
<h2>Отзывы о проведенных церемониях</h2>
|
||||
<div className='slider-container'>
|
||||
<Slider {...settings}>
|
||||
{users.map((user, index) => (
|
||||
<div key={index}>
|
||||
<div className='item'>
|
||||
<img src={user.image} alt='' />
|
||||
<div className='content'>
|
||||
<h3>{user.name}</h3>
|
||||
<p>{user.review}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</ReviewsContainer>
|
||||
<MobileReviewsContainer>
|
||||
<h2>Отзывы о проведенных церемониях</h2>
|
||||
<div className='slider-container'>
|
||||
<Slider {...settings}>
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<div>
|
||||
<div className='item'>
|
||||
<img src='/image 4.png' alt='' />
|
||||
<div className='content'>
|
||||
<h3>Виктор Иванов</h3>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<ReviewsContainer>
|
||||
<h2>Отзывы о проведенных церемониях</h2>
|
||||
<div className="slider-container">
|
||||
<Slider {...settings}>
|
||||
{users.map((user, index) => (
|
||||
<div key={index}>
|
||||
<div className="item">
|
||||
<img src={user.image} alt="" />
|
||||
<div className="content">
|
||||
<h3>{user.name}</h3>
|
||||
<p>{user.review}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</ReviewsContainer>
|
||||
<MobileReviewsContainer>
|
||||
<h2>Отзывы о проведенных церемониях</h2>
|
||||
<div className="slider-container">
|
||||
<Slider {...settings}>
|
||||
{users.map((user, index) => (
|
||||
<div key={index}>
|
||||
<div className="item">
|
||||
<img src={user.image} alt="" />
|
||||
<div className="content">
|
||||
<h3>{user.name}</h3>
|
||||
<p>{user.review}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</MobileReviewsContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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: <RightArrow src='/left arrow.svg' alt='' />,
|
||||
prevArrow: <LeftArrow src='/left arrow.svg' alt='' />,
|
||||
autoplay: true,
|
||||
speed: 2000,
|
||||
autoplaySpeed: 4000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 640,
|
||||
settings: {
|
||||
dots: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const settings = {
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
nextArrow: <RightArrow src="/image/left arrow.svg" alt="" />,
|
||||
prevArrow: <LeftArrow src="/image/left arrow.svg" alt="" />,
|
||||
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 (
|
||||
<>
|
||||
<Container>
|
||||
<SliderContainer>
|
||||
<Slider {...settings}>
|
||||
{slides.map((item, index) => (
|
||||
<Item key={index}>
|
||||
<img src={item.image} alt='' />
|
||||
<div className='content'>
|
||||
<h2>{item.title}</h2>
|
||||
<h3>{item.title}</h3>
|
||||
<h4>{item.content}</h4>
|
||||
<LandingButton>{item.button}</LandingButton>
|
||||
</div>
|
||||
</Item>
|
||||
))}
|
||||
</Slider>
|
||||
</SliderContainer>
|
||||
</Container>
|
||||
<MobileSliderContainer>
|
||||
<Slider {...settings}>
|
||||
{[...Array(2)].map((_, index) => (
|
||||
<Item>
|
||||
<img src='/image 1.png' alt='' />
|
||||
<div className='content'>
|
||||
<h2>Предоставление похоронных услуг в Челябинске.</h2>
|
||||
<h3>Предоставление похоронных услуг в Челябинске.</h3>
|
||||
<h4>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</h4>
|
||||
<LandingButton>Подробнее о нас</LandingButton>
|
||||
</div>
|
||||
</Item>
|
||||
))}
|
||||
</Slider>
|
||||
</MobileSliderContainer>
|
||||
</>
|
||||
)
|
||||
const [modal, setModal] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
<SliderContainer>
|
||||
<Slider {...settings}>
|
||||
{slides.map((item, index) => (
|
||||
<Item key={index}>
|
||||
<img src={item.image} alt="" />
|
||||
<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>
|
||||
))}
|
||||
</Slider>
|
||||
</SliderContainer>
|
||||
</Container>
|
||||
<MobileSliderContainer>
|
||||
<Slider {...settings}>
|
||||
{slides.map((item, index) => (
|
||||
<Item key={index}>
|
||||
<img src={item.image} alt="" />
|
||||
<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>
|
||||
))}
|
||||
</Slider>
|
||||
</MobileSliderContainer>
|
||||
<Modal modal={modal} setModal={setModal}>
|
||||
<AddApplicationForm setModal={setModal} />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -70,37 +70,17 @@ const MapContainer = styled.div`
|
|||
|
||||
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&source=constructor'
|
||||
width='100%'
|
||||
height='450'
|
||||
></iframe>
|
||||
<div className='content'>
|
||||
<h3>Наши Кладбища</h3>
|
||||
<p>Мы работаем по всей облачти</p>
|
||||
</div>
|
||||
</MapContainer>
|
||||
)
|
||||
<MapContainer>
|
||||
<h1>Наши кладбища</h1>
|
||||
<iframe
|
||||
src="https://yandex.ru/map-widget/v1/?um=constructor%3Aa53366eeae5cb98c21ef9f499da6647e293da5152591b651ff9474f6215833a0&source=constructor"
|
||||
width="100%"
|
||||
height="450"
|
||||
></iframe>
|
||||
<div className="content">
|
||||
<h3>Наши Кладбища</h3>
|
||||
<p>Мы работаем по всей области</p>
|
||||
</div>
|
||||
</MapContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<Container>
|
||||
<ServicesContainer>
|
||||
<h1>Наши услуги</h1>
|
||||
{loadingState ? (
|
||||
<>
|
||||
<MessageContainer>
|
||||
<Loader />
|
||||
</MessageContainer>
|
||||
</>
|
||||
) : errorState ? (
|
||||
<MessageContainer>
|
||||
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
||||
</MessageContainer>
|
||||
) : services.length === 0 ? (
|
||||
<MessageContainer>
|
||||
<h3>Услуг пока нет</h3>
|
||||
</MessageContainer>
|
||||
) : (
|
||||
<List>
|
||||
{services.map((item, index) => (
|
||||
<ServiceItem item={item} key={index} />
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</ServicesContainer>
|
||||
</Container>
|
||||
)
|
||||
return (
|
||||
<Container>
|
||||
<ServicesContainer>
|
||||
<h1>Наши услуги</h1>
|
||||
{loadingState ? (
|
||||
<>
|
||||
<MessageContainer>
|
||||
<Loader />
|
||||
</MessageContainer>
|
||||
</>
|
||||
) : errorState ? (
|
||||
<MessageContainer>
|
||||
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
||||
</MessageContainer>
|
||||
) : services.length === 0 ? (
|
||||
<MessageContainer>
|
||||
<h3>Услуг пока нет</h3>
|
||||
</MessageContainer>
|
||||
) : (
|
||||
<List>
|
||||
{services.map((item, index) => (
|
||||
<ServiceItem item={item} key={index} />
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</ServicesContainer>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|