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
All Frameworks
UI Library
Material-UI 4.11.0
Component #1
Material-Ui UI Components by Shuffle
Choose from 64 of ready-made UI components available in Shuffle Editor.
By subscribing to the editor, you get access to all of them.
The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
