From 750d5c4d8ebe67d8f29834db2b0f9914b414e261 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 6 Oct 2020 13:28:52 +0200
Subject: [PATCH] style(hero): positions

---
 website/src/assets/icons/Line 26.svg     |  3 ---
 website/src/components/HeroFlow/index.js |  2 +-
 website/src/pages/index.js               | 25 ++++++++++++++++++++----
 3 files changed, 22 insertions(+), 8 deletions(-)
 delete mode 100644 website/src/assets/icons/Line 26.svg

diff --git a/website/src/assets/icons/Line 26.svg b/website/src/assets/icons/Line 26.svg
deleted file mode 100644
index e5f766db..00000000
--- a/website/src/assets/icons/Line 26.svg	
+++ /dev/null
@@ -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>
diff --git a/website/src/components/HeroFlow/index.js b/website/src/components/HeroFlow/index.js
index ec014e64..b86109ad 100644
--- a/website/src/components/HeroFlow/index.js
+++ b/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;
   }
 };
 
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 1b10a467..b78aadd0 100644
--- a/website/src/pages/index.js
+++ b/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>