Adds images in instant page

packages/website/ts/@next/components/aboutPageLayout.tsx

@@ -18,7 +18,7 @@ interface Props {
 
 export const AboutPageLayout = (props: Props) => (
     <SiteWrap theme="light">
-        <Section isFlex={true} maxWidth="1170px">
+        <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
             <Column>
                <ChapterLink to="/next/about/mission">Our Mission</ChapterLink>
                <ChapterLink to="/next/about/team">Team</ChapterLink>

packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx

@@ -15,49 +15,49 @@ interface Props {
 const introData = [
     {
         label: 'Build a relayer',
-        url: '#',
+        url: 'https://0xproject.com/wiki#Build-A-Relayer',
     },
     {
         label: 'Develop on Ethereum',
-        url: '#',
+        url: 'https://0xproject.com/wiki#Ethereum-Development',
     },
     {
         label: 'Make & take orders',
-        url: '#',
+        url: 'https://0xproject.com/wiki#Create,-Validate,-Fill-Order',
     },
     {
         label: 'Use networked liquidity',
-        url: '#',
+        url: 'https://0xproject.com/wiki#Find,-Submit,-Fill-Order-From-Relayer',
     },
 ];
 
 const docsData = [
     {
         label: '0x.js',
-        url: '#',
+        url: 'https://0xproject.com/docs/0x.js',
     },
     {
         label: '0x Connect',
-        url: '#',
+        url: 'https://0xproject.com/docs/connect',
     },
     {
         label: 'Smart Contract',
-        url: '#',
+        url: 'https://0xproject.com/docs/contracts',
     },
 ];
 
 const linksData = [
     {
         label: 'Wiki',
-        url: '#',
+        url: 'https://0xproject.com/wiki',
     },
     {
         label: 'Github',
-        url: '#',
+        url: 'https://github.com/0xProject',
     },
     {
         label: 'Whitepaper',
-        url: '#',
+        url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md',
     },
 ];
 
@@ -129,7 +129,7 @@ export const DropdownDevelopers = withTheme((props: Props) => (
                 </Column>
             </StyledWrap>
 
-            <StyledLink to="#" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
+            <StyledLink to="https://0xproject.com/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
                 View All Documentation
             </StyledLink>
         </DropdownWrap>

packages/website/ts/@next/components/header.tsx

@@ -67,7 +67,7 @@ const navItems: NavItem[] = [
     },
     {
         id: 'blog',
-        url: '#',
+        url: 'https://blog.0xproject.com/latest',
         text: 'Blog',
     },
 ];
@@ -143,7 +143,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                 <TradeButton
                     bgColor={theme.headerButtonBg}
                     color="#ffffff"
-                    href="#"
+                    href="https://0xproject.com/portal"
                 >
                     Trade on 0x
                 </TradeButton>

packages/website/ts/@next/components/heroAnimation.tsx

@@ -36,7 +36,7 @@ const spin = keyframes`
 `;
 
 const moveIn = keyframes`
-    0% { opacity: 0; transform: scale(1.5) rotate(-30deg) }
+    0% { opacity: 0; transform: scale(1.7) rotate(-30deg) }
     100% { opacity: 1; transform: scale(1)  rotate(0deg) }
 `;
 

packages/website/ts/@next/components/newLayout.tsx

@@ -95,7 +95,7 @@ const SectionBase = styled.section<SectionProps>`
 `;
 
 const Wrap = styled(FlexWrap)<WrapProps>`
-    width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
+    width: ${props => props.bgColor ? 'calc(100% - 60px)' : props.wrapWidth};
     max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
     text-align: ${props => props.isTextCentered && 'center'};
     margin: 0 auto;

packages/website/ts/@next/components/sections/landing/hero.tsx

@@ -17,11 +17,11 @@ export const SectionLandingHero = () => (
 
 const HeroActions = () => (
     <>
-        <Button isInline={true}>
+        <Button href="https://0xproject.com/docs" isInline={true}>
             Get Started
         </Button>
 
-        <Button isTransparent={true} isInline={true}>
+        <Button href="/why" isTransparent={true} isInline={true}>
             Learn More
         </Button>
     </>

packages/website/ts/@next/pages/about/team.tsx

@@ -195,11 +195,11 @@ export const NextAboutTeam = () => (
                 width="70%"
                 maxWidth="800px"
             >
-                <WrapGrid isWrapped={true} isCentered={false}>
+                <StyledGrid isWrapped={true} isCentered={false}>
                     {_.map(team, (info: TeamMember, index) => (
                         <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
                     ))}
-                </Wrap>
+                </StyledGrid>
             </Column>
         </Section>
 
@@ -213,17 +213,27 @@ export const NextAboutTeam = () => (
                 <Heading size="medium">Advisors</Heading>
             </Column>
 
-            <Column>
-                <WrapGrid isWrapped={true} isCentered={false}>
+            <Column
+                width="70%"
+                maxWidth="800px"
+            >
+                <StyledGrid isWrapped={true} isCentered={false}>
                     {_.map(advisors, (info: TeamMember, index) => (
                         <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
                     ))}
-                </WrapGrid>
+                </StyledGrid>
             </Column>
         </Section>
     </AboutPageLayout>
 );
 
+const StyledGrid = styled.div`
+    &:after {
+        content: '';
+        clear: both;
+    }
+`;
+
 const Member = ({ name, title, imageUrl }: TeamMember) => (
     <StyledMember>
         <img src={imageUrl} alt={name}/>
@@ -233,8 +243,10 @@ const Member = ({ name, title, imageUrl }: TeamMember) => (
 );
 
 const StyledMember = styled.div`
-    width: calc(25% - 10px);
+    width: calc(25% - 15px);
     margin-bottom: 10px;
+    float: left;
+    margin-right: 10px;
 
     img, svg {
         width: 100%;

packages/website/ts/@next/pages/instant.tsx

@@ -71,8 +71,10 @@ export const Next0xInstant = () => (
         <Section isFullWidth={true} isPadded={false} padding="30px 0">
           <MarqueeWrap>
               <div>
-                  {[...Array(20)].map((item, index) => (
-                    <Card index={index} />
+                  {[...Array(12)].map((item, index) => (
+                    <Card index={index}>
+                      <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
+                    </Card>
                   ))}
               </div>
           </MarqueeWrap>
@@ -110,10 +112,15 @@ export const Next0xInstant = () => (
     </SiteWrap>
 );
 
-// scroll calc for infinite is (width * total / 2) + padding
+// scroll animation calc is simply (imageWidth * totalRepetitions) / 2
 const scroll = keyframes`
     0% { transform: translate3d(0, 0, 0) }
-    100% { transform: translate3d(-2615px, 0, 0) }
+    100% { transform: translate3d(-2220px, 0, 0) }
+`;
+
+const scrollMobile = keyframes`
+    0% { transform: translate3d(0, 0, 0) }
+    100% { transform: translate3d(-1800px, 0, 0) }
 `;
 
 const fadeUp = keyframes`
@@ -127,38 +134,53 @@ const fadeUp = keyframes`
   }
 `;
 
-// width = (260 * 20) - (15 * 19)
+// width = 370 * 12
 const MarqueeWrap = styled.div`
     width: 100vw;
-    height: 380px;
+    height: 514px;
     padding-bottom: 60px;
 
     > div {
-        width: 5485px;
-        height: 380px;
+        height: auto;
         display: flex;
-        animation: ${scroll} 30s linear infinite;
         will-change: transform;
+    }
 
-        img {
-            width: auto;
-            height: 380px;
-        }
+    @media (min-width: 768px) {
+      > div {
+          width: 4440px;
+          animation: ${scroll} 30s linear infinite;
+      }
+    }
+
+    @media (max-width: 768px) {
+      > div {
+          width: 3600px;
+          animation: ${scrollMobile} 30s linear infinite;
+      }
     }
 `;
 
 const Card = styled.div`
-  width: 260px;
-  height: 370px;
-  background: #555;
-  border-radius: 5px;
-  display: inline-block;
   opacity: 0;
+  flex-shrink: 0;
   transform: translateY(10px);
   will-change: opacity, transform;
   animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards;
 
-  & + & {
-    margin-left: 15px;
+  img {
+    height: auto;
+  }
+
+  @media (min-width: 768px) {
+    img {
+      width: 370px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    img {
+      width: 300px;
+    }
   }
 `;