From ec4d0342d715b7b3b0a7b1ad55fdab2af155065b Mon Sep 17 00:00:00 2001
From: Sandor Bereczki <bsandor453@gmail.com>
Date: Thu, 25 Jan 2018 17:38:21 +0100
Subject: [PATCH] initial page layout created
---
package.json | 4 +-
src/components/App.js | 2 +-
src/components/Main.js | 224 +++++++++++++++++++++++++++++++++++++----
src/index.js | 1 +
4 files changed, 210 insertions(+), 21 deletions(-)
diff --git a/package.json b/package.json
index a2ade58..fd20ffc 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
"react-scripts": "1.1.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
- "redux-thunk": "^2.2.0"
+ "redux-thunk": "^2.2.0",
+ "semantic-ui-css": "^2.2.12",
+ "semantic-ui-react": "^0.77.2"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/components/App.js b/src/components/App.js
index 6c4296f..8c73409 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,7 +4,7 @@ import Main from './Main';
const App = () => (
<div>
- <Header />
+ {/*<Header />*/}
<Main />
</div>
);
diff --git a/src/components/Main.js b/src/components/Main.js
index c265aec..17175c3 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,19 +1,205 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import Home from './pages/Home';
-import Roster from './pages/Roster';
-import Schedule from './pages/Schedule';
-import NotFound from './pages/NotFound';
-
-const Main = () => (
- <main>
- <Switch>
- <Route exact path='/' component={Home} />
- <Route path='/roster' component={Roster} />
- <Route path='/schedule' component={Schedule} />
- <Route component={NotFound} />
- </Switch>
- </main>
-);
-
-export default Main;
+import React, { Component } from 'react'
+import { NavLink } from 'react-router-dom';
+import {
+ Button,
+ Container,
+ Divider,
+ Grid,
+ Header,
+ Icon,
+ Image,
+ List,
+ Menu,
+ Segment,
+ Visibility,
+} from 'semantic-ui-react'
+
+const FixedMenu = () => (
+ <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>
+ </Menu.Menu>
+ </Container>
+ </Menu>
+)
+
+export default class HomepageLayout extends Component {
+ state = {}
+
+ hideFixedMenu = () => this.setState({ visible: false })
+ showFixedMenu = () => this.setState({ visible: true })
+
+ render() {
+ const { visible } = this.state
+
+ return (
+ <div>
+ { visible ? <FixedMenu /> : null }
+
+ <Visibility
+ onBottomPassed={this.showFixedMenu}
+ onBottomVisible={this.hideFixedMenu}
+ once={false}
+ >
+ <Segment
+ inverted
+ 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.Item>
+ </Menu>
+ </Container>
+
+ <Container text>
+ <Header
+ as='h1'
+ content='Imagine-a-Company'
+ inverted
+ style={{ fontSize: '4em', fontWeight: 'normal', marginBottom: 0, marginTop: '3em' }}
+ />
+ <Header
+ as='h2'
+ content='Do whatever you want when you want to.'
+ inverted
+ style={{ fontSize: '1.7em', fontWeight: 'normal' }}
+ />
+ <Button primary size='huge'>
+ Get Started
+ <Icon name='right arrow' />
+ </Button>
+ </Container>
+ </Segment>
+ </Visibility>
+
+ <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.
+ </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.
+ </p>
+ </Grid.Column>
+ <Grid.Column floated='right' width={6}>
+ <Image
+ bordered
+ rounded
+ 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>
+ </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>
+ </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' />
+ <b>Nan</b> Chief Fun Officer Acme Toys
+ </p>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Segment>
+
+ <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.
+ </p>
+ <Button as='a' size='large'>Read More</Button>
+
+ <Divider
+ as='h4'
+ className='header'
+ horizontal
+ style={{ margin: '3em 0em', textTransform: 'uppercase' }}
+ >
+ <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.
+ </p>
+ <Button as='a' size='large'>I'm Still Quite Interested</Button>
+ </Container>
+ </Segment>
+
+ <Segment inverted vertical style={{ padding: '5em 0em' }}>
+ <Container>
+ <Grid divided inverted stackable>
+ <Grid.Row>
+ <Grid.Column width={3}>
+ <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>
+ </Grid.Column>
+ <Grid.Column width={3}>
+ <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>
+ </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>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
+ </Segment>
+ </div>
+ )
+ }
+}
diff --git a/src/index.js b/src/index.js
index 5c90af5..40c3ab4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
+import 'semantic-ui-css/semantic.min.css';
import configureStore from './configureStore';
import './index.css';
--
GitLab