From cea4ef26a3e57ec3983def91313bbf29459b064a Mon Sep 17 00:00:00 2001
From: Dima <crystalbit@mail.ru>
Date: Fri, 2 Aug 2024 11:07:02 +0300
Subject: [PATCH] add staking bar

---
 web/src/components/Header/Header.js           | 36 +++++++++++--------
 web/src/components/Header/Header.module.css   | 24 +++++++++++++
 .../pages/begin-page/begin-page.module.css    |  2 +-
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/web/src/components/Header/Header.js b/web/src/components/Header/Header.js
index bfab791..42dda76 100644
--- a/web/src/components/Header/Header.js
+++ b/web/src/components/Header/Header.js
@@ -30,22 +30,28 @@ const Header = ({ button = false }) => {
     };
   }, []);
   return (
-    <header className={styles.header}>
-      <div className={styles["header__flex-container"]}>
-        <Link to="/fluence">
-          <img
-            src={logo}
-            alt="fluence logotype"
-            className={styles.header__logo}
-          />
-        </Link>
-
-        <MainNavigation width={currentWidthWindow} />
+    <>
+      <div className={styles["header__top_notification"]}>
+        Join the FLT Stake Race • 1 million FLT in prizes
+        <a href="https://race.fluence.network/" target="_blank" className={styles["header__top_link"]}>Learn more</a>
       </div>
-      {button && currentWidthWindow > 768 && (
-        <Button type="default" text="Start building" callback={handleClick} />
-      )}
-    </header>
+      <header className={styles.header}>
+        <div className={styles["header__flex-container"]}>
+          <Link to="/fluence">
+            <img
+              src={logo}
+              alt="fluence logotype"
+              className={styles.header__logo}
+            />
+          </Link>
+
+          <MainNavigation width={currentWidthWindow} />
+        </div>
+        {button && currentWidthWindow > 768 && (
+          <Button type="default" text="Start building" callback={handleClick} />
+        )}
+      </header>
+    </>
   );
 };
 
diff --git a/web/src/components/Header/Header.module.css b/web/src/components/Header/Header.module.css
index 16219ec..a856a9e 100644
--- a/web/src/components/Header/Header.module.css
+++ b/web/src/components/Header/Header.module.css
@@ -11,6 +11,30 @@
   align-items: center;
 }
 
+.header__top_notification {
+  position: relative;
+  top: 0px;
+  width: 100vw;
+  text-align: center;
+  padding-top: 0;
+  margin-top: -30px;
+  padding-top: 24px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  letter-spacing: .1px;
+  font-size: 19px;
+  font-weight: 700;
+  line-height: 131.25%;
+  background-color: #cfffc4;
+  z-index: 9999999;
+  font-family: Hauora, sans-serif;
+}
+
+.header__top_link {
+  margin-left: 16px;
+  color: #000000;
+}
+
 .header__logo {
   width: 118px;
   height: 32px;
diff --git a/web/src/pages/begin-page/begin-page.module.css b/web/src/pages/begin-page/begin-page.module.css
index 0f5d1d4..05be4e5 100644
--- a/web/src/pages/begin-page/begin-page.module.css
+++ b/web/src/pages/begin-page/begin-page.module.css
@@ -1,5 +1,5 @@
 .background {
-  padding-top: 54px;
+  padding-top: 30px;
 
   background: rgba(177, 169, 153, 1);
   background-image: url("../../images/Rectangle 76.21553159.webp");