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