add info message about 1.5.0

src/components/App/App.js

@@ -1,29 +1,33 @@
 import React from "react";
 import TopSwoosh from "../../svg/TopSwoosh";
 import "./App.scss";
+import StickyTopMessage from "../StickyTopMessage/StickyTopMessage";
 import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../";
 
 function App() {
   return (
-    <div className="app">
-      <TopSwoosh className="top-swoosh" />
+    <React.Fragment>
+      <StickyTopMessage />
+      <div className="app">
+        <TopSwoosh className="top-swoosh" />
 
-      <div className="width">
-        <HomeTop />
-        <HomeUpload />
-        <HomeBuilt />
-        <HomeSamples />
-      </div>
-
-      <div className="home-white">
         <div className="width">
-          <HomeStay />
-          <HomeNetwork />
+          <HomeTop />
+          <HomeUpload />
+          <HomeBuilt />
+          <HomeSamples />
         </div>
-      </div>
 
-      <Footer />
-    </div>
+        <div className="home-white">
+          <div className="width">
+            <HomeStay />
+            <HomeNetwork />
+          </div>
+        </div>
+
+        <Footer />
+      </div>
+    </React.Fragment>
   );
 }
 

src/components/Footer/Footer.js

@@ -9,7 +9,7 @@ import { Mailing } from "..";
 export default function Footer() {
   return (
     <Reveal effect="active">
-      <footer className="footer">
+      <footer className="footer" id="footer">
         <div className="width">
           <Fade duration={700} distance="40px" bottom>
             <div className="footer-column">

src/components/StickyTopMessage/StickyTopMessage.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./StickyTopMessage.scss";
+
+export default function StickyTopMessage() {
+  return (
+    <div className="sticky-top-message" role="alert">
+      <p>
+        We are working on improved performance as part of the upcoming Sia v1.5.0 release. In the meantime, you can try
+        other webportals listed at the <a href="#footer">bottom</a>.
+      </p>
+    </div>
+  );
+}

src/components/StickyTopMessage/StickyTopMessage.scss

@@ -0,0 +1,24 @@
+@import "../../variables.scss";
+
+.sticky-top-message {
+  position: sticky;
+  top: 0;
+  font-size: 14px;
+  text-align: center;
+  padding: 10px;
+  font-weight: bold;
+  z-index: 999;
+  background-color: #fbe6e6;
+  border-bottom: 1px solid #e65c5c;
+  color: $red;
+
+  a {
+    color: $red;
+    text-decoration: underline;
+
+    &:hover {
+      color: darken($red, 15%);
+      transition: color 0.2s ease;
+    }
+  }
+}