Feat/2714824791 replace banner (#2244)

* [Banner] - replace banner on main page * [Banner] - fix mob view on 567px and add url to zero * Add new string PT-BR From: #2236 * [Banner] - update link to the zero page (will open in new tab in all cases) * [Banner] - replace interface -> type Co-authored-by: pietro-maximoff <[email protected]> Co-authored-by: bitcoinuser <[email protected]>
DistributedCollective · Jun 8, 2022 · 94b00e7 · 94b00e7
1 parent 68e0f5f
commit 94b00e7
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 24 deletions.
diff --git a/...app/containers/PageContainer/components/DefaultHeaderComponent/DefaultHeaderComponent.tsx b/...app/containers/PageContainer/components/DefaultHeaderComponent/DefaultHeaderComponent.tsx
@@ -20,7 +20,17 @@ import {
 import { LanguageToggle } from '../../../../components/LanguageToggle';
 import styles from './index.module.scss';
 import { ReactComponent as SovLogo } from 'assets/images/sovryn-logo-alpha.svg';
-import { bitocracyUrl, zeroUrl, isMainnet } from 'utils/classifiers';
+import { bitocracyUrl, zeroUrl, isMainnet, isStaging } from 'utils/classifiers';
+
+type PagesProps = {
+  to: string;
+  title: string;
+  dataActionId: string;
+  hrefExternal?: boolean;
+};
+
+const showPerps = !isMainnet || isStaging;
+const showZero = isMainnet || isStaging;
 
 export const DefaultHeaderComponent: React.FC = () => {
   const { t } = useTranslation();
@@ -55,7 +65,41 @@ export const DefaultHeaderComponent: React.FC = () => {
     </button>
   );
 
-  const pages = [
+  const labPages: PagesProps[] = [
+    {
+      to: '/origins',
+      title: t(translations.mainMenu.launchpad),
+      dataActionId: 'header-mobile-lab-link-launchpad',
+    },
+    {
+      to: '/origins/claim',
+      title: t(translations.mainMenu.originsClaim),
+      dataActionId: 'header-mobile-lab-link-claim',
+    },
+    {
+      to: '/mynt-token',
+      title: t(translations.mainMenu.myntToken),
+      dataActionId: 'header-mobile-lab-link-mynt-token',
+    },
+  ];
+
+  if (showZero) {
+    labPages.push({
+      to: zeroUrl,
+      title: t(translations.mainMenu.zero),
+      dataActionId: 'header-mobile-lab-link-zero',
+      hrefExternal: true,
+    });
+  }
+  if (showPerps) {
+    labPages.push({
+      to: '/perpetuals',
+      title: t(translations.mainMenu.perpetuals),
+      dataActionId: 'header-mobile-lab-link-perpetuals',
+    });
+  }
+
+  const pages: PagesProps[] = [
     {
       to: '',
       title: t(translations.mainMenu.trade),
@@ -64,7 +108,6 @@ export const DefaultHeaderComponent: React.FC = () => {
     {
       to: '/buy-sov',
       title: t(translations.mainMenu.buySov),
-      exact: true,
       dataActionId: 'header-trade-link-buySov',
     },
     {
@@ -187,13 +230,7 @@ export const DefaultHeaderComponent: React.FC = () => {
   );
 
   const menuItems = pages.map((item, index) => {
-    let link: {
-      to: string;
-      title: string;
-      dataActionId: string;
-      onClick?: () => void;
-      beforeOpen?: () => void;
-    } = item;
+    let link: PagesProps = item;
 
     if (link.to === '') {
       return (
@@ -226,8 +263,7 @@ export const DefaultHeaderComponent: React.FC = () => {
         key={index}
         text={link.title}
         onClick={() => {
-          link.beforeOpen && link.beforeOpen();
-          link.onClick ? link.onClick() : history.push(link.to);
+          history.push(link.to);
           setOpen(false);
         }}
         data-action-id={link.dataActionId}
@@ -476,6 +512,7 @@ export const DefaultHeaderComponent: React.FC = () => {
                         <MenuItem
                           href={zeroUrl}
                           text={t(translations.mainMenu.zero)}
+                          target="_blank"
                           className="bp3-popover-dismiss"
                           data-action-id="header-lab-zero-link"
                         />

diff --git a/src/app/pages/LandingPage/components/Banner/GetStartedBanner.tsx b/src/app/pages/LandingPage/components/Banner/GetStartedBanner.tsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
-
-import getStartedBanner from 'assets/images/banner/get_started.png';
-import { Button, ButtonSize } from 'app/components/Button';
+import getStartedBanner from 'assets/images/banner/banner_zero.svg';
+import getStartedBannerMobile from 'assets/images/banner/banner_zero_mobile.svg';
+import { Button, ButtonSize, ButtonStyle } from 'app/components/Button';
+import { Picture } from 'app/components/Picture';
+import { Breakpoint } from 'types';
+import { zeroUrl } from 'utils/classifiers';
 
 export const GetStartedBanner: React.FC = () => {
   const { t } = useTranslation();
-
+  const pictureSrcSet = [
+    {
+      src: getStartedBannerMobile,
+      media: Breakpoint.sm,
+    },
+  ];
   return (
-    <div className="tw-flex tw-flex-col sm:tw-flex-row tw-items-end tw-relative tw-w-full tw-h-full">
-      <img
-        src={getStartedBanner}
-        alt={t(translations.landingPage.banner.getStarted)}
-      />
+    <div className="tw-flex tw-flex-col tw-justify-center sm:tw-flex-row tw-items-end tw-relative tw-w-full tw-h-full">
+      <Picture src={getStartedBanner} srcSet={pictureSrcSet} />
       <Button
-        className="tw-relative sm:tw-absolute tw-self-center sm:tw-self-auto tw-mb-6 tw-ml-0 tw-mt-2 sm:tw-mt-0 sm:tw-ml-8"
+        className="tw-absolute tw-self-center tw-min-h-8 md:tw-min-h-12 sm:tw-self-auto tw-bottom-3 md:tw-bottom-6 tw-text-sm md:tw-text-xl tw-border-2 tw-py-1 md:tw-py-3"
         text={t(translations.landingPage.banner.getStarted)}
-        href="/buy-sov"
+        href={zeroUrl}
+        hrefExternal={true}
         size={ButtonSize.lg}
+        style={ButtonStyle.transparent}
         dataActionId="landing-getstarted-button"
       />
     </div>