Add Trade landing page.

src/components/Marketing/FixedHeaderTrigger.js

@@ -49,7 +49,10 @@ const HeaderContent = styled(Box)`
   justify-content: space-between;
 `;
 
-const Header = props => {
+const Header = ({
+  button = <AccountSelection ml="24px" buttonWidth="248px" display="inline" />,
+  ...props
+}) => {
   const { lang } = useLanguage();
 
   return (
@@ -60,7 +63,7 @@ const Header = props => {
           <Text display={{ s: 'none', xl: 'inline' }} fontSize="19px">
             {lang.providers.connect_wallet_long}
           </Text>
-          <AccountSelection ml="24px" buttonWidth="248px" display="inline" />
+          {button}
         </Flex>
       </HeaderContent>
     </HeaderStyle>

src/languages/_english.js

@@ -109,7 +109,7 @@ export default {
   },
   save_landing: {
     page_name: 'Oasis Save',
-    headline: 'The most trusted way to earn on your Dai.',
+    headline: 'The most trusted way to earn on your Dai',
     subheadline: 'Anyone with an internet connection can deposit DAI, and earn savings instantly. No fees. No minimums. No Lockups.',
     connect_to_start: 'To open or manage your savings, connect a crypto wallet',
     quotes_block: {
@@ -127,6 +127,26 @@ export default {
     feature4_heading: 'Secure from the ground up',
     feature4_content: 'Oasis regularly undergoes security audits and checks. Built by the developers of the MakerDAO protocol.'
   },
+  trade_landing: {
+    page_name: 'Oasis Trade',
+    headline: 'Peer to peer crypto trading',
+    subheadline: 'Oasis Trade is a decentralized, zero-fee token exchange with limit order support and instant token swap.',
+    cta_button: 'Open Oasis Trade',
+    quotes_block: {
+      title: 'Leverage your collateral, quicker',
+      body: 'Oasis Trade allows you to access the Maker Protocol and use your collateral to instantly leverage your positions in just two transactions.',
+      quote1: 'Copy is in progress...',
+      author1: 'Marketing Team'
+    },
+    feature1_heading: 'Liquidity and decentralization',
+    feature1_content: 'Get the price you want with low slippage. Anyone with an Ethereal wallet can make trade.',
+    feature2_heading: 'Increase profits with leverage',
+    feature2_content: 'A simple interface that allows you to manage your Vault. No middleman or third part controls your funds.',
+    feature3_heading: 'Quickly swap tokens for free',
+    feature3_content: 'Oasis trade allows you to get in and out of positions instantly, without fees.',
+    feature4_heading: 'Non custodial',
+    feature4_content: 'The system is a set of ownerless, autonomous smart contracts. You maintain control over your funds.'
+  },
   overview_page: {
     title: 'Overview',
     your_cdps: 'Your Vaults',

src/layouts/PageContentLayout.js

@@ -3,11 +3,11 @@ import { Box } from '@makerdao/ui-components-core';
 import Notifications from 'components/Notifications';
 import CookieNotice from 'components/CookieNotice';
 
-const PageContentLayout = ({ children }) => {
+const PageContentLayout = ({ enableNotifications = true, children }) => {
   return (
     <Box p={{ s: '25px 12px', l: '30px 32px' }}>
       <Box maxWidth="1200px" mx="auto">
-        <Notifications />
+        {enableNotifications && <Notifications />}
         {children}
         <CookieNotice />
       </Box>

src/pages/TradeLanding.js

@@ -0,0 +1,127 @@
+import React, { useEffect } from 'react';
+import { hot } from 'react-hot-loader/root';
+import { Link } from 'react-navi';
+import PageContentLayout from 'layouts/PageContentLayout';
+import { Routes } from 'utils/constants';
+import {
+  buildQuestionsFromLangObj,
+  ConnectHero,
+  Features,
+  FixedHeaderTrigger,
+  FullWidth,
+  Questions,
+  QuotesBox,
+  ThickUnderline,
+  Parallaxed,
+  FadeIn,
+  FilledButton
+} from '../components/Marketing';
+import { Box, Text } from '@makerdao/ui-components-core';
+import useLanguage from 'hooks/useLanguage';
+import styled from 'styled-components';
+import { ReactComponent as FrontParallelogramsBase } from 'images/landing/trade/front-parallelograms.svg';
+import { ReactComponent as BackParallelogramsBase } from 'images/landing/trade/back-parallelograms.svg';
+import { ReactComponent as QuotesImg } from 'images/landing/trade/quotes.svg';
+import { ReactComponent as Feat1 } from 'images/landing/trade/feature-1.svg';
+import { ReactComponent as Feat2 } from 'images/landing/trade/feature-2.svg';
+import { ReactComponent as Feat3 } from 'images/landing/trade/feature-3.svg';
+import { ReactComponent as Feat4 } from 'images/landing/trade/feature-4.svg';
+
+const HeroBackground = (() => {
+  const BackParallelograms = styled(BackParallelogramsBase)`
+    position: absolute;
+    left: -184px;
+    top: -196px;
+  `;
+
+  const FrontParallelograms = styled(FrontParallelogramsBase)`
+    position: absolute;
+    left: -174px;
+    top: -108px;
+  `;
+
+  return () => (
+    <FullWidth zIndex="-1" height="670px" style={{ position: 'absolute' }}>
+      <Box maxWidth="866px" m="0 auto">
+        <BackParallelograms />
+        <Parallaxed style={{ zIndex: 10 }}>
+          <FrontParallelograms />
+        </Parallaxed>
+      </Box>
+    </FullWidth>
+  );
+})();
+
+const StyledQuotesBox = styled(QuotesBox)`
+  background: linear-gradient(125.71deg, #e7fcfa 0%, #e7fce9 100%);
+
+  :after {
+    content: '';
+    display: block;
+    background: #bffff8;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    z-index: -1;
+  }
+`;
+
+function TradeLanding() {
+  const { lang } = useLanguage();
+
+  return (
+    <PageContentLayout enableNotifications={false}>
+      <FixedHeaderTrigger button={0}>
+        <ConnectHero>
+          <HeroBackground />
+          <ThickUnderline background="linear-gradient(176.45deg, #ECFFDA 18.9%, #AFFFFA 100%)">
+            <Text.h4>{lang.trade_landing.page_name}</Text.h4>
+          </ThickUnderline>
+          <Text.h1 mt="16px" mb="18px" maxWidth="700px">
+            {lang.trade_landing.headline}
+          </Text.h1>
+          <Box height="150px" maxWidth="690px">
+            <Text>{lang.trade_landing.subheadline}</Text>
+          </Box>
+          <Text fontSize="19px">{lang.trade_landing.connect_to_start}</Text>
+          <Link href="https://oasis.app/trade/market/">
+            <FilledButton width="248px" mt="17px" mb="8px">
+              {lang.trade_landing.cta_button}
+            </FilledButton>
+          </Link>
+        </ConnectHero>
+      </FixedHeaderTrigger>
+      <Box height="200px" />
+      <FadeIn triggerOffset={100} moveDistance="120px">
+        <StyledQuotesBox
+          title={lang.trade_landing.quotes_block.title}
+          body={<Box mb="95px">{lang.trade_landing.quotes_block.body}</Box>}
+          quote={lang.trade_landing.quotes_block.quote1}
+          author={lang.trade_landing.quotes_block.author1}
+          url="https://chat.makerdao.com/group/team-marketing-internal"
+          quotesImg={<QuotesImg />}
+        />
+      </FadeIn>
+      <Features
+        mt="200px"
+        features={[<Feat1 />, <Feat2 />, <Feat3 />, <Feat4 />].map(
+          (img, index) => ({
+            img: img,
+            title: lang.trade_landing[`feature${index + 1}_heading`],
+            content: lang.trade_landing[`feature${index + 1}_content`]
+          })
+        )}
+      />
+      <Box mt="153px" mb="126px">
+        <Text.h2>{lang.landing_page.questions_title}</Text.h2>
+        <Questions
+          questions={buildQuestionsFromLangObj(lang.landing_page, lang)}
+        />
+      </Box>
+    </PageContentLayout>
+  );
+}
+
+export default hot(TradeLanding);

src/routes.js

@@ -10,6 +10,7 @@ import Overview from 'pages/Overview';
 import Borrow from 'pages/Borrow';
 import Save from 'pages/Save';
 import SaveOverview from 'pages/SaveOverview';
+import TradeLanding from 'pages/TradeLanding';
 import Privacy from 'pages/Privacy';
 import Terms from 'pages/Terms';
 import CDPDisplay from 'components/CDPDisplay';
@@ -130,9 +131,10 @@ export default mount({
     })
   ),
 
-  [`/${Routes.TRADE}`]: route(() => {
-    window.location.href = 'https://oasis.app/trade';
-  }),
+  [`/${Routes.TRADE}`]: compose(
+    withView(marketingLayoutView),
+    route(() => ({ title: 'Trade', view: <TradeLanding /> }))
+  ),
 
   [`/${Routes.PRIVACY}`]: route(() => ({
     title: 'Oasis - Privacy Policy',