Feat/fluo devnet promo (#123)

* Add fluo devnet launch banner

* Small fix, update guide link

* Update link label

* Fix PR UI comments

src/@demex-info/constants/links.ts

@@ -163,6 +163,11 @@ export const StaticLinks = {
   CosmosIBC: "https://mapofzones.com/",
   PolyNetworkAlliance: "https://www.poly.network/#/",
   CarbonhubStake: "https://hub.carbon.network/stake",
+  FluoDocs: {
+    DevnetLaunch: "https://dev-app.dem.exchange/pools",
+    PublicDevnet: "https://guide.dem.exchange/community/incentivized-devnet-event",
+    Airdrop: "https://fluofinance.com/airdrop",
+  },
 };
 
 export function getNetworkQueryParam(net: CarbonSDK.Network) {

src/@demex-info/layout/MainLayout/MainLayout.tsx

@@ -6,6 +6,7 @@ import { CarbonSDK } from "carbon-js-sdk";
 import clsx from "clsx";
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { DevnetPromoBanner } from "./components/DevnetPromoBanner";
 import Header from "./components/Header";
 
 interface Props extends BoxProps { }
@@ -40,6 +41,7 @@ const MainLayout: React.FC<Props> = (props: Props) => {
   const classes = useStyles();
   return (
     <main className={clsx(classes.app, className)} {...rest}>
+      <DevnetPromoBanner />
       <Header />
       {children}
     </main>

src/@demex-info/layout/MainLayout/components/DevnetPromoBanner/DevnetPromoBanner.tsx

@@ -0,0 +1,89 @@
+import { Box, Button, makeStyles, Theme, Typography, useMediaQuery, useTheme } from "@material-ui/core";
+import React from "react";
+
+import DevnetPromoBackground from "@demex-info/assets/background/DevnetPromo.png";
+import DevnetPromoBackgroundMobile from "@demex-info/assets/background/DevnetPromoMobile.png";
+import { StaticLinks } from "@demex-info/constants";
+
+const DevnetPromoBanner: React.FC = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return (
+    <Box className={classes.bannerContainer}>
+      <Typography className={classes.bannerText}>Try Perp Pools on our Incentivized Public Devnet!&nbsp;&#128293;</Typography>
+      <Box className={classes.bannerButtonGroup}>
+        <Button
+          variant="contained"
+          href={StaticLinks.FluoDocs.DevnetLaunch}
+          target="_blank"
+          className={classes.bannerButton}
+        >
+          Try Now
+        </Button>
+        <Button
+          variant="outlined"
+          href={StaticLinks.FluoDocs.PublicDevnet}
+          target="_blank"
+          className={classes.bannerButtonOutlined}
+        >
+          {isMobile ? "Guide" : "Learn More"}
+        </Button>
+        <Button
+          variant="outlined"
+          href={StaticLinks.FluoDocs.Airdrop}
+          target="_blank"
+          className={classes.bannerButtonOutlined}
+        >
+          {isMobile ? "Airdrop" : "Check Airdrop Eligibility"}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+
+const useStyles = makeStyles((theme: Theme) => ({
+  bannerContainer: {
+    backgroundColor: theme.palette.background.secondary,
+    backgroundImage: `url(${DevnetPromoBackground})`,
+    color: theme.palette.text.primary,
+    padding: theme.spacing(1.5),
+    display: "flex",
+    gap: "8px",
+    justifyContent: "center",
+    alignItems: "center",
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    zIndex: 1100, //zIndex for menu drawer is 1200
+    [theme.breakpoints.down("sm")]: {
+      backgroundImage: `url(${DevnetPromoBackgroundMobile})`,
+      flexDirection: "column",
+      padding: theme.spacing(2, 1.5),
+    },
+  },
+  bannerText: {
+    ...theme.typography.body2,
+    textAlign: "center",
+    [theme.breakpoints.down("sm")]: {
+      ...theme.typography.body3,
+    },
+  },
+  bannerButtonGroup: {
+    display: "flex",
+    gap: "8px",
+  },
+  bannerButton: {
+    "& .MuiButton-label": {
+      ...theme.typography.title3,
+    },
+  },
+  bannerButtonOutlined: {
+    border: `1px solid ${theme.palette.text.disabled}!important`,
+    "& .MuiButton-label": {
+      ...theme.typography.title3,
+    },
+  },
+}));
+
+export default DevnetPromoBanner;

src/@demex-info/layout/MainLayout/components/DevnetPromoBanner/index.ts

@@ -0,0 +1 @@
+export { default as DevnetPromoBanner } from "./DevnetPromoBanner";

src/@demex-info/layout/MainLayout/components/Header/Header.tsx

@@ -106,7 +106,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: theme.palette.background.primary,
     minHeight: "4rem",
     padding: theme.spacing(0, 6),
-    position: "fixed",
+    position: "sticky",
     top: 0,
     width: `calc(100vw - ${theme.spacing(12)}px)`,
     zIndex: 1100, //zIndex for menu drawer is 1200