{"size": 995, "ext": "js", "max_stars_repo_path": "src/components/hero-001/index.js", "max_stars_repo_name": "cy-fx/alexalexmiranda-ws", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/hero-001/index.js", "max_issues_repo_name": "cy-fx/alexalexmiranda-ws", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/hero-001/index.js", "max_forks_repo_name": "cy-fx/alexalexmiranda-ws", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.0967741935, "max_line_length": 79, "alphanum_fraction": 0.6130653266}
import React from "react"
import hero001Style from "./style.module.scss"
import "../../reusable-styles/styles.scss"



const Hero001 = ({data}) => {
  return (
    <section id="hero001" className={hero001Style.hero001Component}>
      <div className={hero001Style.componentContainer}>
        <article className={hero001Style.hero}>
          <h1 className={hero001Style.mainTitle}>({data.mainTitle})</h1>
          <div className={hero001Style.heroImage}>
            <figure className={hero001Style.imageHolder}>
              <img className={hero001Style.imageSource} src={data.heroImage} />
            </figure>
            <div className={hero001Style.imageFooter}>
              <span className={hero001Style.key}>Description:</span>
              <span className={hero001Style.value}>
                Unecesary description only for aesthetic purposes.
              </span>
            </div>
          </div>
        </article>
      </div>
    </section>
  )
}

export default Hero001
