minor fix / add animate on result-calculate

src/pages/CalculatorPage.tsx

@@ -12,6 +12,7 @@ import {
   InputAdornment,
   Collapse,
   Paper,
+  Slide,
 } from "@mui/material";
 import { useResponsive } from "../theme/useResponsive";
 import russia from "../assets/emoji/russia.png";
@@ -58,6 +59,8 @@ function CalculatorPage() {
     totalWithCar: string;
   } | null>(null);
 
+  const [slideIn, setSlideIn] = useState(false);
+
   // Получение курсов валют при монтировании компонента
   useEffect(() => {
     const loadCurrencyRates = async () => {
@@ -268,6 +271,9 @@ function CalculatorPage() {
 
     setCalculationResults(results);
 
+    // После расчетов установить флаг анимации
+    setSlideIn(true);
+
     // Выводим результаты также в консоль для отладки
     console.log({
       original: {
@@ -331,11 +337,13 @@ function CalculatorPage() {
         sx={{
           display: "flex",
           flexDirection: isMobile ? "column" : "row",
-          justifyContent: calculationResults ? "center" : "space-between",
+          justifyContent: calculationResults ? "flex-start" : "space-between",
           maxWidth: "90vw",
           margin: "0 auto",
-          gap: calculationResults ? "3vw" : "0",
+          gap: "1vw",
-          alignItems: isMobile ? "center" : "normal",
+          alignItems: isMobile ? "center" : "flex-start",
+          position: "relative",
+          width: "100%", // Зафиксировать ширину
         }}
       >
         {isMobile && (
@@ -433,7 +441,10 @@ function CalculatorPage() {
             minWidth: "35vw",
             borderRadius: isMobile ? "5vw" : "2vw",
             padding: "3vw",
-            border: "0.3vw solid #C27664",
+            border: isMobile ? "0.5vw solid #C27664" : "0.3vw solid #C27664",
+            boxShadow: isMobile
+              ? "0 0 1.5vw 1vw rgba(0, 0, 0, 0.2)"
+              : "0 0 1vw 0.5vw rgba(0, 0, 0, 0.2)",
           }}
         >
           {/* Первая линия */}
@@ -453,55 +464,8 @@ function CalculatorPage() {
                 color: "#C27664",
               }}
             >
-              Рассчитать для
+              Рассчитать стоимость
             </Typography>
-            <Box
-              sx={{
-                display: "flex",
-                gap: "1vw",
-                mt: "1vw",
-                // position: "absolute",
-                // top: "0vw",
-                // right: isMobile ? "10vw" : "5vw",
-              }}
-            >
-              <Box
-                onClick={() => setCountry("russia")}
-                sx={{ cursor: "pointer", position: "relative" }}
-              >
-                <Radio
-                  checked={country === "russia"}
-                  sx={{ position: "absolute", opacity: 0 }}
-                />
-                <img
-                  src={russia}
-                  alt="Россия"
-                  style={{
-                    width: isMobile ? "10vw" : "3.5vw",
-                    height: isMobile ? "9vw" : "3vw",
-                    opacity: country === "russia" ? 1 : 0.5,
-                  }}
-                />
-              </Box>
-              <Box
-                onClick={() => setCountry("belarus")}
-                sx={{ cursor: "pointer", position: "relative" }}
-              >
-                <Radio
-                  checked={country === "belarus"}
-                  sx={{ position: "absolute", opacity: 0 }}
-                />
-                <img
-                  src={belarus}
-                  alt="Беларусь"
-                  style={{
-                    width: isMobile ? "10vw" : "3.5vw",
-                    height: isMobile ? "9vw" : "3vw",
-                    opacity: country === "belarus" ? 1 : 0.5,
-                  }}
-                />
-              </Box>
-            </Box>
           </Box>
 
           <Box
@@ -509,7 +473,8 @@ function CalculatorPage() {
               mb: isMobile ? "1.5vw" : "0.5vw",
               mt: isMobile ? "1.5vw" : "0.5vw",
               bgcolor: "#CDCDCD",
-              height: "0.1vw",
+              height: isMobile ? "0.3vw" : "0.1vw",
+              borderRadius: "1vw",
             }}
           />
 
@@ -640,7 +605,7 @@ function CalculatorPage() {
                   {isLoading
                     ? "..."
                     : `(курс: ${
-                        currencyRates?.Valute?.USD?.Value?.toFixed(2) || "93.00"
+                        currencyRates?.Valute?.USD?.Value?.toFixed(2) || "error"
                       })`}
                 </MenuItem>
                 <MenuItem value="EUR Евро">
@@ -649,7 +614,7 @@ function CalculatorPage() {
                     ? "..."
                     : `(курс: ${
                         currencyRates?.Valute?.EUR?.Value?.toFixed(2) ||
-                        "101.00"
+                        "error"
                       })`}
                 </MenuItem>
                 <MenuItem value="CNY Юань">
@@ -657,7 +622,7 @@ function CalculatorPage() {
                   {isLoading
                     ? "..."
                     : `(курс: ${
-                        currencyRates?.Valute?.CNY?.Value?.toFixed(2) || "12.80"
+                        currencyRates?.Valute?.CNY?.Value?.toFixed(2) || "error"
                       })`}
                 </MenuItem>
                 <MenuItem value="RUB Рубль">RUB Рубль</MenuItem>
@@ -852,7 +817,41 @@ function CalculatorPage() {
                   },
                 }}
               />
-              <Box
+              <Typography
+                sx={{
+                  fontFamily: "Unbounded",
+                  fontSize: isMobile ? "3vw" : "2vw",
+                  color: "#C27664",
+                  textWrap: "nowrap",
+                }}
+              >
+                л.с.
+              </Typography>
+              <Typography
+                sx={{
+                  fontFamily: "Unbounded",
+                  fontSize: isMobile ? "3vw" : "2vw",
+                  color: "#C27664",
+                  textWrap: "nowrap",
+                }}
+              >
+                =
+              </Typography>
+              <Typography
+                sx={{
+                  fontFamily: "Unbounded",
+                  fontSize: isMobile ? "3vw" : "2vw",
+                  color: "#C27664",
+                  textWrap: "nowrap",
+                }}
+              >
+                {enginePower
+                  ? `${(parseFloat(enginePower) * 1.35962).toFixed(
+                      1
+                    )} кВт.`
+                  : "0 кВт"}
+              </Typography>
+              {/* <Box
                 sx={{
                   display: "flex",
                   alignItems: "center",
@@ -906,7 +905,7 @@ function CalculatorPage() {
                     },
                   }}
                 />
-              </Box>
+              </Box> */}
             </Box>
           </Collapse>
 
@@ -1003,15 +1002,14 @@ function CalculatorPage() {
                   textWrap: "nowrap",
                 }}
               >
-                {isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"}
+                {/* {isMobile ? "Мощность ДВС vs ЭД" : "ДВС vs ЭД"} */}
               </Typography>
               <Box
                 sx={{
                   display: "flex",
                   flexWrap: "nowrap",
                   textWrap: "nowrap",
-                  ml: isMobile ? "0vw" : "2vw",
+                  mt: isMobile ? "-2vw" : "-1vw",
-                  mt: isMobile ? "-2vw" : "0vw",
                 }}
               >
                 <FormControlLabel
@@ -1024,7 +1022,7 @@ function CalculatorPage() {
                         color: "#C27664",
                         "&.Mui-checked": { color: "#C27664" },
                         "& .MuiSvgIcon-root": {
-                          fontSize: isMobile ? "5vw" : "1.8vw",
+                          fontSize: isMobile ? "5vw" : "2vw",
                         },
                       }}
                     />
@@ -1032,7 +1030,7 @@ function CalculatorPage() {
                   label="ДВС > ЭД"
                   sx={{
                     "& .MuiFormControlLabel-label": {
-                      fontSize: isMobile ? "3vw" : "1.3vw",
+                      fontSize: isMobile ? "3vw" : "2vw",
                       fontFamily: "Unbounded",
                       color: "#C27664",
                     },
@@ -1048,7 +1046,7 @@ function CalculatorPage() {
                         color: "#C27664",
                         "&.Mui-checked": { color: "#C27664" },
                         "& .MuiSvgIcon-root": {
-                          fontSize: isMobile ? "5vw" : "1.8vw",
+                          fontSize: isMobile ? "5vw" : "2vw",
                         },
                       }}
                     />
@@ -1056,7 +1054,7 @@ function CalculatorPage() {
                   label="ДВС < ЭД"
                   sx={{
                     "& .MuiFormControlLabel-label": {
-                      fontSize: isMobile ? "3vw" : "1.3vw",
+                      fontSize: isMobile ? "3vw" : "2vw",
                       fontFamily: "Unbounded",
                       color: "#C27664",
                     },
@@ -1177,15 +1175,31 @@ function CalculatorPage() {
         </Box>
         {/* Блок с результатами расчета */}
         {calculationResults && (
+          <Box
+          sx={{
+            position: isMobile ? "relative" : "absolute", // Абсолютное позиционирование для десктопа
+            left: isMobile ? "auto" : "calc(40% + 10vw)", 
+            top: isMobile ? "auto" : 0,
+            width: isMobile ? "auto" : "40%",
+            zIndex: 0,
+          }}
+        >
+          <Slide
+            direction="right"
+            in={slideIn && !!calculationResults}
+            mountOnEnter
+            unmountOnExit
+            timeout={800}
+          >
             <Paper
               id="calculator-results"
               elevation={3}
               sx={{
-              ml: isMobile ? "0vw" : "2vw",
+                p: "3vw",
-              p: "2vw",
                 borderRadius: isMobile ? "5vw" : "2vw",
-              border: "0.3vw solid #C27664",
+                border: isMobile ? "0.5vw solid #C27664" : "0.3vw solid #C27664",
-              // width: isMobile ? "82%" : "85%",
+                mt: isMobile ? "5vw" : "0",
+                //transform: "translateX(0)",
               }}
             >
               <Typography
@@ -1213,7 +1227,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                       }}
                     >
                       Стоимость авто:
@@ -1221,7 +1235,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                         fontWeight: "bold",
                       }}
                     >
@@ -1243,7 +1257,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                       }}
                     >
                       Таможенная пошлина:
@@ -1251,7 +1265,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                         fontWeight: "bold",
                       }}
                     >
@@ -1273,7 +1287,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                       }}
                     >
                       Акциз:
@@ -1281,7 +1295,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                         fontWeight: "bold",
                       }}
                     >
@@ -1303,7 +1317,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                       }}
                     >
                       НДС:
@@ -1330,7 +1344,7 @@ function CalculatorPage() {
                     <Typography
                       sx={{
                         fontFamily: "Unbounded",
-                      fontSize: isMobile ? "3.2vw" : "1.2vw",
+                        fontSize: isMobile ? "3vw" : "1.2vw",
                       }}
                     >
                       Утилизационный сбор:
@@ -1358,7 +1372,7 @@ function CalculatorPage() {
                   <Typography
                     sx={{
                       fontFamily: "Unbounded",
-                    fontSize: isMobile ? "3.2vw" : "1.5vw",
+                      fontSize: isMobile ? "3vw" : "1.5vw",
                       color: "#C27664",
                     }}
                   >
@@ -1369,7 +1383,7 @@ function CalculatorPage() {
                   <Typography
                     sx={{
                       fontFamily: "Unbounded",
-                    fontSize: isMobile ? "3.2vw" : "1.5vw",
+                      fontSize: isMobile ? "3vw" : "1.5vw",
                       color: "#C27664",
                       fontWeight: "bold",
                     }}
@@ -1383,7 +1397,7 @@ function CalculatorPage() {
                   <Typography
                     sx={{
                       fontFamily: "Unbounded",
-                    fontSize: isMobile ? "3.2vw" : "1.5vw",
+                      fontSize: isMobile ? "3vw" : "1.5vw",
                       color: "#C27664",
                     }}
                   >
@@ -1394,7 +1408,7 @@ function CalculatorPage() {
                   <Typography
                     sx={{
                       fontFamily: "Unbounded",
-                    fontSize: isMobile ? "3.2vw" : "1.5vw",
+                      fontSize: isMobile ? "3vw" : "1.5vw",
                       color: "#C27664",
                       fontWeight: "bold",
                     }}
@@ -1407,8 +1421,9 @@ function CalculatorPage() {
                 </Box>
               </Box>
             </Paper>
+          </Slide>
+        </Box>
         )}
-
         {/* Правая часть - описание */}
         {!calculationResults && !isMobile && (
           <Box

src/pages/CarsPage.tsx

@@ -215,7 +215,7 @@ function CarsPage() {
       const container = scrollContainerRef.current;
       const scrollPosition = container.scrollLeft;
       const cardWidth = isMobile ? 80 : 25;
-      const gap = 2;
+      const gap = isMobile ? 2 : 4;
       const vwToPx = (vw: number) => (window.innerWidth * vw) / 100;
 
       // Рассчитать индекс предыдущей карточки
@@ -223,19 +223,20 @@ function CarsPage() {
       const prevIndex = Math.max(0, currentIndex - 1);
 
       // Прокрутить к предыдущей карточке
-      if (container.children[prevIndex]) {
+      if (isMobile &&container.children[prevIndex]) {
         container.children[prevIndex].scrollIntoView({
           behavior: "smooth",
           block: "nearest",
           inline: "start",
         });
-
-        // Добавляем дополнительный сдвиг на 0.5vw для ПК версии
-        if (!isMobile) {
-          setTimeout(() => {
-            container.scrollLeft -= vwToPx(0.5);
-          }, 50);
       }
+
+      if (!isMobile && container.children[prevIndex]) {
+        const scrollOffset = prevIndex === 0 ? vwToPx(2) : 0;
+        container.scrollTo({
+          left: prevIndex * vwToPx(cardWidth + gap) - scrollOffset,
+          behavior: "smooth"
+        });
       }
     }
   };
@@ -247,7 +248,7 @@ function CarsPage() {
       const container = scrollContainerRef.current;
       const scrollPosition = container.scrollLeft;
       const cardWidth = isMobile ? 80 : 25;
-      const gap = 2;
+      const gap = isMobile ? 2 : 4;
       const vwToPx = (vw: number) => (window.innerWidth * vw) / 100;
 
       // Рассчитать индекс следующей карточки
@@ -255,18 +256,20 @@ function CarsPage() {
       const nextIndex = Math.min(cars.length - 1, currentIndex + 1);
 
       // Прокрутить к следующей карточке
-      if (container.children[nextIndex]) {
+      if (isMobile && container.children[nextIndex]) {
         container.children[nextIndex].scrollIntoView({
           behavior: "smooth",
           block: "nearest",
           inline: "start",
         });
-
-        if (!isMobile && nextIndex !== cars.length - 1) {
-          setTimeout(() => {
-            container.scrollLeft -= vwToPx(0.5);
-          }, 50);
       }
+
+      if (!isMobile && container.children[nextIndex]) {
+        const scrollOffset = nextIndex === cars.length - 1 ? vwToPx(2) : 0;
+        container.scrollTo({
+          left: nextIndex * vwToPx(cardWidth + gap) + scrollOffset,
+          behavior: "smooth"
+        });
       }
     }
   };
@@ -312,14 +315,14 @@ function CarsPage() {
               ref={scrollContainerRef}
               sx={{
                 display: "flex",
-                gap: "2vw",
+                gap: isMobile ? "2vw" : "4vw",
                 overflowX: "auto",
                 scrollbarWidth: "none",
                 "&::-webkit-scrollbar": {
                   display: "none",
                 },
                 pb: "1vw",
-                maxWidth: isMobile ? "81vw" : "53vw",
+                maxWidth: isMobile ? "81vw" : "58vw",
                 scrollBehavior: "smooth",
               }}
             >
@@ -329,9 +332,11 @@ function CarsPage() {
                   sx={{
                     width: isMobile ? "80vw" : "25vw",
                     minWidth: isMobile ? "80vw" : "25vw",
-                    marginLeft: index === 0 ? "0.5vw" : 0,
+                    marginLeft: index === 0 ? isMobile ? "0vw" : "2vw" : "0vw",
+                    // marginLeft: isMobile ? "1vw" : "2vw",
+                    marginRight: index === cars.length - 1 ? isMobile ? "0vw" : "2vw" : "0vw",
                     bgcolor: "white",
-                    border: isMobile ? "1px solid #C27664" : "none",
+                    border: isMobile ? "0.5vw solid #C27664" : "none",
                     borderRadius: "2vw",
                     overflow: "hidden",
                     boxShadow: isMobile
@@ -498,7 +503,7 @@ function CarsPage() {
             >
               <Box
                 component="a"
-                href="https://t.me/your_telegram_channel"
+                href="https://t.me/autobrocn"
                 target="_blank"
                 sx={{
                   bgcolor: "#C27664",

src/pages/MainPage.tsx

@@ -181,9 +181,10 @@ function MainPage() {
                 width: "3vw",
                 height: "3vw",
                 "&:hover": { color: "#945B4D", borderColor: "#945B4D" },
+                padding: "0.2vw",
               }}
             >
-              <FaVk size={"3vw"} />
+              <FaVk size={"5vw"} />
             </IconButton>
 
             <IconButton

src/utils/scrollUtils.ts

@@ -12,7 +12,7 @@ export const scrollToAnchor = (
   const element = document.querySelector(anchor);
   if (element) {
     // Получаем высоту хедера (в соответствии с размерами в Header.tsx)
-    const headerHeight = isMobile ? window.innerWidth * 0.15 : window.innerWidth * 0.05; // 15vw или 10vw
+    const headerHeight = isMobile ? window.innerWidth * 0.15 : window.innerWidth * 0.1; // 15vw или 10vw
 
     // Получаем позицию элемента относительно верха страницы
     const elementPosition = element.getBoundingClientRect().top + window.scrollY;