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) => ({
section: {
backgroundImage: 'url("nereus-assets/img/bg/pattern2.png")',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundColor: theme.palette.primary.dark,
},
description: {
color: theme.palette.background.secondary
},
}));
export default function CTA(props) {
const classes = useStyles();
const content = {
'header-p1': 'Donec lacinia',
'header-p2': 'turpis non sapien lobortis pretium',
'description': 'But in a much more real sense, I had no idea what to do. No, no, no. I don\'t wanna hear moaning. This is a good day.',
'primary-action': 'Action',
'secondary-action': 'Action',
...props.content
};
return (
<section className={classes.section}>
<Container maxWidth="sm">
<Box py={10} textAlign="center" color="common.white">
<Typography variant="h3" component="h3" gutterBottom={true}>
<Typography color="secondary" variant="h3" component="span">{content['header-p1']} </Typography>
<Typography variant="h3" component="span">{content['header-p2']}</Typography>
</Typography>
<Container maxWidth="sm">
<Typography variant="subtitle1" paragraph={true} className={classes.description}>{content['description']}</Typography>
</Container>
<Box mt={3}>
<Button variant="contained" color="secondary">{content['primary-action']}</Button>
</Box>
</Box>
</Container>
</section>
);
}Framework
Material-UI
UI Library
All Libraries
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Effectively collecting contacts is the goal of most sites. A well thought out Material-Ui call to action component section must clearly define the path objective and the data collection goal.
Choose from many variations of Material-Ui components call to action. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Material-Ui components call to action, code and our editor. Try the demo for free.
