aurine/autobro-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design from figma / edit header and mainpage / adaptive on mobile

Browse Source
This commit is contained in:
aurinex
2025-07-08 15:50:34 +05:00
parent 4f26d6fae0
commit a9c056f8bf
8 changed files with 697 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -1,8 +1,12 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>

BIN
src/assets/icon/autobro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/icon/autobro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
src/assets/icon/car.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 KiB

434
src/components/Feedback.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { import {
Dialog, Dialog,
TextField, TextField,
@ -13,12 +13,12 @@ import {
InputAdornment, InputAdornment,
InputLabel, InputLabel,
OutlinedInput, OutlinedInput,
Checkbox Checkbox,
} from '@mui/material'; } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from "@mui/icons-material/Close";
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { IMaskInput } from 'react-imask'; import { IMaskInput } from "react-imask";
import { useResponsive } from '../theme/useResponsive'; import { useResponsive } from "../theme/useResponsive";
interface CustomProps { interface CustomProps {
onChange: (event: { target: { name: string; value: string } }) => void; onChange: (event: { target: { name: string; value: string } }) => void;
@ -34,17 +34,19 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
{...other} {...other}
mask="+7 (___) ___-__-__" mask="+7 (___) ___-__-__"
definitions={{ definitions={{
'_': /[0-9]/, _: /[0-9]/,
}} }}
inputRef={ref} inputRef={ref}
onAccept={(value: any) => onChange({ target: { name: props.name, value } })} onAccept={(value: any) =>
onChange({ target: { name: props.name, value } })
}
overwrite overwrite
unmask={false} unmask={false}
lazy={false} lazy={false}
placeholderChar="_" placeholderChar="_"
/> />
); );
}, }
); );
interface FeedbackProps { interface FeedbackProps {
@ -53,18 +55,20 @@ interface FeedbackProps {
} }
const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => { const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
const [name, setName] = useState(''); const [name, setName] = useState("");
const [phone, setPhone] = useState('+7'); const [phone, setPhone] = useState("+7");
const [country, setCountry] = useState('Европа'); const [country, setCountry] = useState("Европа");
const [budget, setBudget] = useState('до 3 млн'); const [budget, setBudget] = useState("до 3 млн");
const [description, setDescription] = useState(''); const [description, setDescription] = useState("");
const [agreeToPolicy, setAgreeToPolicy] = useState(false); const [agreeToPolicy, setAgreeToPolicy] = useState(false);
const { isMobile } = useResponsive(); const { isMobile } = useResponsive();
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (!agreeToPolicy) { if (!agreeToPolicy) {
alert('Для отправки формы необходимо согласиться с политикой конфиденциальности'); alert(
"Для отправки формы необходимо согласиться с политикой конфиденциальности"
);
return; return;
} }
// логика отправки формы // логика отправки формы
@ -73,37 +77,41 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
}; };
const textFieldSx = { const textFieldSx = {
'& .MuiOutlinedInput-root': { "& .MuiOutlinedInput-root": {
'&.Mui-focused fieldset': { "&.Mui-focused fieldset": {
borderColor: '#c22d1a', borderColor: "#C27664",
}, },
'&:hover fieldset': { "&:hover fieldset": {
borderColor: '#c22d1a', borderColor: "#C27664",
}, },
}, },
'& .MuiOutlinedInput-root, fieldset': { "& .MuiOutlinedInput-root, fieldset": {
borderRadius: isMobile ? '3vw' : '1.5vw', borderRadius: isMobile ? "3vw" : "1.5vw",
fontSize: isMobile ? '2.8vw' : '1.25vw' fontSize: isMobile ? "2.8vw" : "1.25vw",
}, },
'& .MuiInputLabel-root': { "& .MuiInputLabel-root": {
fontSize: isMobile ? '2.8vw' : '1.25vw', fontSize: isMobile ? "2.8vw" : "1.25vw",
transform: isMobile ? 'translate(2.5vw, 3.1vw) scale(1)' : 'translate(1.5vw, 1.1vw) scale(1)', transform: isMobile
'&.MuiInputLabel-shrink': { ? "translate(2.5vw, 3.1vw) scale(1)"
transform: isMobile ? 'translate(3vw, -1.6vw) scale(0.75)' : 'translate(1.5vw, -0.6vw) scale(0.75)', : "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': { "&.Mui-focused": {
color: '#c22d1a', color: "#C27664",
}
}, },
'& .MuiInputBase-input': { },
fontSize: isMobile ? '2.8vw' : '1.25vw', "& .MuiInputBase-input": {
padding: isMobile ? '3vw 2.5vw' : '1vw 1.5vw', fontSize: isMobile ? "2.8vw" : "1.25vw",
padding: isMobile ? "3vw 2.5vw" : "1vw 1.5vw",
}, },
}; };
const handlePhoneChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handlePhoneChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// Убедимся, что +7 всегда присутствует // Убедимся, что +7 всегда присутствует
if (event.target.value.startsWith('+7')) { if (event.target.value.startsWith("+7")) {
setPhone(event.target.value); setPhone(event.target.value);
} }
}; };
@ -111,88 +119,104 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
return ( return (
<Box <Box
sx={{ sx={{
position: 'absolute', position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: "100%",
height: '100%', height: "100%",
display: open ? 'flex' : 'none', display: open ? "flex" : "none",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
zIndex: 1300, // высокий z-index как у диалога zIndex: 1300, // высокий z-index как у диалога
bgcolor: 'rgba(0, 0, 0, 0.5)', // затемнение фона bgcolor: "rgba(0, 0, 0, 0.5)", // затемнение фона
}} }}
onClick={onClose} // закрытие при клике на фон onClick={onClose} // закрытие при клике на фон
> >
<Box <Box
sx={{ sx={{
position: 'relative', position: "relative",
bgcolor: 'background.paper', bgcolor: "background.paper",
borderRadius: isMobile ? '3vw' : '1.5vw', borderRadius: isMobile ? "3vw" : "1.5vw",
p: isMobile ? '6vw' : '6vw', p: isMobile ? "6vw" : "4vw",
maxWidth: '70vw', maxWidth: isMobile ? "70vw" : "40vw",
overflow: 'hidden', maxHeight: "75vh",
overflow: "hidden",
boxShadow: 24, // тень как у диалога boxShadow: 24, // тень как у диалога
margin: 'auto', // для дополнительной центровки margin: "auto", // для дополнительной центровки
}} }}
onClick={(e) => e.stopPropagation()} // предотвращаем закрытие при клике на контент onClick={(e) => e.stopPropagation()} // предотвращаем закрытие при клике на контент
> >
<Box>
<IconButton <IconButton
onClick={onClose} onClick={onClose}
sx={{ sx={{
position: 'absolute', position: "absolute",
right: '1vw', right: "1vw",
top: '1vw', top: "1vw",
color: (theme) => theme.palette.grey[500], color: (theme) => theme.palette.grey[500],
}} }}
> >
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
<Box sx={{ textAlign: 'center', mb: '1vw', mt: '1vw' }}> <Box sx={{ textAlign: "center", mb: "1vw", mt: "-1vw" }}>
<Typography variant="h5" fontWeight="bold" sx={{ fontSize: isMobile ? '5vw' : '1.9vw' }}> <Typography
variant="h5"
fontWeight="bold"
sx={{ fontSize: isMobile ? "5vw" : "1.9vw" }}
>
Оставьте заявку Оставьте заявку
</Typography> </Typography>
</Box> </Box>
<Box sx={{ mb: '2vw' }}> <Box sx={{}}>
<Typography variant="body1" sx={{ textAlign: 'center', fontSize: isMobile ? '3.5vw' : '1.25vw', maxWidth: '65vw', margin: 'auto' }}> <Typography
variant="body1"
sx={{
textAlign: "center",
fontSize: isMobile ? "3.5vw" : "1.25vw",
maxWidth: "65vw",
margin: "auto",
}}
>
И наш менеджер свяжется с вами для уточнения деталей заказа И наш менеджер свяжется с вами для уточнения деталей заказа
</Typography> </Typography>
<Box component="form" onSubmit={handleSubmit} sx={{ mt: isMobile ? '3vw' : '1vw' }}> <Box
component="form"
onSubmit={handleSubmit}
sx={{ mt: isMobile ? "3vw" : "1vw" }}
>
<TextField <TextField
fullWidth fullWidth
label="Ваше имя" label="Ваше имя"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
sx={{ sx={{
mb: isMobile ? '3vw' : '1vw', mb: isMobile ? "3vw" : "1vw",
...textFieldSx, ...textFieldSx,
}} }}
/> />
{/* Поле с телефоном как на скриншоте */} {/* Поле с телефоном как на скриншоте */}
<FormControl <FormControl
fullWidth fullWidth
variant="outlined" variant="outlined"
sx={{ sx={{
mb: isMobile ? '3vw' : '1vw', mb: isMobile ? "3vw" : "1vw",
...textFieldSx, ...textFieldSx,
'&:hover .MuiOutlinedInput-notchedOutline': { "&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: '#c22d1a', borderColor: "#C27664",
}, },
}} }}
> >
<InputLabel <InputLabel
htmlFor="phone-input" htmlFor="phone-input"
shrink shrink
sx={{ sx={{
color: 'rgba(0, 0, 0, 0.6)', color: "rgba(0, 0, 0, 0.6)",
'&.Mui-focused': { "&.Mui-focused": {
color: '#c22d1a', color: "#C27664",
}, },
}} }}
> >
@ -206,19 +230,22 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
label="Ваш телефон*" label="Ваш телефон*"
notched notched
sx={{ sx={{
borderColor: '#c22d1a', borderColor: "#C27664",
'& input': { "& input": {
paddingLeft: '0', paddingLeft: "0",
}, },
}} }}
/> />
</FormControl> </FormControl>
<Box sx={{ mb: isMobile ? '3vw' : '1vw' }}> <Box sx={{ mb: isMobile ? "3vw" : "0.5vw" }}>
<Typography variant="body2" sx={{ mb: '0.5vw', fontSize: isMobile ? '3.5vw' : '1.1vw' }}> <Typography
variant="body2"
sx={{ mb: "0.5vw", fontSize: isMobile ? "3.5vw" : "1.1vw" }}
>
Из какой страны привезти автомобиль? Из какой страны привезти автомобиль?
</Typography> </Typography>
<FormControl component="fieldset" sx={{ width: '100%' }}> <FormControl component="fieldset" sx={{ width: "100%" }}>
<RadioGroup <RadioGroup
row row
value={country} value={country}
@ -229,70 +256,117 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>Европа</Typography>} label={
sx={{ marginRight: isMobile ? '2.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
Европа
</Typography>
}
sx={{
marginRight: isMobile ? "2.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
<FormControlLabel <FormControlLabel
value="США" value="США"
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>США</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
США
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
<FormControlLabel <FormControlLabel
value="Китай" value="Китай"
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: isMobile ? '0.5vw' : '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: isMobile ? "0.5vw" : "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>Китай</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
Китай
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
<FormControlLabel <FormControlLabel
value="Корея" value="Корея"
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>Корея</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
Корея
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ mb: isMobile ? '2.5vw' : '1vw' }}> <Box sx={{ mb: isMobile ? "2.5vw" : "1vw" }}>
<Typography variant="body2" sx={{ mb: '0.5vw', fontSize: isMobile ? '3.5vw' : '1.1vw' }}> <Typography
variant="body2"
sx={{ mb: "0.5vw", fontSize: isMobile ? "3.5vw" : "1.1vw" }}
>
Какой у вас бюджет на автомобиль? Какой у вас бюджет на автомобиль?
</Typography> </Typography>
<FormControl component="fieldset" sx={{ width: '100%' }}> <FormControl component="fieldset" sx={{ width: "100%" }}>
<RadioGroup <RadioGroup
row row
value={budget} value={budget}
@ -303,60 +377,104 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>до 3 млн</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
до 3 млн
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
<FormControlLabel <FormControlLabel
value="до 5 млн" value="до 5 млн"
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>3-5 млн</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
3-5 млн
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
<FormControlLabel <FormControlLabel
value="5-10 млн" value="5-10 млн"
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>5-10 млн</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
5-10 млн
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
<FormControlLabel <FormControlLabel
value="более 10 млн" value="более 10 млн"
control={ control={
<Radio <Radio
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '4.5vw' : '1.5vw' }, "& .MuiSvgIcon-root": {
padding: '0.5vw' fontSize: isMobile ? "4.5vw" : "1.5vw",
},
padding: "0.5vw",
}} }}
/> />
} }
label={<Typography sx={{ fontSize: isMobile ? '3vw' : '1.1vw' }}>10+ млн</Typography>} label={
sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }} <Typography
sx={{ fontSize: isMobile ? "3vw" : "1.1vw" }}
>
10+ млн
</Typography>
}
sx={{
marginRight: isMobile ? "1.5vw" : "1.5vw",
ml: "0vw",
}}
/> />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
@ -365,13 +483,16 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
<TextField <TextField
fullWidth fullWidth
multiline multiline
rows={4} rows={2}
placeholder="Укажите какой автомобиль вам нужен ?" placeholder="Укажите какой автомобиль вам нужен ?"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
sx={{ sx={{
mb: isMobile ? '2.7vw' : '1.7vw', mb: isMobile ? "2.7vw" : "1vw",
...textFieldSx ...textFieldSx,
"& .MuiInputBase-input": {
padding: isMobile ? "3vw 2.5vw" : "0vw 1vw",
},
}} }}
/> />
@ -380,47 +501,63 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
variant="contained" variant="contained"
fullWidth fullWidth
sx={{ sx={{
bgcolor: '#c22d1a', bgcolor: "#C27664",
color: 'white', color: "white",
py: '0.9vw', py: "0.9vw",
borderRadius: isMobile ? '3vw' : '1vw', borderRadius: isMobile ? "3vw" : "1vw",
fontSize: isMobile ? '3.5vw' : '1.25vw', fontSize: isMobile ? "3.5vw" : "1.25vw",
'&:hover': { bgcolor: '#a42517' }, "&:hover": { bgcolor: "#a42517" },
textTransform: 'none', textTransform: "none",
}} }}
endIcon={<ArrowForwardIcon sx={{ fontSize: isMobile ? '1.4vw' : '3vw' }} />} endIcon={
<ArrowForwardIcon
sx={{ fontSize: isMobile ? "1.4vw" : "3vw" }}
/>
}
> >
Отправить Отправить
</Button> </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 <FormControlLabel
sx={{ sx={{
margin: '0vw' margin: "0vw",
}} }}
control={ control={
<Checkbox <Checkbox
checked={agreeToPolicy} checked={agreeToPolicy}
onChange={(e) => setAgreeToPolicy(e.target.checked)} onChange={(e) => setAgreeToPolicy(e.target.checked)}
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
'&.Mui-checked': { color: '#c22d1a' }, "&.Mui-checked": { color: "#C27664" },
'& .MuiSvgIcon-root': { fontSize: isMobile ? '5vw' : '2vw' }, "& .MuiSvgIcon-root": {
padding: isMobile ? '0.5vw' : '0vw', fontSize: isMobile ? "5vw" : "2vw",
marginRight: isMobile ? '0.5vw' : '0.5vw', },
padding: isMobile ? "0.5vw" : "0vw",
marginRight: isMobile ? "0.5vw" : "0.5vw",
}} }}
/> />
} }
label={ label={
<Typography variant="body2" sx={{ fontSize: isMobile ? '2.5vw' : '1vw' }}> <Typography
Я подтверждаю, что ознакомлен{' '} variant="body2"
sx={{ fontSize: isMobile ? "2.5vw" : "1vw" }}
>
Я подтверждаю, что ознакомлен{" "}
<Typography <Typography
component="span" component="span"
sx={{ sx={{
color: '#c22d1a', color: "#C27664",
cursor: 'pointer', cursor: "pointer",
textDecoration: 'underline', textDecoration: "underline",
fontSize: isMobile ? '2.5vw' : '1vw' fontSize: isMobile ? "2.5vw" : "1vw",
}} }}
> >
с политикой конфиденциальности с политикой конфиденциальности
@ -433,6 +570,7 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Box>
); );
}; };

223
src/components/Header.tsx
View File

@ -1,105 +1,146 @@
import React from 'react'; import React, { useState } from "react";
import { import {
AppBar,
Toolbar,
Typography,
Button,
Box, Box,
Container, Typography,
IconButton, IconButton,
Stack Drawer,
} from '@mui/material'; List,
import { styled } from '@mui/material/styles'; ListItem,
import PhoneIcon from '@mui/icons-material/Phone'; Button,
import AccessTimeIcon from '@mui/icons-material/AccessTime'; } from "@mui/material";
import TelegramIcon from '@mui/icons-material/Telegram'; import MenuIcon from "@mui/icons-material/Menu";
import WhatsAppIcon from '@mui/icons-material/WhatsApp'; import logo from "../assets/icon/autobro.png";
import { useResponsive } from "../theme/useResponsive";
// Стилизованная кнопка для "Оставить заявку" import Feedback from "./Feedback";
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',
});
const Header = () => { 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 ( return (
<> <>
<AppBar position="static" color="default" elevation={0} sx={{ backgroundColor: 'white' }}> <Box
<Container maxWidth="xl"> sx={{
<Toolbar disableGutters> display: "flex",
{/* Логотип и текст */} justifyContent: "center",
<Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}> alignItems: "center",
<Logo src="/logo.svg" alt="Логотип" /> height: isMobile ? "15vw" : "10vw",
<Typography variant="body2" color="text.primary" sx={{ maxWidth: 250, lineHeight: 1.2 }}> gap: "2vw",
Автомобили из Европы, США, Китая, и Кореи fontFamily: "Unbounded",
</Typography> bgcolor: "#2D2D2D",
</Box> userSelect: "none",
color: "white",
padding: isMobile ? "0 4vw" : 0,
}}
>
<img
src={logo}
alt="logo"
style={{
width: isMobile ? "10vw" : "7vw",
height: isMobile ? "10vw" : "7vw",
}}
/>
{/* Время работы */} {isMobile ? (
<Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}> <Box
<AccessTimeIcon sx={{ mr: 1, color: 'primary.main' }} /> sx={{ marginLeft: "auto", display: "flex", alignItems: "center" }}
<Typography variant="body2"> >
Ежедневно: с 9:00 до 20:00 <Button
</Typography> variant="contained"
</Box> onClick={() => setFeedbackOpen(true)}
sx={{
{/* Номер телефона */} bgcolor: "#C27664",
<Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}> color: "white",
<PhoneIcon sx={{ mr: 1, color: 'primary.main' }} /> fontSize: "2.5vw",
<Box> padding: "1.5vw 3vw",
<Typography variant="body2" color="text.secondary"> marginRight: "3vw",
Номер телефона textTransform: "none",
</Typography> borderRadius: "3vw",
<Typography variant="body1" fontWeight="bold"> fontWeight: "light",
+7 927 853 3979 fontFamily: "Unbounded",
</Typography> "&:hover": { bgcolor: "#945B4D" },
</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}
</Button> </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> </Box>
</Container> </Drawer>
</Box>
{/* Форма обратной связи */}
<Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
</> </>
); );
}; };

4
src/index.css
View File

@ -1,3 +1,7 @@
#root {
font-family: "Unbounded", sans-serif;
}
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;

88
src/pages/MainPage.tsx
View File

@ -1,6 +1,8 @@
import React, { useState } from 'react' import React, { useState } from "react";
import { Button, Container, Box, Typography } from '@mui/material' import { Button, Container, Box, Typography } from "@mui/material";
import Feedback from '../components/Feedback' import Feedback from "../components/Feedback";
import car from "../../src/assets/icon/car.png";
import { Gradient } from "@mui/icons-material";
function MainPage() { function MainPage() {
const [feedbackOpen, setFeedbackOpen] = useState(false); const [feedbackOpen, setFeedbackOpen] = useState(false);
@ -14,33 +16,87 @@ function MainPage() {
}; };
return ( return (
<Container maxWidth="xl"> <Box sx={{ bgcolor: "#2D2D2D", color: "white", userSelect: "none" }}>
<Box sx={{ mt: 4, textAlign: 'center' }}> <Box
<Typography variant="h3" component="h1" gutterBottom> 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>
<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> </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 <Button
variant="contained" variant="contained"
onClick={handleOpenFeedback} onClick={handleOpenFeedback}
sx={{ sx={{
bgcolor: '#c22d1a', bgcolor: "#c22d1a",
color: 'white', color: "white",
py: 1.5, py: 1.5,
px: 3, px: 3,
'&:hover': { bgcolor: '#a42517' } "&:hover": { bgcolor: "#a42517" },
mb: "2vw",
}} }}
> >
Оставить заявку Оставить заявку
</Button> </Button>
</Box>
<Feedback open={feedbackOpen} onClose={handleCloseFeedback} /> <Feedback open={feedbackOpen} onClose={handleCloseFeedback} />
</Container> </Box> */}
) </Box>
);
} }
export default MainPage export default MainPage;