footer & nav desktop

This commit is contained in:
VividTruthKeeper 2022-06-23 12:11:01 +05:00
parent 5123354381
commit f566c8f3cc
23 changed files with 472 additions and 11 deletions

58
package-lock.json generated
View File

@ -19,6 +19,7 @@
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"swiper": "^8.2.4",
"typescript": "^4.7.4",
@ -8705,6 +8706,14 @@
"he": "bin/he"
}
},
"node_modules/history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"dependencies": {
"@babel/runtime": "^7.7.6"
}
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -14686,6 +14695,30 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"dependencies": {
"history": "^5.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"dependencies": {
"history": "^5.2.0",
"react-router": "6.3.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -24205,6 +24238,14 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -28388,6 +28429,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"requires": {
"history": "^5.2.0",
"react-router": "6.3.0"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

View File

@ -14,6 +14,7 @@
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"swiper": "^8.2.4",
"typescript": "^4.7.4",

View File

@ -1,8 +1,28 @@
import React from "react";
// Modules
import { Routes, Route } from "react-router-dom";
// Styles
import "./styles/style.scss";
// Components
import Nav from "./components/Nav";
import Footer from "./components/Footer";
// Pages
import Main from "./pages/Main";
const App = () => {
return <div className="App"></div>;
return (
<div className="App">
<Nav />
<div className="inner-body">
<Routes>
<Route path="/" element={<Main />} />
</Routes>
</div>
<Footer />
</div>
);
};
export default App;

View File

@ -0,0 +1,95 @@
// Modules
import { Link } from "react-router-dom";
// Icons
import youtube from "../icons/youtube.svg";
import vk from "../icons/vk.svg";
import twitter from "../icons/twitter.svg";
import classmates from "../icons/odnoklassniki.svg";
import linkedin from "../icons/linkedin.svg";
import instagram from "../icons/instagram.svg";
import facebook from "../icons/facebook.svg";
import { link } from "fs";
const Footer = () => {
return (
<footer className="footer">
<div className="footer-top">
<div className="container">
<div className="footer-top-inner">
<ul>
<li>
<Link to={"/"}>О нас</Link>
</li>
<li>
<Link to={"/"}>События</Link>
</li>
<li>
<Link to={"/"}>Новости</Link>
</li>
<li>
<Link to={"/"}>Рейтинг</Link>
</li>
<li>
<Link to={"/"}>Партнеры</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="container">
<div className="footer-bottom-inner">
<div className="footer-bottom-left">
<p>
Copyright 2012-2022 Шахматная федерация Туркменистана |{" "}
<a href="/">Пользовательское соглашение</a>
</p>
</div>
<div className="footer-bottom-right">
<ul>
<li>
<a href="/">
<img src={youtube} alt="" />
</a>
</li>
<li>
<a href="/">
<img src={vk} alt="" />
</a>
</li>
<li>
<a href="/">
<img src={twitter} alt="" />
</a>
</li>
<li>
<a href="/">
<img src={classmates} alt="" />
</a>
</li>
<li>
<a href="/">
<img src={linkedin} alt="" />
</a>
</li>
<li>
<a href="/">
<img src={instagram} alt="" />
</a>
</li>
<li>
<a href="/">
<img src={facebook} alt="" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
);
};
export default Footer;

View File

@ -0,0 +1,46 @@
// Modules
import { Link } from "react-router-dom";
// Icons
import mainLogo from "../icons/main_logo.svg";
import arrow from "../icons/arrow-down-black.svg";
const Nav = () => {
return (
<nav className="nav">
<div className="container">
<div className="nav-inner">
<div className="nav-logo">
<Link to={"/"}>
<img src={mainLogo} alt="" />
</Link>
</div>
<div className="nav-content">
<ul className="nav-list">
<li className="nav-non-link">
<span>О нас</span>
<div className="arrow">
<img src={arrow} alt="" />
</div>
</li>
<li>
<Link to={"/"}>Новости и события</Link>
</li>
<li>
<Link to={"/"}>Турниры</Link>
</li>
<li>
<Link to={"/"}>Рейтинг</Link>
</li>
<li>
<Link to={"/"}>Контакты</Link>
</li>
</ul>
</div>
</div>
</div>
</nav>
);
};
export default Nav;

View File

@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16639 8.83333C4.16601 8.63862 4.23382 8.44993 4.35806 8.3C4.42801 8.21562 4.51393 8.14587 4.61089 8.09474C4.70784 8.04361 4.81393 8.01212 4.92308 8.00205C5.03223 7.99199 5.14229 8.00356 5.24696 8.0361C5.35163 8.06863 5.44885 8.1215 5.53306 8.19167L9.99972 11.925L14.4747 8.325C14.56 8.25578 14.658 8.20409 14.7633 8.17289C14.8686 8.1417 14.979 8.13162 15.0882 8.14324C15.1974 8.15485 15.3032 8.18794 15.3996 8.24058C15.4959 8.29323 15.581 8.3644 15.6497 8.45C15.7256 8.53622 15.7828 8.6372 15.8178 8.74658C15.8528 8.85597 15.8648 8.9714 15.8531 9.08565C15.8413 9.19989 15.8061 9.31048 15.7496 9.41046C15.6931 9.51045 15.6165 9.59767 15.5247 9.66667L10.5247 13.6917C10.3756 13.8142 10.1886 13.8812 9.99556 13.8812C9.80254 13.8812 9.6155 13.8142 9.46639 13.6917L4.46639 9.525C4.36554 9.4414 4.28582 9.33521 4.2337 9.21503C4.18157 9.09486 4.15851 8.96409 4.16639 8.83333Z" fill="#1C1717"/>
</svg>

After

Width:  |  Height:  |  Size: 1002 B

10
src/icons/facebook.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_83_534)">
<path d="M20.4017 0H3.42882C2.7399 0.000529617 2.07937 0.247656 1.59223 0.687127C1.10509 1.1266 0.831153 1.7225 0.830566 2.344L0.830566 17.656C0.831153 18.2775 1.10509 18.8734 1.59223 19.3129C2.07937 19.7523 2.7399 19.9995 3.42882 20H20.4017C21.0907 19.9995 21.7512 19.7523 22.2383 19.3129C22.7255 18.8734 22.9994 18.2775 23 17.656V2.344C22.9994 1.7225 22.7255 1.1266 22.2383 0.687127C21.7512 0.247656 21.0907 0.000529617 20.4017 0V0ZM21.2675 17.656C21.2672 17.8631 21.1759 18.0616 21.0136 18.208C20.8513 18.3544 20.6313 18.4367 20.4017 18.437H15.4624V12.07H18.1382L18.5816 9.648H15.4624V7.969C15.4598 7.81434 15.4918 7.66079 15.5564 7.51752C15.6211 7.37425 15.717 7.24419 15.8386 7.1351C15.9601 7.026 16.1048 6.94011 16.2639 6.88254C16.4231 6.82497 16.5934 6.79689 16.7648 6.8H18.5384V4.375H16.7648C16.2412 4.375 15.7226 4.46817 15.2389 4.64917C14.7552 4.83017 14.3158 5.09546 13.9459 5.42984C13.5759 5.76422 13.2827 6.16114 13.083 6.59787C12.8834 7.0346 12.7811 7.50257 12.7821 7.975V9.648H10.1839V12.07H12.7832V18.437H3.42882C3.19931 18.4367 2.97928 18.3544 2.81699 18.208C2.6547 18.0616 2.5634 17.8631 2.56311 17.656V2.344C2.5634 2.13695 2.6547 1.93845 2.81699 1.79204C2.97928 1.64563 3.19931 1.56326 3.42882 1.563H20.4017C20.6313 1.56326 20.8513 1.64563 21.0136 1.79204C21.1759 1.93845 21.2672 2.13695 21.2675 2.344V17.656Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_83_534">
<rect width="22.1694" height="20" fill="white" transform="translate(0.830566)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

12
src/icons/instagram.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_83_537)">
<path d="M22.6068 5.88C22.5889 5.0508 22.4146 4.23042 22.0914 3.454C21.8057 2.78918 21.3694 2.18546 20.8104 1.68145C20.2513 1.17744 19.5818 0.784243 18.8447 0.527C17.9835 0.236089 17.0738 0.0791928 16.1544 0.063C14.9672 0.012 14.5904 0 11.5797 0C8.56913 0 8.19669 0.012 7.01062 0.059C6.09 0.0748634 5.17911 0.232113 4.31704 0.524C3.57688 0.775272 2.90679 1.16987 2.35393 1.68C1.79099 2.17964 1.35493 2.78354 1.07586 3.45C0.75308 4.22652 0.578789 5.04684 0.560424 5.876C0.503892 6.947 0.491699 7.287 0.491699 10C0.491699 12.713 0.505001 13.055 0.557099 14.122C0.574429 14.9518 0.748361 15.7729 1.07143 16.55C1.3569 17.2148 1.79301 17.8184 2.35188 18.3225C2.91075 18.8265 3.58008 19.2197 4.31704 19.477C5.17816 19.7682 6.08784 19.9254 7.0073 19.942C8.19004 19.989 8.56692 20.001 11.5775 20.001C14.5881 20.001 14.965 19.989 16.1478 19.942C17.0673 19.9259 17.977 19.7686 18.838 19.477C19.5749 19.2201 20.2442 18.8271 20.8029 18.3232C21.3616 17.8193 21.7975 17.2157 22.0825 16.551C22.4052 15.7745 22.5795 14.9541 22.598 14.125C22.6501 13.058 22.6634 12.718 22.6634 10.003C22.6634 7.288 22.6634 6.948 22.6068 5.881V5.88ZM20.6116 14.046C20.6044 14.6799 20.4754 15.3079 20.2303 15.902C20.0455 16.3337 19.7627 16.7257 19.3999 17.0529C19.0372 17.3802 18.6027 17.6353 18.1242 17.802C17.4655 18.0228 16.7695 18.1391 16.0668 18.146C14.8974 18.193 14.546 18.205 11.5875 18.205C8.62899 18.205 8.27428 18.193 7.10817 18.146C6.40463 18.1391 5.70775 18.022 5.04863 17.8C4.56735 17.6408 4.13203 17.3858 3.77499 17.054C3.40808 16.7312 3.12559 16.3387 2.94807 15.905C2.70336 15.3108 2.57435 14.6829 2.56676 14.049C2.51466 12.994 2.50136 12.678 2.50136 10.009C2.50136 7.34 2.51466 7.02 2.56676 5.969C2.57386 5.33509 2.70288 4.7071 2.94807 4.113C3.12451 3.67785 3.40887 3.28484 3.77943 2.964C4.13711 2.63289 4.57225 2.37802 5.05306 2.218C5.71185 1.99771 6.40784 1.88167 7.11038 1.875C8.27982 1.828 8.63121 1.816 11.5897 1.816C14.5482 1.816 14.9029 1.828 16.0691 1.875C16.7717 1.88153 17.4678 1.99792 18.1264 2.219C18.6077 2.37813 19.043 2.63312 19.4 2.965C19.7669 3.28777 20.0494 3.6803 20.2269 4.114C20.4728 4.70804 20.6029 5.33596 20.6116 5.97C20.6637 7.025 20.677 7.341 20.677 10.01C20.677 12.679 20.6637 12.991 20.6116 14.046Z" fill="white"/>
<path d="M11.5809 4.86377C10.4545 4.86417 9.35362 5.16584 8.41732 5.73065C7.48102 6.29546 6.75138 7.09804 6.32065 8.03693C5.88993 8.97581 5.77746 10.0088 5.99746 11.0054C6.21747 12.0019 6.76007 12.9172 7.55667 13.6356C8.35326 14.354 9.36807 14.8431 10.4728 15.0412C11.5775 15.2393 12.7226 15.1374 13.7631 14.7485C14.8037 14.3595 15.693 13.701 16.3187 12.8561C16.9445 12.0112 17.2784 11.0179 17.2784 10.0018C17.2778 8.6389 16.6773 7.33203 15.6089 6.36853C14.5404 5.40503 13.0916 4.86377 11.5809 4.86377ZM11.5809 13.3338C10.8502 13.3336 10.136 13.1379 9.5286 12.7716C8.92119 12.4052 8.44781 11.8846 8.16835 11.2756C7.88889 10.6665 7.81589 9.99639 7.95857 9.34991C8.10125 8.70344 8.4532 8.10966 8.96994 7.64363C9.48667 7.1776 10.145 6.86027 10.8616 6.73174C11.5782 6.60322 12.321 6.66928 12.9961 6.92158C13.6711 7.17387 14.248 7.60107 14.654 8.14915C15.0599 8.69724 15.2765 9.3416 15.2765 10.0008C15.2762 10.8848 14.8867 11.7326 14.1937 12.3576C13.5007 12.9826 12.5608 13.3338 11.5809 13.3338Z" fill="white"/>
<path d="M18.8325 4.65997C18.8325 4.8973 18.7545 5.12931 18.6083 5.32664C18.4622 5.52398 18.2544 5.67779 18.0114 5.76862C17.7683 5.85944 17.5008 5.88321 17.2428 5.83691C16.9848 5.7906 16.7478 5.67631 16.5618 5.50849C16.3757 5.34067 16.249 5.12685 16.1977 4.89407C16.1464 4.6613 16.1727 4.42002 16.2734 4.20074C16.3741 3.98147 16.5446 3.79406 16.7633 3.6622C16.9821 3.53034 17.2392 3.45996 17.5023 3.45996C17.8551 3.45996 18.1934 3.58639 18.4429 3.81143C18.6923 4.03648 18.8325 4.34171 18.8325 4.65997Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_83_537">
<rect width="22.1694" height="20" fill="white" transform="translate(0.491699)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

3
src/icons/linkedin.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.08187 16.523H4.0502V7.7H7.08187V16.523ZM7.38338 4.883C7.38338 4.56655 7.27936 4.25721 7.08448 3.99409C6.8896 3.73097 6.61261 3.52589 6.28853 3.40479C5.96446 3.28369 5.60786 3.25201 5.26382 3.31374C4.91978 3.37548 4.60377 3.52787 4.35573 3.75163C4.10769 3.97539 3.93878 4.26049 3.87035 4.57086C3.80191 4.88123 3.83704 5.20293 3.97127 5.49529C4.10551 5.78766 4.33283 6.03754 4.62449 6.21335C4.91615 6.38916 5.25905 6.483 5.60982 6.483C6.0802 6.483 6.53131 6.31443 6.86392 6.01437C7.19652 5.71431 7.38338 5.30735 7.38338 4.883ZM18.4249 11.667C18.4249 9.297 17.8706 7.539 14.8013 7.539C14.2314 7.50981 13.6634 7.62106 13.1583 7.86081C12.6531 8.10056 12.2298 8.45979 11.9337 8.9V7.7H8.98623V16.528H11.9303V12.14C11.9303 10.992 12.254 9.88 13.8314 9.88C15.3832 9.88 15.4375 11.193 15.4375 12.213V16.523H18.4304L18.4249 11.667ZM22.3223 17.656V2.344C22.3217 1.72267 22.0479 1.12692 21.561 0.68748C21.0741 0.248038 20.4138 0.000794317 19.7251 0L2.75108 0C2.06215 0.000529617 1.40162 0.247656 0.914477 0.687127C0.427337 1.1266 0.153404 1.7225 0.152817 2.344L0.152817 17.656C0.153404 18.2775 0.427337 18.8734 0.914477 19.3129C1.40162 19.7523 2.06215 19.9995 2.75108 20H19.7251C20.4138 19.9992 21.0741 19.752 21.561 19.3125C22.0479 18.8731 22.3217 18.2773 22.3223 17.656ZM19.7251 1.563C19.9546 1.56326 20.1746 1.64563 20.3369 1.79204C20.4992 1.93845 20.5905 2.13695 20.5908 2.344V17.656C20.5905 17.8631 20.4992 18.0616 20.3369 18.208C20.1746 18.3544 19.9546 18.4367 19.7251 18.437H2.75108C2.52156 18.4367 2.30153 18.3544 2.13924 18.208C1.97696 18.0616 1.88565 17.8631 1.88536 17.656V2.344C1.88565 2.13695 1.97696 1.93845 2.13924 1.79204C2.30153 1.64563 2.52156 1.56326 2.75108 1.563H19.7251Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

9
src/icons/main_logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 528 KiB

View File

@ -0,0 +1,4 @@
<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.786009 10.7348C0.19741 11.7348 0.865819 12.2188 2.39108 13.0348C3.71052 13.6415 5.15315 13.9995 6.63098 14.0868L2.09511 17.8738C0.774924 18.9738 2.89986 20.7318 4.21895 19.6578L7.79044 16.6698C9.15719 17.8108 10.4685 18.9038 11.3619 19.6618C12.6821 20.7398 14.806 18.9938 13.5002 17.8778C13.4026 17.7968 8.66059 13.8518 8.9499 14.0938C10.4181 14.0027 11.8508 13.6453 13.1621 13.0428C14.6874 12.2188 15.3569 11.7428 14.776 10.7348C14.4258 10.1648 13.4802 9.68775 12.2265 10.5118C10.8995 11.2752 9.35193 11.668 7.77825 11.6408C6.2094 11.6658 4.66717 11.2731 3.34436 10.5118C2.08625 9.68375 1.13739 10.1648 0.794877 10.7348H0.786009Z" fill="white"/>
<path d="M7.78164 10.118C9.33378 10.1745 10.8477 9.6749 11.9931 8.72829C13.1386 7.78167 13.8226 6.46481 13.896 5.06498C13.8257 3.66312 13.1431 2.34337 11.9973 1.39424C10.8516 0.445119 9.3359 -0.0561637 7.78164 -1.70958e-05C6.2267 -0.0569822 4.71003 0.443905 3.56337 1.39309C2.41671 2.34227 1.73339 3.66249 1.66287 5.06498C1.73623 6.46553 2.42086 7.78301 3.56727 8.72974C4.71368 9.67647 6.22874 10.1755 7.78164 10.118ZM7.78164 2.56498C8.5469 2.53871 9.29253 2.78703 9.85532 3.25557C10.4181 3.72411 10.7522 4.37472 10.7845 5.06498C10.7491 5.75321 10.4136 6.40092 9.85111 6.86696C9.28863 7.333 8.54477 7.57958 7.78164 7.55298C7.01794 7.58039 6.27323 7.33417 5.71003 6.86805C5.14682 6.40193 4.81086 5.75375 4.77546 5.06498C4.80746 4.37463 5.14147 3.72387 5.70432 3.25527C6.26718 2.78667 7.01297 2.53845 7.77831 2.56498H7.78164Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

3
src/icons/twitter.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.4038 2.67097C25.73 2.74197 25.7666 2.73597 25.5781 2.75097L26.5691 0.150972C26.5691 0.150972 23.4754 1.19597 22.6895 1.38297C21.6991 0.5926 20.4517 0.112835 19.1339 0.0154904C17.8161 -0.0818541 16.4987 0.208458 15.3791 0.842972C14.4879 1.32749 13.7788 2.04258 13.3439 2.89536C12.909 3.74814 12.7685 4.69919 12.9405 5.62497C9.4866 5.196 6.35243 3.57359 4.19905 1.09997L3.46081 0.291972L2.91211 1.21697C2.22384 2.36707 1.99638 3.69615 2.26809 4.97997C2.37979 5.49168 2.57203 5.98635 2.83896 6.44897L2.20934 6.22497L2.13064 7.19097C2.08696 8.27711 2.4198 9.34851 3.08282 10.256C3.29865 10.5574 3.54706 10.8388 3.82439 11.096L3.4985 11.05L3.9042 12.157C4.14062 12.847 4.52931 13.4867 5.04688 14.0376C5.56445 14.5886 6.20021 15.0394 6.91592 15.363C5.51148 15.911 4.37641 16.263 2.51085 16.823L0.800476 17.339L2.37672 18.131C3.88013 18.8943 5.50789 19.4384 7.19968 19.743C11.8641 20.415 17.115 19.868 20.651 16.943C23.6283 14.48 24.606 10.976 24.4032 7.32897C24.3647 6.80135 24.5283 6.27783 24.8665 5.84597C25.5316 5.03597 27.4005 2.67697 27.4049 2.67097H27.4038ZM23.6195 4.98797C23.0614 5.68845 22.7874 6.54081 22.8435 7.40197C23.0486 11.08 21.9568 13.932 19.6046 15.88C16.8545 18.155 12.4195 19.047 7.4369 18.33C6.54052 18.1834 5.66575 17.9445 4.82977 17.618C6.44539 17.1133 8.02436 16.5178 9.5574 15.835L12.2798 14.651L9.27363 14.474C8.59552 14.445 7.93504 14.2695 7.34783 13.9622C6.76062 13.6548 6.26388 13.2247 5.89945 12.708C6.28671 12.6876 6.67032 12.6289 7.04339 12.533L9.90768 11.8L7.01679 11.15C5.9326 10.9176 4.99028 10.3155 4.38749 9.46997C4.13232 9.11396 3.9401 8.7243 3.81774 8.31497C4.20264 8.40179 4.59493 8.45932 4.9905 8.48697L7.66635 8.72997L5.54584 7.20997C4.82394 6.72022 4.27833 6.04913 3.97743 5.28082C3.67652 4.5125 3.63369 3.68115 3.85432 2.89097C5.26404 4.23276 6.95726 5.30635 8.83417 6.04846C10.7111 6.79058 12.7337 7.18619 14.7827 7.21197C14.7613 6.80508 14.708 6.40006 14.6231 5.99997C14.3431 5.28097 14.3467 4.49681 14.6332 3.77991C14.9198 3.063 15.4718 2.45727 16.196 2.06497C17.0383 1.58876 18.0291 1.37205 19.0196 1.44743C20.01 1.52281 20.9466 1.8862 21.6885 2.48297C21.8558 2.62793 22.061 2.73244 22.285 2.7868C22.509 2.84117 22.7446 2.84363 22.9699 2.79397C23.3263 2.71247 23.6778 2.61434 24.023 2.49997L23.3512 4.26297H24.2092L23.6195 4.98797Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

3
src/icons/vk.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="36" height="20" viewBox="0 0 36 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.1094 20.0002C23.2406 20.0002 21.4116 17.0692 21.8073 16.2272C21.8018 15.5982 21.7951 14.9922 21.8195 14.6272C22.8466 15.0544 23.7596 15.6762 24.4965 16.4502C26.9429 18.6772 27.568 20.0032 29.5433 20.0032H33.1802C33.5679 20.0311 33.9573 19.9735 34.3149 19.8356C34.6725 19.6976 34.9876 19.4834 35.2331 19.2112C35.4463 18.935 35.5816 18.6161 35.6274 18.282C35.6731 17.948 35.628 17.6089 35.4958 17.2942C34.6844 14.9942 29.9535 11.0262 29.6575 10.6072C29.7018 10.5302 29.7683 10.4272 29.8094 10.3742C30.7438 9.2612 34.3086 4.4422 34.833 2.5142C34.8339 2.51058 34.8339 2.50683 34.833 2.5032C34.9543 2.21186 34.9954 1.8983 34.9527 1.58946C34.91 1.28063 34.7849 0.985759 34.588 0.730205C34.3565 0.478591 34.0614 0.280912 33.7274 0.153857C33.3934 0.0268018 33.0305 -0.0258987 32.6692 0.000205081H29.0323C28.4708 -0.0190858 27.9167 0.121476 27.4486 0.401988C26.9805 0.682499 26.6221 1.08875 26.4241 1.56321C25.6426 3.35621 23.4456 7.04421 21.7995 8.35021C21.7497 6.50121 21.7829 5.0892 21.8095 4.0392C21.8627 1.9922 22.0312 0.000205081 19.6801 0.000205081H13.9626C12.4873 0.000205081 11.0806 1.4532 12.6048 3.1792C13.9405 4.69121 13.0847 5.5342 13.3729 9.7282C11.3555 7.40469 9.81928 4.77185 8.83818 1.9562C8.72141 1.39551 8.38705 0.890672 7.89506 0.532225C7.40307 0.173779 6.78563 -0.0148351 6.15346 0.000205081H2.51546C2.21387 -0.037027 1.90689 -0.0139761 1.61628 0.0677247C1.32566 0.149426 1.05852 0.287778 0.833763 0.472981C0.609009 0.658183 0.432148 0.885706 0.315706 1.13943C0.199264 1.39316 0.146091 1.66688 0.159953 1.94121C0.159953 4.6692 6.85402 20.0002 18.1094 20.0002ZM6.15346 2.00021C6.47381 2.00021 6.50706 2.00021 6.74428 2.60921C8.19083 6.45321 11.4364 12.1412 13.8075 12.1412C15.5888 12.1412 15.5888 10.4942 15.5888 9.8742V4.9402C15.5742 3.86639 15.1538 2.82923 14.3972 2.00021L19.5815 2.00521C19.5815 2.02821 19.5516 7.4652 19.5959 8.7822C19.5959 10.6532 21.242 11.7252 23.8081 9.38221C25.7322 7.24541 27.303 4.86838 28.4714 2.3252C28.5823 2.0852 28.6787 2.00421 29.0257 2.00421H32.6781C32.6781 2.00421 32.6781 2.0122 32.6781 2.0162C32.3455 3.4162 29.0634 7.8772 27.9649 9.2632C27.9471 9.2842 27.9305 9.30721 27.915 9.3302C27.5774 9.69924 27.3984 10.1656 27.4106 10.6439C27.4228 11.1222 27.6255 11.5806 27.9815 11.9352C28.0668 12.0282 28.2908 12.2472 28.6155 12.5512C29.6265 13.4922 33.0938 16.7112 33.4008 17.9912C33.1968 18.0202 32.9752 17.9992 29.5389 18.0062C28.8073 18.0062 28.2353 17.0192 26.0527 15.0332C24.0941 13.3052 22.8204 12.6002 21.6643 12.6002C19.4119 12.6002 19.5759 14.2492 19.597 16.2442C19.6048 18.4072 19.5892 17.7232 19.6059 17.8592C19.1212 17.9815 18.6171 18.0288 18.115 17.9992C8.73177 18.0002 2.62519 4.57221 2.3902 2.00521C2.47112 1.99821 3.59067 2.00521 6.15346 2.00521V2.00021Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

4
src/icons/youtube.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="29" height="20" viewBox="0 0 29 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.0708 8.81809L12.604 5.62609C12.4232 5.53661 12.2196 5.49118 12.0133 5.49429C11.8071 5.4974 11.6053 5.54892 11.4279 5.6438C11.2504 5.73868 11.1034 5.87363 11.0014 6.03536C10.8994 6.19708 10.8458 6.38 10.846 6.56609V12.8951C10.8454 13.0806 10.8984 13.2631 10.9996 13.4246C11.1009 13.5861 11.2469 13.7211 11.4234 13.8163C11.6 13.9115 11.8009 13.9637 12.0065 13.9677C12.2121 13.9717 12.4154 13.9274 12.5963 13.8391L19.0631 10.7021C19.2517 10.6109 19.4094 10.4754 19.5197 10.3099C19.6299 10.1445 19.6885 9.95521 19.6893 9.76217C19.6901 9.56914 19.633 9.3795 19.5242 9.21331C19.4153 9.04712 19.2587 8.91057 19.0708 8.81809ZM12.5619 12.0991V7.37009L17.3948 9.75609L12.5619 12.0991Z" fill="white"/>
<path d="M28.7788 4.72V4.708C28.6719 3.60118 28.2319 2.54173 27.5063 1.644C26.6983 0.858382 25.5879 0.381143 24.4026 0.31L24.2574 0.294H24.2075C20.3977 0.035 14.6436 0 14.5815 0H14.5716C14.5139 0 8.75984 0.035 4.91566 0.289H4.86467L4.73387 0.309C3.54438 0.384107 2.43526 0.877934 1.64567 1.684C0.948061 2.57366 0.514208 3.60947 0.385333 4.693V4.72C0.374249 4.809 0.171398 6.914 0.171398 9.028V11C0.171398 13.114 0.374249 15.219 0.383116 15.308V15.321C0.492054 16.4151 0.929719 17.4616 1.64899 18.348C2.49332 19.1429 3.64442 19.6142 4.86356 19.664C4.98106 19.676 5.08525 19.687 5.15065 19.698L5.21716 19.706C7.41748 19.898 14.3144 19.992 14.607 19.996H14.6248C14.6824 19.996 20.4365 19.961 24.2463 19.707H24.2962L24.458 19.69C25.0412 19.6593 25.6118 19.5249 26.1373 19.2946C26.6627 19.0643 27.1324 18.7426 27.5196 18.348C28.2139 17.4572 28.6443 16.4211 28.77 15.338V15.311C28.7866 15.223 28.9917 13.118 28.9917 11V9.028C28.9917 6.914 28.7877 4.809 28.7799 4.72H28.7788ZM27.3012 11C27.3012 12.956 27.115 14.971 27.0973 15.156C27.0086 15.9188 26.7252 16.6527 26.2693 17.3C26.0192 17.5574 25.7129 17.7655 25.3696 17.9112C25.0262 18.057 24.6533 18.1372 24.274 18.147L24.0944 18.166C20.4088 18.41 14.872 18.448 14.617 18.449C14.331 18.449 7.53498 18.349 5.40117 18.168C5.29032 18.152 5.17393 18.139 5.04978 18.126C4.23899 18.1131 3.46536 17.817 2.89159 17.3L2.87607 17.285C2.41086 16.651 2.13132 15.9209 2.06356 15.163C2.05026 15.023 1.85849 12.985 1.85849 11.001V9.028C1.85849 7.074 2.04472 5.061 2.06245 4.872C2.147 4.10839 2.43074 3.37368 2.89048 2.728C3.14679 2.46528 3.45904 2.25173 3.80865 2.10004C4.15827 1.94835 4.53812 1.86162 4.92563 1.845L5.06308 1.83C8.80196 1.585 14.3742 1.548 14.5782 1.547C14.7822 1.546 20.3533 1.585 24.059 1.83L24.2075 1.846C24.9951 1.87589 25.7381 2.18408 26.2759 2.704L26.2826 2.711C26.7499 3.35554 27.0294 4.09608 27.0951 4.864C27.1084 4.996 27.3001 7.039 27.3001 9.027L27.3012 11Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -1,12 +1,15 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

View File

@ -0,0 +1,7 @@
// Modules
const Main = () => {
return <section className="main"></section>;
};
export default Main;

55
src/styles/_footer.scss Normal file
View File

@ -0,0 +1,55 @@
.footer {
background: $base-green;
min-height: 20vh;
}
.footer-top {
display: flex;
align-items: center;
justify-content: center;
border-bottom: 0.1rem solid #fff;
ul {
display: flex;
gap: 8rem;
align-items: center;
}
a {
font-size: 1.8rem;
color: #fff;
}
}
.footer-top-inner {
padding: 4rem 0;
}
.footer-bottom-inner {
width: 100%;
display: grid;
align-items: center;
grid-template-columns: 2fr 1fr;
padding: 4rem 0;
}
.footer-bottom-left {
justify-self: flex-start;
p,
a {
color: #fff;
}
font-size: 1.4rem;
}
.footer-bottom-right {
justify-self: flex-end;
ul {
display: flex;
align-items: center;
gap: 2rem;
}
a {
display: block;
}
}

15
src/styles/_general.scss Normal file
View File

@ -0,0 +1,15 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@100;400&display=swap");
* {
font-family: "Open Sans", sans-serif;
}
.container {
padding: 0 5rem;
max-width: 150rem;
margin: 0 auto;
}
.inner-body {
min-height: 68vh;
}

68
src/styles/_nav.scss Normal file
View File

@ -0,0 +1,68 @@
.nav {
border-bottom: 0.1rem solid $base-green;
min-height: 12vh;
}
.nav-inner {
padding: 0.7rem 0;
display: grid;
gap: 3rem;
grid-template-columns: 0.3fr 1fr;
}
.nav-content {
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
.nav-list {
display: flex;
align-items: center;
justify-self: flex-end;
gap: 9.6rem;
span,
a {
font-size: 1.8rem;
}
li {
position: relative;
&:not(:last-child) {
&::after {
position: absolute;
top: 0;
right: -4.8rem;
width: 0.1rem;
height: 2.5rem;
content: "";
background: $base-green;
}
}
}
}
.nav-logo a {
width: 10rem;
height: 10rem;
display: flex;
img {
width: 10rem;
height: 10rem;
}
}
.nav-non-link {
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
.arrow {
width: 2rem;
height: 2rem;
@include arrow-start;
}
}

View File

@ -6,6 +6,19 @@
html {
font-size: 62.5%;
min-height: 100vh;
}
body {
min-height: 100vh;
}
#root {
min-height: 100vh;
}
.App {
min-height: 100vh;
}
ul {

View File

@ -0,0 +1,31 @@
// Colors
$base-green: #01815e;
$base-black: #1c1717;
// Flex
@mixin flex-c {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-spb {
display: flex;
align-items: center;
justify-content: space-between;
}
// Other
@mixin transition-std {
transition: 0.3s all ease;
}
@mixin arrow-start {
transform: rotateX(0deg);
@include transition-std();
}
@mixin arrow-end {
transform: rotateX(180deg);
@include transition-std();
}

View File

@ -1 +1,5 @@
@import "./nullifier";
@import "./variables";
@import "./general";
@import "./nav";
@import "./footer";

View File

@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@ -20,7 +16,5 @@
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
"include": ["src"]
}