ballistic-builder/app/components/Hero/index.tsx

import React from 'react';
import Typography from '@mui/material/Typography';
import MuiLink from '@mui/material/Link';
import Button from '@mui/material/Button';

export default class Hero extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
    };
  }

  render() {
    return (      

      <div className="hero" styles={{ backgroundImage:`url({${this.props.image}})` }}>
        <div className="hero-text">
          <h3>{this.props.heading}</h3>
          <p>{this.props.subheading}</p>
          <Button href={this.props.link} variant="contained" color="primary">
            {this.props.linktext}
          </Button>
        </div>

        <style jsx>{`
            .hero {
                // background:url('/gb-hero.jpg');
                background-size:cover;
                min-height:35vw;
                color: #fff;
                display:flex;
                justify-content: center;
                flex-direction: column;
            }
            .hero-text {
              padding: 2em;
            }
        `}</style>
      </div>
    );
  }

}