import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
const useStyles = makeStyles((theme) => ({
card: {
height: 512
}
}));
export default function Content(props) {
const classes = useStyles();
const content = {
'header-p1': 'Lorem ipsum dolor',
'header-p2': 'sit amet consectetur.',
'description': 'Suspendisse aliquam tellus ante, porttitor mattis diam eleifend quis. Pellentesque pulvinar commodo eros sit amet finibus.',
'primary-action': 'Action',
'image': 'https://images.unsplash.com/photo-1497681883844-82b4f0a359a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
...props.content
};
return (
<section>
<Container maxWidth="lg">
<Box py={12}>
<Grid container spacing={8}>
<Grid item xs={12} md={6}>
<Box display="flex" height="100%">
<Box my="auto">
<Typography variant="h3" component="h3" gutterBottom={true}>
<Typography color="primary" variant="h3" component="span">{content['header-p1']} </Typography>
<Typography variant="h3" component="span">{content['header-p2']}</Typography>
</Typography>
<Typography variant="subtitle1" color="textSecondary" paragraph={true}>{content['description']}</Typography>
<Box mt={3}>
<Button variant="contained" color="secondary">{content['primary-action']}</Button>
</Box>
</Box>
</Box>
</Grid>
<Grid item xs={12} md={6}>
<Card>
<CardMedia image={content['image']} className={classes.card}/>
</Card>
</Grid>
</Grid>
</Box>
</Container>
</section>
);
}
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
