design from figma / edit header and mainpage / adaptive on mobile
This commit is contained in:
aurinex
@ -1,8 +1,12 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
|
||||
BIN
src/assets/icon/autobro.jpg
Normal file
BIN
src/assets/icon/autobro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
src/assets/icon/autobro.png
Normal file
BIN
src/assets/icon/autobro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
src/assets/icon/car.png
Normal file
BIN
src/assets/icon/car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
TextField,
|
||||
@ -13,12 +13,12 @@ import {
|
||||
InputAdornment,
|
||||
InputLabel,
|
||||
OutlinedInput,
|
||||
Checkbox
|
||||
} from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||
import { IMaskInput } from 'react-imask';
|
||||
import { useResponsive } from '../theme/useResponsive';
|
||||
Checkbox,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
||||
import { IMaskInput } from "react-imask";
|
||||
import { useResponsive } from "../theme/useResponsive";
|
||||
|
||||
interface CustomProps {
|
||||
onChange: (event: { target: { name: string; value: string } }) => void;
|
||||
@ -34,17 +34,19 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
|
||||
{...other}
|
||||
mask="+7 (___) ___-__-__"
|
||||
definitions={{
|
||||
'_': /[0-9]/,
|
||||
_: /[0-9]/,
|
||||
}}
|
||||
inputRef={ref}
|
||||
onAccept={(value: any) => onChange({ target: { name: props.name, value } })}
|
||||
onAccept={(value: any) =>
|
||||
onChange({ target: { name: props.name, value } })
|
||||
}
|
||||
overwrite
|
||||
unmask={false}
|
||||
lazy={false}
|
||||
placeholderChar="_"
|
||||
/>
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
interface FeedbackProps {
|
||||
@ -53,18 +55,20 @@ interface FeedbackProps {
|
||||
}
|
||||
|
||||
const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
const [name, setName] = useState('');
|
||||
const [phone, setPhone] = useState('+7');
|
||||
const [country, setCountry] = useState('Европа');
|
||||
const [budget, setBudget] = useState('до 3 млн');
|
||||
const [description, setDescription] = useState('');
|
||||
const [name, setName] = useState("");
|
||||
const [phone, setPhone] = useState("+7");
|
||||
const [country, setCountry] = useState("Европа");
|
||||
const [budget, setBudget] = useState("до 3 млн");
|
||||
const [description, setDescription] = useState("");
|
||||
const [agreeToPolicy, setAgreeToPolicy] = useState(false);
|
||||
const { isMobile } = useResponsive();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!agreeToPolicy) {
|
||||
alert('Для отправки формы необходимо согласиться с политикой конфиденциальности');
|
||||
alert(
|
||||
"Для отправки формы необходимо согласиться с политикой конфиденциальности"
|
||||
);
|
||||
return;
|
||||
}
|
||||
// логика отправки формы
|
||||
@ -73,37 +77,41 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
};
|
||||
|
||||
const textFieldSx = {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: '#c22d1a',
|
||||
"& .MuiOutlinedInput-root": {
|
||||
"&.Mui-focused fieldset": {
|
||||
borderColor: "#C27664",
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: '#c22d1a',
|
||||
"&:hover fieldset": {
|
||||
borderColor: "#C27664",
|
||||
},
|
||||
},
|
||||
'& .MuiOutlinedInput-root, fieldset': {
|
||||
borderRadius: isMobile ? '3vw' : '1.5vw',
|
||||
fontSize: isMobile ? '2.8vw' : '1.25vw'
|
||||
"& .MuiOutlinedInput-root, fieldset": {
|
||||
borderRadius: isMobile ? "3vw" : "1.5vw",
|
||||
fontSize: isMobile ? "2.8vw" : "1.25vw",
|
||||
},
|
||||
'& .MuiInputLabel-root': {
|
||||
fontSize: isMobile ? '2.8vw' : '1.25vw',
|
||||
transform: isMobile ? 'translate(2.5vw, 3.1vw) scale(1)' : 'translate(1.5vw, 1.1vw) scale(1)',
|
||||
'&.MuiInputLabel-shrink': {
|
||||
transform: isMobile ? 'translate(3vw, -1.6vw) scale(0.75)' : 'translate(1.5vw, -0.6vw) scale(0.75)',
|
||||
"& .MuiInputLabel-root": {
|
||||
fontSize: isMobile ? "2.8vw" : "1.25vw",
|
||||
transform: isMobile
|
||||
? "translate(2.5vw, 3.1vw) scale(1)"
|
||||
: "translate(1vw, 1.1vw) scale(1)",
|
||||
"&.MuiInputLabel-shrink": {
|
||||
transform: isMobile
|
||||
? "translate(3vw, -1.6vw) scale(0.75)"
|
||||
: "translate(0.9vw, -0.8vw) scale(0.75)",
|
||||
},
|
||||
'&.Mui-focused': {
|
||||
color: '#c22d1a',
|
||||
}
|
||||
"&.Mui-focused": {
|
||||
color: "#C27664",
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
fontSize: isMobile ? '2.8vw' : '1.25vw',
|
||||
padding: isMobile ? '3vw 2.5vw' : '1vw 1.5vw',
|
||||
},
|
||||
"& .MuiInputBase-input": {
|
||||
fontSize: isMobile ? "2.8vw" : "1.25vw",
|
||||
padding: isMobile ? "3vw 2.5vw" : "1vw 1.5vw",
|
||||
},
|
||||
};
|
||||
|
||||
const handlePhoneChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// Убедимся, что +7 всегда присутствует
|
||||
if (event.target.value.startsWith('+7')) {
|
||||
if (event.target.value.startsWith("+7")) {
|
||||
setPhone(event.target.value);
|
||||
}
|
||||
};
|
||||
@ -111,88 +119,104 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: open ? 'flex' : 'none',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: open ? "flex" : "none",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1300, // высокий z-index как у диалога
|
||||
bgcolor: 'rgba(0, 0, 0, 0.5)', // затемнение фона
|
||||
bgcolor: "rgba(0, 0, 0, 0.5)", // затемнение фона
|
||||
}}
|
||||
onClick={onClose} // закрытие при клике на фон
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: isMobile ? '3vw' : '1.5vw',
|
||||
p: isMobile ? '6vw' : '6vw',
|
||||
maxWidth: '70vw',
|
||||
overflow: 'hidden',
|
||||
position: "relative",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: isMobile ? "3vw" : "1.5vw",
|
||||
p: isMobile ? "6vw" : "4vw",
|
||||
maxWidth: isMobile ? "70vw" : "40vw",
|
||||
maxHeight: "75vh",
|
||||
overflow: "hidden",
|
||||
boxShadow: 24, // тень как у диалога
|
||||
margin: 'auto', // для дополнительной центровки
|
||||
margin: "auto", // для дополнительной центровки
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()} // предотвращаем закрытие при клике на контент
|
||||
>
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: '1vw',
|
||||
top: '1vw',
|
||||
position: "absolute",
|
||||
right: "1vw",
|
||||
top: "1vw",
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
|
||||
<Box sx={{ textAlign: 'center', mb: '1vw', mt: '1vw' }}>
|
||||
<Typography variant="h5" fontWeight="bold" sx={{ fontSize: isMobile ? '5vw' : '1.9vw' }}>
|
||||
<Box sx={{ textAlign: "center", mb: "1vw", mt: "-1vw" }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
fontWeight="bold"
|
||||
sx={{ fontSize: isMobile ? "5vw" : "1.9vw" }}
|
||||
>
|
||||
Оставьте заявку
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: '2vw' }}>
|
||||
<Typography variant="body1" sx={{ textAlign: 'center', fontSize: isMobile ? '3.5vw' : '1.25vw', maxWidth: '65vw', margin: 'auto' }}>
|
||||
<Box sx={{}}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
fontSize: isMobile ? "3.5vw" : "1.25vw",
|
||||
maxWidth: "65vw",
|
||||
margin: "auto",
|
||||
}}
|
||||
>
|
||||
И наш менеджер свяжется с вами для уточнения деталей заказа
|
||||
</Typography>
|
||||
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ mt: isMobile ? '3vw' : '1vw' }}>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
sx={{ mt: isMobile ? "3vw" : "1vw" }}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Ваше имя"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
sx={{
|
||||
mb: isMobile ? '3vw' : '1vw',
|
||||
mb: isMobile ? "3vw" : "1vw",
|
||||
...textFieldSx,
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
{/* Поле с телефоном как на скриншоте */}
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{
|
||||
mb: isMobile ? '3vw' : '1vw',
|
||||
mb: isMobile ? "3vw" : "1vw",
|
||||
...textFieldSx,
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#c22d1a',
|
||||
"&:hover .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "#C27664",
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
<InputLabel
|
||||
htmlFor="phone-input"
|
||||
shrink
|
||||
sx={{
|
||||
color: 'rgba(0, 0, 0, 0.6)',
|
||||
'&.Mui-focused': {
|
||||
color: '#c22d1a',
|
||||
color: "rgba(0, 0, 0, 0.6)",
|
||||
"&.Mui-focused": {
|
||||
color: "#C27664",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@ -206,19 +230,22 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
label="Ваш телефон*"
|
||||
notched
|
||||
sx={{
|
||||
borderColor: '#c22d1a',
|
||||
'& input': {
|
||||
paddingLeft: '0',
|
||||
borderColor: "#C27664",
|
||||
"& input": {
|
||||
paddingLeft: "0",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Box sx={{ mb: isMobile ? '3vw' : '1vw' }}>
|
||||
<Typography variant="body2" sx={{ mb: '0.5vw', fontSize: isMobile ? '3.5vw' : '1.1vw' }}>
|
||||
<Box sx={{ mb: isMobile ? "3vw" : "0.5vw" }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: "0.5vw", fontSize: isMobile ? "3.5vw" : "1.1vw" }}
|
||||
>
|
||||
Из какой страны привезти автомобиль?
|
||||
</Typography>
|
||||
<FormControl component="fieldset" sx={{ width: '100%' }}>
|
||||
<FormControl component="fieldset" sx={{ width: "100%" }}>
|
||||
<RadioGroup
|
||||
row
|
||||
value={country}
|
||||
@ -229,70 +256,117 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>Европа</Typography>}
|
||||
sx={{ marginRight: isMobile ? '2.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
Европа
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "2.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="США"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>США</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
США
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="Китай"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: isMobile ? '0.5vw' : '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: isMobile ? "0.5vw" : "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>Китай</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
Китай
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="Корея"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>Корея</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
Корея
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: isMobile ? '2.5vw' : '1vw' }}>
|
||||
<Typography variant="body2" sx={{ mb: '0.5vw', fontSize: isMobile ? '3.5vw' : '1.1vw' }}>
|
||||
<Box sx={{ mb: isMobile ? "2.5vw" : "1vw" }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: "0.5vw", fontSize: isMobile ? "3.5vw" : "1.1vw" }}
|
||||
>
|
||||
Какой у вас бюджет на автомобиль?
|
||||
</Typography>
|
||||
<FormControl component="fieldset" sx={{ width: '100%' }}>
|
||||
<FormControl component="fieldset" sx={{ width: "100%" }}>
|
||||
<RadioGroup
|
||||
row
|
||||
value={budget}
|
||||
@ -303,60 +377,104 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>до 3 млн</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
до 3 млн
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="до 5 млн"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>3-5 млн</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
3-5 млн
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="5-10 млн"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>5-10 млн</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
5-10 млн
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="более 10 млн"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' },
|
||||
padding: '0.5vw'
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "4.5vw" : "1.5vw",
|
||||
},
|
||||
padding: "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>10+ млн</Typography>}
|
||||
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
|
||||
label={
|
||||
<Typography
|
||||
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
|
||||
>
|
||||
10+ млн
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginRight: isMobile ? "1.5vw" : "1.5vw",
|
||||
ml: "0vw",
|
||||
}}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
@ -365,13 +483,16 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
rows={2}
|
||||
placeholder="Укажите какой автомобиль вам нужен ?"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
sx={{
|
||||
mb: isMobile ? '2.7vw' : '1.7vw',
|
||||
...textFieldSx
|
||||
mb: isMobile ? "2.7vw" : "1vw",
|
||||
...textFieldSx,
|
||||
"& .MuiInputBase-input": {
|
||||
padding: isMobile ? "3vw 2.5vw" : "0vw 1vw",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -380,47 +501,63 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
bgcolor: '#c22d1a',
|
||||
color: 'white',
|
||||
py: '0.9vw',
|
||||
borderRadius: isMobile ? '3vw' : '1vw',
|
||||
fontSize: isMobile ? '3.5vw' : '1.25vw',
|
||||
'&:hover': { bgcolor: '#a42517' },
|
||||
textTransform: 'none',
|
||||
bgcolor: "#C27664",
|
||||
color: "white",
|
||||
py: "0.9vw",
|
||||
borderRadius: isMobile ? "3vw" : "1vw",
|
||||
fontSize: isMobile ? "3.5vw" : "1.25vw",
|
||||
"&:hover": { bgcolor: "#a42517" },
|
||||
textTransform: "none",
|
||||
}}
|
||||
endIcon={<ArrowForwardIcon sx={{ fontSize: isMobile ? '1.4vw' : '3vw' }} />}
|
||||
endIcon={
|
||||
<ArrowForwardIcon
|
||||
sx={{ fontSize: isMobile ? "1.4vw" : "3vw" }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Отправить
|
||||
</Button>
|
||||
|
||||
<Box sx={{ mt: isMobile ? '2vw' : '1vw', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
mt: isMobile ? "2vw" : "1vw",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
sx={{
|
||||
margin: '0vw'
|
||||
margin: "0vw",
|
||||
}}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={agreeToPolicy}
|
||||
onChange={(e) => setAgreeToPolicy(e.target.checked)}
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
'&.Mui-checked': { color: '#c22d1a' },
|
||||
'& .MuiSvgIcon-root': { fontSize: isMobile ? '5vw' : '2vw' },
|
||||
padding: isMobile ? '0.5vw' : '0vw',
|
||||
marginRight: isMobile ? '0.5vw' : '0.5vw',
|
||||
color: "#C27664",
|
||||
"&.Mui-checked": { color: "#C27664" },
|
||||
"& .MuiSvgIcon-root": {
|
||||
fontSize: isMobile ? "5vw" : "2vw",
|
||||
},
|
||||
padding: isMobile ? "0.5vw" : "0vw",
|
||||
marginRight: isMobile ? "0.5vw" : "0.5vw",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography variant="body2" sx={{ fontSize: isMobile ? '2.5vw' : '1vw' }}>
|
||||
Я подтверждаю, что ознакомлен{' '}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontSize: isMobile ? "2.5vw" : "1vw" }}
|
||||
>
|
||||
Я подтверждаю, что ознакомлен{" "}
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
color: '#c22d1a',
|
||||
cursor: 'pointer',
|
||||
textDecoration: 'underline',
|
||||
fontSize: isMobile ? '2.5vw' : '1vw'
|
||||
color: "#C27664",
|
||||
cursor: "pointer",
|
||||
textDecoration: "underline",
|
||||
fontSize: isMobile ? "2.5vw" : "1vw",
|
||||
}}
|
||||
>
|
||||
с политикой конфиденциальности
|
||||
@ -433,6 +570,7 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,105 +1,146 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Button,
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
IconButton,
|
||||
Stack
|
||||
} from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import PhoneIcon from '@mui/icons-material/Phone';
|
||||
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
||||
import TelegramIcon from '@mui/icons-material/Telegram';
|
||||
import WhatsAppIcon from '@mui/icons-material/WhatsApp';
|
||||
|
||||
// Стилизованная кнопка для "Оставить заявку"
|
||||
const RequestButton = styled(Button)(({ theme }) => ({
|
||||
backgroundColor: '#c22d1a',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
padding: '10px 20px',
|
||||
'&:hover': {
|
||||
backgroundColor: '#a42517',
|
||||
},
|
||||
}));
|
||||
|
||||
// Стилизованный логотип
|
||||
const Logo = styled('img')({
|
||||
height: '40px',
|
||||
marginRight: '10px',
|
||||
});
|
||||
Drawer,
|
||||
List,
|
||||
ListItem,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import logo from "../assets/icon/autobro.png";
|
||||
import { useResponsive } from "../theme/useResponsive";
|
||||
import Feedback from "./Feedback";
|
||||
|
||||
const Header = () => {
|
||||
const { isMobile } = useResponsive();
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [feedbackOpen, setFeedbackOpen] = useState(false);
|
||||
|
||||
const menuItems = [
|
||||
"О нас",
|
||||
"Калькулятор",
|
||||
"Отзывы",
|
||||
"Контакты",
|
||||
"В наличии",
|
||||
"Команда",
|
||||
"Доставленные авто",
|
||||
"Этапы работы",
|
||||
];
|
||||
|
||||
const toggleDrawer = (open) => (event) => {
|
||||
if (
|
||||
event.type === "keydown" &&
|
||||
(event.key === "Tab" || event.key === "Shift")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setDrawerOpen(open);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppBar position="static" color="default" elevation={0} sx={{ backgroundColor: 'white' }}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
{/* Логотип и текст */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
|
||||
<Logo src="/logo.svg" alt="Логотип" />
|
||||
<Typography variant="body2" color="text.primary" sx={{ maxWidth: 250, lineHeight: 1.2 }}>
|
||||
Автомобили из Европы, США, Китая, и Кореи
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: isMobile ? "15vw" : "10vw",
|
||||
gap: "2vw",
|
||||
fontFamily: "Unbounded",
|
||||
bgcolor: "#2D2D2D",
|
||||
userSelect: "none",
|
||||
color: "white",
|
||||
padding: isMobile ? "0 4vw" : 0,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={logo}
|
||||
alt="logo"
|
||||
style={{
|
||||
width: isMobile ? "10vw" : "7vw",
|
||||
height: isMobile ? "10vw" : "7vw",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Время работы */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}>
|
||||
<AccessTimeIcon sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="body2">
|
||||
Ежедневно: с 9:00 до 20:00
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Номер телефона */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}>
|
||||
<PhoneIcon sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Номер телефона
|
||||
</Typography>
|
||||
<Typography variant="body1" fontWeight="bold">
|
||||
+7 927 853 3979
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Кнопка заявки */}
|
||||
<RequestButton variant="contained">
|
||||
Оставить заявку
|
||||
</RequestButton>
|
||||
|
||||
{/* Социальные сети */}
|
||||
<Stack direction="row" spacing={1} sx={{ ml: 2 }}>
|
||||
<IconButton sx={{ border: '1px solid #e0e0e0' }}>
|
||||
<img src="/vk-icon.svg" alt="VK" width="24" height="24" />
|
||||
</IconButton>
|
||||
<IconButton sx={{ border: '1px solid #e0e0e0' }}>
|
||||
<WhatsAppIcon color="success" />
|
||||
</IconButton>
|
||||
<IconButton sx={{ border: '1px solid #e0e0e0' }}>
|
||||
<TelegramIcon color="primary" />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
|
||||
{/* Навигационное меню */}
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', backgroundColor: 'white' }}>
|
||||
<Container maxWidth="xl">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
{['О нас', 'В наличии', 'Этапы работы', 'Отзывы', 'Калькулятор', 'Команда', 'Доставленные авто', 'Контакты'].map((item) => (
|
||||
<Button key={item} sx={{ color: 'text.primary', py: 1.5 }}>
|
||||
{item}
|
||||
{isMobile ? (
|
||||
<Box
|
||||
sx={{ marginLeft: "auto", display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => setFeedbackOpen(true)}
|
||||
sx={{
|
||||
bgcolor: "#C27664",
|
||||
color: "white",
|
||||
fontSize: "2.5vw",
|
||||
padding: "1.5vw 3vw",
|
||||
marginRight: "3vw",
|
||||
textTransform: "none",
|
||||
borderRadius: "3vw",
|
||||
fontWeight: "light",
|
||||
fontFamily: "Unbounded",
|
||||
"&:hover": { bgcolor: "#945B4D" },
|
||||
}}
|
||||
>
|
||||
Оставьте заявку
|
||||
</Button>
|
||||
<IconButton onClick={toggleDrawer(true)} sx={{ color: "white" }}>
|
||||
<MenuIcon sx={{ fontSize: "7vw" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
) : (
|
||||
// Desktop menu
|
||||
menuItems.map((item, index) => (
|
||||
<Typography
|
||||
key={index}
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "1vw",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Typography>
|
||||
))
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Мобильное меню */}
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={isMobile && drawerOpen}
|
||||
onClose={toggleDrawer(false)}
|
||||
>
|
||||
<Box
|
||||
sx={{ width: "70vw", bgcolor: "#2D2D2D", height: "100%" }}
|
||||
role="presentation"
|
||||
onClick={toggleDrawer(false)}
|
||||
onKeyDown={toggleDrawer(false)}
|
||||
>
|
||||
<List>
|
||||
{menuItems.map((item, index) => (
|
||||
<ListItem key={index}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "4vw",
|
||||
color: "white",
|
||||
padding: "2vw 0",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Typography>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Drawer>
|
||||
|
||||
{/* Форма обратной связи */}
|
||||
<Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
#root {
|
||||
font-family: "Unbounded", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Button, Container, Box, Typography } from '@mui/material'
|
||||
import Feedback from '../components/Feedback'
|
||||
import React, { useState } from "react";
|
||||
import { Button, Container, Box, Typography } from "@mui/material";
|
||||
import Feedback from "../components/Feedback";
|
||||
import car from "../../src/assets/icon/car.png";
|
||||
import { Gradient } from "@mui/icons-material";
|
||||
|
||||
function MainPage() {
|
||||
const [feedbackOpen, setFeedbackOpen] = useState(false);
|
||||
@ -14,33 +16,87 @@ function MainPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="xl">
|
||||
<Box sx={{ mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h3" component="h1" gutterBottom>
|
||||
Главная страница
|
||||
<Box sx={{ bgcolor: "#2D2D2D", color: "white", userSelect: "none" }}>
|
||||
<Box
|
||||
id="title"
|
||||
sx={{
|
||||
textAlign: "left",
|
||||
width: "35vw",
|
||||
ml: "5vw",
|
||||
height: "30vw",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "9vw",
|
||||
fontWeight: "bold",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
left: "3vw",
|
||||
background:
|
||||
"linear-gradient(90deg, rgb(255, 255, 255), rgb(105, 105, 105))",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
backgroundClip: "text",
|
||||
color: "transparent",
|
||||
}}
|
||||
>
|
||||
АВТО
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph>
|
||||
Это главная страница приложения
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Unbounded",
|
||||
fontSize: "9vw",
|
||||
fontWeight: "bold",
|
||||
position: "relative",
|
||||
mt: "-5.5vw",
|
||||
zIndex: 1,
|
||||
right: "2vw",
|
||||
background:
|
||||
"linear-gradient(90deg, rgb(255, 255, 255), rgb(0, 0, 0))",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
backgroundClip: "text",
|
||||
color: "transparent",
|
||||
}}
|
||||
>
|
||||
БРО
|
||||
</Typography>
|
||||
<img
|
||||
src={car}
|
||||
alt="logo"
|
||||
style={{
|
||||
width: "70vw",
|
||||
height: "36vw",
|
||||
position: "relative",
|
||||
top: "-20vw",
|
||||
left: "10vw",
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* <Box id="button" sx={{ textAlign: "center" }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleOpenFeedback}
|
||||
sx={{
|
||||
bgcolor: '#c22d1a',
|
||||
color: 'white',
|
||||
bgcolor: "#c22d1a",
|
||||
color: "white",
|
||||
py: 1.5,
|
||||
px: 3,
|
||||
'&:hover': { bgcolor: '#a42517' }
|
||||
"&:hover": { bgcolor: "#a42517" },
|
||||
mb: "2vw",
|
||||
}}
|
||||
>
|
||||
Оставить заявку
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Feedback open={feedbackOpen} onClose={handleCloseFeedback} />
|
||||
</Container>
|
||||
)
|
||||
</Box> */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default MainPage
|
||||
export default MainPage;
|
||||
|
||||
Reference in New Issue
Block a user