diff --git a/src/assets/UI/banner_background.png b/src/assets/UI/banner_background.png new file mode 100644 index 0000000..dfc5a43 Binary files /dev/null and b/src/assets/UI/banner_background.png differ diff --git a/src/assets/UI/banner_background.svg b/src/assets/UI/banner_background.svg deleted file mode 100644 index fbe3aed..0000000 --- a/src/assets/UI/banner_background.svg +++ /dev/null @@ -1,134 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/StartArticle/StartArticle.jsx b/src/components/StartArticle/StartArticle.jsx index c8aae2a..f2789d9 100644 --- a/src/components/StartArticle/StartArticle.jsx +++ b/src/components/StartArticle/StartArticle.jsx @@ -1,7 +1,8 @@ import React from "react"; import styles from "./StartArticle.module.css"; import TextBlock from "../TextBlock/TextBlock"; -import BannerBackground from "../../assets/UI/banner_background.svg"; +import bannerBackground from "../../assets/UI/banner_background.png"; +import ContinueIcon from "../../assets/icons/continue.svg"; function StartArticle({ content }) { @@ -22,9 +23,13 @@ function StartArticle({ content }) {
+
- -
+ + +
+

Exchange integration full guide

+
{contentAfterBanner.map((item) => ( diff --git a/src/components/StartArticle/StartArticle.module.css b/src/components/StartArticle/StartArticle.module.css index b5eb093..85f3436 100644 --- a/src/components/StartArticle/StartArticle.module.css +++ b/src/components/StartArticle/StartArticle.module.css @@ -1,20 +1,73 @@ -.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; - justify-content: center; 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: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + object-fit: cover; +} + +.banner_wrapper__content { + display: flex; + align-items: center; + gap: 15px; +} + +.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