burger menu component, fix styles autstaffing and

main pages, autstaffing add swiper
2024-05-28 18:39:26 +03:00
parent 2a89ab3d5f
commit 224fc2c935
12 changed files with 1207 additions and 377 deletions
--- a/src/pages/Stack/Stack.jsx
+++ b/src/pages/Stack/Stack.jsx
@ -1,11 +1,15 @@
 import React, { useRef, useState } from "react";
 import SVG from "react-inlinesvg";
+import "swiper/css";
+import { Navigation } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/scss/navigation";

 import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";

-import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
-import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
+// import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
+// import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
 import fileUploadIcon from "assets/icons/fileUploadIcon.svg";
 import Ellipse from "assets/images/EllipseIntro.svg";
 import backgroundOpp from "assets/images/backgroundOpportunity.png";
@ -25,6 +29,40 @@ import portfolio from "assets/images/stackSteptsPortfolio.png";
 import "./stack.scss";

 export const Stack = () => {
+  const reviews = [
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 11
+    },
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 12
+    },
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 13
+    },
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 14
+    }
+  ];
  const subjects = [
    {
      name: "Backend",
@ -210,6 +248,12 @@ export const Stack = () => {
    }
  };

+  const targetRef = useRef(null);
+
+  const handleScroll = () => {
+    targetRef.current.scrollIntoView({ behavior: "smooth" });
+  };
+
  return (
    <section className="stack">
      <AuthHeader />
@ -235,7 +279,9 @@ export const Stack = () => {
              команды, в зависимости от потребностей и объема работы.
            </p>
            <div className="intro__links">
-              <button className="stack__button">оставить заявку</button>
+              <button className="stack__button" onClick={handleScroll}>
+                оставить заявку
+              </button>
              <span className="intro__link">
                Окунитесь в<br /> экосистему ITGUIL
              </span>
@ -306,6 +352,7 @@ export const Stack = () => {
      <section className="stack__projects projects">
        <div className="stack__container projects__container">
          <img className="projects__code" src={code} alt="code" />
+          <img src={noClue} alt="clue" className="projects__clue" />
          <div className="projects__title">
            <h3>ITGUILD</h3>
          </div>
@ -337,7 +384,7 @@ export const Stack = () => {
                поиском, оформлением или увольнением сотрудников —{" "}
                <span>мы берем на себя все хлопоты.</span>
              </p>
-              <button>оставить заявку</button>
+              <button onClick={handleScroll}>оставить заявку</button>
            </div>
          </div>
        </div>
@ -417,34 +464,37 @@ export const Stack = () => {
          <div className="reviews__content">
            <h4>Что о нас говорят</h4>
            <div className="reviews__content-container">
-              <div className="review">
-                <div className="review__client">
-                  <img src={reviewsImgMok} alt="reviewsImgMok" />
-                  <span>Александр Гузеев</span>
-                  <p>Руководитель проекта ООО “ЭЛАР”</p>
-                </div>
+              <Swiper
+                modules={[Navigation]}
+                spaceBetween={50}
+                slidesPerView={1}
+                navigation
+              >
+                {reviews.map((review) => (
+                  <SwiperSlide key={review.id}>
+                    <div className="review">
+                      <div className="review__client">
+                        <img src={review.avatar} alt="reviewsImgMok" />
+                        <span>{review.name}</span>
+                        <p>{review.position}</p>
+                      </div>

-                <div className="review__comment">
-                  <p>
-                    Команда ITGUILD берется за решение широкого круга задач, не
-                    боясь при этом ни сжатых сроков, ни сложной специфики
-                    проектов, и успешно доводит их ло решения. <br />
-                    <br />
-                    Разаработчики Кирилла смогли не только усилить существующую
-                    команду разработки, став ее полноценной частью, но и
-                    привести в проект новые идеи, свои знания и опыт.
-                  </p>
-                </div>
-              </div>
+                      <div className="review__comment">
+                        <p>{review.content}</p>
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>

-              <div className="reviews__content-buttons">
+              {/* <div className="reviews__content-buttons">
                <button>
                  <img src={arrowReviewsLeft} alt="" />
                </button>
                <button>
                  <img src={arrowReviewsRight} alt="" />
                </button>
-              </div>
+              </div> */}
            </div>
          </div>
          <img
@ -469,7 +519,9 @@ export const Stack = () => {
          <div className="contact__block">
            <div className="contact-info">
              <img src={noClue} alt="clue" />
-              <h3 className="info__title">ПОИСК</h3>
+              <h3 className="info__title" ref={targetRef}>
+                ПОИСК
+              </h3>
              <div className="info-content">
                <div className="info-content__title">
                  <p>
@ -591,7 +643,7 @@ export const Stack = () => {
                <div className="form-submit">
                  <div className="form-submit__agreement">
                    <input
-                      type="radio"
+                      type="checkbox"
                      name="agreement"
                      checked={formData.agreement}
                      onChange={handleChange}
--- a/src/pages/Stack/stack.scss
+++ b/src/pages/Stack/stack.scss
@ -637,6 +637,18 @@
        top: 24px;
      }

+      &__clue {
+        display: none;
+        @media (max-width: 431px) {
+          display: block;
+          position: absolute;
+          z-index: 2;
+          right: auto;
+          width: auto;
+          top: -120px;
+        }
+      }
+
      &__title {
        @media (max-width: 431px) {
          display: flex;
@ -1222,6 +1234,7 @@
      }

      &__content {
+        width: 100%;
        margin: 0 0 45px 0;

        h4 {
@ -1238,10 +1251,37 @@
        }

        &-container {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          column-gap: 20px;
+          width: 650px;
+
+          @media (max-width: 431px) {
+            width: 100%;
+          }
+
+          .swiper {
+            padding-left: 65px;
+
+            @media (max-width: 431px) {
+              padding: 40px 0 0 0;
+            }
+
+            &-slide {
+              @media (max-width: 431px) {
+                display: flex;
+                justify-content: center;
+              }
+            }
+
+            &-button-prev {
+              @media (max-width: 431px) {
+                display: none;
+              }
+            }
+            &-button-next {
+              @media (max-width: 431px) {
+                display: none;
+              }
+            }
+          }

          .review {
            display: grid;
@ -1760,10 +1800,36 @@
            }

            &__agreement {
-              display: flex;
+              display: grid;
+              align-items: center;
+              grid-template-columns: 7% 93%;
+              justify-items: center;

              input {
-                accent-color: #607536;
+                width: 7px;
+                height: 7px;
+                border-radius: 50%;
+                vertical-align: middle;
+                appearance: none;
+                -webkit-appearance: none;
+                outline: none;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:checked {
+                  background-color: #435225;
+                }
+
+                &::before {
+                  content: "";
+                  position: absolute;
+                  border-radius: 50%;
+                  width: 14px;
+                  height: 14px;
+                  border: 0.4px solid #607536;
+                }
              }

              p {