import React from 'react'

import {
  PageTemplate, Header, Hero, Footer, FeatureList,
} from 'components'

const HomePage = () => {
  return (
    <PageTemplate
      header={<Header />}
      hero={<Hero />}
      footer={<Footer />}
    >
      <FeatureList />
    </PageTemplate>
  )
}

export default HomePage

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { size } from 'styled-theme'

const PageTemplate = ({
  header, hero, sponsor, children, footer, ...props
}) => {
  return (
    <Wrapper {...props}>
      <Header>{header}</Header>
      {hero && <Hero>{hero}</Hero>}
      {sponsor && <Sponsor>{sponsor}</Sponsor>}
      <Content>{children}</Content>
      <Footer>{footer}</Footer>
    </Wrapper>
  )
}

PageTemplate.propTypes = {
  header: PropTypes.node.isRequired,
  hero: PropTypes.node,
  sponsor: PropTypes.node,
  footer: PropTypes.node.isRequired,
  children: PropTypes.any.isRequired,
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  padding-top: 3.75rem;
  min-height: 100vh;
  box-sizing: border-box;
  @media screen and (max-width: 640px) {
    padding-top: 3.25rem;
  }
`

const Header = styled.header`
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
`

const Hero = styled.section``

const Sponsor = styled.section``
const Content = styled.section`
  width: 100%;
  box-sizing: border-box;
  margin: 2rem auto;
  max-width: ${size('maxWidth')};
`

const Footer = styled.footer`
  margin-top: auto;
`
export default PageTemplate

import React from 'react'
import styled from 'styled-components'
import {
  Feature, Link, Heading, Paragraph,
} from 'components'

const FeatureList = ({ ...props }) => (
  <div {...props}>
    <StyledHeading>Basic stack</StyledHeading>
    <Description>
      It includes everything necessary to build a typical web app with focus on productivity and developer experience.
      <br />
      <Link href="https://github.com/diegohaz/arc/wiki/Workflow">Learn more about the recommended workflow</Link>
    </Description>
    <Grid>
      <StyledFeature
        icon="react"
        link="https://facebook.github.io/react"
        title="React"
        code="<MyComponent attr='value' />"
      >
        The Facebook's JavaScript library for building user interfaces using components.
      </StyledFeature>
      <StyledFeature
        icon="react-router"
        link="https://github.com/ReactTraining/react-router"
        title="React Router"
        code="<Route path='/sample-page' />"
      >
        The most popular declarative routing library for React and React Native.
      </StyledFeature>
      <StyledFeature
        icon="webpack"
        link="https://webpack.github.io/"
        title="Webpack"
        code="npm run build"
      >
        The awesome module bundler with
        {' '}
        <Link href="https://webpack.github.io/docs/hot-module-replacement.html">Hot Module Replacement</Link>
        {' '}
        enabled.
      </StyledFeature>
      <StyledFeature
        icon="jest"
        link="https://facebook.github.io/jest"
        title="Jest"
        code="npm run test"
      >
        The great testing framework used by Facebook to test all their Javascript code.
      </StyledFeature>
    </Grid>
    <StyledHeading>Optional features</StyledHeading>
    <Description>
      Features separated into another branches so you can use them only if you need to.
    </Description>
    <Grid>
      <StyledFeature
        icon="redux"
        link="https://github.com/diegohaz/arc/tree/redux"
        title="Redux"
        code="git clone -b redux https://github.com/diegohaz/arc my-app"
      >
        The predictable state container for JavaScript apps.
      </StyledFeature>
      <StyledFeature
        icon="dist"
        link="https://github.com/diegohaz/arc/tree/redux-ssr"
        title="Server Side Rendering"
        code="git clone -b redux-ssr https://github.com/diegohaz/arc my-app"
      >
        Write once and run on both server and client.
      </StyledFeature>
    </Grid>
  </div>
)

const Grid = styled.div`
  display: flex;
  flex-flow: row wrap;
  > * {
    width: calc(50% - 2rem);
    @media screen and (max-width: 640px) {
      width: 100%;
    }
  }
`

const StyledHeading = styled(Heading)`
  text-align: center;
`

const Description = styled(Paragraph)`
  text-align: center;
  margin: 2rem;
  @media screen and (max-width: 640px) {
    margin: 1rem;
  }
`

const StyledFeature = styled(Feature)`
  margin: 1rem;
  @media screen and (max-width: 640px) {
    margin: 0;
  }
`

export default FeatureList

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { ifProp } from 'styled-tools'
import {
  Icon, Link, Paragraph, Heading, Badge, PreformattedText,
} from 'components'

const Feature = ({
  icon, title, link, code, children, ...props
}) => {
  const { soon } = props
  return (
    <Wrapper {...props}>
      {icon && <StyledIcon icon={icon} width={64} />}
      <Text>
        <Heading level={2}>
          {link ? <Link href={link}>{title}</Link> : title}
        </Heading>
        <Paragraph>{children}</Paragraph>
        {code && <PreformattedText block>{code}</PreformattedText>}
      </Text>
      {soon && <StyledBadge palette="grayscale">soon</StyledBadge>}
    </Wrapper>
  )
}

Feature.propTypes = {
  title: PropTypes.string.isRequired,
  icon: PropTypes.string,
  link: PropTypes.string,
  soon: PropTypes.bool,
  children: PropTypes.any,
  code: PropTypes.node,
}

const Wrapper = styled.div`
  position: relative;
  display: flex;
  padding: 1rem;
  box-sizing: border-box;
  opacity: ${ifProp('soon', 0.4, 1)};
  @media screen and (max-width: 640px) {
    padding: 0.5rem;
  }
`

const StyledIcon = styled(Icon)`
  flex: none;
  @media screen and (max-width: 640px) {
    width: 32px;
  }
`

const Text = styled.div`
  margin-left: 1rem;
  overflow: auto;
  > :first-child {
    margin: 0;
  }
`

const StyledBadge = styled(Badge)`
  position: absolute;
  top: 1rem;
  right: 1rem;
  @media screen and (max-width: 640px) {
    top: 0.5rem;
    right: 0.5rem;
  }
`

export default Feature

import PropTypes from 'prop-types'
import styled from 'styled-components'
import { font, palette } from 'styled-theme'

const Badge = styled.span`
  font-family: ${font('primary')};
  font-size: 0.75rem;
  line-height: 1.5em;
  padding: 0.1em 0.3em;
  color: ${palette('grayscale', 0, true)};
  background-color: ${palette(1)};
  border-radius: 0.16667em;
`

Badge.propTypes = {
  palette: PropTypes.string,
  reverse: PropTypes.bool,
}

Badge.defaultProps = {
  palette: 'primary',
}

export default Badge