{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
 <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/hero.svg"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content np-max-width">
      <div class="hero-headline">
        The Arbor <br>
        Training Hub
      </div>
      <div class="np-homepage-subheadline">
        {{ homepage.subheadline }}
      </div>
    </div>
  </div> 
  {% include "sub_navigation" %}
  <div class="np-homepage-featured">
    <div class="section section-welcome np-max-width">
      <div class="welcome-image-wrapper">
        <img class="welcome-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/Screenshot+2024-02-29+at+14.44.58.png" alt="">
      </div>
      <div class="welcome-content-wrapper">
        <div class="heading">Welcome {{current_person.first_name}}!</div>
        <div class="desc">
          <div class="desc-text">Welcome to the Arbor Training Hub - you're in the
            right place for resources, recordings and live sessions!</div>
            <div class="desc-text">At Arbor, we’re passionate about making sure all of
              our schools are making the most of their MIS.
              </div>
              <div class="desc-text desc-text-with-image">
                Want to learn more about what training
                looks like for Arbor schools? Click <a href="https://arbor-education.com/arbors-customer-education-programme">here</a>
                to read our blog from Claire Spencer,
                Head of Customer Education, or find
                out more below.
                </div>
                <img class="face-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/face.jpeg" alt="">
          </div>
      </div>
    </div>
    <div class="section section-journey">
      <div class="np-max-width">
        <div class="heading">Wherever you are in your Arbor journey...</div>
        <div class="journey-cards">
          <a href="/app/dashboard" class="journey-card">
            <div class="card-journey-content">
              <div class="card-heading card-heading-font">Foundation</div>
              <div class="card-image-wrapper">
                <img class="card-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/Screenshot+2024-02-29+at+15.59.29.png" alt="">
              </div>
            </div>
            <div class="card-hover">
              <div class="card-heading-hover card-heading-font">Foundation</div>
              <div class="hover-desc">Foundation level training covers the basics of Arbor, getting your school or trust confident using Arbor for statutory requirements and essential day-to-day tasks</div>
            </div>
          </a>
          <a href="/app/dashboard" class="journey-card">
          <div class="card-journey-content">
            <div class="card-heading card-heading-font">Intermediate</div>
            <div class="card-image-wrapper">
              <img class="card-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/intermediate.png" alt="">
            </div>
          </div>
          <div class="card-hover">
            <div class="card-heading-hover card-heading-font">Intermediate</div>
            <div class="hover-desc">Intermediate level training supports you to use Arbor more strategically and start driving impact. Plus, tackle the more complex areas of the system such as Assessments and Behaviour.</div>
          </div>
        </a>
        <a href="/app/dashboard" class="journey-card">
        <div class="card-journey-content">
          <div class="card-heading card-heading-font">Pro</div>
          <div class="card-image-wrapper">
            <img class="card-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/pro.png" alt="">
          </div>
        </div>
        <div class="card-hover">
          <div class="card-heading-hover card-heading-font">Pro</div>
          <div class="hover-desc">Pro level training is designed for experienced users of Arbor looking to become experts in their role. Helping you drive long-term, strategic impact across your school or trust.</div>
        </div>
      </a>
        </div>
      </div>
    </div>
    <div class="section section-think np-max-width">
      <div class="heading">What do our schools think?</div>
      <div class="comments-wrapper">
        <div class="comment-1">
          <img class="comment-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/red_comment.png" alt="">
          <div class="comment-text-1">
            Clear communication and patience with us. Answered our questions (fully and with
            clarity) throughout the session. Was calm and nothing felt like it was too much trouble or bother
          </div>
        </div>
        <div class="comment-2">
          <img class="comment-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/green_comment.png" alt="">
          <div class="comment-text-2">
            It's great to see the functionality of the new system in bitesize pieces. I can already... appreciate the ease of access that Arbor will allow.
          </div>
        </div>
        <div class="comment-1">
          <img class="comment-image" src="https://s3.amazonaws.com/static.northpass.com/Arbor/images/red_comment.png" alt="">
          <div class="comment-text-1">
            I felt the training was thorough and well explained. We were also given ample time to try what was being shown on the demo site.
          </div>
        </div>
        <div class="satisfaction">
          <div class="satisfaction-number">99%</div>
          <div class="satisfaction-desc">satisfaction<br>rate</div>
        </div>
      </div>
    </div>
  </div>
</main>
{% include "footer" %}

<style>
  .comment-1, .comment-2 {
    position: relative;
  }
  .comment-text-1, .comment-text-2 {
    position: absolute;
    top: 30px;
    margin: 30px;
    padding: 10px;
  }
  .np-sub-navigation {
    background: #fff !important;
  }
  body {
    background: #fff !important;
  }
  .journey-card {
    position: relative;
  }
  .card-hover {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background: #015f00;
    padding: 2rem 0;
  text-align: center;
  }
  .journey-card:hover .card-hover {
    display: block;
  }
  .card-journey-content {
    padding: 2rem 0;
    text-align: center;
  }
  .card-heading-hover {
    font-size: 1.5rem;
    font-weight: 500;
    color: #ABD538;
    margin-top: 10px;
}
.hover-desc {
  color: #fff;
  margin: 20px;
}
</style>