diff --git a/src/@demex-info/assets/background/OSMOSAirdropBanner.svg b/src/@demex-info/assets/background/OSMOSAirdropBanner.svg new file mode 100644 index 00000000..5aa9c830 --- /dev/null +++ b/src/@demex-info/assets/background/OSMOSAirdropBanner.svg @@ -0,0 +1,770 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg b/src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg new file mode 100644 index 00000000..a6310d11 --- /dev/null +++ b/src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg @@ -0,0 +1,758 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@demex-info/assets/background/index.ts b/src/@demex-info/assets/background/index.ts index 5a9b8d89..1c591e49 100644 --- a/src/@demex-info/assets/background/index.ts +++ b/src/@demex-info/assets/background/index.ts @@ -2,3 +2,5 @@ export { ReactComponent as BannerBlueLeft } from "./BannerBlueLeft.svg"; export { ReactComponent as BannerBlueMiddle } from "./BannerBlueMiddle.svg"; export { ReactComponent as BannerBlueRight } from "./BannerBlueRight.svg"; export { ReactComponent as BannerOrange } from "./BannerOrange.svg"; +export { ReactComponent as OSMOSAirdropBanner } from "./OSMOSAirdropBanner.svg"; +export { ReactComponent as OSMOSAirdropBannerMobile } from "./OSMOSAirdropBannerMobile.svg"; diff --git a/src/@demex-info/assets/icons/OSMOGradient.svg b/src/@demex-info/assets/icons/OSMOGradient.svg new file mode 100644 index 00000000..5908ca68 --- /dev/null +++ b/src/@demex-info/assets/icons/OSMOGradient.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@demex-info/assets/icons/index.ts b/src/@demex-info/assets/icons/index.ts index 79157805..65f16efd 100644 --- a/src/@demex-info/assets/icons/index.ts +++ b/src/@demex-info/assets/icons/index.ts @@ -7,3 +7,4 @@ export { ReactComponent as MenuIcon } from "./Menu.svg"; export { ReactComponent as Nitron } from "./Nitron.svg"; export { ReactComponent as TendermintCore } from "./TendermintCore.svg"; export { ReactComponent as TickIcon } from "./Tick.svg"; +export { ReactComponent as OSMOGradient } from "./OSMOGradient.svg"; diff --git a/src/@demex-info/components/Banner/Banner.tsx b/src/@demex-info/components/Banner/Banner.tsx index 8814c4e5..8a8846c5 100644 --- a/src/@demex-info/components/Banner/Banner.tsx +++ b/src/@demex-info/components/Banner/Banner.tsx @@ -5,27 +5,28 @@ import { Box, BoxProps, Button, makeStyles, Theme, } from "@material-ui/core"; import clsx from "clsx"; -import React from "react"; +import React, { ReactNode } from "react"; import { SvgIcon } from "../SvgIcon"; interface Props extends BoxProps { bannerIcon: React.FunctionComponent> headerText: string - subHeader: string + subHeader: ReactNode bannerIconClass?: string ctaText?: string ctaUrl?: string buttonText?: string buttonUrl?: string + backgroundImg?: string } const Banner: React.FC = (props: Props) => { - const { bannerIcon, headerText, subHeader, ctaText, ctaUrl, buttonText, buttonUrl, className, ...rest } = props; + const { bannerIcon, headerText, subHeader, ctaText, ctaUrl, buttonText, buttonUrl, className, backgroundImg, ...rest } = props; const classes = useStyles(); return ( - + @@ -58,12 +59,18 @@ const Banner: React.FC = (props: Props) => { )} {/* background vectors */} - - - - + { + !backgroundImg && ( + + + + + + + ) + } - + ); }; @@ -97,6 +104,16 @@ const useStyles = makeStyles((theme: Theme) => ({ [theme.breakpoints.down("sm")]: { minHeight: "unset", }, + "&.backgroundImg": { + background: "border-box", + backgroundSize: "105%", + backgroundRepeat: "no-repeat", + backgroundPosition: "center", + [theme.breakpoints.down(380)]: { + backgroundPosition: "unset", + backgroundSize: "auto", + }, + }, }, leftBanner: { display: "flex", diff --git a/src/@demex-info/constants/links.ts b/src/@demex-info/constants/links.ts index c0eae6d2..9e5de842 100644 --- a/src/@demex-info/constants/links.ts +++ b/src/@demex-info/constants/links.ts @@ -51,6 +51,7 @@ export const Paths = { Competition: { Leaderboard: "/competition", + SignUp: "/competition/register", }, Pools: { @@ -127,6 +128,22 @@ export const StaticLinks = { Crosschain: "https://guide.dem.exchange/about-demex/master/features-overview#cross-chain-compatibility", }, Nitron: "https://guide.dem.exchange/products/nitron", + Competition: { + Past: { + Main: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-2", + TopGainers: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-1#top-gainers", + TopTraders: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-1#top-traders", + }, + Current: { + Main: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-3-dec", + TopGainers: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-3-dec#top-gainers", + TopTraders: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-2#top-traders", + }, + Upcoming: { + Main: "https://guide.dem.exchange/competition/usdosmo-perpetuals-airdrop-campaign-jan-2023", + TopGainers: "https://guide.dem.exchange/competition/usdosmo-perpetuals-airdrop-campaign-jan-2023", + }, + }, }, Tendermint: "https://tendermint.com/core/", Docs: { diff --git a/src/@demex-info/utils/styles.ts b/src/@demex-info/utils/styles.ts index 728043e5..a56bb30d 100644 --- a/src/@demex-info/utils/styles.ts +++ b/src/@demex-info/utils/styles.ts @@ -8,4 +8,5 @@ export const StyleUtils = { purpleGradient: "linear-gradient(90deg, #B6F4FD 45.4%, #943EB7 80.52%, #3D2347 130.74%)", boxShadow: (theme: Theme) => `0px 0px 16px ${theme.palette.shadow}`, bannerGradient: "linear-gradient(298.71deg, #282B2D 32.3%, #000000 100%)", + orangeGradient: "linear-gradient(90deg, #FFA800 0%, #FF5107 100%)", }; diff --git a/src/@demex-info/views/HeroSection/HeroSection.tsx b/src/@demex-info/views/HeroSection/HeroSection.tsx index 55fe3d11..cb75c555 100644 --- a/src/@demex-info/views/HeroSection/HeroSection.tsx +++ b/src/@demex-info/views/HeroSection/HeroSection.tsx @@ -1,12 +1,12 @@ -import { Nitron } from "@demex-info/assets"; +import { OSMOGradient, OSMOSAirdropBanner, OSMOSAirdropBannerMobile } from "@demex-info/assets"; import { BackgroundAnimation } from "@demex-info/components"; import { Banner } from "@demex-info/components/Banner"; import { getDemexLink, Paths, StaticLinks } from "@demex-info/constants"; -import { RootState } from "@demex-info/store/types"; +import { StyleUtils } from "@demex-info/utils"; import { Box, Button, Container, makeStyles, useMediaQuery, useTheme } from "@material-ui/core"; import clsx from "clsx"; import React, { Suspense, useEffect } from "react"; -import { useSelector } from "react-redux"; +import { renderToStaticMarkup } from "react-dom/server"; import TextLoop from "react-text-loop"; import MarketsGrid from "./components/MarketsGrid"; @@ -16,24 +16,27 @@ const HeroSection: React.FC = () => { const [ready, setReady] = React.useState(false); const isDesktop = useMediaQuery(theme.breakpoints.up("md")); - const net = useSelector((state: RootState) => state.app.network); const items = ["Bitcoin", "Perpetuals", "Ethereum", "SWTH", "USDC", "Futures", "Atom", "AAVE", "Wrapped Bitcoin", "Gold", "Anything"]; + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); + const bannerAsString = encodeURIComponent(renderToStaticMarkup(isMobile ? : )); + useEffect(() => { setTimeout(() => setReady(true)); }, []); return ( - Trade OSMO, BTC & ETH Perpetual Contracts and earn up to 110 USDC!} ctaText="Learn more" - buttonText={isDesktop ? "Explore Nitron" : "Explore"} - buttonUrl={getDemexLink(Paths.Nitron, net)} + ctaUrl={StaticLinks.DemexDocs.Competition.Upcoming.Main} + buttonText="Join Now" + buttonUrl={Paths.Competition.SignUp} + backgroundImg={bannerAsString} /> { ready && ( @@ -234,6 +237,13 @@ const useStyles = makeStyles((theme) => ({ }, }, }, + orangeStrong: { + fontWeight: 700, + background: StyleUtils.orangeGradient, + backgroundClip: "text", + WebkitTextFillColor: "transparent", + WebkitBackgroundClip: "text", + }, })); export default HeroSection;