Tweak launch kit

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

@@ -99,6 +99,7 @@ const TextWrap = styled.div<Props>`
     max-width: 560px;
 
     ul {
+        padding-top: 10px;
         padding-left: 1rem;
     }
 

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

@@ -5,6 +5,8 @@ import {addFadeInAnimation, fadeIn} from 'ts/@next/constants/animations';
 
 interface Props {
     title: string;
+    isLargeTitle?: boolean;
+    isFullWidth?: boolean;
     description: string;
     figure?: React.ReactNode;
     actions?: React.ReactNode;
@@ -12,7 +14,7 @@ interface Props {
 
 export const Hero = (props: Props) => (
     <Section>
-        <Wrap isCentered={!props.figure}>
+        <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}>
             {props.figure &&
                 <Content width="400px">
                     {props.figure}
@@ -20,7 +22,7 @@ export const Hero = (props: Props) => (
             }
 
             <Content width={props.figure ? '546px' : '678px'}>
-                <Title isLarge={props.figure}>
+                <Title isLarge={props.isLargeTitle}>
                     {props.title}
                 </Title>
 
@@ -46,12 +48,12 @@ const Section = styled.section`
     }
 `;
 
-const Wrap = styled.div<{ isCentered?: boolean }>`
+const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>`
     width: calc(100% - 60px);
     margin: 0 auto;
 
     @media (min-width: 768px) {
-        max-width: 1136px;
+        max-width: ${props => !props.isFullWidth ? '895px' : '1136px'};
         flex-direction: row-reverse;
         display: flex;
         align-items: center;
@@ -65,7 +67,7 @@ const Wrap = styled.div<{ isCentered?: boolean }>`
 `;
 
 const Title = styled.h1<{ isLarge?: any }>`
-    font-size: ${props => props.isLarge ? '80px' : '58px'};
+    font-size: ${props => props.isLarge ? '80px' : '50px'};
     font-weight: 300;
     line-height: 1.1;
     margin-bottom: 30px;

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

@@ -9,6 +9,7 @@ import {HeroAnimation} from 'ts/@next/components/heroAnimation';
 export const SectionLandingHero = () => (
     <Hero
         title="Powering Decentralized Exchange"
+        isLargeTitle={true}
         description="0x is the best solution for adding exchange functionality to your business."
         figure={<LandingAnimation image={<HeroAnimation />} />}
         actions={<HeroActions />}

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

@@ -42,9 +42,11 @@ export class NextLaunchKit extends React.PureComponent {
         return (
             <SiteWrap theme="dark">
                 <Hero
+                    isLargeTitle={false}
+                    isFullWidth={false}
                     title="0x Launch Kit"
                     description="Launch a relayer in under a minute"
-                    figure={<Icon name="launchKit_versionB" size="hero" />}
+                    figure={<Icon name="launchKit_versionB" size="hero" margin={['small', 0, 'small', 0]} />}
                     actions={<HeroActions/>}
                 />