landingClub + mobile adaptive

src/assets/images/landingClub/menu.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="18.383462132921178 25.688 428.8840803709428 351.12" style="max-height: 500px" width="428.8840803709428" height="351.12">
+<g filter="url(#filter0_bd_886_68)">
+<path shape-rendering="crispEdges" fill-opacity="0.34" fill="url(#paint0_linear_886_68)" d="M439 13H25C20.5817 13 17 16.5817 17 21V313C17 317.418 20.5817 321 25 321H210.6C211.649 321 212.5 321.851 212.5 322.9C212.5 327.097 215.903 330.5 220.1 330.5H242.9C247.097 330.5 250.5 327.097 250.5 322.9C250.5 321.851 251.351 321 252.4 321H439C443.418 321 447 317.418 447 313V21C447 16.5817 443.418 13 439 13Z"/>
+<path shape-rendering="crispEdges" stroke-width="0.8" stroke="white" d="M439 12.6H25C20.3608 12.6 16.6 16.3608 16.6 21V313C16.6 317.639 20.3608 321.4 25 321.4H210.6C211.428 321.4 212.1 322.072 212.1 322.9C212.1 327.318 215.682 330.9 220.1 330.9H242.9C247.318 330.9 250.9 327.318 250.9 322.9C250.9 322.072 251.572 321.4 252.4 321.4H439C443.639 321.4 447.4 317.639 447.4 313V21C447.4 16.3608 443.639 12.6 439 12.6Z"/>
+</g>
+<defs>
+<filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="378.902" width="491.4" y="0.299219" x="0.299952" id="filter0_bd_886_68">
+<feFlood result="BackgroundImageFix" flood-opacity="0"/>
+<feGaussianBlur stdDeviation="4.35" in="BackgroundImageFix"/>
+<feComposite result="effect1_backgroundBlur_886_68" operator="in" in2="SourceAlpha"/>
+<feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"/>
+<feOffset dy="18" dx="14"/>
+<feGaussianBlur stdDeviation="14.95"/>
+<feComposite operator="out" in2="hardAlpha"/>
+<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" type="matrix"/>
+<feBlend result="effect2_dropShadow_886_68" in2="effect1_backgroundBlur_886_68" mode="normal"/>
+<feBlend result="shape" in2="effect2_dropShadow_886_68" in="SourceGraphic" mode="normal"/>
+</filter>
+<linearGradient gradientUnits="userSpaceOnUse" y2="370" x2="447" y1="174" x1="-38" id="paint0_linear_886_68">
+<stop stop-color="white"/>
+<stop stop-color="#EDEDED" offset="1"/>
+</linearGradient>
+</defs>
+</svg>

src/pages/LandingClub/LandingClub.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useRef, useState } from "react";
+import SVG from "react-inlinesvg";
 import { Link } from "react-router-dom";
 import { Navigation } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -16,11 +17,7 @@ import bgYellow from "assets/images/landingClub/bgYellow.webp";
 import blackWhiteCube from "assets/images/landingClub/blackWhiteCube.webp";
 import blackYellowCube from "assets/images/landingClub/blackYellowCube.webp";
 import elementBg2 from "assets/images/landingClub/elementBg2.webp";
-import elementBg3 from "assets/images/landingClub/elementBg3.webp";
-import event2 from "assets/images/landingClub/event2.png";
 import event from "assets/images/landingClub/event.png";
-import footerBg from "assets/images/landingClub/footerBg.webp";
-import footerCube from "assets/images/landingClub/footerCube.webp";
 import headerLogo2 from "assets/images/landingClub/headerLogoClub2.svg";
 import headerLogo1 from "assets/images/landingClub/headerLogoClub.svg";
 import headerText from "assets/images/landingClub/headerText.svg";
@@ -30,6 +27,7 @@ import iconCalendar from "assets/images/landingClub/iconCalendar.svg";
 import iconPosition from "assets/images/landingClub/iconPosition.svg";
 import iconTg from "assets/images/landingClub/iconTg.svg";
 import iconVk from "assets/images/landingClub/iconVk.svg";
+import menu from "assets/images/landingClub/menu.svg";
 import newsImg from "assets/images/landingClub/news.png";
 import orangeBlackCube from "assets/images/landingClub/orangeBlackCube.webp";
 import questionMark from "assets/images/landingClub/questionMark.webp";
@@ -39,9 +37,14 @@ import slider from "assets/images/landingClub/slider.png";
 import "./landingClub.scss";
 
 export const LandingClub = () => {
+  const [activeMenu, setActiveMenu] = useState(false);
   const sliderRef1 = useRef(null);
   const sliderRef2 = useRef(null);
 
+  const handleMenu = () => {
+    setActiveMenu((prevState) => !prevState);
+  };
+
   const handlePrev = useCallback((ref) => {
     if (!ref.current) return;
     ref.current.swiper.slidePrev();
@@ -64,11 +67,11 @@ export const LandingClub = () => {
   ];
 
   const missionSubjects = [
-    "необходимые <br />мероприятия",
-    "нетворкинг и новые <br />знакомства",
-    "информационную <br />поддержку",
-    "консультации опытных <br />предпринимателей и наставников",
-    "возможность получить финансирование <br />в собственные бизнес-проекты"
+    "необходимые <br /><span>мероприятия</span>",
+    "<span>нетворкинг</span> и новые <br />знакомства",
+    "информационную <br /><span>поддержку</span>",
+    "<span>консультации</span> опытных <br />предпринимателей и наставников",
+    "<span>возможность</span> получить финансирование <br />в собственные бизнес-проекты"
   ];
 
   const members = [
@@ -139,6 +142,31 @@ export const LandingClub = () => {
 
   return (
     <section className="club">
+      <section
+        className={`club-mobile-menu ${
+          activeMenu ? "club-mobile-menu-active" : ""
+        }`}
+      >
+        <div className="menu-container">
+          <div className="menu__img">
+            <SVG src={menu} />
+          </div>
+
+          <nav className="menu-nav">
+            <Link to="#">о клубе</Link>
+            <Link to="#">ценности</Link>
+            <Link to="#">клуб в лицах</Link>
+            <Link to="#">мероприятия</Link>
+            <Link to="#">новости клуба</Link>
+            <Link to="#">контакты</Link>
+          </nav>
+          <div className="menu-burger" onClick={() => handleMenu()}>
+            <div className="menu-burger__line"></div>
+            <div className="menu-burger__line"></div>
+            <div className="menu-burger__line"></div>
+          </div>
+        </div>
+      </section>
       <section className="club-header">
         <div className="header-container">
           <img className="header-cube" src={headerCube} alt="" />
@@ -161,7 +189,10 @@ export const LandingClub = () => {
       <section className="club-title">
         <img className="title-bg--bottom" src={bgWhite} alt="" />
         <div className="title-container">
-          <img className="title-bg--top" src={bgWhite} alt="" />
+          <div className="title-bg--top">
+            <img src={bgWhite} alt="" />
+          </div>
+
           <h3 className="title__name">
             <span>клуб</span> молодых <p>предпринимателей</p>
           </h3>
@@ -225,23 +256,28 @@ export const LandingClub = () => {
       </section>
 
       <section className="club-mission">
+        <img className="mission-bg-element" src={elementBg2} alt="" />
         <div className="mission-container">
-          <img className="mission-bg-element" src={elementBg2} alt="" />
+          <div className="mission-mobile-cube">
+            <img src={blackYellowCube} alt="" />
+          </div>
           <img className="mission-cube" src={blackWhiteCube} alt="" />
-          <img className="mission-bg" src={bgOrange} alt="" />
+          <div className="mission-bg">
+            <img src={bgOrange} alt="" />
+          </div>
 
           <div className="mission-header">
             <h3 className="mission-header__title">
               наша
               <br />
-              миссия:
+              <span>миссия:</span>
             </h3>
 
             <div className="mission-header__text">
               <p>
-                вдохновлять молодых людей делать бизнес в России, брать
-                ответственность за себя, за своё окружение, за свой регион и
-                будущее страны!
+                <span>вдохновлять</span> молодых людей делать бизнес в России,
+                <span>брать ответственность за себя</span>, за своё окружение,
+                за свой регион и будущее страны!
               </p>
             </div>
           </div>
@@ -268,6 +304,12 @@ export const LandingClub = () => {
                 );
               })}
             </div>
+            <button className="club__button">
+              Вступить в клуб
+              <div>
+                <img src={arrowButton} alt="" />
+              </div>
+            </button>
             <button className="mission-content__button">
               Вступить в клуб
               <div>
@@ -279,10 +321,11 @@ export const LandingClub = () => {
       </section>
 
       <section className="club-members">
-        <img className="members-cube" src={blackYellowCube} alt="" />
         <div className="members-container">
-          <img className="members-bg-element" src={elementBg3} alt="" />
-          <img className="members-bg" src={bgYellow} alt="" />
+          <img className="members-cube" src={blackYellowCube} alt="" />
+          <div className="members-bg">
+            <img src={bgYellow} alt="" />
+          </div>
 
           <div className="members-header">
             <span className="members-header__subtitle">донецкий</span>
@@ -301,7 +344,16 @@ export const LandingClub = () => {
                 ref={sliderRef1}
                 modules={[Navigation]}
                 spaceBetween={30}
-                slidesPerView={3}
+                breakpoints={{
+                  430: {
+                    slidesPerView: 1.3,
+                    centeredSlides: true
+                  },
+                  1000: {
+                    slidesPerView: 3,
+                    centeredSlides: false
+                  }
+                }}
               >
                 {members.map((member) => (
                   <SwiperSlide key={member.id}>
@@ -355,7 +407,9 @@ export const LandingClub = () => {
 
       <section className="club-event">
         <div className="event-container">
-          <img className="event-cube" src={blackWhiteCube} alt="" />
+          <div className="event-cube">
+            <img src={blackWhiteCube} alt="" />
+          </div>
 
           <div className="event-header">
             <span className="event-header__subtitle">Спеши посетить</span>
@@ -389,12 +443,13 @@ export const LandingClub = () => {
             </div>
             <div className="content-month">
               <h4 className="content__title">
-                Август <img src={iconCalendar} alt="" /> <br />
+                Август
+                <img src={iconCalendar} alt="" /> <br />
                 <span>месяц</span>
               </h4>
               <div className="month-container">
                 <div className="month-item">
-                  <img className="month-item__img" src={event2} alt="" />
+                  <img className="month-item__img" src={event} alt="" />
                   <div className="month-item-container">
                     <div className="month-item-info">
                       <span className="month-item__date">
@@ -417,7 +472,7 @@ export const LandingClub = () => {
                   </div>
                 </div>
                 <div className="month-item">
-                  <img className="month-item__img" src={event2} alt="" />
+                  <img className="month-item__img" src={event} alt="" />
                   <div className="month-item-container">
                     <div className="month-item-info">
                       <span className="month-item__date">
@@ -440,7 +495,7 @@ export const LandingClub = () => {
                   </div>
                 </div>
                 <div className="month-item">
-                  <img className="month-item__img" src={event2} alt="" />
+                  <img className="month-item__img" src={event} alt="" />
                   <div className="month-item-container">
                     <div className="month-item-info">
                       <span className="month-item__date">
@@ -465,9 +520,9 @@ export const LandingClub = () => {
               </div>
             </div>
           </div>
-          <span className="event-text">
-            Чтобы быть в курсе всех мероприятий клуба
-          </span>
+          <p className="event-text">
+            Чтобы <span>быть в курсе</span> всех мероприятий клуба
+          </p>
           <button className="club__button">
             Вступить в клуб
             <div>
@@ -480,8 +535,9 @@ export const LandingClub = () => {
       <section className="club-news">
         <img src={blackYellowCube} alt="" className="news-cube" />
         <div className="news-container">
-          <img src={bgBlack} alt="" className="news-bg" />
-
+          <div className="news-bg">
+            <img src={bgBlack} alt="" />
+          </div>
           <div className="news-header">
             <span className="news-header__subtitle">интересно посмотреть</span>
             <h3 className="news-header__title">новости клуба</h3>
@@ -498,8 +554,17 @@ export const LandingClub = () => {
               <Swiper
                 ref={sliderRef2}
                 modules={[Navigation]}
-                spaceBetween={30}
-                slidesPerView={2}
+                spaceBetween={10}
+                breakpoints={{
+                  430: {
+                    slidesPerView: 1.1,
+                    centeredSlides: true
+                  },
+                  1000: {
+                    slidesPerView: 2,
+                    centeredSlides: false
+                  }
+                }}
               >
                 {news.map((news) => (
                   <SwiperSlide key={news.id}>
@@ -530,12 +595,18 @@ export const LandingClub = () => {
 
       <section className="club-footer">
         <div className="footer-container">
-          <img className="footer-cube" src={footerCube} alt="" />
-          <img className="footer-bg" src={footerBg} alt="" />
+          <div className="footer-cube">
+            <img src={orangeBlackCube} alt="" />
+          </div>
+          <div className="footer-bg">
+            <img src={bgWhite} alt="" />
+          </div>
           <div className="footer-logo">
             <img src={headerLogo1} alt="" />
-            <img src={headerText} alt="" />
-            <img src={headerLogo2} alt="" />
+            <div className="footer-logo--sub">
+              <img src={headerText} alt="" />
+              <img src={headerLogo2} alt="" />
+            </div>
           </div>
           <div className="footer-nav">
             <Link to="#">мероприятия</Link>