Merge pull request #5196 from layer5io/ritiksaxena124/top-promotional-banner

Playground top promotional banner added

Author: ritiksaxena124

src/assets/images/top-promotional-banner/rocket.svg

@@ -0,0 +1,14 @@
+import React from "react";
+import { TopBannercontainer } from "./style";
+import Rocket from "../../assets/images/top-promotional-banner/rocket.svg";
+
+const TopPromotionalBanner = () => {
+  return (
+    <>
+      <TopBannercontainer>
+        <a href="https://play.meshery.io/" rel="noreferrer" target="_blank"><p className="content"><img src={Rocket} alt="Five on rocket" />Soar to New Heights with Meshery v0.7.0 <span>Try it now &rarr;</span></p></a>
+      </TopBannercontainer>
+    </>
+  );
+};
+export default TopPromotionalBanner;

src/components/TopPromotionalBanner/index.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const TopBannercontainer = styled.div`
+    background: ${props => props.theme.saffronColor};
+    position: sticky;
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 1rem;
+        font-weight: 500;
+        line-height: 1.1875rem;
+        color: ${props => props.theme.body};
+        padding: 0.75rem 1rem;
+
+       & > img {
+        width: 3rem;
+        margin-right: 0.5rem;
+       }
+
+       & > span {
+        font-weight: 700;
+        margin-left: 0.5rem;
+        &:hover {
+            text-decoration: underline;
+        }
+       }
+    }
+`;
+
+

src/components/TopPromotionalBanner/style.js

@@ -12,13 +12,15 @@ import PropTypes from "prop-types";
 import ScrollToTopBtn from "./Scrolltotop-button";
 import Navigation from "../sections/General/Navigation";
 import Footer from "../sections/General/Footer";
+import TopPromotionalBanner from "./TopPromotionalBanner";
 import { GlobalStyle } from "../sections/app.style";
 
 const Layout = ({ children }) => {
 
   return (
     <>
       <GlobalStyle />
+      <TopPromotionalBanner />
       <Navigation/>
       {children}
       <ScrollToTopBtn />