feat: homepage hero component

gogo-tattoo · Jun 26, 2017 · af6a545 · af6a545
1 parent d7f013c
commit af6a545
Show file tree

Hide file tree

Showing 42 changed files with 556 additions and 109 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NODE_PATH=src/
diff --git a/package.json b/package.json
@@ -6,13 +6,18 @@
   "dependencies": {
     "flat": "^2.0.1",
     "grid-styled": "^2.0.0-4",
+    "hidden-styled": "^1.0.0-0",
     "normalize.css": "^7.0.0",
+    "palx": "^1.0.2",
+    "polished": "^1.2.1",
     "react": "^15.6.1",
+    "react-create-component-from-tag-prop": "^1.2.1",
     "react-dom": "^15.6.1",
     "react-intl": "^2.3.0",
     "react-responsive": "^1.3.0",
     "react-router-dom": "^4.1.1",
-    "styled-components": "^2.1.0"
+    "styled-components": "^2.1.0",
+    "styled-system": "^1.0.0-4"
   },
   "devDependencies": {
     "gh-pages": "^1.0.0",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <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/
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Skycoin</title>
   </head>
   <body>
     <noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Skycoin",
+  "name": "Skycoin",
   "icons": [
     {
       "src": "favicon.ico",
@@ -11,5 +11,5 @@
   "start_url": "./index.html",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#4990e2"
 }
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,20 +1,41 @@
 import React from 'react';
 import flatten from 'flat';
+import values from 'lodash/values';
 import { ThemeProvider } from 'styled-components';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import zh from 'react-intl/locale-data/zh';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+} from 'react-router-dom';
 
-import { BREAKPOINTS } from '../../config';
-import en from '../../locales/en';
-import Router from '../Router';
+import { COLORS, BREAKPOINTS, SPACE, FONT_SIZES } from 'config';
+import * as locales from 'locales';
+import Routes from '../Routes';
+
+addLocaleData([...zh]);
 
 const theme = {
-  breakpoints: BREAKPOINTS,
+  colors: flatten(COLORS),
+  breakpoints: values(BREAKPOINTS),
+  space: SPACE,
+  fontSizes: FONT_SIZES,
 };
 
-export default () => (
-  <IntlProvider locale="en" messages={flatten(en)}>
+const Root = ({ locale, ...props }) => (
+  <IntlProvider locale={locale} messages={flatten(locales[locale])}>
     <ThemeProvider theme={theme}>
-      <Router />
+      <Routes {...props} />
     </ThemeProvider>
   </IntlProvider>
 );
+
+export default () => (
+  <Router>
+    <Switch>
+      <Route path="/cn" render={props => <Root {...props} locale="zh" />} />
+      <Route path="/" render={props => <Root {...props} locale="en" />} />
+    </Switch>
+  </Router>
+);
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -1,11 +1,34 @@
-import styled from 'styled-components';
-
-export default styled.button`
-  appearance: none;
-  background: none;
-  border-radius: 1000px;
-  border: 1px solid;
-  padding: 0.75em 1.5em;
-  line-height: 1em;
+import styled, { css } from 'styled-components';
+import { space, width, fontSize, color } from 'styled-system';
+import { rem } from 'polished';
+
+import media from 'utils/media';
+import { FONT_FAMILIES, FONT_SIZES, SPACE, BORDER_RADIUS, BOX_SHADOWS } from 'config';
+
+export default styled.a`
+  display: inline-block;
+  border: 1px solid transparent;
   cursor: pointer;
+  line-height: 1;
+  font-weight: 600;
+
+  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])};
+  padding: ${rem(SPACE[3])} ${rem(SPACE[6])};
+
+  ${fontSize}
+  ${color}
+  ${space}
+  ${width}
+
+  ${props => props.outlined && css`
+    border: 1px solid currentColor;
+    box-shadow: none;
+  `}
+
+  ${props => props.big && media.sm.css`
+    padding: ${rem(SPACE[4])} ${rem(SPACE[7])};
+  `}
 `;
diff --git a/src/components/Buy/Buy.js b/src/components/Buy/Buy.js
@@ -1,7 +1,10 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Button from '../Button';
 
-export default () => (
-  <Button>Buy Skycoin</Button>
+export default (props) => (
+  <Button {...props}>
+    <FormattedMessage id="buy" />
+  </Button>
 );
diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js
@@ -1,7 +1,10 @@
 import styled from 'styled-components';
+import { rem } from 'polished';
+
+import { SPACE } from 'config';
 
 export default styled.div`
   margin: 0 auto;
-  max-width: 60em;
-  padding: 0 1em;
+  max-width: 60rem;
+  padding: 0 ${rem(SPACE[4])};
 `;
diff --git a/src/components/Distribution/Distribution.js b/src/components/Distribution/Distribution.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+  <div>Distribution</div>
+);
diff --git a/src/components/Distribution/index.js b/src/components/Distribution/index.js
@@ -0,0 +1 @@
+export { default } from './Distribution';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,20 +1,30 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Flex, Box } from 'grid-styled';
+import { rem } from 'polished';
 
+import { SPACE } from 'config';
 import Container from '../Container';
 import Logo from '../Logo';
-import Navigation from '../Navigation';
+import Navigation from './components/Navigation';
+
+const Header = styled.div`
+  padding: ${rem(SPACE[6])} 0;
+  width: 100%;
+`;
 
 export default () => (
-  <Container>
-    <Flex align="center">
-      <Box width={1/3}>
-        <Logo />
-      </Box>
+  <Header>
+    <Container>
+      <Flex align="center" wrap>
+        <Box width={[1/1, 1/3]}>
+          <Logo />
+        </Box>
 
-      <Box width={2/3}>
-        <Navigation />
-      </Box>
-    </Flex>
-  </Container>
+        <Box width={[1/1, 2/3]}>
+          <Navigation />
+        </Box>
+      </Flex>
+    </Container>
+  </Header>
 );
diff --git a/src/components/Header/components/Navigation/Navigation.js b/src/components/Header/components/Navigation/Navigation.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { rem } from 'polished';
+import Hide from 'hidden-styled'
+
+import media from 'utils/media';
+import { SPACE, FONT_SIZES, FONT_FAMILIES } from 'config';
+import Buy from 'components/Buy';
+
+const Navigation = styled.div`
+  font-size: ${rem(FONT_SIZES[1])};
+  padding-top: ${rem(SPACE[4])};
+  text-align: left;
+
+  ${media.sm.css`
+    font-size: ${rem(FONT_SIZES[3])};
+    padding-top: 0;
+    text-align: right;
+  `}
+`;
+
+const StyledLink = styled(Link)`
+  margin-right: ${rem(SPACE[5])};
+  font-family: ${FONT_FAMILIES.mono};
+  color: white;
+  text-decoration: none;
+  font-weight: 600;
+
+  ${media.sm.css`
+    margin-right: 0;
+    margin-left: ${rem(SPACE[7])};
+  `}
+
+  ${media.md.css`
+    margin-left: 0;
+    margin-right: ${rem(SPACE[7])};
+  `}
+`;
+
+const InlineHide = Hide.extend`
+  display: inline;
+  color: red;
+`;
+
+export default () => (
+  <Navigation>
+    <StyledLink to="/">
+      <FormattedMessage id="header.navigation.distribution" />
+    </StyledLink>
+
+    <StyledLink to="/">
+      <FormattedMessage id="header.navigation.downloads" />
+    </StyledLink>
+
+    <StyledLink to="/">
+      <FormattedMessage id="header.navigation.blog" />
+    </StyledLink>
+
+    <InlineHide xs sm>
+      <Buy color="white" pill outlined />
+    </InlineHide>
+  </Navigation>
+);
diff --git a/src/components/Navigation/index.js → ...nts/Header/components/Navigation/index.js b/src/components/Navigation/index.js → ...nts/Header/components/Navigation/index.js
diff --git a/src/components/Heading/Heading.js b/src/components/Heading/Heading.js
@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components';
+import { space, width, fontSize, color } from 'styled-system';
+import createComponentFromTagProp from 'react-create-component-from-tag-prop';
+
+import { FONT_FAMILIES } from 'config';
+
+const Heading = createComponentFromTagProp({
+  tag: 'h2',
+  prop: 'as',
+});
+
+export default styled(Heading)`
+  ${fontSize}
+  ${color}
+  ${space}
+  ${width}
+
+  font-family: ${FONT_FAMILIES.mono};
+  line-height: 1.5;
+`;
diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js
@@ -0,0 +1 @@
+export { default } from './Heading';
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,15 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
 
-import Header from '../Header';
-
-const Home = styled.div`
-  background-color: #4990e2;
-  padding: 1rem 0;
-`;
+import Hero from './components/Hero';
 
 export default () => (
-  <Home>
-    <Header />
-  </Home>
+  <div>
+    <Hero />
+  </div>
 );
diff --git a/src/components/Home/components/Hero/Hero.js b/src/components/Home/components/Hero/Hero.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, Box } from 'grid-styled';
+
+import { COLORS } from 'config';
+import media from 'utils/media';
+import Header from 'components/Header';
+import Map from './components/Map';
+import Introduction from './components/Introduction';
+import Announcement from './components/Announcement';
+
+const Hero = styled.div`
+  background-image: linear-gradient(-110deg, ${COLORS.base}, ${COLORS.violet[4]});
+  position: relative;
+  height: 33rem;
+  z-index: -1;
+
+  ${media.sm.css`
+    height: 40rem;
+  `}
+
+  ${media.md.css`
+    height: 48rem;
+  `}
+`;
+
+const StyledFlex = styled(Flex)`
+  height: 100%;
+`;
+
+export default () => (
+  <Hero>
+    <Map />
+
+    <StyledFlex column justify="space-between">
+      <Box>
+        <Header />
+      </Box>
+      <Box>
+        <Introduction />
+      </Box>
+      <Box>
+        <Announcement />
+      </Box>
+    </StyledFlex>
+  </Hero>
+);