Merge branch 'site' of github.com:wbkd/react-flow into site

website/src/assets/icons/Line 26.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="3" viewBox="0 0 20 3" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line x1="8.74228e-08" y1="1.5" x2="20" y2="1.5" stroke="#FF0072" stroke-width="2"/>
-</svg>

website/src/components/HeroFlow/index.js

@@ -16,7 +16,7 @@ const getOffset = () => {
   } else if (windowWidth < 1200) {
     return 405;
   } else {
-    return (windowWidth - 1200) / 2 + 405;
+    return (windowWidth - 1200) / 2 + 450;
   }
 };
 

website/src/pages/index.js

@@ -27,6 +27,11 @@ const metaTags = {
   robots: 'index,follow',
 };
 
+const HeroWrapper = styled(Box)`
+  position: relative;
+  height: 500px;
+`;
+
 const SectionSubtitle = styled(H4)`
   font-weight: 400;
   line-height: 1.5;
@@ -40,11 +45,16 @@ const HeadlineAbsolute = styled(Box)`
   left: 0;
   width: 100%;
   z-index: 100;
+  height: 100%;
   pointer-events: none;
 `;
 
 const HeadlineWrapper = styled(Box)`
   max-width: 400px;
+
+  ${H1} {
+    margin-top: 0;
+  }
 `;
 
 const DocsButton = styled(Button)`
@@ -98,13 +108,20 @@ const WorkButton = styled(Button)`
   }
 `;
 
+const CenterHeadline = styled(CenterContent)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+`;
+
 const Home = () => {
   return (
     <Page metaTags={metaTags}>
-      <Box style={{ position: 'relative', height: 500 }}>
+      <HeroWrapper>
         <HeroFlow />
         <HeadlineAbsolute>
-          <CenterContent>
+          <CenterHeadline>
             <HeadlineWrapper>
               <H1>Wire your ideas with React Flow</H1>
               <SectionSubtitle>
@@ -134,9 +151,9 @@ const Home = () => {
                 </ExampleButton>
               </Flex>
             </HeadlineWrapper>
-          </CenterContent>
+          </CenterHeadline>
         </HeadlineAbsolute>
-      </Box>
+      </HeroWrapper>
 
       <ContentSection bg="violetLighten5">
         <CenterContent>