From 2011d70fa9fb23236bc648874dbe9d7507424fdb Mon Sep 17 00:00:00 2001 From: Sandor Bereczki <bsandor453@gmail.com> Date: Thu, 25 Jan 2018 18:51:41 +0100 Subject: [PATCH] minor changes --- src/components/Main.js | 225 ++++++++++++++++++++++++----------------- 1 file changed, 131 insertions(+), 94 deletions(-) diff --git a/src/components/Main.js b/src/components/Main.js index 17175c3..2653853 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> - ) + ); } } -- GitLab