LP: Updated Boost Hub Section & Polished Other Section (BoostIO#597)

* Replaced Boost Hub Image * Replaced Boost Hub Image * Replaced Roadmap Link * Removed Kickstarter and Added Link to Footer * Replaced Subtitle * Removed GitHub Button and Added Link to Alert * Added Community Tab * Redesigned Hero Section * Redesigned Boost Hub Section * Redesigned Download Section * Adjusted Community Section * Rollback hero section Co-authored-by: Junyoung Choi <rokt33r.choi@gmail.com>
skyheero · Aug 26, 2020 · 80a754f · 80a754f
1 parent fbf6d8f
commit 80a754f
Show file tree

Hide file tree

Showing 21 changed files with 495 additions and 337 deletions.
diff --git a/homepage/components/organisms/BoostHubSection.tsx b/homepage/components/organisms/BoostHubSection.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import ButtonLink from '../atoms/ButtonLink'
 
 const Container = styled.div<SpaceProps>`
-  max-width: 72em;
+  max-width: 70em;
   margin: 0 auto;
   ${space}
 `
@@ -19,30 +19,28 @@ const BoostHubTitle = styled.div`
 `
 
 const BoostHubDescription = styled.div`
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
+  text-align: center;
 
   p {
-    margin-top: 0;
-    margin-bottom: 30px;
+    margin: 5px 0;
   }
-`
-
-const FeatureList = styled.ul`
-  li {
-    font-size: 20px;
 
-    + li {
-      margin-top: 10px;
-    }
+  a {
+    margin-top: 40px;
   }
+`
 
+const FeatureList = styled.div`
   span {
-    display: inline-block;
-    margin-right: 5px;
+    display: block;
+    margin-bottom: 10px;
     font-weight: bold;
   }
+
+  @media only screen and (min-width: 1024px) {
+    margin-bottom: 30px;
+  }
 `
 
 const BoostHubImage = styled.img`
@@ -54,8 +52,8 @@ const BoostHubSection = () => {
 
   return (
     <section id='boosthub'>
-      <Box bg='#2c2c2c' color='#f0f0f0' pt={5} px={2}>
-        <Container mt={5}>
+      <Box bg='#2c2c2c' color='#f0f0f0' px={2}>
+        <Container py={9}>
           <Row>
             <Column width={1}>
               <BoostHubTitle>
@@ -68,8 +66,9 @@ const BoostHubSection = () => {
 
           <BoostHubDescription>
             <Row>
-              <Column width={[1, 1, 1, 1 / 2]} mb={[6, 6, 6, 0]}>
-                <p>{t('boostHub.description')}</p>
+              <Column width={1} mb={[6, 6, 6, 0]}>
+                <p>{t('boostHub.description1')}</p>
+                <p>{t('boostHub.description2')}</p>
                 <ButtonLink
                   bg='teal'
                   color='white'
@@ -80,34 +79,31 @@ const BoostHubSection = () => {
                   {t('common.boostHub')}
                 </ButtonLink>
               </Column>
-              <Column width={[1, 1, 1, 1 / 2]}>
-                <FeatureList>
-                  <li>
-                    <span>{t('boostHub.feature1Name')}:</span>
-                    {t('boostHub.feature1Detail')}
-                  </li>
-                  <li>
-                    <span>{t('boostHub.feature2Name')}:</span>
-                    {t('boostHub.feature2Detail')}
-                  </li>
-                  <li>
-                    <span>{t('boostHub.feature3Name')}:</span>
-                    {t('boostHub.feature3Detail')}
-                  </li>
-                  <li>
-                    <span>{t('boostHub.feature4Name')}:</span>
-                    {t('boostHub.feature4Detail')}
-                  </li>
-                </FeatureList>
-              </Column>
             </Row>
           </BoostHubDescription>
 
           <Row>
             <Column>
-              <BoostHubImage src='/static/boosthub.svg' />
+              <BoostHubImage src='/static/boosthub.png' />
             </Column>
           </Row>
+
+          <FeatureList>
+            <Row>
+              <Column width={[1, 1, 1, 1 / 3]} px={[3, 3, 5]} py={[3, 3, 0]}>
+                <span>{t('boostHub.feature1Name')}</span>
+                {t('boostHub.feature1Detail')}
+              </Column>
+              <Column width={[1, 1, 1, 1 / 3]} px={[3, 3, 5]} py={[3, 3, 0]}>
+                <span>{t('boostHub.feature2Name')}</span>
+                {t('boostHub.feature2Detail')}
+              </Column>
+              <Column width={[1, 1, 1, 1 / 3]} px={[3, 3, 5]} py={[3, 3, 0]}>
+                <span>{t('boostHub.feature3Name')}</span>
+                {t('boostHub.feature3Detail')}
+              </Column>
+            </Row>
+          </FeatureList>
         </Container>
       </Box>
     </section>

diff --git a/homepage/components/organisms/CommunitySection.tsx b/homepage/components/organisms/CommunitySection.tsx
@@ -10,6 +10,12 @@ const Container = styled.div<SpaceProps>`
   max-width: 60em;
   margin: 0 auto;
   ${space}
+
+  p {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 `
 
 const CommunityLink = styled.a<SpaceProps>`