add adaptive layout

components/main/index.tsx

@@ -5,7 +5,7 @@ export const Main:React.FC = () =>{
     return(
         <div className={styles.main} id="main">
             <h1 >AR Quest</h1>
-            <h2>Квесты прямо в вашем доме!</h2>
+            <h2 style={{"textAlign":"center"}}>Квесты прямо в вашем доме!</h2>
             <Link  href="#buy" >
                 <a className={styles.inRow}>
                     Далее <img src="/images/arrowUp.svg"/>

components/mobile header/mobileHeader.module.css

@@ -60,3 +60,39 @@
     border:none;
     background-color: transparent;
 }
+
+@media (max-width: 385px){
+    .text{
+        margin-left: 40px;
+    }
+    .btn{
+        margin-left:-60%;
+    }
+
+}
+
+@media (max-width: 300px){
+    .text{
+        margin-left: 40px;
+    }
+    .btn{
+        margin-left:-30%;
+    }
+
+}
+@media (max-width: 300px){
+    .text{
+        margin-left: 40px;
+    }
+    .btn{
+        margin-left:-30%;
+    }
+
+}
+
+@media (max-width: 260px){
+    .menu{
+        font-size: 20px;
+    }
+
+}

components/modal/Modal.module.css

@@ -58,3 +58,15 @@
     background-color: #f9f9fd;
   }
 
+.img{
+}
+
+@media (max-width: 800px){
+    .modalButton{
+        margin-left: 100;
+    }
+   .img{
+       width: 60%;
+       padding-bottom: 200px;
+   }
+}

components/modal/index.tsx

@@ -49,7 +49,7 @@ export const Modal:React.FC<{show:boolean, setShow:(a:boolean)=>void }> = (props
                         </ul>
                     </div>
                     <h2>Фото</h2>
-                    <img src="/images/mockups.png"/>
+                    <img className={styles.img} src="/images/mockups.png"/>
                 </div>
             </div> 
     );

components/rings/Ring.module.css

@@ -6,4 +6,10 @@
     .ringVisible{
         display: none;
     }
+}
+
+@media (max-width: 260px){
+    .ring{
+        display: none;
+    }
 }

components/team/Team.module.css

@@ -86,13 +86,13 @@
     .ilArrow{
         width: 55%;
 
-        top: -50px;
-        transform:  rotate(-25deg);
-        left: 27%
+        top: -60px;
+        transform:  rotate(-35deg);
+        left: 40%
 
     }
     .ilText{
-        left: -30%
+        left: -10%
     }
     .denArrow{
         width: 55%;
@@ -111,4 +111,100 @@
         padding-top: 50%;
 
     }
+}
+
+@media (max-width: 430px) {
+    
+    .team{
+        padding-top: 50%;
+    }
+    .avatar{
+        width: 40%;
+    }
+    .carouselAvatar{
+        font-size: 12px;
+
+        flex-direction: column ;   
+    }
+    .miText{
+        position: relative;
+        top:-380px;
+        left: 13%
+    }
+    .miArrow{
+        top: -200px;
+        left: -30%;
+        width: 40%;
+    }
+    .danya{
+        margin-top: -150px;
+    }
+    .ilArrow{
+        width: 40%;
+        top: -50px;
+        transform:  rotate(-35deg);
+        left: 30%
+
+    }
+    .ilText{
+        top:-140px;
+        left: -5%
+    }
+    .denArrow{
+        width: 40%;
+        left: -30%;
+        transform: scale(-1, 1) rotate(-35deg);
+    }
+    .denText{
+        top: -130px;
+        left:10%
+    }
+}
+
+@media (max-width: 300px) {
+    
+    .team{
+        padding-top: 50%;
+    }
+    .avatar{
+        width: 40%;
+    }
+    .carouselAvatar{
+        font-size: 10px;
+
+        flex-direction: column ;   
+    }
+    .miText{
+        position: relative;
+        top:-300px;
+        left: 10%
+    }
+    .miArrow{
+        top: -150px;
+        left: -33%;
+        width: 40%;
+    }
+    .danya{
+        margin-top: -150px;
+    }
+    .ilArrow{
+        width: 40%;
+        top: -50px;
+        transform:  rotate(-35deg);
+        left: 30%
+
+    }
+    .ilText{
+        top:-100px;
+        left: -5%
+    }
+    .denArrow{
+        width: 40%;
+        left: -30%;
+        transform: scale(-1, 1) rotate(-35deg);
+    }
+    .denText{
+        top: -100px;
+        left:10%
+    }
 }

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start",
     "lint": "next lint"
   },

styles/globals.css

@@ -16,7 +16,9 @@ html{
     font-family: 'Inconsolata', monospace;
 
 }
-
+h1,h2{
+  text-align: center;
+}
 body{
   background: #FAFAFA;
   overflow-x: hidden;