diff --git a/components/ReclashButton/bgBtnBlue.svg b/components/ReclashButton/bgBtnBlue.svg new file mode 100644 index 0000000..6614724 --- /dev/null +++ b/components/ReclashButton/bgBtnBlue.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/ReclashButton/bgBtnBlueHover.svg b/components/ReclashButton/bgBtnBlueHover.svg new file mode 100644 index 0000000..a66d6ac --- /dev/null +++ b/components/ReclashButton/bgBtnBlueHover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/ReclashButton/bgBtnGreen.svg b/components/ReclashButton/bgBtnGreen.svg new file mode 100644 index 0000000..62b973f --- /dev/null +++ b/components/ReclashButton/bgBtnGreen.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/ReclashButton/bgBtnGreenHover.svg b/components/ReclashButton/bgBtnGreenHover.svg new file mode 100644 index 0000000..d9839a4 --- /dev/null +++ b/components/ReclashButton/bgBtnGreenHover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/ReclashButton/bgBtnRed.svg b/components/ReclashButton/bgBtnRed.svg new file mode 100644 index 0000000..631526b --- /dev/null +++ b/components/ReclashButton/bgBtnRed.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/ReclashButton/bgBtnRedHover.svg b/components/ReclashButton/bgBtnRedHover.svg new file mode 100644 index 0000000..933f198 --- /dev/null +++ b/components/ReclashButton/bgBtnRedHover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/ReclashButton/button.module.css b/components/ReclashButton/button.module.css new file mode 100644 index 0000000..93114bf --- /dev/null +++ b/components/ReclashButton/button.module.css @@ -0,0 +1,48 @@ + + +.reclashBtn{ + width: 330px; + min-height: 60px; + padding:5px 25px; + font-family: 'Londrina Solid', cursive; + font-style: normal; + font-weight: 900; + font-size: 36px; + line-height: 35px; + color: #FCDDCE; + background-repeat: no-repeat; + background-size: 100%; + outline: none; + border: none; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + cursor: pointer; + transition: 0.3s; + -webkit-text-stroke: 0.06em #453831; + user-select: none; + gap:15px; + background-color: transparent; +} + +.green{ + background-image: url(./bgBtnGreen.svg); +} +.green:hover{ + background-image: url(./bgBtnGreenHover.svg); + +} + +.blue{ + background-image: url(./bgBtnBlue.svg); +} +.blue:hover{ + background-image: url(./bgBtnBlueHover.svg); +} +.red{ + background-image: url(./bgBtnRed.svg); +} +.red:hover{ + background-image: url(./bgBtnRedHover.svg); +} diff --git a/components/ReclashButton/index.tsx b/components/ReclashButton/index.tsx new file mode 100644 index 0000000..b62020c --- /dev/null +++ b/components/ReclashButton/index.tsx @@ -0,0 +1,22 @@ +import styles from "./button.module.css" +import React from "react" +import bgGreen from "./bgBtnGreen.svg" +import bgBlue from "./bgBtnBlue.svg" + +interface ReclashButtonIE{ + class?:string + onClick:()=>void + color: "green"|"blue"|"red" + children?:JSX.Element|string|JSX.Element[] +} + +export const ReclashButton:React.FC = (props) =>{ + return( +
props.onClick()} + className={styles.reclashBtn + " "+ styles[props.color] + " " + props.class} + > + {props.children} +
+ ) +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 86b5b3b..2ce7696 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,70 +1,127 @@ import type { NextPage } from 'next' import Head from 'next/head' import Image from 'next/image' +import Link from 'next/link' +import { ReclashButton } from '../components/ReclashButton' import styles from '../styles/Home.module.css' const Home: NextPage = () => { return (
- Create Next App - + CHESS RECLASH +
-

- Welcome to Next.js! -

+
+
+ + Home + About + Team + Demo + Contacts -

- Get started by editing{' '} - pages/index.tsx -

- - + +
+
+ VK + TELEGRAMM + YOUTUBE +
+
+
+ +
Future of play to earn games
+
+

+ We will change
+ Your idea of
+ Chess Game
+

+ null}>EXPLORE MORE +
+ VIEW DEMO +
+
+
+ +
+
+
+ OUR FEATURES +
+
+
+
+ + + +
+
CHESS + TCG + RTS
+
+ We added elements of real-time strategy and NFT-based collectible card game to chess. +
+
+
+
+ + + +
+
PLAY TO ENJOY & EARN
+
+ The game is based on TON, you can bet in battles and win real money. You can also trade your own unique NFT characters.
+
+
+
+ +
+
COMMUNITY
+
+ Our game has a great community and friendly developers. Here you can find your best friends.
+
+
+
+
+
+ DEMO +
+ +
+
+ +
+
OUR TEAM
+
+ Our team has been developing crypto projects for several years now. Chess Reclash is first of all a challenge for us. This is a big and ambitious, and also the most important project for us. +
+
+
+
+
+ +
+
Join our community
to learn even more!
+
+ null}>Telegramm + null}>Twitter +
+
+ +
+
+
+
+ POWERED BY +
+ +
TON
- -
) } diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..6faf50f --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/bg.svg b/public/bg.svg new file mode 100644 index 0000000..08223d1 --- /dev/null +++ b/public/bg.svg @@ -0,0 +1,561 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/card.svg b/public/card.svg new file mode 100644 index 0000000..12a4285 --- /dev/null +++ b/public/card.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/chess.svg b/public/chess.svg new file mode 100644 index 0000000..e459208 --- /dev/null +++ b/public/chess.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/demo.png b/public/demo.png new file mode 100644 index 0000000..9a3d344 Binary files /dev/null and b/public/demo.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 718d6fe..14b49eb 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/fire.svg b/public/fire.svg new file mode 100644 index 0000000..da4e0e2 --- /dev/null +++ b/public/fire.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/hearth.svg b/public/hearth.svg new file mode 100644 index 0000000..a86273c --- /dev/null +++ b/public/hearth.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..3ea42ec --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,551 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mockup.png b/public/mockup.png new file mode 100644 index 0000000..7b49b80 Binary files /dev/null and b/public/mockup.png differ diff --git a/public/nft.svg b/public/nft.svg new file mode 100644 index 0000000..711cde4 --- /dev/null +++ b/public/nft.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/plus.svg b/public/plus.svg new file mode 100644 index 0000000..a980277 --- /dev/null +++ b/public/plus.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/team.svg b/public/team.svg new file mode 100644 index 0000000..3e82ef9 --- /dev/null +++ b/public/team.svg @@ -0,0 +1,553 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/ton.svg b/public/ton.svg new file mode 100644 index 0000000..cc6f68d --- /dev/null +++ b/public/ton.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/styles/Home.module.css b/styles/Home.module.css index bd50f42..7d10003 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,129 +1,353 @@ -.container { - padding: 0 2rem; -} +@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@900&family=Orbitron:wght@400;500;600&display=swap'); -.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 { +.home{ width: 100%; - flex-direction: column; - } + min-height: 100vh; + /* background-color: #D94A4A; */ + background-image: url(/bg.svg); + background-size: cover; + background-repeat: no-repeat; + display: flex; +} +.logo{ + transition: 0.3s; +} +.logo:hover{ + transition: 0.3s; + width: 85px; + cursor: pointer; +} +.mockup{ + transition: 0.3s; + width: 55%; + margin-top: 100px; + margin-left:-2%; + object-fit:contain; + cursor: pointer; +} +.mockup:hover{ + width: 56%; + transition: 0.3s; +} +.blueSide{ + min-height: 100vh; + width: 45%; + border-radius: 0px 13px 13px 0px; + background-color: #5FA8D9; + display: flex; + flex-direction: row; + align-items:center; + padding: 20px; + gap: 30px } -@media (prefers-color-scheme: dark) { - .card, - .footer { - border-color: #222; - } - .code { - background: #111; - } - .logo img { - filter: invert(1); - } +.social{ + width: 25px; + display: flex; + flex-direction: row; + transform: rotate(-90deg); + gap:20px; + justify-content: space-between; + font-family: 'Orbitron', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + text-transform: uppercase; + color: #FFFFFF; + margin-top: 55px; } +.social a{ + -webkit-text-stroke: 0em !important; + +} +.slogan{ + display: flex; + flex-direction: column; + gap: 15px; + gap: 35px; +} +.btn{ + margin-top: 50px; +} +.phrase{ + display: flex; + flex-direction: row; + align-items: center; + gap:10px; + font-family: 'Orbitron', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + color: #FFFFFF; + -webkit-text-stroke: 0em !important; +} +.phrase div{ + padding-top: 10px; +} +.header{ + width: 45%; + position: absolute; + padding: 0px 20px; + padding-right: 40px; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + font-size: 28px; + + color: #FCDDCE; +} +.header a{ + -webkit-text-stroke: 1px #453831 !important; +} + +.phrase2{ + font-size: 3.5em; + line-height: 93% !important; + line-height: 89px; + font-weight: 900 !important; + color: #F5F5F5; + margin: 0px; + text-shadow: + -4px -4px 0 #453831, + 0 -4px 0 #453831, + 4px -4px 0 #453831, + 4px 0 0 #453831, + 4px 4px 0 #453831, + 0 4px 0 #453831, + -4px 4px 0 #453831, + -4px 0 0 #453831; + -webkit-text-stroke: 0em #453831 !important; + font-stretch:ultra-expanded; +} + +.viewDemo a{ + font-family: 'Orbitron', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + color: #FFFFFF; + -webkit-text-stroke: 0em !important; +} +.viewDemo{ + margin-top: -20px; +} + +.about{ + padding: 100px 150px; + background-color: #D94A4A; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap:50px; + padding-bottom: 250px; +} + + +.aboutHeader{ + font-size: 3.5em; + line-height: 93% !important; + line-height: 89px; + font-weight: 900 !important; + color: #FCDDCE; + -webkit-text-stroke: 2px #453831 !important; +} +.cardWrapper{ + display: flex; + flex-direction: row; + gap:50px +} +.card{ + display: flex; + flex-direction: column; + gap:10px; + padding:45px; + background: rgba(255, 255, 255, 0.15); + border-radius: 20px; + max-width: 350px; + cursor: pointer; +} +.card:hover{ + padding:50px; + max-width: 360px; + +} + +.icons{ + display: flex; + flex-direction: row; + gap:10px; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.cardHeader{ + font-size: 30px; + line-height: 35px; + color: #FCDDCE; + -webkit-text-stroke: 1px #453831 !important; +} + +.cardContent{ + font-family: 'Orbitron', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #dfdfdf; + -webkit-text-stroke: 0em !important; +} + +.demo{ + width: 100%; + display: flex; + flex-direction: column; + gap:50px; + align-items: center; + justify-content: center; + padding: 100px 150px; + background-color: #5FA8D9; +} + +.demoGame{ + object-fit:contain; + width: 100%; +} +.team{ + width: 100%; + padding: 0px 100px; + background-color: #453831; + display: flex; + flex-direction: row; + align-items: center; + gap:50px +} + +.teamContent{ + display: flex; + flex-direction: column; + gap:25px; + align-items: center; + justify-content: center; +} + +.teamHeader{ + font-size: 3.5em; + line-height: 93% !important; + line-height: 89px; + letter-spacing: 2px; + font-weight: 900 !important; + color: #FCDDCE; + -webkit-text-stroke: 0px #453831 !important; +} +.teamDescr{ + font-family: 'Orbitron', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 35px; + color: #dfdfdf; + -webkit-text-stroke: 0em !important; +} +.teamImg{ + width: 60%; + max-height: 100vh; +} +.teamImg:hover{ + width: 61%; +} + +.contacts{ + background: #FCDDCE; + padding: 150px 250px; + display: flex; + align-items: center; + justify-content: center; +} +.contactsCard{ + transition: 0.3s; + background-color: #D94A4A; + border-radius: 32px; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap:5px; + padding: 50px; +} + +.contactsHeaderWrapper{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap:50px +} + +.shareButtonsWrapper{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + gap:50px +} +.contactsHeader{ + font-size: 4.5em; + line-height: 93% !important; + line-height: 89px; + font-weight: 900 !important; + color: #FCDDCE; + -webkit-text-stroke: 2px #453831 !important; +} +.shareBtn{ + width: 250px; + min-height: 30px; + height: 45px; + font-size: 30px; + line-height: 30px; + padding-top:5px ; + background-size: cover; +} +.arrow{ + margin-top: 50px; +} +.reversed{ + transform: scale(-1, 1); +} + +.contactsCard:hover .arrow{ + transition: 0.3s; + width: 10%; +} + +.contactsCard:hover .contactsHeader{ + transition: 0.3s; + font-size: 4.55em; +} +.footer{ + width: 100%; + height: 100px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap:5px; + background-color: #453831; +} +.footerText{ + font-size: 2em; + line-height: 93% !important; + line-height: 89px; + letter-spacing: 2px; + font-weight: 900 !important; + color: #FCDDCE; + -webkit-text-stroke: 0px #453831 !important; +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 4f18421..7d3191e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,16 +2,21 @@ 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; -} + font-size: 18px; + font-family: 'Londrina Solid', cursive; + -webkit-text-stroke: 0.06em #453831; +} +@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@900&display=swap'); a { color: inherit; text-decoration: none; + -webkit-text-stroke: 0.06em #453831; + } * { + transition: 0.3s; box-sizing: border-box; } @@ -21,6 +26,5 @@ a { } body { color: white; - background: black; } }