diff --git a/package.json b/package.json index fca7537c46..7928ff721f 100755 --- 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 index 6ea9c499b3..dc51d09cdf 100644 --- 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 = () => (
+
); diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 0000000000..dd268ed910 --- /dev/null +++ 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 new file mode 100644 index 0000000000..4a8d224761 --- /dev/null +++ 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 ( + + ); +}); diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 6cc838a0e8..a6988baad8 100644 --- 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; } } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7a1ba19afb..241fff4a38 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -12,6 +12,8 @@ import { import { Resolutions } from '../../types/Resolutions'; import { NavLink as HeaderLink } from '../../types/NavLink'; +import { Logo } from '../Logo/Logo'; + import './Header.scss'; export const Header: React.FC = React.memo(() => { @@ -93,26 +95,9 @@ export const Header: React.FC = React.memo(() => { ))}
  • - - - - - - + />
    • {screenType === Resolutions.Desktop diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx new file mode 100644 index 0000000000..72c7b3012a --- /dev/null +++ b/src/components/Logo/Logo.tsx @@ -0,0 +1,31 @@ +/* eslint-disable max-len */ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +type Props = { + className: string, +}; + +export const Logo: React.FC = React.memo(({ className }) => { + return ( + + + + + + ); +}); diff --git a/src/helpers/getScreenType.ts b/src/helpers/getScreenType.ts index e6e7bf934c..ff1a7b1463 100644 --- a/src/helpers/getScreenType.ts +++ b/src/helpers/getScreenType.ts @@ -2,7 +2,7 @@ import { Resolutions } from '../types/Resolutions'; export const getScreenType = () => { switch (true) { - case window.matchMedia('(min-width: 1280px)').matches: { + case window.matchMedia('(min-width: 1366px)').matches: { return Resolutions.Desktop; } diff --git a/src/images/selectAfterHover.svg b/src/images/selectAfterHover.svg new file mode 100644 index 0000000000..19b5a0f364 --- /dev/null +++ b/src/images/selectAfterHover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/icon.scss b/src/styles/icon.scss index 9994f3566e..89f89257d0 100644 --- a/src/styles/icon.scss +++ b/src/styles/icon.scss @@ -1,18 +1,20 @@ @import "./utils.scss"; .icon { + fill: $red-600; + transition: fill $animationDuration; - &--logo { - height: 100px; - - fill: $red-600; - transition: fill $animationDuration; + @include onDesktop { &:hover { fill: $red-700; } } + &--logo { + height: 100px; + } + &--burger { height: 20px; } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss index 0f4dd5ba73..5b893c2aea 100644 --- a/src/styles/utils/mixins.scss +++ b/src/styles/utils/mixins.scss @@ -1,3 +1,4 @@ @import "./mixins/media.scss"; @import "./mixins/font.scss"; @import "./mixins/transitions.scss"; +@import "./mixins/blocks.scss"; diff --git a/src/styles/utils/mixins/blocks.scss b/src/styles/utils/mixins/blocks.scss new file mode 100644 index 0000000000..66e4212940 --- /dev/null +++ b/src/styles/utils/mixins/blocks.scss @@ -0,0 +1,20 @@ +@mixin selectAfter { + position: absolute; + top: 50%; + transform: translateY(-50%); + + display: block; + content: ""; + + width: 16px; + height: 16px; + + background-image: url("../../../images/selectAfter.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +@mixin selectAfterHover { + background-image: url("../../../images/selectAfterHover.svg"); +} diff --git a/src/styles/utils/mixins/font.scss b/src/styles/utils/mixins/font.scss index 1cf8433779..b6fbe4d905 100644 --- a/src/styles/utils/mixins/font.scss +++ b/src/styles/utils/mixins/font.scss @@ -1,21 +1,23 @@ @import "./media.scss"; -@mixin default { - display: block; - padding: 20px 0; +@mixin NavLink { + padding: 8px 0; - font-size: 18px; + font-size: 20px; font-weight: 500; - color: $black-800; - text-decoration: none; - text-align: center; + + color: $black-800; + transition: color $animationDuration; @include onDesktop { - transition: color $animationDuration; + display: block; + + font-size: 18px; + text-align: center; &:hover { - color: $red-600; + color: $red-700; } } } diff --git a/src/styles/utils/mixins/media.scss b/src/styles/utils/mixins/media.scss index c76ac5c5d2..c6f97fa77a 100644 --- a/src/styles/utils/mixins/media.scss +++ b/src/styles/utils/mixins/media.scss @@ -5,7 +5,7 @@ } @mixin onDesktop { - @media (min-width: 1280px) { + @media (min-width: 1366px) { @content; } } diff --git a/src/styles/utils/normalize.scss b/src/styles/utils/normalize.scss index 4ebe24df73..ec77f3c8e3 100644 --- a/src/styles/utils/normalize.scss +++ b/src/styles/utils/normalize.scss @@ -34,3 +34,8 @@ video { iframe { display: none; } + +button { + border: none; + background: none; +}