evgen-app/lending-next
1
0
Fork 0
mirror of https://github.com/evgen-app/lending-next.git synced 2024-11-21 22:46:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
Firesieht 2022-03-27 13:32:40 +03:00
parent b95893b928
commit c4cf08347b
25 changed files with 361 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/header/Header.module.css Normal file
View File

@ -0,0 +1,27 @@
.header{
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: row;
align-items: center;
font-family: 'Inconsolata', monospace;
color: #323232;
font-size: 18px;
gap:25px;
padding: 20px;
z-index: 11;
}
.link{
color: #323232;
text-decoration: none;
}
.link:active{
color: #000;
text-decoration:none;
}

31
components/header/index.tsx Normal file
View File

@ -0,0 +1,31 @@
import Link from 'next/link'
import styles from './Header.module.css'
import react from "react"
export const Header:React.FC = () =>{
return(
<div className={styles.header}>
<Link href="#main">
<a className={styles.link} style={{color: "#000 !important", marginLeft: "25px"}}>
Главная
</a>
</Link>
<Link href="#buy">
<a className={styles.link}>
Купить квест
</a>
</Link>
<Link href="#team">
<a className={styles.link}>
Наша команда
</a>
</Link>
<Link href="#contacts">
<a className={styles.link}>
Связь с нами
</a>
</Link>
</div>
)
}

20
components/main/Main.module.css Normal file
View File

@ -0,0 +1,20 @@
.inRow{
padding-top: 13%;
text-decoration: none;
cursor: pointer;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.main{
padding-top: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}

16
components/main/index.tsx Normal file
View File

@ -0,0 +1,16 @@
import styles from './Main.module.css'
import React from "react"
import Link from 'next/link';
export const Main:React.FC = () =>{
return(
<div className={styles.main} id="main">
<h1 >AR Quest</h1>
<h2>Квесты прямо в вашем доме!</h2>
<Link href="#buy" >
<a className={styles.inRow}>
Далее <img src="/images/arrowUp.svg"/>
</a>
</Link>
</div>
);
}

60
components/modal/Modal.module.css Normal file
View File

@ -0,0 +1,60 @@
.card_grade{
display: flex;
flex-direction: row;
align-items: center;
}
.modal{
position: fixed;
z-index: 101;
width: 100%;
height: Calc(100vh + 100px);
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
margin-top: -100px;
margin-left: -10px;
overflow-y: scroll;
}
.modalCard{
padding: 25px;
margin-top: 45%;
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 15px;
z-index: 102;
background-color: #fff ;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modalButton{
margin-left:90%;
border:none;
outline: none;
cursor: pointer;
background-color: white;
}
.modalButton:hover{
opacity: 0.6;
}
.modal::-webkit-scrollbar {
width: 10px;
background-color: #f9f9fd;
}
.modal::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #FFCB7F;
}
.modal::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
border-radius: 10px;
background-color: #f9f9fd;
}

54
components/modal/index.tsx Normal file
View File

@ -0,0 +1,54 @@
import Link from 'next/link'
import styles from './Modal.module.css'
import react from "react"
import Image from 'next/image'
export const Modal:React.FC = () =>{
return(
<div className={styles.modal} style={{display: "flex"}} id="questInfo">
<div className={styles.modalCard}>
<button id="modalButton" className={styles.modalButton}>
<img src="/images/cross.svg"/>
</button>
<h1>Спаси корабль</h1>
<div>
<div className={styles.card_grade}>
<div>Сложность:</div>
<div>
<img src="/images/star.svg"/>
<img src="/images/star.svg"/>
<img src="/images/star.svg"/>
</div>
</div>
<div className={styles.card_grade}>
<div>Сюжет:</div>
<div>
<img src="/images/star.svg"/>
</div>
</div>
</div>
<h2>Описание</h2>
<div>
Вы - пилот корабля, вам надо спасти корабль и <br/>
доставить ценный груз на другую планету. Погрузитесь<br/>
в интересный мир стимпанка и ощутите себя в роли<br/>
пилота. Сначала полет идет по плану...но дальше на<br/>
корабле начинаются странные вещи...<br/>
</div>
<h2>Информация</h2>
<div>
Мы работаем по г. Санкт-Петербургу. Квест расчитан на<br/>
детей и подростков 10-16 лет. Длительность 50-60 минут.<br/>
Цены зависят от групп:<br/>
<ul>
<li>Группа 2-4 человек - 2000р</li>
<li>Группа 4-6 человек - 3000р</li>
<li>Группа 6-8 человек - 3500р</li>
</ul>
</div>
<h2>Фото</h2>
<img src="/images/mockups.png" />
</div>
</div>
);
}

55
components/solution/Solution.module.css Normal file
View File

@ -0,0 +1,55 @@
.solution{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.carousel{
display: flex;
flex-direction: row;
gap:10px;
margin-top:5%;
}
.card{
font-family: 'Inconsolata', monospace;
background: #FFFFFF;
border: 1px solid #EEEEEE;
display: flex;
flex-direction: column;
font-size: 20px !important;
gap:10px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 40px;
}
.card:hover{
border-radius: 15px;
padding-left: 110px;
padding-right: 110px;
padding-bottom: 50px;
padding-top: 10px;
}
.card_grade{
display: flex;
flex-direction: row;
align-items: center;
}
.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;
}

39
components/solution/index.tsx Normal file
View File

@ -0,0 +1,39 @@
import styles from './Solution.module.css'
import React from "react"
import Link from 'next/link';
export const Solution:React.FC = () =>{
return(
<div className={styles.solution} id="buy" >
<h1 >Что мы предлагаем</h1>
<h2 >Приедем к вам - соберем квест</h2>
<div className={styles.carousel} >
<div className={styles.card}>
<h2 style={{alignSelf: "center"}}>Спаси корабль</h2>
<div>Вы-пилот корабля, вам надо спасти <br/> корабль и доставить ценный груз на <br/> другую планету.</div>
<div className={styles.card_grade}>
<div>Сложность:</div>
<div>
<img src="/images/star.svg"/>
<img src="/images/star.svg"/>
<img src="/images/star.svg"/>
</div>
</div>
<div className={styles.card_grade}>
<div>Сюжет:</div>
<div>
<img src="/images/star.svg"/>
</div>
</div>
<button className={styles.btn}>Подробнее</button>
<button className={styles.btn}>купить</button>
</div>
<div className={styles.card} style={{justifyContent: "center"}}>
Coming soon...
</div>
</div>
</div>
);
}

65
pages/index.tsx
View File

@ -2,69 +2,28 @@ import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { Header } from '../components/header'
import { Modal } from '../components/modal'
import { Main } from '../components/main'
import { Solution } from '../components/solution'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<title>AR Quest - квест у вас дома</title>
<meta name="description" content="AR квест с дополненной реальностью"/>
<link rel="icon" href="/icon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<main>
<Header></Header>
<div className={styles.content}>
<Main></Main>
<Solution></Solution>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
public/icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/images/Danil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
public/images/Ilya.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
public/images/Michael.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

9
public/images/arrow.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

3
public/images/arrowUp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.175 7.15831L10 10.975L13.825 7.15831L15 8.33331L10 13.3333L5 8.33331L6.175 7.15831Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

3
public/images/cross.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 238 B

3
public/images/inst.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.0938 4C10.7813 4 4 10.7813 4 19.0938V40.9219C4 49.2188 10.7813 56 19.0938 56H40.9219C49.2188 56 56 49.2188 56 40.9063V19.0938C56 10.7813 49.2188 4 40.9063 4H19.0938ZM19.0938 8H40.9063C47.0625 8 52 12.9375 52 19.0938V40.9063C52 47.0625 47.0625 52 40.9219 52H19.0938C12.9375 52 8 47.0625 8 40.9219V19.0938C8 12.9375 12.9375 8 19.0938 8ZM46 12C44.8906 12 44 12.8906 44 14C44 15.1094 44.8906 16 46 16C47.1094 16 48 15.1094 48 14C48 12.8906 47.1094 12 46 12ZM30 16C22.2969 16 16 22.2969 16 30C16 37.7031 22.2969 44 30 44C37.7031 44 44 37.7031 44 30C44 22.2969 37.7031 16 30 16ZM30 20C35.5469 20 40 24.4531 40 30C40 35.5469 35.5469 40 30 40C24.4531 40 20 35.5469 20 30C20 24.4531 24.4531 20 30 20Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

BIN
public/images/mockups.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

4
public/images/ring.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="311" height="311" viewBox="0 0 311 311" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="155.5" cy="155.5" r="8.29333" fill="#FFCB7F"/>
<path d="M311 155.5C311 241.38 241.38 311 155.5 311C69.6197 311 0 241.38 0 155.5C0 69.6197 69.6197 0 155.5 0C241.38 0 311 69.6197 311 155.5ZM10.3262 155.5C10.3262 235.677 75.3227 300.674 155.5 300.674C235.677 300.674 300.674 235.677 300.674 155.5C300.674 75.3227 235.677 10.3262 155.5 10.3262C75.3227 10.3262 10.3262 75.3227 10.3262 155.5Z" fill="#FFCB7F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 524 B

3
public/images/star.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 0.0537109L23.502 11.4057L36 13.1322L26.904 21.8742L29.124 34.2927L18 28.3422L6.8745 34.2927L9.096 21.8742L0 13.1322L12.498 11.4057L18 0.0537109Z" fill="#FFCB7F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

10
public/images/vk.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

3
public/images/yt.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.95312 12.0469C6.65625 12.0469 3.95312 14.75 3.95312 18.0469V46.0469C3.95312 49.3438 6.65625 52.0469 9.95312 52.0469H53.9531C57.2344 52.0469 59.9531 49.3438 59.9531 46.0469V18.0469C59.9531 14.75 57.25 12.0469 53.9531 12.0469H9.95312ZM9.95312 16.0469H53.9531C55.0781 16.0469 55.9531 16.9219 55.9531 18.0469V46.0469C55.9531 47.1719 55.0781 48.0469 53.9531 48.0469H9.95312C8.82812 48.0469 7.95312 47.1719 7.95312 46.0469V18.0469C7.95312 16.9219 8.82812 16.0469 9.95312 16.0469ZM24 19.9688V44.0469L44 32L24 19.9688ZM28 27.0313L36.25 32L28 36.9688V27.0313Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

117
styles/Home.module.css
View File

@ -1,116 +1,3 @@
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
.content{
margin-top: 100px;
}

12
styles/globals.css
View File

@ -1,10 +1,4 @@
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
@ -13,4 +7,10 @@ a {
* {
box-sizing: border-box;
scroll-behavior: smooth;
outline: none;
transition: 0.3s;
color: #323232;
font-family: 'Inconsolata', monospace;
}