{% include "header" %}
{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}


<main class="np-main np-homepage">
  {% include "homepage_hero_carousel" %}

  <div class="np-subpage-container">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-7">
        <div class="homepage-intro">
          <div class="homepage-intro-headline np-header-font-color">
              {{ homepage.featured_courses_headline }}
          </div>
          <div class="homepage-intro-subheadline">
              {{ homepage.featured_courses_subheadline }}
          </div>
        </div>   
        <div class="row">
          <div class="col-xs-12">
            {% include "video_carousel" %}
          </div>
        </div>   
        <div class="row homepage-cards">
        {% if current_person.signed_in? %}
            <div class="col-xs-12 col-sm-6">
              <a class="np-card" href="/app/dashboard">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    alt="Podcasts"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_my_topics.png"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">My Topics</p>
                  <p class="homepage-card-desc">Access tailored content based on your specialty.</p>
                  <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
                </div>
              </a>
            </div>
            
          {% else %}
            <div class="col-xs-12 col-sm-6">
              <div class="np-card">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    alt="Podcasts"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_my_topics.png"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">My Topics</p>
                  <p class="homepage-card-desc">Access tailored content based on your specialty.</p>
                  <div class="arrow-icon" style="visibility:hidden;"><i class="fal fa-long-arrow-right"></i></div>
                </div>
              </div>
            </div>
          {% endif %}
          {% if current_person.signed_in? %} 
            <div class="col-xs-12 col-sm-6">
              <a class="np-card" href="/app/training_events">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_professional_events.jpg"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">Professional Events</p>
                  <p class="homepage-card-desc">We welcome you to join us at Professional Education opportunities across
the US and near you.</p>
                  <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
                </div>
              </a>
            </div> 
          {% else %}
            <div class="col-xs-12 col-sm-6">
              <div class="np-card">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_professional_events.jpg"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">Professional Events</p>
                  <p class="homepage-card-desc">We welcome you to join us at Professional Education opportunities across
the US and near you.</p>
                  <div class="arrow-icon" style="visibility:hidden;"><i class="fal fa-long-arrow-right"></i></div>
                </div>
              </div>
            </div>  
          {% endif %}
          
          <div class="col-xs-12 col-sm-6">
            <a class="np-card" href="/app/product-education">
              <div class="category-card-container">
                <img
                  class="np-categories-image"
                  alt="Podcasts"
                  src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_product_education.png"
                >
              </div>
              <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                <p class="homepage-card-title">Product Education</p>
                <p class="homepage-card-desc">Videos, webinars, and education programs to improve your knowledge of
Johnson and Johnson technologies.</p>
                <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
              </div>
            </a>
          </div>
          <div class="col-xs-12 col-sm-6">
            <a class="np-card" href="/app/catalog">
              <div class="category-card-container">
                <img
                  class="np-categories-image"
                  alt="Podcasts"
                  src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_all_content.jpg"
                >
              </div>
              <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                <p class="homepage-card-title">Content Library</p>
                <p class="homepage-card-desc">Discover all available topics</p>
                <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
              </div>
            </a>
          </div>
          
        </div>
      </div>
      <div class="col-xl-1 offset-col"></div>
      <div class="col-12 col-lg-6 col-xl-4">
        {% include "homepage_login_registration" %}
        <a href="mailto:JJSVEducationDigitalPlatformSupport@its.jnj.com" class="contact-block" target="_blank">
          <p class="sidebar-header">Contact Us </p>          
          <div class="sidebar-desc">Click here to contact us for more information&nbsp;&nbsp;<i class=" arrow-icon fal fa-long-arrow-right"></i></div>
        </a>       
      </div>
    </div>
  </div>
</main>

{% include "footer" %}

<style>

  .np-homepage .np-subpage-container {
    padding: 40px 24px 0;
    max-width: 1440px;
    margin: auto;
  }

  .offset-col {
    display:none;
  }

  .homepage-intro {
    margin-bottom: 32px;
  }

  .homepage-intro-headline {
    font-size: 28px;
    line-height:36px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .homepage-intro-subheadline {
    font-size: 16px;
    line-height: 24px;
  }

  .contact-block,
  .contact-block:hover {
    background: #f3f3f3;
    padding: 32px;
    color: #212121;
    display: block;
    margin-bottom: 32px;
    text-decoration: none;
  }

  .contact-block .contact-block-header {
    font-size: 20px;
    font-weight: 700;
  }

  .contact-block .arrow-icon {
    margin-top: 0!important;
    position: relative;
    top: 5px;
    left: 5px;
    color: #009999;
    font-size: 32px;
    text-align:right;
  }

  @media (min-width:768px) {
    .np-homepage .np-subpage-container {
      padding: 80px 24px 0;
    }

    .homepage-intro-headline {
      font-size: 36px;
      line-height:42px;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .homepage-intro-subheadline {
      font-size: 18px;
      line-height: 26px;
    }
  }

  @media (min-width:1200px) {
    .offset-col {
      display:flex;
    }
  }




  .sidebar-header,
  .welcome-block-header,
  .block-header {
    font-size: 20px;
    font-weight: 700;
  }

  .homepage-cards .np-card {
  padding:0 0 32px;
  display: flex;
  flex-direction: column;
  text-decoration:none;
}

.category-card-container {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.category-card-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.np-categories-content {
  color: #212121;
  background: #f3f3f3;
  font-size: 18px;
  flex:2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.np-categories-content p {
  margin:0;
}

.np-categories-content .arrow-icon {
  text-align:right;
  margin-top:12px;
}

.np-categories-content .arrow-icon i {
  color: #009999;
  font-size: 32px;
}

p.homepage-card-title {
  color:  #212121;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px!important;
}

p.homepage-card-desc {
  line-height:normal;
  font-size:16px;
  flex:1;
}


</style>