add anchor / delete linter error / small revision

2025-07-08 23:46:22 +05:00
parent a9c056f8bf
commit 824a79a117
6 changed files with 254 additions and 64 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -7,7 +7,14 @@ function App() {
    <>
      <Header />
      <Routes>
-        <Route path="/" element={<MainPage />} />
+        <Route 
+          path="/" 
+          element={
+            <>
+              <MainPage />
+            </>
+          } 
+        />
      </Routes>
    </>
  )
--- a/src/components/Feedback.tsx
+++ b/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
-            onClick={onClose}
+        <IconButton
+            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={{
--- a/src/components/Header.tsx
+++ b/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={{
-            width: isMobile ? "10vw" : "7vw",
-            height: isMobile ? "10vw" : "7vw",
+          onClick={() => handleScrollToAnchor("#main")}
+          sx={{
+            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}
-            </Typography>
+              {item.title}
+            </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)} />
+      <Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} handleScrollToAnchor={handleScrollToAnchor} />
    </>
  );
 };
--- a/src/pages/MainPage.tsx
+++ b/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",
-            height: "36vw",
+            width: "60vw",
+            height: "32vw",
            position: "relative",
-            top: "-20vw",
-            left: "10vw",
+            top: "-19vw",
+            left: "12vw",
            zIndex: 2,
+            pointerEvents: "none",
          }}
        />
-      </Box>
        
-      {/* <Box id="button" sx={{ textAlign: "center" }}>
-        <Button
-          variant="contained"
-          onClick={handleOpenFeedback}
+        <Box
          sx={{
-            bgcolor: "#c22d1a",
-            color: "white",
-            py: 1.5,
-            px: 3,
-            "&:hover": { bgcolor: "#a42517" },
-            mb: "2vw",
+            position: "absolute",
+            right: "4.5vw",
+            top: isMobile ? "18.3vw" : "13.3vw",
+            display: "flex",
+            flexDirection: "column",
+            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} />
-      </Box> */}
+          <Button
+            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>
  );
 }
--- a/src/utils/scrollUtils.ts
+++ b/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);
+  }
+}; 
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -19,7 +19,6 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },