gistfile1.js

import React from 'react'
import { Card } from './UserControlPanel'
import { NavBar } from './NavBar'
import styled from 'styled-components'

const Header = styled.h1`
  font-size: 2em;
  color: ${props => props.theme.primary}
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
`
const Li = styled.li`
  width: 75%;
  margin: 0 auto;
`
const Ul = styled.ul`
  margin: 0;
  padding: 0;
  list-style: none;
`
const I = styled.i`
  color: #0266c8;
`
const P = styled.p`
  margin: 0;
  display: inline-block;
`
const Landing = () => {
  return (
    <React.Fragment>
      <NavBar />
      <Card style={{ color: '#3d4852' }}>
        <Header>Welcome to the imp zone.</Header>
        <Ul>
          <Li>
            <span>
              <I className="fas fa-gamepad fa-2x" />
              <P>
                Greatest video game forum on the internet, now stand alone
                and not based on 20 year old software
              </P>
            </span>
          </Li>
          <Li>
            <span>
              <I className="fas fa-ban fa-2x" />
              <P>
                Completely lowtax free, and therefore will recieve timely
                updates and a modern design
              </P>
            </span>
          </Li>
          <Li>
            <span>
              <I className="fas fa-users fa-2x" />
              <P>
                Also it's regular free, gone are the days of paying 10bux for
                the privilege to post on, as mentioned before, the greatest
                video game forum on the internet
              </P>
            </span>
          </Li>
        </Ul>
      </Card>
    </React.Fragment>
  )
}

export default Landing