diff --git a/src/assets/emoji/belarus.png b/src/assets/emoji/belarus.png new file mode 100644 index 0000000..56c5e90 Binary files /dev/null and b/src/assets/emoji/belarus.png differ diff --git a/src/assets/emoji/russia.png b/src/assets/emoji/russia.png new file mode 100644 index 0000000..79c2f29 Binary files /dev/null and b/src/assets/emoji/russia.png differ diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx new file mode 100644 index 0000000..512e68d --- /dev/null +++ b/src/components/Divider.tsx @@ -0,0 +1,28 @@ +import { Box } from "@mui/material"; +import React from "react"; +import { useResponsive } from "../theme/useResponsive"; + +function Divider() { + const { isMobile } = useResponsive(); + return ( + + + + ); +}; + +export default Divider; + + diff --git a/src/pages/CalculatorPage.tsx b/src/pages/CalculatorPage.tsx new file mode 100644 index 0000000..39439df --- /dev/null +++ b/src/pages/CalculatorPage.tsx @@ -0,0 +1,770 @@ +import React, { useState } from "react"; +import { + Box, + Typography, + TextField, + Button, + FormControl, + Select, + MenuItem, + FormControlLabel, + Radio, + InputAdornment, +} from "@mui/material"; +import { useResponsive } from "../theme/useResponsive"; +import russia from "../assets/emoji/russia.png"; +import belarus from "../assets/emoji/belarus.png"; + +function CalculatorPage() { + const { isMobile } = useResponsive(); + + // Состояния для полей формы + const [country, setCountry] = useState("russia"); // russia или belarus + const [age, setAge] = useState("Новые, не менее 3-х лет"); + const [price, setPrice] = useState(""); + const [currency, setCurrency] = useState("USD Доллар США"); + const [engineType, setEngineType] = useState("Бензиновый"); + const [hybridType, setHybridType] = useState("Не гибрид"); + const [engineVolume, setEngineVolume] = useState(""); + const [enginePower, setEnginePower] = useState(""); + const [enginePowerUnit, setEnginePowerUnit] = useState("л.с."); + const [electricMotorPower, setElectricMotorPower] = useState(""); + const [electricMotorPowerUnit, setElectricMotorPowerUnit] = useState("л.с."); + const [powerRatio, setPowerRatio] = useState("ДВС > ЭД"); + const [calculationType, setCalculationType] = useState("Физ. лица"); + const [enhancedPermeability, setEnhancedPermeability] = useState(false); + + const handleCalculate = () => { + // Здесь будет логика расчета + console.log({ + country, + age, + price, + currency, + engineType, + hybridType, + engineVolume, + enginePower, + enginePowerUnit, + electricMotorPower, + electricMotorPowerUnit, + powerRatio, + calculationType, + enhancedPermeability, + }); + }; + + return ( + + + {/* Левая часть - форма */} + + {/* Первая линия */} + + + Рассчитать для + + + setCountry("russia")} + sx={{ cursor: "pointer", position: "relative" }} + > + + Россия + + setCountry("belarus")} + sx={{ cursor: "pointer", position: "relative" }} + > + + Беларусь + + + + + {/* Вторая линия */} + + + Возраст + + {/* setAge(e.target.value)} + variant="outlined" + placeholder="Новые, не менее 3-х лет" + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: "25px", + bgcolor: "white", + height: "40px", + } + }} + /> */} + + + + {/* Третья линия */} + + setPrice(e.target.value)} + variant="outlined" + InputProps={{ + endAdornment: ₽, + }} + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: "2vw", + bgcolor: "white", + height: "3.5vw", + width: "83%", + border: "0.1vw solid #C27664", + fontFamily: "Unbounded", + fontSize: "1.5vw", + color: "#C27664", + "& fieldset": { + border: "none" + }, + } + }} + /> + + + + {/* + + */} + + + {/* Четвертая линия - Валюта */} + {/* + + + + */} + + {/* Пятая линия */} + + + Двигатель + + + + + + + {/* Шестая линия */} + + + Тип гибрида + + + + + + + {/* Седьмая линия */} + + setEngineVolume(e.target.value)} + variant="outlined" + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: "2vw", + bgcolor: "white", + height: "3.5vw", + width: "67%", + border: "0.1vw solid #C27664", + fontFamily: "Unbounded", + fontSize: "1.4vw", + color: "#C27664", + "& fieldset": { + border: "none" + }, + } + }} + /> + + см³ + + + + {/* Восьмая линия */} + + setEnginePower(e.target.value)} + variant="outlined" + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: "2vw", + bgcolor: "white", + height: "3.5vw", + width: "98%", + border: "0.1vw solid #C27664", + fontFamily: "Unbounded", + fontSize: "1.4vw", + color: "#C27664", + "& fieldset": { + border: "none" + }, + } + }} + /> + + setEnginePowerUnit("л.с.")} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + "& .MuiSvgIcon-root": { + fontSize: "1.5vw" + } + }} + /> + } + label="л.с." + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "2vw", + fontFamily: "Unbounded", + color: "#C27664", + } + }} + /> + setEnginePowerUnit("кВт")} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + "& .MuiSvgIcon-root": { + fontSize: "1.5vw" + } + }} + /> + } + label="кВт" + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "2vw", + fontFamily: "Unbounded", + color: "#C27664", + } + }} + /> + + + + {/* Девятая линия */} + + setElectricMotorPower(e.target.value)} + variant="outlined" + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: "2vw", + bgcolor: "white", + height: "3.5vw", + width: "112%", + border: "0.1vw solid #C27664", + fontFamily: "Unbounded", + fontSize: "1.32vw", + color: "#C27664", + "& fieldset": { + border: "none" + }, + } + }} + /> + + setElectricMotorPowerUnit("л.с.")} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + "& .MuiSvgIcon-root": { + fontSize: "1.5vw" + } + }} + /> + } + label="л.с." + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "2vw", + fontFamily: "Unbounded", + color: "#C27664", + } + }} + /> + setElectricMotorPowerUnit("кВт")} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + "& .MuiSvgIcon-root": { + fontSize: "1.5vw" + } + }} + /> + } + label="кВт" + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "2vw", + fontFamily: "Unbounded", + color: "#C27664", + } + }} + /> + + + + {/* Десятая линия */} + + + ДВС vs ЭД + + + ЭД"} + onChange={() => setPowerRatio("ДВС > ЭД")} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + }} + /> + } + label="ДВС > ЭД" + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "1.7vw", + fontFamily: "Unbounded", + color: "#C27664", + } + }} + /> + setPowerRatio("ДВС < ЭД")} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + }} + /> + } + label="ДВС < ЭД" + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "1.7vw", + fontFamily: "Unbounded", + color: "#C27664", + } + }} + /> + + + + {/* Одиннадцатая линия */} + + + Расчет при ввозе + + + + + + + {/* Двенадцатая линия */} + + setEnhancedPermeability(!enhancedPermeability)} + sx={{ + color: "#C27664", + "&.Mui-checked": { color: "#C27664" }, + }} + /> + } + label="Повышенной проходимости" + sx={{ + "& .MuiFormControlLabel-label": { + fontSize: "2vw", + color: "#C27664", + fontFamily: "Unbounded", + } + }} + /> + + + {/* Тринадцатая линия */} + + + + {/* Правая часть - описание */} + + + РАСЧИТАЙТЕ СТОИМОСТЬ ДОСТАВКИ! + + + + С помощью калькулятора таможенных платежей за автомобиль + + + + + Обсуждаем ваш запрос и бюджет, подбираем варианты. Заключаем договор и вносим аванс (100 000 P, возвращается, если не подберем авто). + + + Выкупаем авто + + + Оформляем документы и доставляем авто в РФ. На всех этапах машина застрахована. + + + Проходим таможню, делаем документы для регистрации. + + + Передаём авто вам - с актом и финальной оплатой. + + + + + + ); +} + +export default CalculatorPage; diff --git a/src/pages/DeliveryPage.tsx b/src/pages/DeliveryPage.tsx index c816157..4bde7b2 100644 --- a/src/pages/DeliveryPage.tsx +++ b/src/pages/DeliveryPage.tsx @@ -44,42 +44,44 @@ function DeliveryPage() { component="h1" sx={{ fontFamily: "Unbounded", - fontSize: isMobile ? "10vw" : "4vw", + fontSize: isMobile ? "6vw" : "4vw", fontWeight: "bold", marginBottom: "1vw", - maxWidth: "50vw", + maxWidth: isMobile ? "auto" :"50vw", }} > Мы доставляем автомобили из{" "} США, Китая и Кореи - + usa china korea @@ -102,10 +104,10 @@ function DeliveryPage() { component="h2" sx={{ fontFamily: "Unbounded", - fontSize: "1.5vw", + fontSize: isMobile ? "4vw" : "1.5vw", fontWeight: "light", color: "#C27664", - ml: "2.5vw", + ml: isMobile ? "4.5vw" : "2.5vw", maxWidth: "60%", }} > @@ -115,18 +117,18 @@ function DeliveryPage() { onClick={handleOpenFeedback} sx={{ fontFamily: "Unbounded", - fontSize: "1.5vw", + fontSize: isMobile ? "3vw" : "1.5vw", color: "white", bgcolor: "#C27664", - borderRadius: "3vw", + borderRadius: isMobile ? "5vw" : "3vw", maxWidth: "60%", cursor: "pointer", left: "50%", - top: "70%", + top: isMobile ? "75%" : "70%", position: "absolute", transform: "translateX(-50%)", - padding: "1vw 3vw 1vw 3vw", - width: "18vw", + padding: isMobile ? "2vw 6vw 2vw 6vw" : "1vw 3vw 1vw 3vw", + width: isMobile ? "50vw" : "18vw", textAlign: "center", "&:hover": { bgcolor: "#945B4D", diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 6e92c68..7b39d18 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -4,13 +4,15 @@ import Feedback from "../components/Feedback"; import car from "../../src/assets/icon/car.png"; import { useResponsive } from "../theme/useResponsive"; import TelegramIcon from "@mui/icons-material/Telegram"; -import VkIcon from "@mui/icons-material/Facebook"; +import { FaVk } from "react-icons/fa"; import WhatsAppIcon from "@mui/icons-material/WhatsApp"; import { scrollToAnchor } from "../utils/scrollUtils"; import AboutUsPage from "./AboutUsPage"; import StagesPage from "./StagesPage"; import CarsPage from "./CarsPage"; import DeliveryPage from "./DeliveryPage"; +import Divider from "../components/Divider"; +import CalculatorPage from "./CalculatorPage"; function MainPage() { const [feedbackOpen, setFeedbackOpen] = useState(false); @@ -181,7 +183,7 @@ function MainPage() { "&:hover": { color: "#945B4D", borderColor: "#945B4D" }, }} > - + + + + + + ); } diff --git a/src/pages/StagesPage.tsx b/src/pages/StagesPage.tsx index 988eac1..64145ed 100644 --- a/src/pages/StagesPage.tsx +++ b/src/pages/StagesPage.tsx @@ -85,7 +85,6 @@ function StagesPage() { padding: isMobile ? "10vw 5vw" : "5vw", minHeight: "100vh", scrollMarginTop: isMobile ? "15vw" : "10vw", - position: "relative", // Добавляем позиционирование для родителя }} >