Skip to content
Snippets Groups Projects
Commit 2011d70f authored by Sandor Bereczki's avatar Sandor Bereczki
Browse files

minor changes

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

Hosted with :heart: by KSZK