Clean up items, working on the new page.

src/About.js

 import React from 'react'
+import enquire from 'enquire.js'
+
+import { Layout } from 'antd'
+
+
+import Nav from './Nav'
+
+const { Content, Footer, Header } = Layout
 
 export default class About extends React.Component {
+    constructor(props) {
+        super(props)
 
+        this.state = {
+            isMobile: false,
+            stats: { signups: null, online: null },
+            latest: { win32: {}, drawin: {} },
+            platform: navigator.platform.match(/Mac/i) ? 'drawin' : 'win32'
+        }
+    }
+
+    async componentDidMount() {
+        enquire.register('only screen and (max-width: 767px)', {
+            match: () => {
+                this.setState({ isMobile: true })
+            },
+            unmatch: () => {
+                this.setState({ isMobile: false })
+            }
+        })
+
+        const initState = {
+            stats: {
+                signups: await this.get_stats_signups(),
+                online: await this.get_stats_online()
+            }
+        }
+        const initLatest = {
+            latest: {
+                win32: await this.get_latest_win32(),
+                drawin: await this.get_latest_drawin()
+            }
+        }
+
+        this.setState(initState)
+        this.setState(initLatest)
+    }
 
     render() {
+        const { latest, isMobile, stats } = this.state
         return (
-            <div>about</div>
+            <Layout>
+                {!isMobile ?
+                    (<Header style={{ width: '100%' }}>
+                        <Nav isMobile={isMobile} />
+                    </Header>) :
+                    (<Header style={{ width: '100%', padding: 0 }}>
+                        <Nav isMobile={isMobile} />
+                    </Header>
+                    )}
+            </Layout>
         )
     }
 }
\ No newline at end of file

src/App.css

 @import '~antd/dist/antd.css';
 
-.App-Logo span {
-  font-size: 1rem;
-  color: rgba(255,255,255, 0.75)
+.ant-menu{
+  padding-top:4px;
+  font-size:10pt;
 }
 
 .App-Logo {
   width: 120px;
   height: 31px;
   border-radius: 6px;
-  margin: 16px 24px 16px 0;
+  margin: 16px 40px 16px 0;
   float: left;
   display: flex;
   align-items: center;
@@ -24,7 +24,7 @@
 
 .App-Content1 {
   height:450px;
-  background: url(../public/FrontPageBackGround.jpg) 100%/cover;
+  background: url(../public/front-page-background.jpg) 100%/cover;
   background-position: center;
   overflow:hidden;
   width:100%;

src/App.js

@@ -105,12 +105,12 @@ export default class App extends Component {
       <Menu style={{transform: 'translateX(-16px)'}}>
         <Menu.Item key="0">
           <a onClick={() => this.changeLanguage('en-US')} className='changelanguage'> 
-          <img alt="img" src={require('../public/USFlag.png')}/> 
+          <img alt="img" src={require('../public/flag-us.png')}/> 
           &nbsp;English</a>
         </Menu.Item>
         <Menu.Item key="1">
           <a onClick={() => this.changeLanguage('zh-CN')} className='changelanguage'> 
-          <img alt="img" src={require('../public/CNFlag.png')}/> 
+          <img alt="img" src={require('../public/flag-cn.png')}/> 
           &nbsp;中文</a>
         </Menu.Item>
       </Menu>
@@ -131,7 +131,7 @@ export default class App extends Component {
           (<Row type="flex" justify="space-around" align="middle" >
             <Col span={24} style={{ display: "flex", flexDirection: 'column', alignItems: 'center' }}>
 
-              <img alt="img" src={require('../public/Cubbit_Full_512.png')} className="App-Poster" />
+              <img alt="img" src={require('../public/cubbit-full-512.png')} className="App-Poster" />
 
               <div className="App-Poster-Content">
                 <div className="title">
@@ -207,7 +207,7 @@ export default class App extends Component {
                         <Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying" /> </Timeline.Item>
                       </Timeline>
                       <div className="MoeCubeProduct">
-                        <img alt="MoeCubeProduct" width="100%" src={require('../public/MoeCubeProduct.png')} />
+                        <img alt="MoeCubeProduct" width="100%" src={require('../public/moecube-product.png')} />
                       </div>
                       <a href=""><Button id="Card3Button" type="primary" icon="star"><FormattedMessage id={"CardAction3"} /></Button></a>
                     </Card>
@@ -265,7 +265,7 @@ export default class App extends Component {
                       </Timeline>
 
                       <div className="MoeCubeProduct">
-                        <img alt="MoeCubeProduct" width="100%" src={require('../public/MoeCubeProduct.png')} />
+                        <img alt="MoeCubeProduct" width="100%" src={require('../public/moecube-product.png')} />
                       </div>
 
                       <a href=""><Button id="Card3Button" type="primary" icon="heart"><FormattedMessage id={"CardAction3"} /></Button></a>
@@ -313,10 +313,10 @@ export default class App extends Component {
           <Dropdown overlay={menu} trigger={['click']}>
             {language==='en-US'?
             (<a className="ant-dropdown-link changelanguage" href="#">
-              <img alt="img" src={require('../public/USFlag.png')}/>
+              <img alt="img" src={require('../public/flag-us.png')}/>
               &nbsp;English <Icon type="down" className="flag"/>
             </a>):(<a className="ant-dropdown-link changelanguage" href="#">
-              <img alt="img" src={require('../public/CNFlag.png')}/>
+              <img alt="img" src={require('../public/flag-cn.png')}/>
               &nbsp;中文 <Icon type="down" className="flag"/>
             </a>)}
           </Dropdown>

src/Nav.js

@@ -19,8 +19,7 @@ export default class Nav_Mobile extends React.Component{
       return (
         <div>
           <div className="App-Logo">
-            <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
-            <span>MoeCube</span>           
+            <img alt="img" src={require("../public/logo.png")} style={{width: '140px', margin: '10px'}}/>      
           </div>
           <Menu
             theme="dark"
@@ -44,8 +43,7 @@ export default class Nav_Mobile extends React.Component{
         <div>
           <div style={{position:'fixed',zIndex:10,width:'100%',background:'#404040'}}>
             <div className="App-Logo">
-              <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
-              <span>MoeCube</span>           
+              <img alt="img" src={require("../public/logo.png")} style={{width: '140px', margin: '10px'}}/>         
             </div>
             <div className="square" onClick={this.caidan}>
               <Icon type="down-circle-o" />