header and footer were refactored

mate-academy · Aug 11, 2023 · f832a81 · f832a81
1 parent 5e54e0c
commit f832a81
Show file tree

Hide file tree

Showing 15 changed files with 413 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "react-dom": "^17.0.2",
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2",
-    "react-scripts": "^4.0.3"
+    "react-scripts": "^4.0.3",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.4",
@@ -26,6 +27,7 @@
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
+    "@types/react-transition-group": "^4.4.6",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,11 +2,14 @@ import React from 'react';
 import { Outlet as Main } from 'react-router-dom';
 
 import { Header } from './components/Header/Header';
+import { Footer } from './components/Footer/Footer';
+
 import './App.scss';
 
 export const App: React.FC = () => (
   <div className="app">
     <Header />
     <Main />
+    <Footer />
   </div>
 );
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -0,0 +1,156 @@
+@import "../../styles/utils.scss";
+
+.footer {
+  padding-bottom: 60px;
+
+  &__content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, min-content);
+
+    align-items: center;
+    justify-items: center;
+
+    @include onTablet {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(2, min-content);
+    }
+  }
+
+  &__nav {
+    grid-column: 1/3;
+    width: 100%;
+
+    list-style: none;
+
+    @include onTablet {
+      grid-column: 2/4;
+    }
+  }
+
+  &__nav-list {
+    list-style: none;
+
+    @include onDesktop {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(2, min-content);
+    }
+  }
+
+  &__nav-list-item {
+    display: flex;
+    justify-content: center;
+
+    &:first-child {
+
+      @include onDesktop {
+        grid-column: 1/5;
+      }
+    }
+
+    &:nth-child(2) {
+      margin-top: 32px;
+    }
+
+    &:nth-last-child(-n + 3) {
+      margin-top: 24px;
+    }
+
+    &:not(:first-child) {
+
+      @include onDesktop {
+        margin-top: 24px;
+      }
+    }
+  }
+
+  &__nav-list-link {
+    @include NavLink;
+  }
+
+  &__info {
+    grid-column: 1/3;
+    grid-row: 2/2;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-top: 60px;
+    width: 100%;
+  }
+
+  &__lang-button {
+    grid-column: 1/2;
+
+    position: relative;
+    margin-top: 60px;
+
+    font-size: 18px;
+    font-weight: 400;
+
+    &::after {
+      @include selectAfter;
+
+      right: -24px;
+    }
+
+    &:hover {
+
+      &::after {
+        @include selectAfterHover;
+      }
+    }
+
+    @include onTablet {
+      grid-row: 1/1;
+      margin-top: 0;
+    }
+  }
+
+  &__social-list {
+    grid-column: 2/3;
+    grid-row: 2/2;
+
+    margin-top: 60px;
+
+    display: flex;
+    gap: 16px;
+
+    list-style: none;
+
+    @include onTablet {
+      grid-column: 4/4;
+      grid-row: 1/1;
+
+      margin-top: 0;
+    }
+  }
+
+  &__copyright {
+    grid-column: 1/3;
+    grid-row: 3/3;
+
+    margin-top: 60px;
+
+    text-align: center;
+
+    @include onTablet {
+      grid-column: 1/5;
+    }
+  }
+
+  &__copyright-link {
+    text-decoration: none;
+    color: $red-600;
+
+    transition: color $animationDuration;
+
+    @include onDesktop {
+      &:hover {
+        color: $red-700;
+      }
+    }
+  }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -0,0 +1,158 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { NavLink, Link } from 'react-router-dom';
+
+import { makeUrl } from '../../helpers/makeUrl';
+import { FOOTER_NAV_LINKS } from '../../helpers/NavLinks';
+
+import { Logo } from '../Logo/Logo';
+
+import './Footer.scss';
+
+export const Footer: React.FC = React.memo(() => {
+  return (
+    <footer className="footer page__section">
+      <div className="container">
+        <div className="footer__content">
+          <nav className="footer__nav">
+            <ul className="footer__nav-list">
+              <li className="footer__nav-list-item">
+                <Logo
+                  className="footer__nav-list-link"
+                />
+              </li>
+
+              {FOOTER_NAV_LINKS.map(link => (
+                <li
+                  key={link}
+                  className="footer__nav-list-item"
+                >
+                  <NavLink
+                    className="footer__nav-list-link"
+                    to={makeUrl(link)}
+                  >
+                    {link}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <button
+            className="footer__lang-button"
+            type="button"
+          >
+            English
+          </button>
+
+          <ul className="footer__social-list">
+            <li className="footer__social-list-item">
+              <Link
+                to="https://www.instagram.com/"
+                target="_blank"
+              >
+                <svg
+                  className="icon"
+                  width="40"
+                  height="40"
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M39.8884 11.7534C39.7924 9.6237 39.4483 8.16653 38.9602 6.89352C38.4481 5.58047 37.768 4.45957 36.6557 3.35468C35.5435 2.2498 34.4313 1.55324 33.119 1.04884C31.8468 0.552442 30.3905 0.216173 28.2621 0.120096C26.1256 0.0240192 25.4455 0 20.0204 0C14.5873 0 13.9072 0.0240192 11.7788 0.120096C9.65034 0.216173 8.19405 0.560448 6.92179 1.04884C5.60153 1.56125 4.48131 2.24179 3.37708 3.35468C2.27286 4.46757 1.57672 5.58047 1.07262 6.89352C0.584526 8.16653 0.240457 9.6237 0.144438 11.7534C0.0484189 13.8911 0.0244141 14.5717 0.0244141 20C0.0244141 25.4364 0.0484189 26.1169 0.144438 28.2466C0.240457 30.3763 0.584526 31.8335 1.07262 33.1065C1.58473 34.4195 2.26486 35.5404 3.37708 36.6453C4.48131 37.7582 5.60153 38.4468 6.91379 38.9512C8.18605 39.4476 9.64234 39.7838 11.7708 39.8799C13.9072 39.976 14.5873 40 20.0124 40C25.4455 40 26.1256 39.976 28.2541 39.8799C30.3825 39.7838 31.8388 39.4396 33.111 38.9512C34.4233 38.4388 35.5435 37.7582 36.6477 36.6453C37.752 35.5324 38.4481 34.4195 38.9522 33.1065C39.4483 31.8335 39.7844 30.3763 39.8804 28.2466C39.9764 26.1089 40.0004 25.4283 40.0004 20C40.0004 14.5717 39.9844 13.8831 39.8884 11.7534ZM36.2957 28.0865C36.2077 30.04 35.8796 31.1049 35.6075 31.8014C35.2475 32.7302 34.8074 33.4027 34.1032 34.1073C33.3991 34.8119 32.735 35.2362 31.7988 35.6125C31.0946 35.8847 30.0304 36.213 28.086 36.301C25.9816 36.3971 25.3495 36.4211 20.0044 36.4211C14.6593 36.4211 14.0272 36.3971 11.9228 36.301C9.9704 36.213 8.90619 35.8847 8.21005 35.6125C7.28187 35.2522 6.60973 34.8119 5.90559 34.1073C5.20145 33.4027 4.77737 32.7382 4.40129 31.8014C4.12924 31.0969 3.80117 30.032 3.71315 28.0865C3.61713 25.9808 3.59313 25.3483 3.59313 20C3.59313 14.6517 3.61713 14.0192 3.71315 11.9135C3.80117 9.95997 4.12924 8.89512 4.40129 8.19856C4.76136 7.26982 5.20145 6.59728 5.90559 5.89271C6.60973 5.18815 7.27386 4.76381 8.21005 4.38751C8.91419 4.11529 9.9784 3.78703 11.9228 3.69896C14.0272 3.60288 14.6593 3.57886 20.0044 3.57886C25.3495 3.57886 25.9816 3.60288 28.086 3.69896C30.0384 3.78703 31.1026 4.11529 31.7988 4.38751C32.727 4.7478 33.3991 5.18815 34.1032 5.89271C34.8074 6.59728 35.2315 7.26181 35.6075 8.19856C35.8796 8.90312 36.2077 9.96798 36.2957 11.9135C36.3917 14.0192 36.4157 14.6517 36.4157 20C36.4157 25.3483 36.3837 25.9808 36.2957 28.0865Z"
+                  />
+
+                  <path
+                    d="M20.0045 9.71973C14.3234 9.71973 9.73047 14.3234 9.73047 20C9.73047 25.6845 14.3314 30.2802 20.0045 30.2802C25.6777 30.2802 30.2786 25.6685 30.2786 20C30.2786 14.3154 25.6857 9.71973 20.0045 9.71973ZM20.0045 26.6693C16.3238 26.6693 13.3392 23.6829 13.3392 20C13.3392 16.317 16.3238 13.3306 20.0045 13.3306C23.6853 13.3306 26.6699 16.317 26.6699 20C26.6699 23.6829 23.6853 26.6693 20.0045 26.6693Z"
+                  />
+
+                  <path
+                    d="M30.6788 11.7213C32.0045 11.7213 33.0793 10.6459 33.0793 9.3194C33.0793 7.99286 32.0045 6.91748 30.6788 6.91748C29.3531 6.91748 28.2783 7.99286 28.2783 9.3194C28.2783 10.6459 29.3531 11.7213 30.6788 11.7213Z"
+                  />
+
+                  <path
+                    d="M0 20C0 25.4364 0.0240048 26.1169 0.120024 28.2466C0.216043 30.3763 0.560112 31.8335 1.04821 33.1065C1.56031 34.4195 2.24045 35.5404 3.35267 36.6453C4.45689 37.7502 5.57712 38.4468 6.88938 38.9512C8.16163 39.4476 9.61792 39.7838 11.7464 39.8799C13.8828 39.976 14.5629 40 19.988 40C25.4211 40 26.1012 39.976 28.2296 39.8799C30.3581 39.7838 31.8144 39.4396 33.0866 38.9512C34.3989 38.4388 35.5191 37.7582 36.6233 36.6453C37.7276 35.5404 38.4237 34.4195 38.9278 33.1065C39.4239 31.8335 39.76 30.3763 39.856 28.2466C39.952 26.1089 39.976 25.4283 39.976 20C39.976 14.5637 39.952 13.8831 39.856 11.7534C39.76 9.6237 39.4159 8.16653 38.9278 6.89352C38.4157 5.58047 37.7355 4.45957 36.6233 3.35468C35.5271 2.24179 34.4069 1.55324 33.0946 1.04884C31.8224 0.552442 30.3661 0.216173 28.2376 0.120096C26.1012 0.0240192 25.4211 0 19.996 0C14.5629 0 13.8828 0.0240192 11.7544 0.120096C9.62593 0.216173 8.16963 0.560448 6.89738 1.04884C5.58512 1.56125 4.46489 2.24179 3.36067 3.35468C2.25645 4.46757 1.56031 5.58047 1.05621 6.89352C0.560112 8.16653 0.216043 9.6237 0.120024 11.7534C0.0240048 13.8831 0 14.5637 0 20ZM3.60872 20C3.60872 14.6597 3.63273 14.0192 3.72875 11.9135C3.81676 9.95997 4.14483 8.89512 4.41688 8.19856C4.77696 7.26982 5.21704 6.59728 5.92118 5.89271C6.62533 5.18815 7.28946 4.76381 8.22565 4.38751C8.92979 4.11529 9.994 3.78703 11.9384 3.69896C14.0428 3.60288 14.6749 3.57886 20.02 3.57886C25.3651 3.57886 25.9972 3.60288 28.1016 3.69896C30.054 3.78703 31.1182 4.11529 31.8144 4.38751C32.7425 4.7478 33.4147 5.18815 34.1188 5.89271C34.823 6.59728 35.2471 7.26181 35.6231 8.19856C35.8952 8.90312 36.2232 9.96798 36.3113 11.9135C36.4073 14.0192 36.4313 14.6517 36.4313 20C36.4313 25.3483 36.4073 25.9808 36.3113 28.0865C36.2232 30.04 35.8952 31.1049 35.6231 31.8014C35.2631 32.7302 34.823 33.4027 34.1188 34.1073C33.4147 34.8119 32.7506 35.2362 31.8144 35.6125C31.1102 35.8847 30.046 36.213 28.1016 36.301C25.9972 36.3971 25.3651 36.4211 20.02 36.4211C14.6749 36.4211 14.0428 36.3971 11.9384 36.301C9.986 36.213 8.92179 35.8847 8.22565 35.6125C7.29746 35.2522 6.62533 34.8119 5.92118 34.1073C5.21704 33.4027 4.79296 32.7382 4.41688 31.8014C4.14483 31.0969 3.81676 30.032 3.72875 28.0865C3.62473 25.9808 3.60872 25.3403 3.60872 20Z"
+                  />
+                </svg>
+              </Link>
+            </li>
+
+            <li className="footer__social-list-item">
+              <Link
+                to="https://www.tiktok.com/"
+                target="_blank"
+              >
+                <svg
+                  className="icon"
+                  width="40"
+                  height="40"
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M28.6534 14.4388C31.2256 16.2841 34.3768 17.3698 37.7801 17.3698V10.7974C37.1361 10.7975 36.4936 10.7301 35.8635 10.5961V15.7696C32.4604 15.7696 29.3096 14.6838 26.7367 12.8387V26.2511C26.7367 32.9607 21.3169 38.3995 14.6315 38.3995C12.1371 38.3995 9.81855 37.6427 7.89258 36.3447C10.0908 38.6004 13.1563 39.9996 16.5478 39.9996C23.2335 39.9996 28.6537 34.5608 28.6537 27.851V14.4388H28.6534ZM31.0178 7.808C29.7033 6.36672 28.8402 4.50413 28.6534 2.44497V1.59961H26.8371C27.2943 4.21681 28.8537 6.45279 31.0178 7.808ZM12.1211 31.196C11.3866 30.2296 10.9897 29.0473 10.9915 27.8317C10.9915 24.763 13.4705 22.2749 16.5289 22.2749C17.0989 22.2747 17.6655 22.3623 18.2087 22.5353V15.816C17.5739 15.7286 16.9332 15.6916 16.2928 15.7052V20.9352C15.7492 20.7622 15.1824 20.6744 14.6122 20.6749C11.5538 20.6749 9.07493 23.1628 9.07493 26.2319C9.07493 28.402 10.314 30.2808 12.1211 31.196Z"
+                  />
+
+                  <path
+                    d="M26.7366 12.8385C29.3096 14.6837 32.4603 15.7694 35.8634 15.7694V10.596C33.9638 10.1899 32.2822 9.19368 31.0178 7.808C28.8535 6.45265 27.2942 4.21667 26.837 1.59961H22.066V27.8507C22.0552 30.911 19.5804 33.389 16.5286 33.389C14.7302 33.389 13.1325 32.5287 12.1206 31.196C10.3137 30.2808 9.0746 28.4019 9.0746 26.232C9.0746 23.1632 11.5535 20.675 14.6119 20.675C15.1979 20.675 15.7627 20.7666 16.2925 20.9353V15.7053C9.72456 15.8415 4.44238 21.2272 4.44238 27.8508C4.44238 31.1573 5.75777 34.1548 7.89265 36.3449C9.81863 37.6427 12.1371 38.3997 14.6316 38.3997C21.3171 38.3997 26.7368 32.9606 26.7368 26.2511V12.8385H26.7366Z"
+                  />
+                </svg>
+              </Link>
+            </li>
+
+            <li className="footer__social-list-item">
+              <Link
+                to="https://www.tiktok.com/"
+                target="_blank"
+              >
+                <svg
+                  className="icon"
+                  width="40"
+                  height="40"
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    clipPath="url(#clip0_716_395)"
+                  >
+                    <path
+                      d="M19.9918 0C8.9346 0 0 8.95104 0 19.9918C0 28.4656 5.26532 35.7055 12.7026 38.6178C12.5216 37.0382 12.3735 34.603 12.7684 32.8754C13.1304 31.3122 15.1049 22.9371 15.1049 22.9371C15.1049 22.9371 14.5126 21.7359 14.5126 19.9753C14.5126 17.1946 16.125 15.1214 18.1324 15.1214C19.8437 15.1214 20.6664 16.4048 20.6664 17.935C20.6664 19.6462 19.5804 22.2131 19.0045 24.5989C18.5274 26.5899 20.0082 28.2188 21.9663 28.2188C25.5204 28.2188 28.2518 24.4673 28.2518 19.0704C28.2518 14.2822 24.8128 10.942 19.893 10.942C14.1999 10.942 10.8597 15.2036 10.8597 19.6133C10.8597 21.3246 11.5179 23.1674 12.3406 24.1711C12.5052 24.3686 12.5216 24.5496 12.4722 24.747C12.3242 25.3723 11.9786 26.738 11.9128 27.0177C11.8305 27.3797 11.6166 27.462 11.2382 27.281C8.77004 26.0962 7.22336 22.4434 7.22336 19.5146C7.22336 13.2127 11.7976 7.4208 20.436 7.4208C27.3632 7.4208 32.7602 12.357 32.7602 18.9716C32.7602 25.8659 28.4163 31.411 22.3941 31.411C20.3702 31.411 18.4615 30.3579 17.8198 29.1074C17.8198 29.1074 16.8161 32.9247 16.5693 33.8626C16.125 35.6068 14.9074 37.7787 14.0847 39.1115C15.9605 39.6874 17.935 40 20.0082 40C31.049 40 40 31.049 40 20.0082C39.9836 8.95104 31.0325 0 19.9918 0Z"
+                    />
+                  </g>
+
+                  <defs>
+                    <clipPath
+                      id="clip0_716_395"
+                    >
+                      <rect
+                        width="40"
+                        height="40"
+                        rx="6"
+                      />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </Link>
+            </li>
+          </ul>
+
+          <p className="footer__copyright">
+            &copy;
+            {' '}
+            {`Kuroso, ${new Date().toDateString().slice(11)}`}
+            <br />
+            Design & Development -
+            {' '}
+            <Link
+              className="footer__copyright-link"
+              to="https://github.com/Vo7kov"
+              target="_blank"
+            >
+              Jegor Volkov
+            </Link>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+});
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -1,22 +1,25 @@
 @import "../../styles/utils.scss";
 
 .header {
+  margin-top: 20px;
 
   &__nav-list {
-    list-style: none;
-
     display: grid;
     grid-template-columns: min-content 1fr min-content;
     align-items: center;
+
+    list-style: none;
+
+    @include onDesktop {
+      grid-template-columns: repeat(9, 1fr);
+    }
   }
 
   &__nav-list-item {
     width: 100%;
   }
 
-  &__nav-list-button {
-    background: none;
-    border: none;
-    cursor: pointer;
+  &__nav-list-link {
+    @include NavLink;
   }
 }