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

initial page layout created

parent 38ceceb5
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
package.json
+ 3
− 1
View file @ ec4d0342
......@@ -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",
......
src/components/App.js
+ 1
− 1
View file @ ec4d0342
......@@ -4,7 +4,7 @@ import Main from './Main';
const App = () => (
<div>
<Header />
{/*<Header />*/}
<Main />
</div>
);
......
src/components/Main.js
+ 205
− 19
View file @ ec4d0342
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>
)
}
}
src/index.js
+ 1
− 0
View file @ ec4d0342
......@@ -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';
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Hosted with :heart: by KSZK