add adapt

components/footer/Footer.module.css

@@ -19,9 +19,21 @@
     margin-right: 40%;  
 }
 
-.socMedia{
-    width: 70%;
-}
 .socMedia:hover{
-    width: 85%;
-}
+    transform: scale(1.1);
+}
+@media (max-width: 500px){
+    .socMedia{
+        width: 52px;
+    }
+    .copyright{
+        margin-right: 10%;
+        height: 24px;
+        width: 50px;
+        overflow: hidden;
+    }
+
+}
+
+
+

components/header/Header.module.css

@@ -24,4 +24,9 @@
 .link:active{
     color: #000;
     text-decoration:none;
+}
+@media (max-width: 500px){
+    .header{
+        display: none;
+    }
 }

components/main/Main.module.css

@@ -9,6 +9,7 @@
     justify-content: center;
     align-items: center;
 }
+
 .main{
     padding-top: 20%;
     display: flex;
@@ -17,4 +18,13 @@
     justify-content: center;
     scroll-snap-align: start;
 
+}
+
+@media (max-width: 500px){
+    .main{
+        padding-top: 70%;
+    }
+    .inRow{
+        padding-top:75%;
+    }
 }

components/mobile header/index.tsx

@@ -0,0 +1,45 @@
+
+import Link from 'next/link'
+import styles from './mobileHeader.module.css'
+import react, {useState} from "react"
+
+export const MobileHeader:React.FC = () =>{
+    const [open, setOpen] = useState(false)
+    return(
+        <div className={styles.mobileHeader}>
+            <div className={styles.mainMenu}>
+                <button className={styles.btn} onClick={() => setOpen(!open)}>
+                    <img  className={styles.img   + (open? " " + styles.open:"")} src="/images/header.svg"/>
+                </button>
+                <div className={styles.text}>AR квест</div>
+            </div>
+
+            { open?
+            <div className={styles.menu}>
+                <Link  href="#main" >
+                    <a  onClick={() => setOpen(!open)} className={styles.link} style={{color: "#000 !important"}}>
+                        Главная
+                    </a>
+                </Link>
+                <Link href="#buy">
+                    <a onClick={() => setOpen(!open)} className={styles.link}>
+                        Купить квест
+                    </a>
+                </Link>
+                <Link  href="#team">
+                    <a onClick={() => setOpen(!open)} className={styles.link}>
+                        Наша команда
+                    </a>
+                </Link>
+                <Link  href="#contacts">
+                    <a onClick={() => setOpen(!open)} className={styles.link}>
+                        Связь с нами
+                    </a>
+                </Link>
+            </div> : null
+            }
+
+
+    </div>
+    )
+}

components/mobile header/mobileHeader.module.css

@@ -0,0 +1,62 @@
+
+@media (min-width: 500px){
+    .mobileHeader{
+        display: none;
+    }
+}
+@media (max-width: 500px){
+
+    .mobileHeader{
+        position: fixed;
+        left: 0;
+        top:0;
+        z-index: 0;
+        background: #fff;
+        border-radius: 0px 0px 15px 15px;
+        border: 1px solid #EEEEEE;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: 'Inconsolata', monospace;
+        color: #323232;
+        font-size: 18px;
+        gap:25px;
+        padding: 20px;
+        z-index: 11;
+    }
+}
+.menu{
+    transition: 0.3s;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap:45px;
+    font-size:32px;
+}
+.mainMenu{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size:24px;
+}
+.img{
+    width: 30px;
+} 
+.img:hover{
+    width: 34px;
+}
+.open{
+    transform: rotate(90deg);
+}
+.text{
+    margin-left: 70%;
+}
+.btn{
+    margin-left:-90%;
+    border:none;
+    background-color: transparent;
+}

components/rings/Ring.module.css

@@ -1,4 +1,9 @@
 .ring{
     position: absolute;
     z-index: -1;
+}
+@media (max-width: 500px){
+    .ringVisible{
+        display: none;
+    }
 }

components/rings/index.tsx

@@ -5,9 +5,9 @@ export const Rings:React.FC = () =>{
     return(
         <div>
             <img className={styles.ring} style={{left: "-50px", top:"0px"}} src="/images/ring.svg"/>
-            <img className={styles.ring} style={{right: "-50px", top:"0px", width: "20%"}} src="/images/ring.svg"/>
+            <img className={styles.ring + " " +  styles.ringVisible} style={{right: "-50px", top:"0px", width: "20%"}} src="/images/ring.svg"/>
             <img className={styles.ring} style={{right: "50%", top:"350px", width: "40%"}} src="/images/ring.svg"/>
-            <img className={styles.ring} style={{right: "-100px", top:"750px", width: "35%"}} src="/images/ring.svg"/>
+            <img className={styles.ring +  " " + styles.ringVisible} style={{right: "-100px", top:"750px", width: "35%"}} src="/images/ring.svg"/>
             <img className={styles.ring} style={{left: "-10px", top:"900px", width: "10%"}} src="/images/ring.svg"/>
             <img className={styles.ring} style={{right: "100px", top:"1500px", width: "25%"}} src="/images/ring.svg" />
             <img className={styles.ring} style={{left: "-100px", top:"1700px", width: "30%"}} src="/images/ring.svg"/>

components/solution/Solution.module.css

@@ -12,6 +12,9 @@
     gap:10px;
     margin-top:5%;
 }
+
+
+
 .card{
     font-family: 'Inconsolata', monospace;
     background: #FFFFFF;
@@ -52,4 +55,24 @@
 }
 .btn:hover{
     opacity: 0.5;
+}
+
+@media (max-width: 1150px){
+    .carousel{
+        flex-direction: column ;
+    }
+    .cardVisible{
+        display: none;
+    }
+    .card{
+        padding-left: 30px;
+        padding-right: 30px;
+        padding-bottom: 20px;
+    }
+}
+
+@media (max-width: 500px){
+    .solution{
+        padding-top: 20%;
+    }
 }

components/solution/index.tsx

@@ -38,7 +38,7 @@ export const Solution:React.FC<SolutionIE> = (props) =>{
                </Link>
 
             </div>
-            <div className={styles.card} style={{justifyContent: "center"}}>
+            <div className={styles.card + " " + styles.cardVisible} style={{justifyContent: "center"}}>
                 Coming soon...
             </div>
         </div>

components/team/Team.module.css

@@ -53,6 +53,7 @@
     justify-content: center;
     flex-direction: column;
 }
+
 .team{
     font-family: 'Inconsolata', monospace;
     color: #323232;
@@ -66,6 +67,7 @@
 }
 
 
+
 .carouselAvatar{
     display: flex;
     flex-direction: row;
@@ -73,4 +75,40 @@
     margin-top:5%;
     justify-content: center;
     align-items: center;
+}
+@media (max-width: 1150px){
+    .carouselAvatar{
+        flex-direction: column ;   
+    }
+    .danya{
+        margin-top: -250px;
+    }
+    .ilArrow{
+        width: 55%;
+
+        top: -50px;
+        transform:  rotate(-25deg);
+        left: 27%
+
+    }
+    .ilText{
+        left: -30%
+    }
+    .denArrow{
+        width: 55%;
+        left: -35%;
+        transform: scale(-1, 1) rotate(-35deg);
+    }
+    .denText{
+        top: -170px;
+        left:15%
+    }
+
+}
+
+@media (max-width: 500px) {
+    .team{
+        padding-top: 50%;
+
+    }
 }

components/team/index.tsx

@@ -32,7 +32,7 @@ export const Team:React.FC =  () => {
                         </div>
                     </div>
                 </div>
-                <div className={styles.person}>
+                <div className={styles.person + " " + styles.danya} >
                     <img className={styles.avatar}  src="/images/Danil.png"/>
                     <img className={styles.denArrow} src="/images/arrow.svg"/>
                     <div className={styles.denText}>

pages/index.tsx

@@ -1,6 +1,6 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { useState } from 'react'
+import { useState,useEffect } from 'react'
 import Image from 'next/image'
 import styles from '../styles/Home.module.css'
 import { Header } from '../components/header'
@@ -11,9 +11,13 @@ import { Team } from '../components/team'
 import { Contacts } from '../components/contacts'
 import { MyFooter } from '../components/footer'
 import { Rings } from '../components/rings'
+import { MobileHeader } from '../components/mobile header'
 const Home: NextPage = () => {
   let [showModal, setShowModal] = useState(false)
-  
+  const [width, setWidth] = useState(0)
+  useEffect(() => {
+    setWidth(window.innerWidth);
+  });
   return (
     <div className={styles.container}>
       <Head>
@@ -24,6 +28,7 @@ const Home: NextPage = () => {
 
       <main>
         <Header></Header>
+        <MobileHeader></MobileHeader>
         <Modal setShow={(a:boolean)=>setShowModal(a)} show={showModal}></Modal>
         <div className={styles.content}>
           <Main></Main>

public/images/header.svg

@@ -0,0 +1,5 @@
+<svg width="205" height="146" viewBox="0 0 205 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="205" height="28" rx="14" fill="#2E2E2E"/>
+<rect y="59" width="205" height="28" rx="14" fill="#2E2E2E"/>
+<rect y="118" width="205" height="28" rx="14" fill="#2E2E2E"/>
+</svg>

styles/globals.css

@@ -1,9 +1,11 @@
-html,
-
-a {
+html,a {
   color: inherit;
   text-decoration: none;
 }
+html{
+  overflow-x: hidden;
+
+}
 
 * {
   box-sizing: border-box;
@@ -23,6 +25,7 @@ body{
 html::-webkit-scrollbar, .modal::-webkit-scrollbar {
   width: 10px;
   background-color: #f9f9fd;
+
 }
 
 html::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {