text: import React, { Component } from 'react';
  import Img from 'gatsby-image';
  
  export default class Banner extends Component {
    render() {
      const { data } = this.props;
      return (
        <div className="banner">
          <Img
            fluid={data.bannerImage.fluid}
            objectFit="cover"
            objectPosition="50% 50%"
          />
          <div className="container">
            <div className="banner-details">
              <span>Hello</span>
              <h1>I'm a {data.designation}.</h1>
              <ul className="sub-data">
                {data.bannerList.map((item, index) => {
                  return <li key={index}>{item}</li>;
                })}
              </ul>
              <ul className="social">
                <li>
                  <a
                    className="fab fa-linkedin-in"
                    href={data.linkdin}
                    target="_blank"
                    rel="noopener noreferrer"
                  ></a>
                </li>
                <li>
                  <a
                    className="fab fa-github"
                    href={data.github}
                    target="_blank"
                    rel="noopener noreferrer"
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      );
    }
  }
  