Merge branch 'UPD-1'

src/assets/stylesheets/abstracts/_mixins.scss

@@ -1,5 +1,5 @@
 @mixin for-tablets {
-    @media all and (max-width: 1024px) {
+    @media all and (max-width: 1200px) {
         @content;
     }
 }

src/components/about/about.component.jsx

@@ -21,12 +21,12 @@ const About = () => {
         <Swiper
           loop={false}
           // centeredSlides={true}
-          // slideToClickedSlide={true}
+          slideToClickedSlide={true}
           spaceBetween={0}
-          slidesPerView={1}
+          slidesPerView={2}
           onSlideChange={() => console.log("slide change")}
           onSwiper={(swiper) => console.log(swiper)}
-          className={'swiper10'}
+          className={'stats'}
         >
           <SwiperSlide>
             <h4>30+</h4>
@@ -42,7 +42,7 @@ const About = () => {
           </SwiperSlide>
         </Swiper>
 
-        {/* <div className="swiper">
+        <div className="stats">
           <div>
             <h4>30+</h4>
             <p>Completed projects</p>
@@ -55,7 +55,7 @@ const About = () => {
             <h4>6+</h4>
             <p>Years experiance</p>
           </div>
-        </div> */}
+        </div>
       </div>
     </div>
   );

src/components/about/about.style.scss

@@ -4,12 +4,10 @@
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 
 .about-us {
+  margin-top: -80px;
   > div {
     &:first-child {
       grid-column: 1/7;
-      img {
-        margin: -80px auto 0px;
-      }
     }
 
     &:last-child {
@@ -27,13 +25,28 @@
         color: $color-text-secondary;
       }
 
-      .swiper {
+      .stats {
         display: flex;
         justify-content: space-between;
         margin-top: 64px;
+        width: 100%;
         .swiper-slide {
           width: 33%;
         }
+
+        @include for-mobile {
+          display: none;
+        }
+      }
+
+      .swiper {
+        display: none;
+        margin-left: -20px;
+        margin-right: -20px;
+
+        @include for-mobile {
+          display: flex;
+        }
       }
 
       @include for-mobile {

src/components/contact-form/contact-form.component.jsx

@@ -15,8 +15,8 @@ const ContactForm = () => {
 
       <div className="image">
         <img src={Dog} alt="cute dog in space" />
-        <img src={BluePlanet} alt="blue planet" class="planet blue" />
-        <img src={YellowPlanet} alt="yellow planet" class="planet yellow" />
+        <img src={BluePlanet} alt="blue planet" className="planet blue" />
+        <img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
       </div>
       
       <form action="" className="container">

src/components/contact-form/contact-form.style.scss

@@ -1,11 +1,17 @@
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 
+section.content {
+  .contact-form {
+    h2 {
+      margin-bottom: 0;
+      text-align: left;
+    }
+  }
+}
 .contact-form {
   h2 {
     grid-column: 1/6;
     grid-row: 1/2;
-    text-align: left !important;
-    margin-bottom: 0;
   }
 
   form {
@@ -22,6 +28,12 @@
     }
   }
 
+  @include for-tablets {
+    form {
+      padding-top: 20px;
+    }
+  }
+
   .image {
     grid-column: 6/13;
     grid-row: 1/3;
@@ -52,6 +64,16 @@
       }
     }
   }
+
+  @include for-tablets {
+    h2, form {
+      grid-column: 1/7;
+    }
+
+    .image {
+      grid-column: 8/13;
+    }
+  }
   
 
   @include for-mobile {

src/components/footer/footer.style.scss

@@ -42,6 +42,11 @@ footer {
         display: block;
         width: fit-content;
 
+        @include for-mobile {
+          margin-left: auto;
+          margin-right: auto;
+        }
+
         &.mobile {
           display: none;
         }

src/components/header/header.style.scss

@@ -9,6 +9,12 @@ header {
   align-items: center;
   padding-left: 20px;
   padding-right: 20px;
+  z-index: 1000;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
 
   .navigation {
     a {
@@ -28,6 +34,7 @@ header {
     width: 23px;
     height: 23px;
     display: none;
+    cursor: pointer;
 
     span {
       background-color: #fff;

src/components/intro/intro.styles.scss

@@ -5,6 +5,7 @@
   height: calc(100vh - 112px);
   grid-template-rows: calc(100vh - 112px - 85px - 30px) min-content;
   row-gap: unset;
+  padding-top: 112px;
 
   .title {
     grid-column: 1/8;

src/components/swiper/mid-swiper.component.jsx

@@ -6,11 +6,13 @@ import Mockba from "../../assets/images/main/projects/mockba-modular.png";
 import Pryatki from "../../assets/images/main/projects/pryatki.png";
 import Sizzapp from "../../assets/images/main/projects/sizzapp.png";
 import Trackpro from "../../assets/images/main/projects/trackpro.png";
+import BrowserWrap from "../../assets/images/main/projects/browser-window.png";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
+import { Autoplay, Navigation } from 'swiper';
 SwiperCore.use([EffectCoverflow, Pagination]);
 
 const ProjectsSwiper = () => {
@@ -18,11 +20,13 @@ const ProjectsSwiper = () => {
     <Swiper
       loop={true}
       autoplay={{
-        delay: 1000
+        delay: 1000,
+        disableOnInteraction: true,
       }}
-      speed={3000}
+      speed={1200}
       effect={"coverflow"}
       coverflowEffect={{
+        scale: 1,
         rotate: 0,
         stretch: 100,
         depth: 500,
@@ -32,20 +36,40 @@ const ProjectsSwiper = () => {
 
       centeredSlides={true}
       slideToClickedSlide={true}
-      slidesPerView={"auto"}
+      // slidesPerView={"auto"}
       onSlideChange={() => {
         console.log("slide change");
 
       }}
+
+      breakpoints={{
+        0: { // when window >=0px - webflow mobile portriat
+          slidesPerView: 1,
+          // spaceBetween: 10,
+        },
+        // 767: { // when window >= 767px - webflow tablet
+        //   slidesPerView: 2,
+        //   // spaceBetween: -16,
+        // },
+        1200: { // when window >= 988px - webflow desktop
+          slidesPerView: 2,
+          coverflowEffect: {
+            // stretch: 500
+          }
+        }
+      }}
+
       onSwiper={
         (swiper) => {
           console.log(swiper);
         }
       }
+      modules={[Autoplay]}
     >
       <SwiperSlide>
         <h2>Inflid</h2>
         <div className="img-wrap">
+          <img src={BrowserWrap} alt="" className="img-overlay"/>
           <img src={Inflid} alt="inflid" />
         </div>
         <div className="project-info">
@@ -60,6 +84,7 @@ const ProjectsSwiper = () => {
       <SwiperSlide>
         <h2>Custom PC4U</h2>
         <div className="img-wrap">
+          <img src={BrowserWrap} alt="" className="img-overlay" />
           <img src={CustomPC} alt="inflid" />
         </div>
         <div className="project-info">

src/components/swiper/swiper.style.scss

@@ -36,6 +36,20 @@
       margin-right: auto;
     }
 
+    .img-wrap {
+      position: relative;
+
+      .img-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        z-index: 1;
+      }
+    }
+
     p {
       &:last-of-type {
         text-align: center;