feat(Signup): set up pit callout template

packages/blockchain-info-components/src/Images/Images.js

@@ -61,6 +61,9 @@ import money from './img/money.png'
 import microDepositsWhole from './img/micro-deposits-whole.svg'
 import poweredByCoinify from './img/powered_by_coinify.svg'
 import poweredBySfox from './img/powered_by_sfox.svg'
+import pitMacbookGold from './img/pit-macbook-gold.png'
+import pitMacbookGold2 from './img/pit-macbook-gold@2x.png'
+import pitMacbookGold3 from './img/pit-macbook-gold@3x.png'
 import printer from './img/printer.svg'
 import qrCode from './img/qr-code.png'
 import restoreLockboxIcon from './img/restore-lockbox-icon.svg'
@@ -222,6 +225,9 @@ export default {
   'lockbox-welcome-safe': lockboxWelcomeSafe,
   'micro-deposits-whole': microDepositsWhole,
   money: money,
+  'pit-macbook-gold': pitMacbookGold,
+  'pit-macbook-gold2': pitMacbookGold2,
+  'pit-macbook-gold3': pitMacbookGold3,
   'powered-by-coinify': poweredByCoinify,
   'powered-by-sfox': poweredBySfox,
   'qr-code': qrCode,

packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.js

@@ -34,7 +34,6 @@ const ContentContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  overflow-y: auto;
   margin: 0 25px;
   z-index: 1;
 

packages/blockchain-wallet-v4-frontend/src/scenes/Register/PitCallout/index.js

@@ -0,0 +1,117 @@
+import React from 'react'
+import styled, { keyframes, css } from 'styled-components'
+import { Icon, Image, Link, Text } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
+
+const popoutKeyFrame = keyframes`
+  0%, 10%, 20%, 30%, 70%, 80%, 90%, 100% { right: -40px; }
+  40%, 50%, 60% { right: -70px; }
+`
+const popoutAnimation = css`
+  animation: ${popoutKeyFrame} 5s infinite
+    cubic-bezier(0.68, -0.55, 0.265, 1.55);
+`
+const InnerWrapperWidth = 280
+const CopyWrapperWidth = 200
+const WrapperPaddingX = 30
+const WrapperPaddingY = 20
+
+const PitCalloutWrapper = styled(Wrapper)`
+  width: auto;
+  top: 50%;
+  right: -40px;
+  position: absolute;
+  flex-direction: column;
+  transform: translateY(-50%);
+  padding: ${WrapperPaddingY}px ${WrapperPaddingX}px;
+  ${popoutAnimation};
+  transition: all 0.3s;
+  &:hover {
+    transform: translateY(-50%) translateX(${InnerWrapperWidth - 10}px);
+    animation: initial;
+    .footer {
+      opacity: 1;
+    }
+  }
+  @media (max-width: 1052px) {
+    display: none;
+  }
+`
+const InnerWrapper = styled.div`
+  width: ${InnerWrapperWidth}px;
+`
+const CopyWrapper = styled.div`
+  width: ${CopyWrapperWidth}px;
+  padding-left: ${WrapperPaddingX}px;
+`
+const Copy = styled.div`
+  margin: 8px 0 16px 0;
+`
+const FooterLink = styled(Link)`
+  opacity: 0;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+`
+const GoLink = styled.div`
+  margin-left: 8px;
+  border: 2px solid ${props => props.theme['gray-1']};
+  border-radius: 5px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 8px;
+  span {
+    transform: rotate(-90deg);
+    font-weight: 600;
+  }
+`
+
+const PitCallout = () => {
+  return (
+    <PitCalloutWrapper>
+      <InnerWrapper>
+        <CopyWrapper>
+          <Text color='gray-6' size='20px' weight={600}>
+            Trade Like the Pros.
+          </Text>
+          <Text color='gray-6' size='20px' weight={600}>
+            Trade in The PIT.
+          </Text>
+          <Copy>
+            <Text color='textBlack' size='12px' weight={500}>
+              We built a Crypto Exchange. Instantly Exchange over 26 pairs of
+              Crypto and Cash.
+            </Text>
+          </Copy>
+        </CopyWrapper>
+        <Image
+          width='100%'
+          name='pit-macbook-gold'
+          srcset={{
+            'pit-macbook-gold2': '2x',
+            'pit-macbook-gold3': '3x'
+          }}
+        />
+        <FooterLink
+          href='google.com'
+          className='footer'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <Text color='blue' weight={600}>
+            Check It Out
+          </Text>
+          <GoLink>
+            <Icon name='down-arrow-filled' color='brand-secondary' />
+          </GoLink>
+        </FooterLink>
+      </InnerWrapper>
+    </PitCalloutWrapper>
+  )
+}
+
+export default PitCallout

packages/blockchain-wallet-v4-frontend/src/scenes/Register/template.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
+import Bowser from 'bowser'
 import { FormattedMessage } from 'react-intl'
 import { Field, reduxForm } from 'redux-form'
-import Bowser from 'bowser'
 import { find, has, propEq } from 'ramda'
 
 import {
@@ -27,6 +27,7 @@ import {
 } from 'components/Form'
 import { Wrapper } from 'components/Public'
 import Terms from 'components/Terms'
+import PitCallout from './PitCallout'
 import LinkAccount from '../LinkAccount'
 
 // load zxcvbn dependency async and set on window
@@ -49,10 +50,12 @@ const isSupportedBrowser = browser.satisfies({
 
 const SignupWrapper = styled.div`
   display: flex;
+  position: relative;
 `
 const PublicWrapper = styled(Wrapper)`
   position: relative;
   overflow: visible;
+  z-index: 1;
 `
 
 const Header = styled.div`
@@ -230,6 +233,7 @@ const Register = props => {
           </FormGroup>
         </RegisterForm>
       </PublicWrapper>
+      <PitCallout />
     </SignupWrapper>
   )
 }