wip: homepage components

gogo-tattoo · Jun 27, 2017 · 2f1dba9 · 2f1dba9
1 parent af6a545
commit 2f1dba9
Show file tree

Hide file tree

Showing 56 changed files with 777 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,6 @@
   "name": "skycoin.net",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://skycoin.github.io/skycoin.net",
   "dependencies": {
     "flat": "^2.0.1",
     "grid-styled": "^2.0.0-4",
@@ -13,6 +12,7 @@
     "react": "^15.6.1",
     "react-create-component-from-tag-prop": "^1.2.1",
     "react-dom": "^15.6.1",
+    "react-helmet": "^5.1.3",
     "react-intl": "^2.3.0",
     "react-responsive": "^1.3.0",
     "react-router-dom": "^4.1.1",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-256x256.png b/public/android-chrome-256x256.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#8481eb</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,9 +1,6 @@
 <!doctype html>
-<html lang="en">
+<html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#4990e2">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,15 +1,17 @@
 {
   "short_name": "Skycoin",
   "name": "Skycoin",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
+  "icons": [{
+    "src": "/android-chrome-192x192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }, {
+    "src": "/android-chrome-256x256.png",
+    "sizes": "256x256",
+    "type": "image/png"
+  }],
   "start_url": "./index.html",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#4990e2"
+  "theme_color": "#8481eb",
+  "background_color": "#ffffff"
 }
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import { Helmet } from "react-helmet";
 import flatten from 'flat';
 import values from 'lodash/values';
 import { ThemeProvider } from 'styled-components';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import zh from 'react-intl/locale-data/zh';
+import ru from 'react-intl/locale-data/ru';
 import {
   BrowserRouter as Router,
   Switch,
@@ -14,7 +16,7 @@ import { COLORS, BREAKPOINTS, SPACE, FONT_SIZES } from 'config';
 import * as locales from 'locales';
 import Routes from '../Routes';
 
-addLocaleData([...zh]);
+addLocaleData([...zh, ...ru]);
 
 const theme = {
   colors: flatten(COLORS),
@@ -25,16 +27,33 @@ const theme = {
 
 const Root = ({ locale, ...props }) => (
   <IntlProvider locale={locale} messages={flatten(locales[locale])}>
-    <ThemeProvider theme={theme}>
-      <Routes {...props} />
-    </ThemeProvider>
+    <div>
+      <Helmet titleTemplate="%s · Skycoin">
+        <html lang={locale} />
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#8481eb" />
+        <meta name="apple-mobile-web-app-title" content="Skycoin" />
+        <meta name="application-name" content="Skycoin" />
+        <meta name="theme-color" content="#ffffff" />
+      </Helmet>
+
+      <ThemeProvider theme={theme}>
+        <Routes {...props} />
+      </ThemeProvider>
+    </div>
   </IntlProvider>
 );
 
 export default () => (
   <Router>
     <Switch>
       <Route path="/cn" render={props => <Root {...props} locale="zh" />} />
+      <Route path="/ru" render={props => <Root {...props} locale="ru" />} />
       <Route path="/" render={props => <Root {...props} locale="en" />} />
     </Switch>
   </Router>

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -10,7 +10,7 @@ export default styled.a`
   border: 1px solid transparent;
   cursor: pointer;
   line-height: 1;
-  font-weight: 600;
+  font-weight: 700;
 
   border-radius: ${props => props.pill ? BORDER_RADIUS.pill : BORDER_RADIUS.base};
   box-shadow: ${BOX_SHADOWS.base};

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, Box } from 'grid-styled';
+import { rem } from 'polished';
+import { Link } from 'react-router-dom';
+
+import { SPACE } from 'config';
+import Container from '../Container';
+import Heading from '../Heading';
+import Text from '../Text';
+import Logo from '../Logo';
+
+const Footer = styled.div`
+
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+`;
+
+const ListItem = styled.li`
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`
+
+const Languages = styled.div`
+  list-style: none;
+  margin: 0;
+
+
+`;
+
+const Language = styled.span`
+  &:not(:first-of-type):before {
+    content: ' · '
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+
+const Email = styled.a`
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default () => (
+  <Footer>
+    <Container>
+      <Flex wrap my={[4, 8]} mx={-4}>
+        <Box width={[1/2, 1/4]} my={2} px={4}>
+          <Logo />
+
+          <Text fontSize={[1, 2, 3]} color="gray.8" heavy mt={2}>
+            <Email href="mailto:[email protected]">
+              [email protected]
+            </Email>
+          </Text>
+
+          <Text fontSize={[0, 0, 1]} color="gray.8" heavy mb={0}>
+            <Languages>
+              <Language><Link to="/">English</Link></Language>
+              <Language><Link to="/cn">中文</Link></Language>
+              <Language><Link to="/ru">Ру́сский</Link></Language>
+            </Languages>
+          </Text>
+        </Box>
+
+        <Box width={[1/2, 1/4]} my={2} px={4}>
+          <Heading color="black" fontSize={3} heavy>Get started</Heading>
+          <Text fontSize={[1, 2, 3]} color="gray.8" mb={0}>
+            <List>
+              <ListItem><Link to="/">Download wallet</Link></ListItem>
+              <ListItem><Link to="/">Buy Skycoin</Link></ListItem>
+              <ListItem><Link to="/">How it works</Link></ListItem>
+              <ListItem><Link to="/">Quickstart guide</Link></ListItem>
+            </List>
+          </Text>
+        </Box>
+
+        <Box width={[1/2, 1/4]} my={2} px={4}>
+          <Heading color="black" fontSize={3} heavy>Explore</Heading>
+          <Text fontSize={[1, 2, 3]} color="gray.8" mb={0}>
+            <List>
+              <ListItem><Link to="/">Distribution</Link></ListItem>
+              <ListItem><Link to="/">Whitepapers</Link></ListItem>
+              <ListItem><Link to="/">Blockchain explorer</Link></ListItem>
+              <ListItem><Link to="/">Roadmap</Link></ListItem>
+            </List>
+          </Text>
+        </Box>
+
+        <Box width={[1/2, 1/4]} my={2} px={4}>
+          <Heading color="black" fontSize={3} heavy>Community</Heading>
+          <Text fontSize={[1, 2, 3]} color="gray.8" mb={0}>
+            <List>
+              <ListItem><Link to="/">Blog</Link></ListItem>
+              <ListItem><Link to="/">Github</Link></ListItem>
+              <ListItem><Link to="/">Telegram</Link></ListItem>
+              <ListItem><Link to="/">Slack</Link></ListItem>
+            </List>
+          </Text>
+        </Box>
+      </Flex>
+    </Container>
+  </Footer>
+);
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -0,0 +1 @@
+export { default } from './Footer';
diff --git a/src/components/GetStarted/GetStarted.js b/src/components/GetStarted/GetStarted.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, Box } from 'grid-styled';
+
+import { COLORS } from 'config';
+import Heading from 'components/Heading';
+import Button from 'components/Button';
+import Container from 'components/Container';
+import media from 'utils/media';
+
+const GetStarted = styled.div`
+  background-color: ${COLORS.gray[1]};
+  text-align: center;
+
+  ${media.md.css`
+    text-align: left;
+  `}
+`;
+
+const Buttons = styled.div`
+  ${media.md.css`
+    text-align: right;
+  `}
+`;
+
+export default () => (
+  <GetStarted>
+    <Container>
+      <Flex align="center" py={[6, 6, 10]} wrap>
+        <Box width={[1/1, 1/1, 1/2]}>
+          <Heading heavy as="h2" fontSize={[4, 5, 6]} mb={[6, 6, 0]} color="black">
+            Get started with Skycoin
+          </Heading>
+        </Box>
+
+        <Box width={[1/1, 1/1, 1/2]}>
+          <Buttons>
+            <Button color="white" bg="violet.5" big fontSize={[1, 3]}>
+              Buy Skycoin
+            </Button>
+
+            <Button color="violet.5" outlined ml={[2, 5]} big fontSize={[1, 3]}>
+              Get Wallet
+            </Button>
+          </Buttons>
+        </Box>
+      </Flex>
+    </Container>
+  </GetStarted>
+);
diff --git a/src/components/GetStarted/index.js b/src/components/GetStarted/index.js
@@ -0,0 +1 @@
+export { default } from './GetStarted';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -18,7 +18,7 @@ export default () => (
     <Container>
       <Flex align="center" wrap>
         <Box width={[1/1, 1/3]}>
-          <Logo />
+          <Logo white />
         </Box>
 
         <Box width={[1/1, 2/3]}>

diff --git a/src/components/Header/components/Navigation/Navigation.js b/src/components/Header/components/Navigation/Navigation.js
@@ -26,7 +26,7 @@ const StyledLink = styled(Link)`
   font-family: ${FONT_FAMILIES.mono};
   color: white;
   text-decoration: none;
-  font-weight: 600;
+  font-weight: 700;
 
   ${media.sm.css`
     margin-right: 0;

diff --git a/src/components/Heading/Heading.js b/src/components/Heading/Heading.js
@@ -16,5 +16,6 @@ export default styled(Heading)`
   ${width}
 
   font-family: ${FONT_FAMILIES.mono};
+  font-weight: ${props => props.heavy ? 'bold' : 'normal'};
   line-height: 1.5;
 `;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,9 +1,33 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl } from 'react-intl';
 
 import Hero from './components/Hero';
+import About from './components/About';
+import Network from './components/Network';
+import Distribution from './components/Distribution';
+import Roadmap from './components/Roadmap';
+import GetStarted from 'components/GetStarted';
+import Footer from 'components/Footer';
 
-export default () => (
+const Home = ({ intl }) => (
   <div>
+    <Helmet>
+      <title>{intl.formatMessage({ id: 'home.title' })}</title>
+      <meta
+        name="description"
+        content={intl.formatMessage({ id: 'home.description' })}
+      />
+    </Helmet>
+
     <Hero />
+    <About />
+    <Network />
+    <Distribution />
+    <Roadmap />
+    <GetStarted />
+    <Footer />
   </div>
 );
+
+export default injectIntl(Home);