{% include "header" %}

  <main class="np-main np-homepage np-max-width">
    <div class="homepage-hero-section row">
      <div class="col-xs-12 col-sm-6 col-lg-5 sp-evenly">
        <div class="np-homepage-headline">{{ homepage.headline }}</div>
        <div class="np-homepage-subheadline">{{ homepage.subheadline }}</div>
        <div class="hero-ctas">
        <div class="np-homepage-hero-cta-wrapper">
          <a class="np-homepage-hero-cta np-button" href="/app/dashboard">
            My Courses
          </a>
        </div>

          <div class="np-homepage-hero-cta-wrapper">
          <a class="np-homepage-hero-cta np-button" href="/c/f60863bb7c01b1344ac8c77e5043ad43aea49161">
            What's new
          </a>
        </div>

      </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-5 col-lg-offset-2 hero-container np-hidden-mobile">
      <div class="hero-image">
       <img src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/01964507-8c4e-4f78-93b6-078efffa1998/20240215223539_harri-academy-homepage.png" style="display: block; vertical-align: top; margin: 5px auto; text-align: center;" url="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/01964507-8c4e-4f78-93b6-078efffa1998/20240215223539_harri-academy-homepage.png" id="wysiwyg/01964507-8c4e-4f78-93b6-078efffa1998/20240215223539_harri-academy-homepage.png">
       </div>
      </div>
    </div>
    {% include "homepage_learning_progress" %}
    {% include "homepage_getting_started" %}

{% comment %}
    <div class="section-horizontal-rule"></div>
{% endcomment %}
    {% include "homepage_featured_content" %}


  </main>

  {% include "contact_us_block" %}


{% include "footer" %}

<style> 

  .homepage-hero-section {
    height:450px;
    background: #E3EEF9;
    border-radius: 16px;
    padding: 4%;
  }

  .np-homepage-headline {
    font-weight:800;
    font-size: 32px;
  }

  .np-homepage-subheadline {
    opacity:1;
    line-height:1.5rem;
  }

  .np-homepage-hero-cta-wrapper {
    text-align:center;
  }
@media (max-width: 768px) {
  .np-homepage-headline, .np-homepage-subheadline {
    text-align: center;
  }
}
  @media (min-width:768px) {

    .np-homepage-headline {
      font-size:40px;
    }

    .np-homepage-subheadline {
      font-size:18px;
    }

    .np-homepage-hero-cta-wrapper {
      text-align:left;
      margin-top:12px;
      margin-right: 20px;
    }
  }

  @media (max-width:1440px) {
    .np-homepage {
      padding: 0 16px;
    }
  }
.hero-container {
    display: flex;
    align-items: center;
}
  .hero-image {
    display: block;
    vertical-align: top;
    margin: 5px;
    text-align: center;
  }

  .hero-image img {
    height: auto;
    width: 100%;
  }

  .sp-evenly {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .homepage-subtitles {
    font-size: 32px;
    font-weight: bold;
  }
  .hero-ctas {
    display:flex;
    align-content: space-around;
  }
  @media (max-width:768px) {
    .hero-ctas {
      justify-content: space-around;
    }
  }
</style>
