add anchor / delete linter error / small revision

src/App.tsx

@@ -7,7 +7,14 @@ function App() {
     <>
       <Header />
       <Routes>
-        <Route path="/" element={<MainPage />} />
+        <Route 
+          path="/" 
+          element={
+            <>
+              <MainPage />
+            </>
+          } 
+        />
       </Routes>
     </>
   )

src/components/Feedback.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  Dialog,
   TextField,
   Button,
   IconButton,
@@ -10,7 +9,6 @@ import {
   RadioGroup,
   FormControlLabel,
   FormControl,
-  InputAdornment,
   InputLabel,
   OutlinedInput,
   Checkbox,
@@ -37,7 +35,7 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
           _: /[0-9]/,
         }}
         inputRef={ref}
-        onAccept={(value: any) =>
+        onAccept={(value: string) =>
           onChange({ target: { name: props.name, value } })
         }
         overwrite
@@ -52,9 +50,10 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
 interface FeedbackProps {
   open: boolean;
   onClose: () => void;
+  handleScrollToAnchor?: (anchor: string) => void;
 }
 
-const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
+const Feedback: React.FC<FeedbackProps> = ({ open, onClose, handleScrollToAnchor }) => {
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("+7");
   const [country, setCountry] = useState("Европа");
@@ -63,6 +62,14 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
   const [agreeToPolicy, setAgreeToPolicy] = useState(false);
   const { isMobile } = useResponsive();
 
+  React.useEffect(() => {
+    if (open) {
+      window.history.pushState(null, '', '#feedback');
+    } else if (!open && !isMobile && handleScrollToAnchor) {
+      handleScrollToAnchor('#main');
+    }
+  }, [open, handleScrollToAnchor]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!agreeToPolicy) {
@@ -71,9 +78,12 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
       );
       return;
     }
-    // логика отправки формы
     console.log({ name, phone, country, budget, description, agreeToPolicy });
+    
     onClose();
+    if (handleScrollToAnchor) {
+      handleScrollToAnchor('#main');
+    }
   };
 
   const textFieldSx = {
@@ -129,8 +139,13 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
         justifyContent: "center",
         zIndex: 1300, // высокий z-index как у диалога
         bgcolor: "rgba(0, 0, 0, 0.5)", // затемнение фона
+        color: "black",
       }}
-      onClick={onClose} // закрытие при клике на фон
+      onClick={() => {
+        onClose();
+        if (handleScrollToAnchor) handleScrollToAnchor('#main');
+      }}
+      id="feedback"
     >
       <Box
         sx={{
@@ -147,8 +162,11 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
         onClick={(e) => e.stopPropagation()} // предотвращаем закрытие при клике на контент
       >
         <Box>
-          <IconButton
+        <IconButton
-            onClick={onClose}
+            onClick={() => {
+              onClose();
+              if (handleScrollToAnchor) handleScrollToAnchor('#main');
+            }}
             sx={{
               position: "absolute",
               right: "1vw",
@@ -226,7 +244,7 @@ const Feedback: React.FC<FeedbackProps> = ({ open, onClose }) => {
                   id="phone-input"
                   value={phone}
                   onChange={handlePhoneChange}
-                  inputComponent={TextMaskCustom as any}
+                  inputComponent={TextMaskCustom as unknown as React.ComponentType<import('@mui/material').InputBaseComponentProps>}
                   label="Ваш телефон*"
                   notched
                   sx={{

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Box,
   Typography,
@@ -7,38 +7,62 @@ import {
   List,
   ListItem,
   Button,
+  Link,
 } 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";
-
+import { scrollToAnchor } from "../utils/scrollUtils";
 const Header = () => {
   const { isMobile } = useResponsive();
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [feedbackOpen, setFeedbackOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
 
   const menuItems = [
-    "О нас",
+    { title: "О нас", anchor: "#about" },
-    "Калькулятор",
+    { title: "Калькулятор", anchor: "#calculator" },
-    "Отзывы",
+    { title: "Отзывы", anchor: "#reviews" },
-    "Контакты",
+    { title: "Контакты", anchor: "#contacts" },
-    "В наличии",
+    { title: "В наличии", anchor: "#available" },
-    "Команда",
+    { title: "Команда", anchor: "#team" },
-    "Доставленные авто",
+    { title: "Доставленные авто", anchor: "#delivered" },
-    "Этапы работы",
+    { title: "Этапы работы", anchor: "#stages" },
+    { title: " ", anchor: "#main"},
   ];
 
-  const toggleDrawer = (open) => (event) => {
+  // Отслеживание скролла
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 10) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
     if (
       event.type === "keydown" &&
-      (event.key === "Tab" || event.key === "Shift")
+      ((event as React.KeyboardEvent).key === "Tab" || (event as React.KeyboardEvent).key === "Shift")
     ) {
       return;
     }
     setDrawerOpen(open);
   };
 
+    // Используем глобальную функцию из utils
+    const handleScrollToAnchor = (anchor: string) => {
+      scrollToAnchor(anchor, setDrawerOpen, isMobile);
+    };
+
   return (
     <>
       <Box
@@ -53,16 +77,29 @@ const Header = () => {
           userSelect: "none",
           color: "white",
           padding: isMobile ? "0 4vw" : 0,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+          transition: "all 0.3s ease",
+          boxShadow: scrolled ? "0 2px 10px rgba(0,0,0,0.2)" : "none",
         }}
       >
-        <img
+        <Box
+          component="img"
           src={logo}
           alt="logo"
-          style={{
+          onClick={() => handleScrollToAnchor("#main")}
-            width: isMobile ? "10vw" : "7vw",
+          sx={{
-            height: isMobile ? "10vw" : "7vw",
+            width: isMobile ? "17vw" : "9vw",
+            height: isMobile ? "17vw" : "9vw",
+            cursor: "pointer",
+            "&:hover": { scale: 1.1 },
+            transition: "all 0.4s ease",
           }}
-        />
+        >
+        </Box>
 
         {isMobile ? (
           <Box
@@ -93,45 +130,57 @@ const Header = () => {
         ) : (
           // Desktop menu
           menuItems.map((item, index) => (
-            <Typography
+            <Link
               key={index}
+              component="button"
+              onClick={() => handleScrollToAnchor(item.anchor)}
+              underline="none"
               sx={{
                 fontFamily: "Unbounded",
-                fontSize: "1vw",
+                fontSize: "1.2vw",
                 cursor: "pointer",
+                color: "white",
+                "&:hover": { color: "#C27664" },
+                transition: "all 0.3s ease",
               }}
             >
-              {item}
+              {item.title}
-            </Typography>
+            </Link>
           ))
         )}
       </Box>
 
+      {/* Пустой блок для компенсации фиксированного хедера */}
+      <Box sx={{ height: isMobile ? "15vw" : "10vw" }} />
+
       {/* Мобильное меню */}
       <Drawer
         anchor="right"
-        open={isMobile && drawerOpen}
+        open={drawerOpen}
         onClose={toggleDrawer(false)}
       >
         <Box
-          sx={{ width: "70vw", bgcolor: "#2D2D2D", height: "100%" }}
+          sx={{ width: "58vw", bgcolor: "#2D2D2D", height: "100%" }}
           role="presentation"
-          onClick={toggleDrawer(false)}
-          onKeyDown={toggleDrawer(false)}
         >
           <List>
             {menuItems.map((item, index) => (
-              <ListItem key={index}>
+              <ListItem 
+                key={index} 
+                onClick={() => handleScrollToAnchor(item.anchor)}
+                sx={{ cursor: "pointer" }}
+              >
                 <Typography
                   sx={{
                     fontFamily: "Unbounded",
                     fontSize: "4vw",
                     color: "white",
                     padding: "2vw 0",
-                    cursor: "pointer",
+                    "&:hover": { color: "#C27664" },
+                    transition: "color 0.3s ease",
                   }}
                 >
-                  {item}
+                  {item.title}
                 </Typography>
               </ListItem>
             ))}
@@ -139,8 +188,7 @@ const Header = () => {
         </Box>
       </Drawer>
 
-      {/* Форма обратной связи */}
+      <Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} handleScrollToAnchor={handleScrollToAnchor} />
-      <Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
     </>
   );
 };

src/pages/MainPage.tsx

@@ -1,11 +1,17 @@
 import React, { useState } from "react";
-import { Button, Container, Box, Typography } from "@mui/material";
+import { Button, Box, Typography, IconButton } from "@mui/material";
 import Feedback from "../components/Feedback";
 import car from "../../src/assets/icon/car.png";
-import { Gradient } from "@mui/icons-material";
+import { useResponsive } from "../theme/useResponsive";
+import TelegramIcon from '@mui/icons-material/Telegram';
+import VkIcon from '@mui/icons-material/Facebook';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
+import { scrollToAnchor } from "../utils/scrollUtils";
 
 function MainPage() {
   const [feedbackOpen, setFeedbackOpen] = useState(false);
+  const setDrawerOpen = () => {};
+  const { isMobile } = useResponsive();
 
   const handleOpenFeedback = () => {
     setFeedbackOpen(true);
@@ -15,8 +21,12 @@ function MainPage() {
     setFeedbackOpen(false);
   };
 
+  const handleScrollToAnchor = (anchor: string) => {
+    scrollToAnchor(anchor, setDrawerOpen, isMobile);
+  };
+
   return (
-    <Box sx={{ bgcolor: "#2D2D2D", color: "white", userSelect: "none" }}>
+    <Box sx={{ bgcolor: "#2D2D2D", color: "white", userSelect: "none" }} id="main">
       <Box
         id="title"
         sx={{
@@ -67,34 +77,121 @@ function MainPage() {
           src={car}
           alt="logo"
           style={{
-            width: "70vw",
+            width: "60vw",
-            height: "36vw",
+            height: "32vw",
             position: "relative",
-            top: "-20vw",
+            top: "-19vw",
-            left: "10vw",
+            left: "12vw",
             zIndex: 2,
+            pointerEvents: "none",
           }}
         />
-      </Box>
         
-      {/* <Box id="button" sx={{ textAlign: "center" }}>
+        <Box
-        <Button
-          variant="contained"
-          onClick={handleOpenFeedback}
           sx={{
-            bgcolor: "#c22d1a",
+            position: "absolute",
-            color: "white",
+            right: "4.5vw",
-            py: 1.5,
+            top: isMobile ? "18.3vw" : "13.3vw",
-            px: 3,
+            display: "flex",
-            "&:hover": { bgcolor: "#a42517" },
+            flexDirection: "column",
-            mb: "2vw",
+            gap: "1vw",
+            zIndex: 1,
           }}
         >
-          Оставить заявку
+          <Button
-        </Button>
+            onClick={() => handleScrollToAnchor("#calculator")}
+            variant="contained"
+            sx={{
+              bgcolor: "#C27664",
+              color: "white",
+              fontSize: "1.5vw",
+              padding: "2.2vw 2vw",
+              textTransform: "none",
+              borderRadius: "3vw",
+              fontWeight: "bold",
+              fontFamily: "Unbounded",
+              "&:hover": { bgcolor: "#945B4D" },
+              transition: "all 0.3s ease",
+            }}
+          >
+            Рассчитать стоимость
+          </Button>
           
-        <Feedback open={feedbackOpen} onClose={handleCloseFeedback} />
+          <Button
-      </Box> */}
+            variant="outlined"
+            onClick={handleOpenFeedback}
+            sx={{
+              color: "#C27664",
+              fontSize: "1.5vw",
+              padding: "2.2vw 2vw",
+              textTransform: "none",
+              borderRadius: "3vw",
+              fontWeight: "bold",
+              fontFamily: "Unbounded",
+              borderColor: "#C27664",
+              "&:hover": { borderColor: "#945B4D", bgcolor: "transparent", color: "#945B4D" },
+              transition: "all 0.3s ease",
+            }}
+          >
+            Подобрать авто
+          </Button>
+        </Box>
+        <Box id="contacts" sx={{ 
+            // position: "absolute",
+            // top: isMobile ? "18.3vw" : "13.3vw",
+            // right: "4.5vw",
+            // width: "100%",
+            // display: "flex",
+            // flexDirection: "column",
+            // gap: isMobile ? "1vw" : "2vw",
+
+            position: "absolute",
+            right: "1vw",
+            top: isMobile ? "20.3vw" : "15.3vw",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1vw",
+            zIndex: 1,
+          }}>
+            <IconButton 
+              sx={{ 
+                color: "#C27664", 
+                borderRadius: "50%",
+                width: "3vw",
+                height: "3vw",
+                "&:hover": { color: "#945B4D", borderColor: "#945B4D" } 
+              }}
+            >
+              <VkIcon sx={{ fontSize: "3vw" }} />
+            </IconButton>
+            
+            <IconButton 
+              sx={{ 
+                color: "#C27664", 
+                borderRadius: "50%",
+                width: "3vw",
+                height: "3vw",
+                "&:hover": { color: "#945B4D", borderColor: "#945B4D" } 
+              }}
+            >
+              <TelegramIcon sx={{ fontSize: "3vw" }} />
+            </IconButton>
+            
+            <IconButton 
+              sx={{ 
+                color: "#C27664", 
+                borderRadius: "50%",
+                width: "3vw",
+                height: "3vw",
+                "&:hover": { color: "#945B4D", borderColor: "#945B4D" } 
+              }}
+            >
+              <WhatsAppIcon sx={{ fontSize: "3vw" }} />
+            </IconButton>
+          </Box>
+      </Box>
+
+      <Feedback open={feedbackOpen} onClose={handleCloseFeedback} handleScrollToAnchor={handleScrollToAnchor} />
     </Box>
   );
 }

src/utils/scrollUtils.ts

@@ -0,0 +1,21 @@
+/**
+ * Плавная прокрутка к указанному якорю
+ * @param anchor - идентификатор якоря, например "#about"
+ * @param setDrawerOpen - опциональная функция для закрытия мобильного меню
+ * @param isMobile - флаг мобильного устройства
+ */
+export const scrollToAnchor = (
+  anchor: string,
+  setDrawerOpen?: (isOpen: boolean) => void,
+  isMobile?: boolean
+): void => {
+  const element = document.querySelector(anchor);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+    // Обновляем URL с хешем без перезагрузки страницы
+    window.history.pushState(null, '', anchor);
+  }
+  if (isMobile && setDrawerOpen) {
+    setDrawerOpen(false);
+  }
+}; 

tsconfig.app.json

@@ -19,7 +19,6 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },