docs(website): improve mobile exp

Author: christianalfoni

packages/overmind-website/src/components/FrontPage/elements.tsx

@@ -17,23 +17,25 @@ export const Container = styled.div`
   margin-left: auto;
   margin-right: auto;
   max-width: 1100px;
+  width: 100%;
 `
 
 export const ValueProposition = styled.div<{ isMobile: boolean }>`
   display: flex;
   flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
   width: 100%;
   padding: ${({ isMobile, theme }) =>
-    isMobile ? `0 ${theme.padding.large}` : '0'};
+    isMobile ? `0 ${theme.padding.normal}` : '0'};
   box-sizing: border-box;
   align-items: center;
   > div {
     flex: 1;
+    width: ${({ isMobile }) => (isMobile ? '100%' : 'auto')};
   }
   > div:nth-child(1) {
-    margin-right: 40px;
+    margin-right: ${({ isMobile }) => (isMobile ? '0' : '40px')};
   }
-  margin-bottom: 100px;
+  margin-bottom: ${({ isMobile }) => (isMobile ? '25px' : '100px')};
 `
 
 export const QuickstartWrapper = styled.div`
@@ -88,10 +90,10 @@ export const Iframe = styled.iframe`
   overflow: hidden;
 `
 
-export const Banner = styled.div`
+export const Banner = styled.div<{ isMobile: boolean }>`
   display: flex;
   align-items: center;
-  margin-bottom: 150px;
+  margin-bottom: ${({ isMobile }) => (isMobile ? '50px' : '150px')};
 `
 
 export const Button = styled.div``

packages/overmind-website/src/components/FrontPage/index.tsx

@@ -45,7 +45,7 @@ class FrontPage extends React.Component<Props> {
     return (
       <Wrapper>
         <Container>
-          <Banner>
+          <Banner isMobile={viewport.isMobile}>
             <Logo />
           </Banner>
           <ValueProposition isMobile={viewport.isMobile}>

packages/overmind-website/src/components/MobileTopBar/elements.tsx

@@ -5,6 +5,7 @@ export const Wrapper = styled.div`
   z-index: 2;
   height: 50px;
   top: -50px;
+  background-color: ${({ theme }) => theme.color.white};
   color: ${({ theme }) => theme.color.black};
   transition: top 0.5s ease-out;
   width: 100%;
@@ -13,6 +14,7 @@ export const Wrapper = styled.div`
   justify-content: space-between;
   box-sizing: border-box;
   padding: ${({ theme }) => `0 ${theme.padding.small}`};
+  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.01);
 `
 
 export const MenuWrapper = styled.div`