feat: homepage

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true,
+  },
+  "extends": "airbnb",
+  "rules": {
+    "react/jsx-filename-extension": 0,
+    "react/no-array-index-key": 0,
+    # TODO: get these rules working
+    "import/no-extraneous-dependencies": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0
+  }
+}

config.js

@@ -0,0 +1,25 @@
+import palx from 'palx';
+
+export const COLORS = palx('#4990e2');
+export const SPACE = [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72];
+export const FONT_SIZES = [11, 13, 14, 15, 17, 20, 24, 28, 36, 40];
+
+export const BREAKPOINTS = {
+  sm: 40,
+  md: 52,
+  lg: 64,
+};
+
+export const FONT_FAMILIES = {
+  mono: '"Space Mono", monospace, sans-serif',
+  sans: '"Avenir Next", sans-serif',
+};
+
+export const BORDER_RADIUS = {
+  base: '4px',
+  pill: '1000px',
+};
+
+export const BOX_SHADOWS = {
+  base: '0 1px 2px rgba(0, 0, 0, 0.25)',
+};

package.json

@@ -4,25 +4,34 @@
   "private": true,
   "dependencies": {
     "flat": "^2.0.1",
+    "glamor": "^2.20.25",
     "grid-styled": "^2.0.0-4",
     "hidden-styled": "^1.0.0-0",
+    "lodash": "^4.17.4",
     "normalize.css": "^7.0.0",
     "palx": "^1.0.2",
     "polished": "^1.2.1",
+    "prop-types": "^15.5.10",
     "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",
+    "react-snapshot": "^1.1.0",
     "styled-components": "^2.1.0",
     "styled-system": "^1.0.0-4"
   },
   "devDependencies": {
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-config-airbnb-base": "^11.2.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-react": "^7.0.1",
     "gh-pages": "^1.0.0",
-    "react-scripts": "1.0.7",
-    "react-snapshot": "^1.1.0"
+    "react-scripts": "1.0.7"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App/App.js

@@ -1,16 +1,13 @@
 import React from 'react';
-import { Helmet } from "react-helmet";
+import PropTypes from 'prop-types';
 import flatten from 'flat';
 import values from 'lodash/values';
+import { Helmet } from 'react-helmet';
 import { ThemeProvider } from 'styled-components';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 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,
-  Route,
-} from 'react-router-dom';
 
 import { COLORS, BREAKPOINTS, SPACE, FONT_SIZES } from 'config';
 import * as locales from 'locales';
@@ -49,6 +46,10 @@ const Root = ({ locale, ...props }) => (
   </IntlProvider>
 );
 
+Root.propTypes = {
+  locale: PropTypes.string.isRequired,
+};
+
 export default () => (
   <Router>
     <Switch>

src/components/Button/Button.js

@@ -12,7 +12,7 @@ export default styled.a`
   line-height: 1;
   font-weight: 700;
 
-  border-radius: ${props => props.pill ? BORDER_RADIUS.pill : BORDER_RADIUS.base};
+  border-radius: ${props => (props.pill ? BORDER_RADIUS.pill : BORDER_RADIUS.base)};
   box-shadow: ${BOX_SHADOWS.base};
   font-family: ${FONT_FAMILIES.mono};
   font-size: ${rem(FONT_SIZES[3])};

src/components/Buy/Buy.js

@@ -1,10 +1,16 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
 
 import Button from '../Button';
 
-export default (props) => (
+const Buy = ({ children, ...props }) => (
   <Button {...props}>
-    <FormattedMessage id="buy" />
+    {children}
   </Button>
 );
+
+Buy.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default Buy;

src/components/Divider/Divider.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { rem } from 'polished';
+
+import media from 'utils/media';
+import { COLORS, SPACE } from 'config';
+
+export default styled.div`
+  width: ${rem(150)};
+  height: 4px;
+  background-color: ${COLORS.gray[1]};
+
+  margin: ${rem(SPACE[5])} 0;
+
+  ${media.md.css`
+    margin: ${rem(SPACE[9])} 0;
+  `}
+`;

src/components/Divider/index.js

@@ -0,0 +1 @@
+export { default } from './Divider';

src/components/Footer/Footer.js

@@ -1,125 +1,37 @@
 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';
+import Container from 'components/Container';
+import Text from 'components/Text';
+import Logo from 'components/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;
-  }
-`;
+import Languages from './components/Languages';
+import List from './components/List';
+import Email from './components/Email';
+import content from './content';
 
 export default () => (
-  <Footer>
+  <div>
     <Container>
       <Flex wrap my={[4, 8]} mx={-4}>
-        <Box width={[1/2, 1/4]} my={2} px={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>
+            <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>
+            <Languages />
           </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>
+        {content.map(({ heading, links }, sectionIndex) => (
+          <Box width={[1 / 2, 1 / 4]} my={2} px={4} key={sectionIndex}>
+            <List heading={heading} links={links} />
+          </Box>
+        ))}
       </Flex>
     </Container>
-  </Footer>
+  </div>
 );

src/components/Footer/components/Email/Email.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CONTACT_EMAIL = '[email protected]';
+
+const Email = styled.a`
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default () => (
+  <Email href={`mailto:${CONTACT_EMAIL}`}>
+    {CONTACT_EMAIL}
+  </Email>
+);

src/components/Footer/components/Email/index.js

@@ -0,0 +1 @@
+export { default } from './Email';

src/components/Footer/components/Languages/Languages.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const Languages = styled.div`
+  list-style: none;
+  margin: 0;
+`;
+
+const Language = styled.span`
+  &:not(:first-of-type):before {
+    content: ' · '
+  }
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default () => (
+  <Languages>
+    <Language><StyledLink to="/">English</StyledLink></Language>
+    <Language><StyledLink to="/cn">中文</StyledLink></Language>
+    <Language><StyledLink to="/ru">Ру́сский</StyledLink></Language>
+  </Languages>
+);

src/components/Footer/components/Languages/index.js

@@ -0,0 +1 @@
+export { default } from './Languages';