gittoken-landing-page
Version:
Landing Page for GitToken
187 lines (168 loc) • 7 kB
JSX
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
Grid,
Row,
Col,
ButtonGroup,
Button
} from 'react-bootstrap'
import FaBars from 'react-icons/lib/fa/bars'
import MainLogo from 'gittoken-svg-icons/dist/MainLogo'
import { MenuModal } from './index'
class HeaderComponent extends Component {
constructor(opts) {
super(opts)
}
NavBarLogo() {
return (
<svg width={"50%"} viewBox="0 0 2500 1500" >
<path d="M 350 250 L 550 350 L 350 450 L 150 350 L 150 150 L 350 50 L 550 150 "
fill="transparent"
strokeLinejoin={"round"}
stroke="#cc5333"
strokeWidth="48"
/>
<circle cx="550" cy="150" r="48" fill="#cc5333"/>
<circle cx="550" cy="150" r="26" fill="#320551"/>
<circle cx="350" cy="250" r="48" fill="#cc5333"/>
<circle cx="350" cy="250" r="26" fill="#320551"/>
<text x="600" y="450" fontSize="400px" fill="#fff">GitToken</text>
{/* <path className={"path"} d="M 300 150 L 200 100 L 100 150 L 100 250 L 200 300 L 300 250 L 300 150 L 200 100 "
fill="transparent"
strokeLinejoin={"round"}
stroke="#cc5333"
strokeWidth="12"
// strokeDasharray={"5, 5"}
// strokeDashoffset={"200"}
/> */}
</svg>
)
}
render() {
const { dispatch } = this.props
return (
<div style={{ height: '125px', marginTop: '50px', zIndex: '2', position: 'relative' }}>
<Grid>
<Row>
<Col xs={10} sm={4} md={4} lg={4}>
{this.NavBarLogo()}
</Col>
<Col lgHidden mdHidden xs={2} sm={8}>
<div style={{ textAlign: 'right' }}>
<ButtonGroup>
<Button bsSize={'lg'} bsStyle={'link'} onClick={() => {
dispatch({ type: 'UPDATE', id: 'menuModal', value: true })
}}><FaBars /></Button>
</ButtonGroup>
<MenuModal />
</div>
</Col>
<Col xsHidden smHidden md={8}>
<div style={{ textAlign: 'right', marginRight: '50px', marginLeft: '100px' }}>
<ButtonGroup>
<Button bsStyle={'link'}><a href="https://github.com/git-token" target="_blank">What is GitToken?</a></Button>
<Button bsStyle={'link'}><a href="https://github.com/git-token" target="_blank">GitHub</a></Button>
{/* <Button bsStyle={'link'}><a href="https://github.com/git-token" target="_blank">Road Map</a></Button> */}
{/* <Button bsStyle={'link'}><a href="https://medium.com/gittoken" target="_blank">Publications</a></Button> */}
{/* <Button bsStyle={'link'}><a href="https://gitter.im/git-token/Lobby" target="_blank">Contact</a></Button> */}
{/* <Button bsStyle={'link'}><a href="https://github.com/git-token/documentation/wiki/Motivation" target="_blank">Wiki</a></Button> */}
</ButtonGroup>
</div>
</Col>
</Row>
</Grid>
</div>
);
}
}
const mapStoreToProps = (store, props) => {
return {
main: store.main
}
}
const Header = connect(mapStoreToProps)(HeaderComponent)
export default Header
//
// return (
// <div style={{ background: 'linear-gradient(135deg, #0c0019, #493f5b)', color: 'white' }}>
// <div style={{ position: 'fixed', width: "100%", zIndex: '3', backgroundColor: 'rgba(0,0,0,0.2)', height: '75px' }}>
// <Row>
// <Navbar style={{ backgroundColor: 'rgba(0,0,0,0.2)', height: '75px' }}>
// <Navbar.Header>
// <Navbar.Brand>
// <a href="#"><MainLogo height={"75px"} style={{ marginTop: '-20px' }} /> GitToken</a>
// </Navbar.Brand>
// </Navbar.Header>
// <Nav>
// <NavItem eventKey={1} href="https://github.com/git-token">Software</NavItem>
// <NavItem eventKey={2} href="#">Link</NavItem>
// <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
// <MenuItem eventKey={3.1}>Action</MenuItem>
// <MenuItem eventKey={3.2}>Another action</MenuItem>
// <MenuItem eventKey={3.3}>Something else here</MenuItem>
// <MenuItem divider />
// <MenuItem eventKey={3.4}>Separated link</MenuItem>
// </NavDropdown>
// </Nav>
// </Navbar>
// {/*<Col sm={4}>
// <MainLogo height={"100px"} style={{ marginTop: '-50px' }} />
// </Col>
// <Col sm={8} />*/}
// </Row>
// <Row>
// <Col sm={4}/>
// <Col sm={8}>
// <div style={{ textAlign: 'right', marginRight: '50px', marginLeft: '100px' }}>
// <ButtonGroup>
// {/* <Button onClick={this.selectRoute.bind(this, 'roadmap')} bsStyle={'link'}>Road Map</Button> */}
// <Button bsStyle={'link'}><a href="https://github.com/git-token" target="_blank">GitHub</a></Button>
// <Button bsStyle={'link'}><a href="https://gitter.im/git-token/Lobby" target="_blank">Gitter</a></Button>
// <Button bsStyle={'link'}><a href="https://medium.com/gittoken" target="_blank">Publications</a></Button>
// <Button bsStyle={'link'}><a href="https://github.com/git-token/documentation/wiki/Motivation" target="_blank">Wiki</a></Button>
// </ButtonGroup>
// </div>
// </Col>
// </Row>
// </div>
// <Row>
// <Col sm={12}>
// <div style={{ marginTop: "200px", textAlign: 'center', marginBottom: '500px' }}>
// <MainLogo height={"350px"} />
// <h1 style={{ fontSize: '72px', marginTop: '-50px' }}>GitToken</h1>
// <h2 >Issue and Earn Ethereum ERC20 Tokens for your GitHub Contributions</h2>
// </div>
// </Col>
// </Row>
// </div>
// )
//
// <div style={{ marginBottom: '-25px', }}>
// <Navbar collapseOnSelect style={{ height: '65px' }}>
// <Navbar.Header>
// <Navbar.Brand>
// <a href="#" style={{ fontWeight: '100' }}>GitToken</a>
// </Navbar.Brand>
// <Navbar.Toggle />
// </Navbar.Header>
// <Navbar.Collapse>
// <Nav> </Nav>
// <Nav pullRight>
// <NavItem eventKey={1} href="#">Link</NavItem>
// <NavItem eventKey={2} href="#">Link</NavItem>
// <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
// <MenuItem eventKey={3.1}>Action</MenuItem>
// <MenuItem eventKey={3.2}>Another action</MenuItem>
// <MenuItem eventKey={3.3}>Something else here</MenuItem>
// <MenuItem divider />
// <MenuItem eventKey={3.3}>Separated link</MenuItem>
// </NavDropdown>
// </Nav>
// <Nav pullRight>
// <NavItem eventKey={1} href="#">Link Right</NavItem>
// <NavItem eventKey={2} href="#">Link Right</NavItem>
// </Nav>
// </Navbar.Collapse>
// </Navbar>
// </div>