Add Mainpage, Landing component

src/App.js

@@ -1,6 +1,8 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component, Fragment, createRef } from 'react'
 import cx from 'classnames'
 
+import Mainpage from 'pages/Mainpage'
+
 import Header from 'components/Header'
 import SectionDescription from 'components/SectionDescription'
 import Menu from 'components/Menu'
@@ -15,6 +17,8 @@ type Props = {
 }
 
 class App extends Component<Props> {
+  $app = createRef()
+
   state = {
     isLoading: true,
   }
@@ -23,25 +27,39 @@ class App extends Component<Props> {
     const { children, location } = this.props
 
     return (
-      <Fragment>
-        <Modal />
-        <div className="App">
-          <div className={cx('App__section', {
-            'App__section--introduction': location.pathname === '/',
-          })}
-          >
-            <SectionDescription
-              hasModal={location.pathname !== '/'}
-              pathname={location.pathname}
-              className="App__sectionDescription"
-            />
-            {children}
+      <div ref={this.$app} className="App">
+        <Mainpage children={children} />
+        {/*
+          <div className="App__link">
+            <a target="blank" href="https://t.me/jetstreamworld">
+            <img src="/static/images/telegram.png" />
+            </a>
           </div>
-          <MobileMenu className="App__menu hide-desktop" />
-          <Menu className="App__menu hide-mobile" />
-        </div>
-      </Fragment>
+        */}
+      </div>
     )
+
+    // return (
+    //   <Fragment>
+    //     <Modal />
+    //     <div className="App">
+    //       <Header className="App__header" />
+    //       <Menu className="App__menu hide-mobile" />
+    //       <MobileMenu className="App__menu hide-desktop" />
+    //       <div className={cx('App__section', {
+    //         'App__section--introduction': location.pathname === '/',
+    //       })}
+    //       >
+    //         <SectionDescription
+    //           hasModal={location.pathname !== '/'}
+    //           pathname={location.pathname}
+    //           className="App__sectionDescription"
+    //         />
+    //         {children}
+    //       </div>
+    //     </div>
+    //   </Fragment>
+    // )
   }
 }
 

src/App.scss

@@ -1,62 +1,4 @@
-@import "mixins.scss";
-@import "colors.scss";
-
 .App {
   position: relative;
   margin: 0 auto;
-  padding-top: 40px;
-  z-index: 1;
-  @include desktop {
-    width: 1176px;
-  }
-}
-
-.App__section {
-  @include mobile {
-    display: block;
-    width: 100%;
-    padding: 50px 20px;
-
-    &--introduction {
-      padding: 50px 0;
-    }
-  }
-
-  @include desktop {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0 auto;
-    padding-top: 76px;
-    width: 75%;
-    height: 550px;
-    transform: perspective(1200px);
-    transform-style: preserve-3d;
-    -webkit-transform: perspective(1200px) rotateY(5deg) !important;
-    -moz-transform: perspective(1200px) rotateY(5deg) !important;
-    -ms-transform: perspective(1200px) rotateY(5deg) !important;
-    -o-transform: perspective(1200px) rotateY(5deg) !important;
-    -moz-transform-origin: -10% 25%;
-    -ms-transform-origin: -10% 25%;
-    -o-transform-origin: -10% 25%;
-  }
-}
-
-.App__menu {
-  @include mobile {
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-  }
-  @include desktop {
-    vertical-align: bottom;
-    position: relative;
-    display: inline-block;
-    width: 25%;
-  }
-}
-
-.App__sectionDescription {
-  width: 100%;
-}
+}

src/components/Landing.js

@@ -0,0 +1,46 @@
+import React, { Component, createRef } from 'react'
+import cx from 'classnames'
+import { Subject } from 'rxjs'
+import { takeUntil, tap } from 'rxjs/operators'
+
+import IntroductionMD from 'templates/Introduction.md'
+
+import './Landing.scss'
+
+type Props = {
+
+}
+
+class Landing extends Component<Props> {
+  destroy$ = new Subject()
+
+  state = {}
+
+  componentDidMount() {
+
+  }
+
+  componentWillUnmount() {
+    this.destroy$.next(true)
+  }
+
+  render() {
+
+    return (
+      <div className="Landing">
+        <div className="Landing__header">
+          <p className="Landing__title">Welcome</p>
+          <img className="Landing__logo" src="/static/images/favicon@256.png" />
+        </div>
+        <div 
+          className="Landing__description"
+          dangerouslySetInnerHTML={{
+            __html: IntroductionMD,
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default Landing

src/components/Landing.scss

@@ -0,0 +1,41 @@
+.Landing {
+  width: 720px;
+  display: block;
+  margin: 0 auto;
+}
+
+.Landing__header {
+  position: relative;
+  display: block;
+  height: 120px;
+}
+
+.Landing__logo {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  width: 96px;
+  height: 96px;
+  margin: 0 auto;
+  margin-bottom: 6px;
+}
+
+.Landing__title {
+  @include font-style('font-1-28');
+  display: block;
+  font-weight: bold;
+  color: #333333;
+  text-align: left;
+  margin-bottom: 30px;
+}
+
+.Landing__description {
+  @include font-style('font-1-16');
+  line-height: 24px;
+  color: #666666;
+
+  a {
+    color: #81C4A7;
+  }
+}

src/index.js

@@ -4,6 +4,10 @@ import { Router, Route, IndexRoute, browserHistory } from 'react-router'
 const isMobile = require('ismobilejs')
 
 import App from './App'
+import Mainpage from 'pages/Mainpage'
+
+import Landing from 'components/Landing'
+
 import Introduction from 'components/Introduction'
 import RLP from 'components/RLP'
 import PrivateKeyToPublicKey from 'components/PrivateKeyToPublicKey'
@@ -51,7 +55,7 @@ console.info(`%cYou can use following libraries in this console..
 export const renderRoutes = (rootComponent) => (
   <Router history={history}>
     <Route path="/" component={rootComponent}>
-      <IndexRoute component={Introduction} />
+      <IndexRoute component={Landing} />
       <Route path="/rlp" component={RLP} />
       <Route path="/key" component={PrivateKeyToPublicKey} />
       <Route path="/bignumber" component={BigNumberToHex} />

src/index.scss

@@ -1,60 +1,74 @@
 @import "mixins.scss";
 
 @font-face {
-  font-family: 'Days One';
-  src: url(/static/fonts/DaysOne-Regular.ttf);
+  font-family: 'pass';
+  font-style: normal;
+  font-weight: 400;
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
 }
 
 @font-face {
-  font-family: 'Crimson Text';
-  font-weight: bold;
-  src: url(/static/fonts/CrimsonText-Bold.ttf);
-}
-@font-face {
-  font-family: 'Crimson Text';
+  font-family: 'AppleSDGothicNeo';
   font-weight: normal;
-  src: url(/static/fonts/CrimsonText-Regular.ttf);
+  src: url(/static/fonts/AppleSDGothicNeoM.eot?#iefix) format('embedded-opentype'),
+     url(/static/fonts/AppleSDGothicNeoM.woff) format('woff'),
+     url(/static/fonts/AppleSDGothicNeoM.woff2) format('woff2'),
+     url(/static/fonts/AppleSDGothicNeoM.ttf) format('truetype');
 }
 
 @font-face {
-  font-family: 'Lato';
-  src: url(/static/fonts/Lato-Regular.ttf);
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url(/static/fonts/Montserrat-Bold.ttf);
+  font-family: 'AppleSDGothicNeo';
   font-weight: bold;
+  src: url(/static/fonts/AppleSDGothicNeoB.eot?#iefix) format('embedded-opentype'),
+     url(/static/fonts/AppleSDGothicNeoB.woff) format('woff'),
+     url(/static/fonts/AppleSDGothicNeoB.woff2) format('woff2'),
+     url(/static/fonts/AppleSDGothicNeoB.ttf) format('truetype');
 }
 
 @font-face {
-  font-family: 'Montserrat';
-  src: url(/static/fonts/Montserrat-Medium.ttf);
+  font-family: 'AppleSDGothicNeo';
+  font-weight: 900;
+  src: url(/static/fonts/AppleSDGothicNeoH.eot?#iefix) format('embedded-opentype'),
+     url(/static/fonts/AppleSDGothicNeoH.woff) format('woff'),
+     url(/static/fonts/AppleSDGothicNeoH.woff2) format('woff2'),
+     url(/static/fonts/AppleSDGothicNeoH.ttf) format('truetype');
 }
 
 html {
   font-size: 10px;
-  height: 100%;
+  overflow: auto;
+  overflow-y: scroll;
+  background-color: #ffffff;
+  z-index: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &.locked {
+    overflow: hidden;
+  }
 }
 
 body {
-  height: 100%;
   margin: 0;
   padding: 0;
-  padding-bottom: 100px;
-  -webkit-font-smoothing: antialiased;
-  -moz-font-smoothing: antialiased;
+  touch-action: none;
+  -ms-touch-action: none;
+  -webkit-touch-callout: none !important;
+  overflow-y: scroll;
+  z-index: 0;
 
-  &.locked {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
+  &.preload *, &.preload *::before {
+    // prevent transition preload
+    animation-duration: 0s !important;
+    -webkit-animation-duration: 0s !important;
   }
 
   * {
+    touch-action: manipulation; // Prevent double-tap zoom
     box-sizing: border-box;
     -ms-overflow-style: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
      &::-webkit-scrollbar {
        display: none !important;
      }
@@ -63,17 +77,20 @@ body {
   a {
     color: inherit;
     text-decoration: none;
+    -webkit-user-select: none !important;
   }
 
   p, h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
-
-  input, textarea {
-    font-size: 16px !important;
-  }
-
-  label {
-    font-family: 'Montserrat';
+
+  input[type="password"] {
+    font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif ;
+    font-size: 18px;
   }
 }
+
+
+.grecaptcha-badge {
+  display: none;
+}