2020-02-27 09:42:13 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React, { Component } from 'react';
|
2020-03-13 13:43:31 +00:00
|
|
|
import HomeNavbar from './../components/HomeNavbar';
|
2020-02-27 09:42:13 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Container,
|
|
|
|
Grid,
|
|
|
|
Header,
|
|
|
|
Icon,
|
|
|
|
Image,
|
|
|
|
List,
|
|
|
|
Menu,
|
|
|
|
Responsive,
|
|
|
|
Segment,
|
|
|
|
Sidebar,
|
|
|
|
Visibility,
|
|
|
|
} from 'semantic-ui-react';
|
2020-02-25 13:18:25 +00:00
|
|
|
|
2020-02-27 09:42:13 +00:00
|
|
|
// Heads up!
|
|
|
|
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
|
|
|
|
// For more advanced usage please check Responsive docs under the "Usage" section.
|
|
|
|
const getWidth = () => {
|
|
|
|
const isSSR = typeof window === 'undefined';
|
|
|
|
return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* eslint-disable react/no-multi-comp */
|
|
|
|
/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
|
|
|
|
* such things.
|
2020-02-25 13:18:25 +00:00
|
|
|
*/
|
2020-02-27 09:42:13 +00:00
|
|
|
const HomepageHeading = ({ mobile }) => (
|
|
|
|
<Container text>
|
|
|
|
<Header
|
|
|
|
as='h1'
|
|
|
|
content='SmartHut'
|
|
|
|
inverted
|
|
|
|
style={{
|
|
|
|
fontSize: mobile ? '2em' : '4em',
|
|
|
|
fontWeight: 'normal',
|
|
|
|
marginBottom: 0,
|
|
|
|
marginTop: mobile ? '1.5em' : '3em',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Header
|
|
|
|
as='h2'
|
|
|
|
content='Keep your Home fully Connected'
|
|
|
|
inverted
|
|
|
|
style={{
|
|
|
|
fontSize: mobile ? '1.5em' : '1.7em',
|
|
|
|
fontWeight: 'normal',
|
|
|
|
marginTop: mobile ? '0.5em' : '1.5em',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Button size='huge' color="orange" href="/signup">
|
|
|
|
Get Started
|
|
|
|
<Icon name='right arrow' />
|
|
|
|
</Button>
|
|
|
|
</Container>
|
|
|
|
)
|
|
|
|
|
|
|
|
HomepageHeading.propTypes = {
|
|
|
|
mobile: PropTypes.bool,
|
2020-02-25 13:18:25 +00:00
|
|
|
}
|
2020-02-27 09:42:13 +00:00
|
|
|
|
|
|
|
class DesktopContainer extends Component {
|
|
|
|
state = {};
|
|
|
|
hideFixedMenu = () => this.setState({ fixed: false })
|
|
|
|
showFixedMenu = () => this.setState({ fixed: true })
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { children } = this.props
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
|
|
|
|
<Visibility
|
|
|
|
once={false}
|
|
|
|
onBottomPassed={this.showFixedMenu}
|
|
|
|
onBottomPassedReverse={this.hideFixedMenu}
|
|
|
|
>
|
|
|
|
<Segment
|
|
|
|
basic
|
|
|
|
textAlign='center'
|
|
|
|
style={{
|
|
|
|
minHeight: 700,
|
|
|
|
padding: '1em 0em',
|
|
|
|
background: ` linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")`,
|
|
|
|
backgroundSize: "cover",
|
|
|
|
}}
|
|
|
|
vertical
|
|
|
|
>
|
2020-03-13 13:43:31 +00:00
|
|
|
<HomeNavbar />
|
2020-02-27 09:42:13 +00:00
|
|
|
<HomepageHeading />
|
|
|
|
</Segment>
|
|
|
|
</Visibility>
|
|
|
|
|
|
|
|
{children}
|
|
|
|
</Responsive>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
DesktopContainer.propTypes = {
|
|
|
|
children: PropTypes.node,
|
|
|
|
}
|
|
|
|
|
|
|
|
class MobileContainer extends Component {
|
|
|
|
state = {}
|
|
|
|
|
|
|
|
handleSidebarHide = () => this.setState({ sidebarOpened: false })
|
|
|
|
|
|
|
|
handleToggle = () => this.setState({ sidebarOpened: true })
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { children } = this.props;
|
|
|
|
const { sidebarOpened } = this.state;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Responsive
|
|
|
|
as={Sidebar.Pushable}
|
|
|
|
getWidth={getWidth}
|
|
|
|
maxWidth={Responsive.onlyMobile.maxWidth}
|
|
|
|
>
|
|
|
|
<Sidebar
|
|
|
|
as={Menu}
|
|
|
|
animation='push'
|
|
|
|
inverted
|
|
|
|
onHide={this.handleSidebarHide}
|
|
|
|
vertical
|
|
|
|
visible={sidebarOpened}
|
|
|
|
>
|
|
|
|
<Menu.Item as='a' active>
|
|
|
|
Home
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item as='a'>Log in</Menu.Item>
|
|
|
|
<Menu.Item as='a'>Sign Up</Menu.Item>
|
|
|
|
</Sidebar>
|
|
|
|
|
|
|
|
<Sidebar.Pusher dimmed={sidebarOpened}>
|
|
|
|
<Segment
|
|
|
|
inverted
|
|
|
|
textAlign='center'
|
|
|
|
style={{ minHeight: 350, padding: '1em 0em' }}
|
|
|
|
vertical
|
|
|
|
>
|
|
|
|
<Container>
|
|
|
|
<Menu inverted pointing secondary size='large'>
|
|
|
|
<Menu.Item onClick={this.handleToggle}>
|
|
|
|
<Icon name='sidebar' />
|
|
|
|
</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>
|
|
|
|
<HomepageHeading mobile />
|
|
|
|
</Segment>
|
|
|
|
|
|
|
|
{children}
|
|
|
|
</Sidebar.Pusher>
|
|
|
|
</Responsive>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
MobileContainer.propTypes = {
|
|
|
|
children: PropTypes.node,
|
|
|
|
}
|
|
|
|
|
|
|
|
const ResponsiveContainer = ({ children }) => (
|
|
|
|
<div>
|
|
|
|
<DesktopContainer>{children}</DesktopContainer>
|
|
|
|
<MobileContainer>{children}</MobileContainer>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
ResponsiveContainer.propTypes = {
|
|
|
|
children: PropTypes.node,
|
|
|
|
}
|
|
|
|
|
|
|
|
const Home = () => (
|
|
|
|
<ResponsiveContainer>
|
|
|
|
<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 you keep your home connected
|
|
|
|
</Header>
|
|
|
|
<p style={{ fontSize: '1.33em' }}>
|
|
|
|
In a few steps your home will be fully connected with SmartHut.
|
|
|
|
</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='/img/banner.jpg' />
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column textAlign='center'>
|
|
|
|
<Button size='huge'>Check It Out</Button>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
SmartHut
|
|
|
|
</Header>
|
|
|
|
<p>
|
|
|
|
Keep your Home connected.
|
|
|
|
</p>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Container>
|
|
|
|
</Segment>
|
|
|
|
</ResponsiveContainer>
|
|
|
|
)
|
|
|
|
|
|
|
|
export default Home;
|