diff --git a/src/assets/UI/banner_background.svg b/src/assets/UI/banner_background.svg new file mode 100644 index 0000000..45e0814 --- /dev/null +++ b/src/assets/UI/banner_background.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/continue.svg b/src/assets/icons/continue.svg new file mode 100644 index 0000000..1b55a59 --- /dev/null +++ b/src/assets/icons/continue.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/StartArticle/StartArticle.jsx b/src/components/StartArticle/StartArticle.jsx index c72995d..67a71c9 100644 --- a/src/components/StartArticle/StartArticle.jsx +++ b/src/components/StartArticle/StartArticle.jsx @@ -1,8 +1,13 @@ import React from "react"; import styles from "./StartArticle.module.css"; import TextBlock from "../TextBlock/TextBlock"; +import BannerBackground from "../../assets/UI/banner_background.svg"; +import ContinueIcon from "../../assets/icons/continue.svg"; function StartArticle({ content }) { + + const contentAfterBanner = content.slice(1); + return (
@@ -16,7 +21,18 @@ function StartArticle({ content }) { functionalities, and opportunities.
- {content.map((item) => ( + +
+ +
+ + + +

Exchange integration full guide

+ +
+ + {contentAfterBanner.map((item) => ( ))} diff --git a/src/components/StartArticle/StartArticle.module.css b/src/components/StartArticle/StartArticle.module.css index 1174ce4..bcf8a1b 100644 --- a/src/components/StartArticle/StartArticle.module.css +++ b/src/components/StartArticle/StartArticle.module.css @@ -1,14 +1,77 @@ -.welcome > h1 { +.welcome>h1 { font-size: 3rem; } @media (max-width: 460px) { - .welcome > h1 { + .welcome>h1 { font-size: 2rem; } } -.intro > article { +.intro>article { display: flex; flex-direction: column; } + +.banner_wrapper { + cursor: pointer; + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 120px; + width: 100%; + border-radius: 18px; + overflow: hidden; + padding: 0 20px; + max-width: 1200px; +} + +.banner_wrapper__bg { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 1152px; + height: 100%; + z-index: -1; +} + +.banner_wrapper__content { + display: flex; + align-items: center; + gap: 15px; + text-decoration: none; +} +.banner_wrapper__content:hover { + text-decoration: none; +} + +.banner_wrapper__content .title { + padding-top: 10px; + color: #ffffff; + font-size: 36px; + font-weight: 700; + text-shadow: 0px 2px 4px 0px #0000001A; +} + +.banner_wrapper__content .continueIcon { + min-width: 36px; +} + +@media (max-width: 780px) { + .banner_wrapper__content .continueIcon { + display: none; + } + + .banner_wrapper__content .title { + text-align: center; + font-size: 28px; + } +} + +@media (max-width: 380px) { + .banner_wrapper__content .title { + font-size: 22px; + } +} \ No newline at end of file