{% include "header", current_page_orgin: "false" %}
<main class="np-main np-homepage">
	<div class="np-homepage-hero" style="background: transparent">
		<div class="np-homepage-hero-content">
			<div class="np-homepage-headline np-header-font-color" style="color: #fff">
				{{ homepage.headline }}
			</div>
			<div class="np-homepage-subheadline np-header-font-color">
				{{ homepage.subheadline }}
			</div>
		</div>
	</div>
	<div class="page-section homepage-navigation__section np-max-width">
		<nav class="homepage-navigation__wrapper blocks-layout">
			<div class="homepage-navigation__item-container">
				<a class="homepage-navigation__item" href="/app/sec1-courses">
					<div class="homepage-navigation__title">Dubber Section 1 Courses</div>
					<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/dubber/dubber-graphic-1.png" alt="">
				</a>
			</div>
			<div class="homepage-navigation__item-container">
				<a class="homepage-navigation__item" href="/app/sec2-courses">
					<div class="homepage-navigation__title">Dubber Section 2 Courses</div>
					<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/dubber/dubber-graphic-2.png" alt="">
				</a>
			</div>
			<div class="homepage-navigation__item-container">
				<a class="homepage-navigation__item" href="/app/sec3-courses">
					<div class="homepage-navigation__title">Dubber Section 3 Courses</div>
					<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/dubber/dubber-graphic-3.png" alt="">
				</a>
			</div>
			<div class="homepage-navigation__button-container">
				<a class="homepage-navigation__button is-animation" href="{% route dashboard %}">
					Go To <br>My Dashboard
				</a>
			</div>
		</nav>
	</div >
	{% if courses.featured and courses.featured.any? %}
		<div class="np-homepage-featured page-section np-max-width">

			{% comment %} Show featured section text if either headline or subheadline are defined {% endcomment %}
			{% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
				{% assign has_featured_headline = true %}
			{% else %}
				{% assign has_featured_headline = false %}
			{% endif %}
			{% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
				{% assign has_featured_subheadline = true %}
			{% else %}
				{% assign has_featured_subheadline = false %}
			{% endif %}
			{% if has_featured_headline or has_featured_subheadline %}
				<div class="np-homepage-featured-text">
					{% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
						<div class="np-homepage-headline">
							{{ homepage.featured_courses_headline }}
						</div>
					{% endif %}
					{% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
						<div class="np-homepage-subheadline">
							{{ homepage.featured_courses_subheadline }}
						</div>
					{% endif %}
				</div>
			{% endif %}

			<div class="blocks-layout">
				{% comment %} Add different classes dependant on the number of featured courses. {% endcomment %} 
				{% assign card_classes = "card--horizontal np-stretch-content" %}
				{% case courses.featured.size %}
					{% when 3 %}
						{% assign card_classes = card_classes | append: " col-lg-4" %}
					{% when 2 %}
						{% assign card_classes = card_classes | append: " col-md-6" %}
				{% endcase %}

				{% for course in courses.featured %}
					{% include "cards_course", course: course, card_classes: card_classes %}
				{% endfor %}
			{% endif %}
			</div>
		</div>
</main>
{% include "footer" %}

<style>

main {
	background: linear-gradient(145deg, #635bff, #b10bdf, #f52558, #48d4ff, #f9b45e);
	background-size: 400% 350%;
	animation: gradient 15s ease-in-out infinite;
	height: 75vh;
	margin-top: -100px;
	padding-top: 100px;
}

@keyframes gradient {
	0% {
		background-position: 0% 79%;
	}
	50% {
		background-position: 100% 22%;
	}
	100% {
		background-position: 0% 79%;
	}
}

</style>