diff --git a/src/components/Main.js b/src/components/Main.js
index 17175c31f912fa7ba8c548edb1e2d663deda6d04..2653853cf9d3af83f5e032925b9828bde6cf0977 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react'
-import { NavLink } from 'react-router-dom';
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
import {
Button,
Container,
@@ -11,40 +11,42 @@ import {
List,
Menu,
Segment,
- Visibility,
-} from 'semantic-ui-react'
+ Visibility
+} from "semantic-ui-react";
const FixedMenu = () => (
- <Menu fixed='top' size='large'>
+ <Menu fixed="top" size="large">
<Container>
- <Menu.Item as={NavLink} to='/home'>Home</Menu.Item>
- <Menu.Item as={NavLink} to='/roster'>Roster</Menu.Item>
- <Menu.Item as={NavLink} to='/schedule'>Schedule</Menu.Item>
- <Menu.Item>Careers</Menu.Item>
- <Menu.Menu position='right'>
- <Menu.Item className='item'>
- <Button >Log in</Button>
- </Menu.Item>
- <Menu.Item>
- <Button primary>Sign Up</Button>
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Menu position="right">
+ <Menu.Item className="item">
+ <Button>Log in</Button>
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
-)
+);
export default class HomepageLayout extends Component {
- state = {}
+ state = {};
- hideFixedMenu = () => this.setState({ visible: false })
- showFixedMenu = () => this.setState({ visible: true })
+ hideFixedMenu = () => this.setState({ visible: false });
+ showFixedMenu = () => this.setState({ visible: true });
render() {
- const { visible } = this.state
+ const { visible } = this.state;
return (
<div>
- { visible ? <FixedMenu /> : null }
+ {visible ? <FixedMenu /> : null}
<Visibility
onBottomPassed={this.showFixedMenu}
@@ -53,86 +55,109 @@ export default class HomepageLayout extends Component {
>
<Segment
inverted
- textAlign='center'
- style={{ minHeight: 700, padding: '1em 0em' }}
+ textAlign="center"
+ style={{ minHeight: 700, padding: "1em 0em" }}
vertical
>
<Container>
- <Menu inverted pointing secondary size='large'>
- <Menu.Item as={NavLink} to='/home'>Home</Menu.Item>
- <Menu.Item as={NavLink} to='/roster'>Roster</Menu.Item>
- <Menu.Item as={NavLink} to='/schedule'>Schedule</Menu.Item>
- <Menu.Item as='a'>Careers</Menu.Item>
- <Menu.Item position='right'>
- <Button as='a' inverted>Log in</Button>
- <Button as='a' inverted style={{ marginLeft: '0.5em' }}>Sign Up</Button>
+ <Menu inverted pointing secondary size="large">
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Item position="right">
+ <Button as="a" inverted>
+ Log in
+ </Button>
</Menu.Item>
</Menu>
</Container>
<Container text>
<Header
- as='h1'
- content='Imagine-a-Company'
+ as="h1"
+ content="KSZK"
inverted
- style={{ fontSize: '4em', fontWeight: 'normal', marginBottom: 0, marginTop: '3em' }}
+ style={{
+ fontSize: "4em",
+ fontWeight: "normal",
+ marginBottom: 0,
+ marginTop: "3em"
+ }}
/>
<Header
- as='h2'
- content='Do whatever you want when you want to.'
+ as="h2"
+ content="Do whatever you want when you want to."
inverted
- style={{ fontSize: '1.7em', fontWeight: 'normal' }}
+ style={{ fontSize: "1.7em", fontWeight: "normal" }}
/>
- <Button primary size='huge'>
+ <Button primary size="huge">
Get Started
- <Icon name='right arrow' />
+ <Icon name="right arrow" />
</Button>
</Container>
</Segment>
</Visibility>
- <Segment style={{ padding: '8em 0em' }} vertical>
- <Grid container stackable verticalAlign='middle'>
+ <Segment style={{ padding: "8em 0em" }} vertical>
+ <Grid container stackable verticalAlign="middle">
<Grid.Row>
<Grid.Column width={8}>
- <Header as='h3' style={{ fontSize: '2em' }}>We Help Companies and Companions</Header>
- <p style={{ fontSize: '1.33em' }}>
- We can give your company superpowers to do things that they never thought possible. Let us delight
- your customers and empower your needs... through pure data analytics.
+ <Header as="h3" style={{ fontSize: "2em" }}>
+ We Help Companies and Companions
+ </Header>
+ <p style={{ fontSize: "1.33em" }}>
+ We can give your company superpowers to do things that they
+ never thought possible. Let us delight your customers and
+ empower your needs... through pure data analytics.
</p>
- <Header as='h3' style={{ fontSize: '2em' }}>We Make Bananas That Can Dance</Header>
- <p style={{ fontSize: '1.33em' }}>
- Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.
+ <Header as="h3" style={{ fontSize: "2em" }}>
+ We Make Bananas That Can Dance
+ </Header>
+ <p style={{ fontSize: "1.33em" }}>
+ Yes that's right, you thought it was the stuff of dreams, but
+ even bananas can be bioengineered.
</p>
</Grid.Column>
- <Grid.Column floated='right' width={6}>
+ <Grid.Column floated="right" width={6}>
<Image
bordered
rounded
- size='large'
- src='/assets/images/wireframe/white-image.png'
+ size="large"
+ src="/assets/images/wireframe/white-image.png"
/>
</Grid.Column>
</Grid.Row>
<Grid.Row>
- <Grid.Column textAlign='center'>
- <Button size='huge'>Check Them Out</Button>
+ <Grid.Column textAlign="center">
+ <Button size="huge">Check Them Out</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
- <Segment style={{ padding: '0em' }} vertical>
- <Grid celled='internally' columns='equal' stackable>
- <Grid.Row textAlign='center'>
- <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
- <Header as='h3' style={{ fontSize: '2em' }}>"What a Company"</Header>
- <p style={{ fontSize: '1.33em' }}>That is what they all say about us</p>
+ <Segment style={{ padding: "0em" }} vertical>
+ <Grid celled="internally" columns="equal" stackable>
+ <Grid.Row textAlign="center">
+ <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
+ <Header as="h3" style={{ fontSize: "2em" }}>
+ "What a Company"
+ </Header>
+ <p style={{ fontSize: "1.33em" }}>
+ That is what they all say about us
+ </p>
</Grid.Column>
- <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
- <Header as='h3' style={{ fontSize: '2em' }}>"I shouldn't have gone with their competitor."</Header>
- <p style={{ fontSize: '1.33em' }}>
- <Image avatar src='/assets/images/avatar/large/nan.jpg' />
+ <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
+ <Header as="h3" style={{ fontSize: "2em" }}>
+ "I shouldn't have gone with their competitor."
+ </Header>
+ <p style={{ fontSize: "1.33em" }}>
+ <Image avatar src="/assets/images/avatar/large/nan.jpg" />
<b>Nan</b> Chief Fun Officer Acme Toys
</p>
</Grid.Column>
@@ -140,66 +165,78 @@ export default class HomepageLayout extends Component {
</Grid>
</Segment>
- <Segment style={{ padding: '8em 0em' }} vertical>
+ <Segment style={{ padding: "8em 0em" }} vertical>
<Container text>
- <Header as='h3' style={{ fontSize: '2em' }}>Breaking The Grid, Grabs Your Attention</Header>
- <p style={{ fontSize: '1.33em' }}>
- Instead of focusing on content creation and hard work, we have learned how to master the art of doing
- nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic
- and worth your attention.
+ <Header as="h3" style={{ fontSize: "2em" }}>
+ Breaking The Grid, Grabs Your Attention
+ </Header>
+ <p style={{ fontSize: "1.33em" }}>
+ Instead of focusing on content creation and hard work, we have
+ learned how to master the art of doing nothing by providing
+ massive amounts of whitespace and generic content that can seem
+ massive, monolithic and worth your attention.
</p>
- <Button as='a' size='large'>Read More</Button>
+ <Button as="a" size="large">
+ Read More
+ </Button>
<Divider
- as='h4'
- className='header'
+ as="h4"
+ className="header"
horizontal
- style={{ margin: '3em 0em', textTransform: 'uppercase' }}
+ style={{ margin: "3em 0em", textTransform: "uppercase" }}
>
- <a href='#'>Case Studies</a>
+ <a href="#">Case Studies</a>
</Divider>
- <Header as='h3' style={{ fontSize: '2em' }}>Did We Tell You About Our Bananas?</Header>
- <p style={{ fontSize: '1.33em' }}>
- Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but it's really
- true.
- It took years of gene splicing and combinatory DNA research, but our bananas can really dance.
+ <Header as="h3" style={{ fontSize: "2em" }}>
+ Did We Tell You About Our Bananas?
+ </Header>
+ <p style={{ fontSize: "1.33em" }}>
+ Yes I know you probably disregarded the earlier boasts as
+ non-sequitur filler content, but it's really true. It took years
+ of gene splicing and combinatory DNA research, but our bananas can
+ really dance.
</p>
- <Button as='a' size='large'>I'm Still Quite Interested</Button>
+ <Button as="a" size="large">
+ I'm Still Quite Interested
+ </Button>
</Container>
</Segment>
- <Segment inverted vertical style={{ padding: '5em 0em' }}>
+ <Segment inverted vertical style={{ padding: "5em 0em" }}>
<Container>
<Grid divided inverted stackable>
<Grid.Row>
<Grid.Column width={3}>
- <Header inverted as='h4' content='About' />
+ <Header inverted as="h4" content="About" />
<List link inverted>
- <List.Item as='a'>Sitemap</List.Item>
- <List.Item as='a'>Contact Us</List.Item>
- <List.Item as='a'>Religious Ceremonies</List.Item>
- <List.Item as='a'>Gazebo Plans</List.Item>
+ <List.Item as="a">Sitemap</List.Item>
+ <List.Item as="a">Contact Us</List.Item>
+ <List.Item as="a">Religious Ceremonies</List.Item>
+ <List.Item as="a">Gazebo Plans</List.Item>
</List>
</Grid.Column>
<Grid.Column width={3}>
- <Header inverted as='h4' content='Services' />
+ <Header inverted as="h4" content="Services" />
<List link inverted>
- <List.Item as='a'>Banana Pre-Order</List.Item>
- <List.Item as='a'>DNA FAQ</List.Item>
- <List.Item as='a'>How To Access</List.Item>
- <List.Item as='a'>Favorite X-Men</List.Item>
+ <List.Item as="a">Banana Pre-Order</List.Item>
+ <List.Item as="a">DNA FAQ</List.Item>
+ <List.Item as="a">How To Access</List.Item>
+ <List.Item as="a">Favorite X-Men</List.Item>
</List>
</Grid.Column>
<Grid.Column width={7}>
- <Header as='h4' inverted>Footer Header</Header>
- <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+ <Header as="h4" inverted>
+ Footer Header
+ </Header>
+ <p>Created by DevTeam 2017.</p>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</Segment>
</div>
- )
+ );
}
}