diff --git a/package-lock.json b/package-lock.json index 14a8c30..fe18d9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3719df5..559abb2 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.tsx b/src/App.tsx index 4ade3c8..272780e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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
; + return ( +
+
+ ); }; export default App; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index e69de29..e88aefe 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -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 ( + + ); +}; + +export default Footer; diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index e69de29..d2f4435 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -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 ( + + ); +}; + +export default Nav; diff --git a/src/icons/arrow-down-black.svg b/src/icons/arrow-down-black.svg new file mode 100644 index 0000000..ee690ab --- /dev/null +++ b/src/icons/arrow-down-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg new file mode 100644 index 0000000..8e3f595 --- /dev/null +++ b/src/icons/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/instagram.svg b/src/icons/instagram.svg new file mode 100644 index 0000000..e7d241f --- /dev/null +++ b/src/icons/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg new file mode 100644 index 0000000..a3f1a96 --- /dev/null +++ b/src/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/main_logo.svg b/src/icons/main_logo.svg new file mode 100644 index 0000000..7a257d0 --- /dev/null +++ b/src/icons/main_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/odnoklassniki.svg b/src/icons/odnoklassniki.svg new file mode 100644 index 0000000..1bcf8ae --- /dev/null +++ b/src/icons/odnoklassniki.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/twitter.svg b/src/icons/twitter.svg new file mode 100644 index 0000000..de608b2 --- /dev/null +++ b/src/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/vk.svg b/src/icons/vk.svg new file mode 100644 index 0000000..9e58f38 --- /dev/null +++ b/src/icons/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/youtube.svg b/src/icons/youtube.svg new file mode 100644 index 0000000..7946098 --- /dev/null +++ b/src/icons/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.tsx b/src/index.tsx index 153cce0..bb804e6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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( - + + + ); diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index e69de29..9204983 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -0,0 +1,7 @@ +// Modules + +const Main = () => { + return
; +}; + +export default Main; diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 0000000..086c8af --- /dev/null +++ b/src/styles/_footer.scss @@ -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; + } +} diff --git a/src/styles/_general.scss b/src/styles/_general.scss new file mode 100644 index 0000000..fd519d1 --- /dev/null +++ b/src/styles/_general.scss @@ -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; +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000..0915fd4 --- /dev/null +++ b/src/styles/_nav.scss @@ -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; + } +} diff --git a/src/styles/_nullifier.scss b/src/styles/_nullifier.scss index 53fb9ea..0b074af 100644 --- a/src/styles/_nullifier.scss +++ b/src/styles/_nullifier.scss @@ -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 { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e69de29..eddf184 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -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(); +} diff --git a/src/styles/style.scss b/src/styles/style.scss index b2b0e06..10c150a 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1 +1,5 @@ @import "./nullifier"; +@import "./variables"; +@import "./general"; +@import "./nav"; +@import "./footer"; diff --git a/tsconfig.json b/tsconfig.json index a273b0c..9d379a3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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"] }