mirror of
https://github.com/evgen-app/lending-next.git
synced 2024-11-21 14:36:33 +03:00
move to next js
This commit is contained in:
Firesieht
parent
c4cf08347b
commit
0b83a98063
54
components/contacts/Contacts.module.css
Normal file
54
components/contacts/Contacts.module.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
20
components/contacts/index.tsx
Normal file
20
components/contacts/index.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
27
components/footer/Footer.module.css
Normal file
27
components/footer/Footer.module.css
Normal file
|
|
@ -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%;
|
||||
}
|
||||
26
components/footer/index.tsx
Normal file
26
components/footer/index.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
4
components/rings/Ring.module.css
Normal file
4
components/rings/Ring.module.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.ring{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
18
components/rings/index.tsx
Normal file
18
components/rings/index.tsx
Normal file
|
|
@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
76
components/team/Team.module.css
Normal file
76
components/team/Team.module.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
50
components/team/index.tsx
Normal file
50
components/team/index.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user