import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
primaryAction: {
marginRight: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
width: '100%',
marginRight: theme.spacing(0),
marginBottom: theme.spacing(2),
}
},
}));
export default function Header(props) {
const classes = useStyles();
const content = {
'header': 'The New Internet',
'description': 'Decentralized, secure, private. The PiperNet is on it\'s way to revolutionize every smartphone, PC, and smart-fridge near you.',
'primary-action': 'Sign up for free',
'secondary-action': 'Read more',
...props.content
};
return (
<section>
<Container maxWidth="md">
<Box py={8} textAlign="center">
<Typography variant="h3" component="h2" gutterBottom={true}>{content['header']}</Typography>
<Typography variant="h5" color="textSecondary" paragraph={true}>{content['description']}</Typography>
<Box mt={4}>
<Button variant="contained" color="primary" className={classes.primaryAction}>{content['primary-action']}</Button>
<Button color="secondary">{content['secondary-action']}</Button>
</Box>
</Box>
</Container>
</section>
);
}Framework
Material-UI
UI Library
Material-UI 4.11.0
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Material-Ui Components by Shuffle
Browse 64 of ready-made components in Material-Ui and Material-Ui library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.
All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.
