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

808
src/components/Feedback.tsx
View File

@ -1,24 +1,24 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { import {
Dialog, Dialog,
TextField, TextField,
Button, Button,
IconButton, IconButton,
Typography, Typography,
Box, Box,
Radio, Radio,
RadioGroup, RadioGroup,
FormControlLabel, FormControlLabel,
FormControl, FormControl,
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": {
color: "#C27664",
}, },
'&.Mui-focused': {
color: '#c22d1a',
}
}, },
'& .MuiInputBase-input': { "& .MuiInputBase-input": {
fontSize: isMobile ? '2.8vw' : '1.25vw', fontSize: isMobile ? "2.8vw" : "1.25vw",
padding: isMobile ? '3vw 2.5vw' : '1vw 1.5vw', 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,323 +119,453 @@ 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()} // предотвращаем закрытие при клике на контент
> >
<IconButton <Box>
onClick={onClose} <IconButton
sx={{ onClick={onClose}
position: 'absolute', sx={{
right: '1vw', position: "absolute",
top: '1vw', right: "1vw",
color: (theme) => theme.palette.grey[500], top: "1vw",
}} color: (theme) => theme.palette.grey[500],
> }}
<CloseIcon /> >
</IconButton> <CloseIcon />
</IconButton>
<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' }}>
И наш менеджер свяжется с вами для уточнения деталей заказа
</Typography>
<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',
...textFieldSx,
}}
/>
{/* Поле с телефоном как на скриншоте */}
<FormControl
fullWidth
variant="outlined"
sx={{
mb: isMobile ? '3vw' : '1vw',
...textFieldSx,
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: '#c22d1a',
},
<Box sx={{ textAlign: "center", mb: "1vw", mt: "-1vw" }}>
<Typography
variant="h5"
fontWeight="bold"
sx={{ fontSize: isMobile ? "5vw" : "1.9vw" }}
>
Оставьте заявку
</Typography>
</Box>
<Box sx={{}}>
<Typography
variant="body1"
sx={{
textAlign: "center",
fontSize: isMobile ? "3.5vw" : "1.25vw",
maxWidth: "65vw",
margin: "auto",
}} }}
> >
<InputLabel И наш менеджер свяжется с вами для уточнения деталей заказа
htmlFor="phone-input" </Typography>
shrink
<Box
component="form"
onSubmit={handleSubmit}
sx={{ mt: isMobile ? "3vw" : "1vw" }}
>
<TextField
fullWidth
label="Ваше имя"
value={name}
onChange={(e) => setName(e.target.value)}
sx={{ sx={{
color: 'rgba(0, 0, 0, 0.6)', mb: isMobile ? "3vw" : "1vw",
'&.Mui-focused': { ...textFieldSx,
color: '#c22d1a', }}
/>
{/* Поле с телефоном как на скриншоте */}
<FormControl
fullWidth
variant="outlined"
sx={{
mb: isMobile ? "3vw" : "1vw",
...textFieldSx,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "#C27664",
}, },
}} }}
> >
Ваш телефон* <InputLabel
</InputLabel> htmlFor="phone-input"
<OutlinedInput shrink
id="phone-input" sx={{
value={phone} color: "rgba(0, 0, 0, 0.6)",
onChange={handlePhoneChange} "&.Mui-focused": {
inputComponent={TextMaskCustom as any} color: "#C27664",
label="Ваш телефон*" },
notched }}
>
Ваш телефон*
</InputLabel>
<OutlinedInput
id="phone-input"
value={phone}
onChange={handlePhoneChange}
inputComponent={TextMaskCustom as any}
label="Ваш телефон*"
notched
sx={{
borderColor: "#C27664",
"& input": {
paddingLeft: "0",
},
}}
/>
</FormControl>
<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%" }}>
<RadioGroup
row
value={country}
onChange={(e) => setCountry(e.target.value)}
>
<FormControlLabel
value="Европа"
control={
<Radio
sx={{
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",
}}
/>
<FormControlLabel
value="США"
control={
<Radio
sx={{
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",
}}
/>
<FormControlLabel
value="Китай"
control={
<Radio
sx={{
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",
}}
/>
<FormControlLabel
value="Корея"
control={
<Radio
sx={{
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",
}}
/>
</RadioGroup>
</FormControl>
</Box>
<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%" }}>
<RadioGroup
row
value={budget}
onChange={(e) => setBudget(e.target.value)}
>
<FormControlLabel
value="до 3 млн"
control={
<Radio
sx={{
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",
}}
/>
<FormControlLabel
value="до 5 млн"
control={
<Radio
sx={{
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",
}}
/>
<FormControlLabel
value="5-10 млн"
control={
<Radio
sx={{
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",
}}
/>
<FormControlLabel
value="более 10 млн"
control={
<Radio
sx={{
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",
}}
/>
</RadioGroup>
</FormControl>
</Box>
<TextField
fullWidth
multiline
rows={2}
placeholder="Укажите какой автомобиль вам нужен ?"
value={description}
onChange={(e) => setDescription(e.target.value)}
sx={{ sx={{
borderColor: '#c22d1a', mb: isMobile ? "2.7vw" : "1vw",
'& input': { ...textFieldSx,
paddingLeft: '0', "& .MuiInputBase-input": {
padding: isMobile ? "3vw 2.5vw" : "0vw 1vw",
}, },
}} }}
/> />
</FormControl>
<Button
<Box sx={{ mb: isMobile ? '3vw' : '1vw' }}> type="submit"
<Typography variant="body2" sx={{ mb: '0.5vw', fontSize: isMobile ? '3.5vw' : '1.1vw' }}> variant="contained"
Из какой страны привезти автомобиль? fullWidth
</Typography>
<FormControl component="fieldset" sx={{ width: '100%' }}>
<RadioGroup
row
value={country}
onChange={(e) => setCountry(e.target.value)}
>
<FormControlLabel
value="Европа"
control={
<Radio
sx={{
color: '#c22d1a',
'&.Mui-checked': { color: '#c22d1a' },
'& .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' }}
/>
<FormControlLabel
value="США"
control={
<Radio
sx={{
color: '#c22d1a',
'&.Mui-checked': { color: '#c22d1a' },
'& .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' }}
/>
<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'
}}
/>
}
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'
}}
/>
}
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' }}>
Какой у вас бюджет на автомобиль?
</Typography>
<FormControl component="fieldset" sx={{ width: '100%' }}>
<RadioGroup
row
value={budget}
onChange={(e) => setBudget(e.target.value)}
>
<FormControlLabel
value="до 3 млн"
control={
<Radio
sx={{
color: '#c22d1a',
'&.Mui-checked': { color: '#c22d1a' },
'& .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' }}
/>
<FormControlLabel
value="до 5 млн"
control={
<Radio
sx={{
color: '#c22d1a',
'&.Mui-checked': { color: '#c22d1a' },
'& .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' }}
/>
<FormControlLabel
value="5-10 млн"
control={
<Radio
sx={{
color: '#c22d1a',
'&.Mui-checked': { color: '#c22d1a' },
'& .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' }}
/>
<FormControlLabel
value="более 10 млн"
control={
<Radio
sx={{
color: '#c22d1a',
'&.Mui-checked': { color: '#c22d1a' },
'& .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' }}
/>
</RadioGroup>
</FormControl>
</Box>
<TextField
fullWidth
multiline
rows={4}
placeholder="Укажите какой автомобиль вам нужен ?"
value={description}
onChange={(e) => setDescription(e.target.value)}
sx={{
mb: isMobile ? '2.7vw' : '1.7vw',
...textFieldSx
}}
/>
<Button
type="submit"
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',
}}
endIcon={<ArrowForwardIcon sx={{ fontSize: isMobile ? '1.4vw' : '3vw' }} />}
>
Отправить
</Button>
<Box sx={{ mt: isMobile ? '2vw' : '1vw', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<FormControlLabel
sx={{ sx={{
margin: '0vw' bgcolor: "#C27664",
color: "white",
py: "0.9vw",
borderRadius: isMobile ? "3vw" : "1vw",
fontSize: isMobile ? "3.5vw" : "1.25vw",
"&:hover": { bgcolor: "#a42517" },
textTransform: "none",
}} }}
control={ endIcon={
<Checkbox <ArrowForwardIcon
checked={agreeToPolicy} sx={{ fontSize: isMobile ? "1.4vw" : "3vw" }}
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',
}}
/> />
} }
label={ >
<Typography variant="body2" sx={{ fontSize: isMobile ? '2.5vw' : '1vw' }}> Отправить
Я подтверждаю, что ознакомлен{' '} </Button>
<Typography
component="span" <Box
sx={{ sx={{
color: '#c22d1a', mt: isMobile ? "2vw" : "1vw",
cursor: 'pointer', display: "flex",
textDecoration: 'underline', alignItems: "center",
fontSize: isMobile ? '2.5vw' : '1vw' justifyContent: "center",
}}
>
<FormControlLabel
sx={{
margin: "0vw",
}}
control={
<Checkbox
checked={agreeToPolicy}
onChange={(e) => setAgreeToPolicy(e.target.checked)}
sx={{
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
component="span"
sx={{
color: "#C27664",
cursor: "pointer",
textDecoration: "underline",
fontSize: isMobile ? "2.5vw" : "1vw",
}}
>
с политикой конфиденциальности
</Typography>
</Typography> </Typography>
</Typography> }
} />
/> </Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>

231
src/components/Header.tsx
View File

@ -1,105 +1,146 @@
import React from 'react'; import React, { useState } from "react";
import { import {
AppBar, Box,
Toolbar, Typography,
Typography,
Button,
Box,
Container,
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,
<Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}> }}
<AccessTimeIcon sx={{ mr: 1, color: 'primary.main' }} /> >
<Typography variant="body2"> <img
Ежедневно: с 9:00 до 20:00 src={logo}
</Typography> alt="logo"
</Box> style={{
width: isMobile ? "10vw" : "7vw",
{/* Номер телефона */} height: isMobile ? "10vw" : "7vw",
<Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}> }}
<PhoneIcon sx={{ mr: 1, color: 'primary.main' }} /> />
<Box>
<Typography variant="body2" color="text.secondary"> {isMobile ? (
Номер телефона <Box
</Typography> sx={{ marginLeft: "auto", display: "flex", alignItems: "center" }}
<Typography variant="body1" fontWeight="bold"> >
+7 927 853 3979 <Button
</Typography> variant="contained"
</Box> onClick={() => setFeedbackOpen(true)}
</Box> sx={{
bgcolor: "#C27664",
{/* Кнопка заявки */} color: "white",
<RequestButton variant="contained"> fontSize: "2.5vw",
Оставить заявку padding: "1.5vw 3vw",
</RequestButton> marginRight: "3vw",
textTransform: "none",
{/* Социальные сети */} borderRadius: "3vw",
<Stack direction="row" spacing={1} sx={{ ml: 2 }}> fontWeight: "light",
<IconButton sx={{ border: '1px solid #e0e0e0' }}> fontFamily: "Unbounded",
<img src="/vk-icon.svg" alt="VK" width="24" height="24" /> "&:hover": { bgcolor: "#945B4D" },
</IconButton> }}
<IconButton sx={{ border: '1px solid #e0e0e0' }}> >
<WhatsAppIcon color="success" /> Оставьте заявку
</IconButton> </Button>
<IconButton sx={{ border: '1px solid #e0e0e0' }}> <IconButton onClick={toggleDrawer(true)} sx={{ color: "white" }}>
<TelegramIcon color="primary" /> <MenuIcon sx={{ fontSize: "7vw" }} />
</IconButton> </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>
))}
</Box> </Box>
</Container> ) : (
// Desktop menu
menuItems.map((item, index) => (
<Typography
key={index}
sx={{
fontFamily: "Unbounded",
fontSize: "1vw",
cursor: "pointer",
}}
>
{item}
</Typography>
))
)}
</Box> </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>
</Drawer>
{/* Форма обратной связи */}
<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;

102
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
<Button src={car}
variant="contained" 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} 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} /> </Box> */}
</Container> </Box>
) );
} }
export default MainPage export default MainPage;