{% if current_person.signed_in? == false %}
  {% include "header_special" %}
  <div class="sub-header-angled-section"></div>
  {% include "course_version_outdated_alert", courses: courses.featured %}

  <main class="np-main np-homepage">
    <div class="np-homepage-hero">
      <a href="https://www.mizunousa.com" target="_blank">
        <img
          alt="{{ current_school.name }}"
          class="np-homepage-hero-logo-image"
          src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/logo.png"
        />
      </a>
      <div class="np-homepage-hero-content">
        <div class="np-homepage-headline np-header-font-color">
          Mizuno Academy
        </div>
        <div class="np-homepage-subheadline np-header-font-color">
          Founded in Osaka, Japan, Mizuno has been dedicated to creating premium performance gear for all sports lovers for over a century. Our mission is to contribute to society through the advancement of sporting goods and the promotion of sports. Mizuno Academy serves as your dedicated platform for all Mizuno product information, training, and certification. Begin your journey today and become a Mizuno Pro.
        </div>
        <div class="hero-sign-up-cta np-header-font-color">
          <a class="hero-sign-up-cta-link" href="{% route sign_up %}">Become a Pro  </a><span class="fal fa-arrow-right"></span>
        </div>
      </div>
    </div>

    {% include "mizuno_promo" %}

    {% include "homepage_panels_section" %}
  </main>
  {% include "footer_special" %}
{% else %}
  <script>
    window.location.href = '/app/dashboard'
  </script>
{% endif %}

<style>
  .np-homepage{
    margin-bottom: 0;
  }

  .sub-header-angled-section{
    content: "";
    width: 100%;
    background-color: #001588;
    height: calc(100% + 200px);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left bottom;
    transform: skewY(9deg);
  }

  .np-homepage-hero{
    background-color: transparent;
    height: 445px;
    margin-bottom: 90px;
  }

  .np-homepage-hero-logo-image{
    height: 250px;
    max-height: 35%;
    margin-top: -50px;
  }

  .np-homepage-hero .np-homepage-subheadline,
  .homepage-section .np-homepage-subheadline {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .hero-sign-up-cta{
    font-size: 27px;
  }

  .np-homepage-hero .np-homepage-subheadline,
  .homepage-section .np-homepage-subheadline,
  .hero-sign-up-cta{
    opacity: 1;
  }

  .np-homepage-headline-mini{
    font-size: 1.25rem;
    font-weight: 900;
  }

  .hero-sign-up-cta-link{
    color: #ffffff;
    text-decoration: underline 2px solid #ffffff;
  }

  .video-container{
    margin-bottom: 50px;
  }

  @media screen and (min-width: 400px){
    .sub-header-angled-section{
      transform: skewY(7deg);
    }
  }

  @media screen and (min-width: 465px){
    .sub-header-angled-section{
      transform: skewY(6deg);
    }
  }

  @media screen and (min-width: 768px){
    .sub-header-angled-section{
      transform: skewY(8deg);
    }

    .np-homepage-hero{
      height: 785px;
      width: 70%;
      margin: auto;
    }

    .np-homepage-hero-logo-image{
      height: 250px;
      margin-top: -50px;
    }

    .np-homepage-hero .np-homepage-headline {
      font-size: 64px;
      margin-bottom: 35px;
      font-weight: 700;
    }

    .np-homepage-headline-mini{
      font-size: 48px;
      margin-bottom: 35px;
      font-weight: 700;
    }

    .np-homepage-hero .np-homepage-subheadline,
    .homepage-section .np-homepage-subheadline {
      font-size: 25px;
      margin-bottom: 35px;
    }

    .hero-sign-up-cta{
      font-size: 36px;
      font-weight: 600;
    }

    .homepage-section-container{
      width: 70%;
    }

    .video-container{
      margin-bottom: 70px;
    }
  }

  @media screen and (min-width: 850px){
    .np-homepage-hero{
      height: 685px;
    }
  }

  @media screen and (min-width: 1000px){
    .sub-header-angled-section{
      transform: skewY(6deg);
    }
  }

  @media screen and (min-width: 1100px){
    .sub-header-angled-section{
      transform: skewY(4deg);
    }

    .np-homepage-hero{
      height: 585px;
    }
  }

  @media screen and (min-width: 2000px){
    .np-homepage-hero{
      margin-top: 100px;
    }
  }

  @media screen and (min-width: 2500px){
    .np-homepage-hero{
      margin-top: 150px;
    }
  }
</style>