diff --git a/index.html b/index.html
index e4b78ea..1d7a34b 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,12 @@
-
+
+
Vite + React + TS
diff --git a/src/assets/icon/autobro.jpg b/src/assets/icon/autobro.jpg
new file mode 100644
index 0000000..7f5fcea
Binary files /dev/null and b/src/assets/icon/autobro.jpg differ
diff --git a/src/assets/icon/autobro.png b/src/assets/icon/autobro.png
new file mode 100644
index 0000000..fbe2db4
Binary files /dev/null and b/src/assets/icon/autobro.png differ
diff --git a/src/assets/icon/car.png b/src/assets/icon/car.png
new file mode 100644
index 0000000..87cf8c5
Binary files /dev/null and b/src/assets/icon/car.png differ
diff --git a/src/components/Feedback.tsx b/src/components/Feedback.tsx
index 84f704a..fc80eca 100644
--- a/src/components/Feedback.tsx
+++ b/src/components/Feedback.tsx
@@ -1,24 +1,24 @@
-import React, { useState } from 'react';
-import {
- Dialog,
- TextField,
- Button,
- IconButton,
- Typography,
- Box,
- Radio,
- RadioGroup,
- FormControlLabel,
+import React, { useState } from "react";
+import {
+ Dialog,
+ TextField,
+ Button,
+ IconButton,
+ Typography,
+ Box,
+ Radio,
+ RadioGroup,
+ FormControlLabel,
FormControl,
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(
{...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 = ({ 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 = ({ 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: "#C27664",
},
- '&.Mui-focused': {
- color: '#c22d1a',
- }
},
- '& .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) => {
// Убедимся, что +7 всегда присутствует
- if (event.target.value.startsWith('+7')) {
+ if (event.target.value.startsWith("+7")) {
setPhone(event.target.value);
}
};
@@ -111,323 +119,453 @@ const Feedback: React.FC = ({ open, onClose }) => {
return (
- e.stopPropagation()} // предотвращаем закрытие при клике на контент
>
- theme.palette.grey[500],
- }}
- >
-
-
-
-
-
- Оставьте заявку
-
-
-
-
-
- И наш менеджер свяжется с вами для уточнения деталей заказа
-
-
-
- setName(e.target.value)}
- sx={{
- mb: isMobile ? '3vw' : '1vw',
- ...textFieldSx,
- }}
- />
-
-
- {/* Поле с телефоном как на скриншоте */}
-
+ theme.palette.grey[500],
+ }}
+ >
+
+
+
+
+ Оставьте заявку
+
+
+
+
+
-
+
+
+ setName(e.target.value)}
sx={{
- color: 'rgba(0, 0, 0, 0.6)',
- '&.Mui-focused': {
- color: '#c22d1a',
+ mb: isMobile ? "3vw" : "1vw",
+ ...textFieldSx,
+ }}
+ />
+
+ {/* Поле с телефоном как на скриншоте */}
+
- Ваш телефон*
-
-
+ Ваш телефон*
+
+
+
+
+
+
+ Из какой страны привезти автомобиль?
+
+
+ setCountry(e.target.value)}
+ >
+
+ }
+ label={
+
+ Европа
+
+ }
+ sx={{
+ marginRight: isMobile ? "2.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+ }
+ label={
+
+ США
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+ }
+ label={
+
+ Китай
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+ }
+ label={
+
+ Корея
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+
+
+
+
+
+ Какой у вас бюджет на автомобиль?
+
+
+ setBudget(e.target.value)}
+ >
+
+ }
+ label={
+
+ до 3 млн
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+ }
+ label={
+
+ 3-5 млн
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+ }
+ label={
+
+ 5-10 млн
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+ }
+ label={
+
+ 10+ млн
+
+ }
+ sx={{
+ marginRight: isMobile ? "1.5vw" : "1.5vw",
+ ml: "0vw",
+ }}
+ />
+
+
+
+
+ setDescription(e.target.value)}
sx={{
- borderColor: '#c22d1a',
- '& input': {
- paddingLeft: '0',
+ mb: isMobile ? "2.7vw" : "1vw",
+ ...textFieldSx,
+ "& .MuiInputBase-input": {
+ padding: isMobile ? "3vw 2.5vw" : "0vw 1vw",
},
}}
/>
-
-
-
-
- Из какой страны привезти автомобиль?
-
-
- setCountry(e.target.value)}
- >
-
- }
- label={Европа}
- sx={{ marginRight: isMobile ? '2.5vw' : '1.5vw', ml: '0vw' }}
- />
-
- }
- label={США}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
- }
- label={Китай}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
- }
- label={Корея}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
-
-
-
-
-
- Какой у вас бюджет на автомобиль?
-
-
- setBudget(e.target.value)}
- >
-
- }
- label={до 3 млн}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
- }
- label={3-5 млн}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
- }
- label={5-10 млн}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
- }
- label={10+ млн}
- sx={{ marginRight: isMobile ? '1.5vw' : '1.5vw', ml: '0vw' }}
- />
-
-
-
-
- setDescription(e.target.value)}
- sx={{
- mb: isMobile ? '2.7vw' : '1.7vw',
- ...textFieldSx
- }}
- />
-
- }
- >
- Отправить
-
-
-
- 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',
- }}
+ endIcon={
+
}
- label={
-
- Я подтверждаю, что ознакомлен{' '}
-
+ Отправить
+
+
+
+ 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={
+
- с политикой конфиденциальности
+ Я подтверждаю, что ознакомлен{" "}
+
+ с политикой конфиденциальности
+
-
- }
- />
+ }
+ />
+
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 14e5aa6..89e82d0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,105 +1,146 @@
-import React from 'react';
-import {
- AppBar,
- Toolbar,
- Typography,
- Button,
- Box,
- Container,
+import React, { useState } from "react";
+import {
+ Box,
+ 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 (
<>
-
-
-
- {/* Логотип и текст */}
-
-
-
- Автомобили из Европы, США, Китая, и Кореи
-
-
-
- {/* Время работы */}
-
-
-
- Ежедневно: с 9:00 до 20:00
-
-
-
- {/* Номер телефона */}
-
-
-
-
- Номер телефона
-
-
- +7 927 853 3979
-
-
-
-
- {/* Кнопка заявки */}
-
- Оставить заявку
-
-
- {/* Социальные сети */}
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Навигационное меню */}
-
-
-
- {['О нас', 'В наличии', 'Этапы работы', 'Отзывы', 'Калькулятор', 'Команда', 'Доставленные авто', 'Контакты'].map((item) => (
-
- ))}
+
+ 
+
+ {isMobile ? (
+
+
+
+
+
-
+ ) : (
+ // Desktop menu
+ menuItems.map((item, index) => (
+
+ {item}
+
+ ))
+ )}
+
+ {/* Мобильное меню */}
+
+
+
+ {menuItems.map((item, index) => (
+
+
+ {item}
+
+
+ ))}
+
+
+
+
+ {/* Форма обратной связи */}
+ setFeedbackOpen(false)} />
);
};
diff --git a/src/index.css b/src/index.css
index 34c2487..209b7a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+#root {
+ font-family: "Unbounded", sans-serif;
+}
+
body {
padding: 0;
margin: 0;
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index f102716..977d26f 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -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 (
-
-
-
- Главная страница
+
+
+
+ АВТО
-
- Это главная страница приложения
+
+ БРО
-
-
+
+
+ {/*
+
-
-
-
-
- )
+
+
+ */}
+
+ );
}
-export default MainPage
+export default MainPage;