feat: new homepage

Author: CSUwangj

src/i18n/index.ts

@@ -21,6 +21,16 @@ i18n
             'practice': 'Practice',
             'learning': 'nav.learning'
           },
+          'homepage': {
+            'intro': {
+              'ctf': 'Learning through CTF',
+              'ctf-detail': 'Learning cryptography through Jeopardy-style CTF makes it more interesting.',
+              'translate': 'Multilingual support',
+              'translate-detail': 'All content on the platform can be quickly switched to other languages, as long as someone provide translation.',
+              'resource': 'Integrated resources',
+              'resource-detail': 'Click on the hyperlinks, and start the learning from the points you\'re interested about.'
+            }
+          },
           'introduction': 'Look, Study, Practice, all you need for cryptography is here(WIP :)',
           'light': 'Light',
           'dark': 'Dark',
@@ -35,6 +45,9 @@ i18n
             'resource': 'Integrated resources',
             'tools': 'Cryptography toolbox prepared for novice (WIP)',
             'visualize': 'Visualize cryptographic algorithm(WIP)',
+            'etc': 'What\'s more?',
+            'etc-detail': 'more features is waiting for adding into our platform: tutorial, more resouces, learning guide, more labs, cryptographic toolbox, visualization.',
+            'etc-contact': 'You really can give a help hand at CSUwangj@protonmail.com.'
           },
           'lab': {
             'endpoint': 'Endpoint ',
@@ -55,6 +68,19 @@ i18n
             'practice': '实践',
             'learning': '学习',
           },
+          'homepage': {
+            'intro': {
+              'ctf': '通过解题学密码学',
+              'ctf-detail': '通过夺旗赛的方式来学习密码学，使知识更有趣。同时实践的过程也会让知识更牢固。',
+              'translate': '多语言支持',
+              'translate-detail': '平台的所有内容都可以迅速地切换到其他语言上，只要有人翻译。',
+              'resource': '资源整合',
+              'resource-detail': '随处可点的超链接，通过感兴趣的点展开学习的道路吧。',
+              'etc': '想要更多？',
+              'etc-detail': '更多的功能正在努力实现中：教程、更多资源、更多实践、学习指南、密码学工具箱、图解密码学。',
+              'etc-contact': '欢迎提供援助：CSUwangj@protonmail.com。'
+            }
+          },
           'introduction': '接触、学习、实践，为了密码学你需要的都在这（还未完成 ：）',
           'light': '日间模式',
           'dark': '夜间模式',

src/pages/home/index.tsx

@@ -3,7 +3,7 @@ import logo from 'image/BigLogo.png'
 import { useTranslation } from 'react-i18next'
 import styled from '@emotion/styled/macro'
 import { Div } from 'components/Div'
-import { H1, H3, H5, Button, Intent } from '@blueprintjs/core'
+import { H1, H3, H5, Button, Intent, Text } from '@blueprintjs/core'
 import { IconNames } from "@blueprintjs/icons"
 import { ExternalLink } from 'components/Link'
 import { useHistory } from 'react-router-dom'
@@ -22,7 +22,7 @@ const Gap = styled.div`
 `
 
 const BackContainer = styled.div`
-  margin-top: -5px;
+  padding-top: 5px;
   background-color: #47555e;
   h1, h3, h5 {
     color: #EEEEEE;
@@ -33,6 +33,11 @@ const BackContainer = styled.div`
   padding-bottom: 5px;
 `
 
+const IntroBelowImg = styled(BackContainer)`
+  margin-top: -5px;
+  padding-bottom: 10px;
+`
+
 const NavButton = styled(Button)`
   padding: 15px 25px !important;
   min-width: 150px !important;
@@ -59,22 +64,69 @@ const ButtonContainer = styled.div`
   align-items:center;
 `
 
+const FeaturesContainer = styled(Div)`
+  display: flex;
+  max-width: 1260px;
+  margin-left: auto;
+  margin-right: auto;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+`
+
+const FeatureContainer = styled(Div)`
+  flex: 1 1 0;
+  margin: 40px;
+  line-height: 25px;
+  text-align: justify;
+`
+
+const FeatureTitle = styled(H3)`
+  font-size: 24px;
+  font-weight: 300;
+  padding-bottom: 20px;
+`
+
+const FeatureText = styled(Text)`
+  font-size: 16px;
+  font-weight: 400;
+`
+
 export const Page: React.FC = () => {
   const { t } = useTranslation()
   const history = useHistory()
 
   return <Container>
     <Img src={logo} alt='Big Logo' />
-    <BackContainer>
+    <IntroBelowImg>
       <H1>{t('nav.home')}</H1>
       <H3>{t('introduction')}</H3>
       <Gap />
       <ButtonContainer>
         <NavButton large intent={Intent.PRIMARY} onClick={() => history.push('/practice')} text={t('getstarted')} />
         <TakeButton large outlined={true} rightIcon={IconNames.ARROW_RIGHT} onClick={() => history.push('/tutorial')} text={t('taketutorial')} />
       </ButtonContainer>
-    </BackContainer>
-    
+    </IntroBelowImg>
+    <FeaturesContainer>
+      <FeatureContainer>
+        <FeatureTitle>{t('homepage.intro.ctf')}</FeatureTitle>
+        <FeatureText>{t('homepage.intro.ctf-detail')}</FeatureText>
+      </FeatureContainer>
+      <FeatureContainer>
+        <FeatureTitle>{t('homepage.intro.translate')}</FeatureTitle>
+        <FeatureText>{t('homepage.intro.translate-detail')}</FeatureText>
+      </FeatureContainer>
+      <FeatureContainer>
+        <FeatureTitle>{t('homepage.intro.resource')}</FeatureTitle>
+        <FeatureText>{t('homepage.intro.resource-detail')}</FeatureText>
+      </FeatureContainer>
+      <FeatureContainer>
+        <FeatureTitle>{t('homepage.intro.etc')}</FeatureTitle>
+        <FeatureText>{t('homepage.intro.etc-detail')}</FeatureText>
+        <FeatureText>{t('homepage.intro.etc-contact')}</FeatureText>
+      </FeatureContainer>
+    </FeaturesContainer>
     <BackContainer>
       <Gap />
       <H5>Copyright © 2020-2021 <ExternalLink link='https://csuwangj.github.io/'>CSUwangj</ExternalLink></H5>