move to next js

components/contacts/Contacts.module.css

@@ -0,0 +1,54 @@
+.contacts{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: start;
+
+}
+.questForm{
+    padding-top: 5%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap:25px;
+    margin-bottom: 10%;
+}
+
+.formWrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap:10px;
+}
+.inp{
+    font-family: 'Inconsolata', monospace;  
+    font-size: 18px;
+    background: #FFFFFF;
+    border: 1px solid #EEEEEE;
+    box-sizing: border-box;
+    border-radius: 15px;
+    outline: none;
+    padding:15px;
+    width: 100%;
+    transition: 0s;
+    min-height: 60px;
+}
+
+.btn{
+    user-select: none;
+
+    background: #6F39B5;
+    border-radius: 10px;
+    font-family: 'Montserrat', sans-serif;
+    color: #FFFFFF;
+    font-size: 18px;
+    border:none;
+    outline: none;
+    padding: 10px;
+    cursor: pointer;
+}
+.btn:hover{
+    opacity: 0.5;
+}

components/contacts/index.tsx

@@ -0,0 +1,20 @@
+import styles from './Contacts.module.css'
+import React from "react"
+import Link from 'next/link';
+import Image from 'next/image';
+
+export const Contacts : React.FC = () =>{
+    return(
+        <div className={styles.contacts} id="contacts">
+        <h1>Связь с нами</h1>
+        <form className={styles.questForm}>
+            <div className={styles.formWrapper}>
+                <input type="text" className={styles.inp} placeholder="Имя"/>
+                <input type="email" className={styles.inp} placeholder="E-mail"/>
+            </div>
+            <textarea className={styles.inp} rows={10} cols={45} placeholder="Комментарий"></textarea>
+            <input type="submit" value="Отправить" className={styles.btn} style={{width: "100%"}}/>
+        </form>
+    </div>
+    );
+}

components/footer/Footer.module.css

@@ -0,0 +1,27 @@
+.footer{
+    padding: 10px;
+    background: #FFFFFF;
+    border: 1px solid #EEEEEE;
+    box-sizing: border-box;
+    border-radius: 15px 15px 0px 0px;
+    width: 100%;
+    right: 0;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 25px;
+}
+
+.copyright{
+    position: relative;
+    margin-right: 40%;  
+}
+
+.socMedia{
+    width: 70%;
+}
+.socMedia:hover{
+    width: 85%;
+}

components/footer/index.tsx

@@ -0,0 +1,26 @@
+import styles from './Footer.module.css'
+import React from "react"
+import Link from 'next/link';
+
+export const MyFooter: React.FC = () =>{
+    return(
+        <footer className={styles.footer}>
+            <div className={styles.copyright}>© PYC Пуртов Михаил, Василенко Илья, Лунев Даниил</div>
+            <Link href="https://instagram.com">
+                <a>
+                    <img className={styles.socMedia} src="/images/inst.svg"/>
+                </a>
+            </Link>
+            <Link href="https://youtube.com">
+                <a>
+                    <img className={styles.socMedia} src="/images/yt.svg"/>
+                </a>
+            </Link>
+            <Link href="https://vk.com">
+                <a>
+                    <img className={styles.socMedia} src="/images/vk.svg"/>
+                </a>
+            </Link>
+        </footer>
+    );
+}

components/rings/Ring.module.css

@@ -0,0 +1,4 @@
+.ring{
+    position: absolute;
+    z-index: -1;
+}

components/rings/index.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import styles from './Ring.module.css'
+
+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} 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} 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"/>
+            <img className={styles.ring} style={{right: "60%", top:"2500px", width: "20%"}} src="/images/ring.svg"/>
+        </div>
+        
+    )
+}

components/team/Team.module.css

@@ -0,0 +1,76 @@
+.ilText{
+    position: relative;
+    top:-200px;
+    left: -40%
+}
+.ilArrow{
+    user-select: none;
+    position: relative;
+    width: 65%;
+}
+.miText{
+    position: relative;
+    top:-510px;
+    left: 20%
+}
+.miArrow{
+    user-select: none;
+    transform: rotate(140deg);
+    position: relative;
+    width: 65%;
+    top: -250px;
+    left: -40%
+}
+.denText{
+    position:relative;
+    top: -200px;
+    left: 30%
+
+}
+.denArrow{
+    user-select: none;
+    transform: scale(-1, 1) rotate(-25deg);
+    position: relative;
+    width: 65%;
+    left: -30%;
+    top: -55px
+
+}
+.avatar{
+    user-select: none;
+    width: 50%;
+    cursor: pointer;
+    z-index: 10;
+}
+.avatar:hover{
+    width: 60%;
+    transition: 0.3s;
+    opacity: 0.7;
+}
+.person{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.team{
+    font-family: 'Inconsolata', monospace;
+    color: #323232;
+    padding-top: 21%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: start;
+
+}
+
+
+.carouselAvatar{
+    display: flex;
+    flex-direction: row;
+    gap:10px;
+    margin-top:5%;
+    justify-content: center;
+    align-items: center;
+}

components/team/index.tsx

@@ -0,0 +1,50 @@
+import styles from './Team.module.css'
+import React from "react"
+import Link from 'next/link';
+import Image from 'next/image';
+
+export const Team:React.FC =  () => {
+    return(
+        <div className={styles.team} >
+            <h1 id="team">Наша команда</h1>
+            <div className={styles.carouselAvatar} style={{marginTop: "15%"}}>
+                <div className={styles.person}>
+                    <img className={styles.avatar}  src="/images/Ilya.png"/>
+                    <img className={styles.ilArrow} src="/images/arrow.svg"/>
+                    <div className={styles.ilText}>
+                        <h2>Это Илья.</h2>
+                        <div>
+                            Илья - Unity разработчик.  <br/>
+                            Здесь он, чтобы реализовать <br/>
+                            техническую часть квеста
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.person}>
+                    <img  className={styles.avatar}  src="/images/Michael.png"/>
+                    <img className={styles.miArrow} src="/images/arrow.svg"/>
+                    <div className={styles.miText}>
+                        <h2>Это Миша.</h2>
+                        <div>
+                            Миша - AR разработчик. Здесь он, <br/>
+                            чтобы реализовать механики <br/>
+                            дополненной реальности
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.person}>
+                    <img className={styles.avatar}  src="/images/Danil.png"/>
+                    <img className={styles.denArrow} src="/images/arrow.svg"/>
+                    <div className={styles.denText}>
+                        <h2>Это Даня.</h2>
+                        <div>
+                            Даня - SMM менеджер. Здесь он <br/>
+                            чтобы осуществить продажи <br/>
+                            квестов
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

pages/index.tsx

@@ -6,7 +6,10 @@ import { Header } from '../components/header'
 import { Modal } from '../components/modal'
 import { Main } from '../components/main'
 import { Solution } from '../components/solution'
-
+import { Team } from '../components/team'
+import { Contacts } from '../components/contacts'
+import { MyFooter } from '../components/footer'
+import { Rings } from '../components/rings'
 const Home: NextPage = () => {
   return (
     <div className={styles.container}>
@@ -21,8 +24,11 @@ const Home: NextPage = () => {
         <div className={styles.content}>
           <Main></Main>
           <Solution></Solution>
-
+          <Team></Team>
+          <Contacts></Contacts>
+          <MyFooter></MyFooter>
         </div>
+        <Rings></Rings>
       </main>
     </div>
   )

styles/globals.css

@@ -14,3 +14,24 @@ a {
     font-family: 'Inconsolata', monospace;
 
 }
+
+body{
+  background: #FAFAFA;
+  overflow-x: hidden;
+}
+
+html::-webkit-scrollbar, .modal::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f9f9fd;
+}
+
+html::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #FFCB7F;
+}
+
+html::-webkit-scrollbar-track,  .modal::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+  border-radius: 10px;
+  background-color: #f9f9fd;
+}