172 lines
5.3 KiB
Plaintext
172 lines
5.3 KiB
Plaintext
<div class="green-banner-wrapper homepage-banner">
|
|
<div class="green-banner width-limit">
|
|
<img class="homepage-banner-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner.svg" alt="banner">
|
|
<div class="green-banner-content">
|
|
<h1 class="green-banner-title">
|
|
<span class="lang-en">Hi {{ current_person.first_name }}!</span>
|
|
<span class="lang-de">Hallo {{ current_person.first_name }}!</span>
|
|
<span class="lang-es">¡Hola {{ current_person.first_name }}!</span>
|
|
<span class="lang-fr">Bonjour {{ current_person.first_name }}!</span>
|
|
<span class="lang-br">Oi {{ current_person.first_name }}!</span>
|
|
</h1>
|
|
<div class="green-banner-text">
|
|
<span class="lang-en">Welcome! We have saved your progress about <strong>courses</strong></span>
|
|
<span class="lang-de">Willkommen! Wir haben Ihren Fortschritt bei den <strong>Kursen</strong> gespeichert</span>
|
|
<span class="lang-es">Bienvenido Hemos guardado su progreso sobre los <strong>cursos</strong></span>
|
|
<span class="lang-fr">Bienvenue ! Nous avons enregistré votre progression dans les <strong>cours</strong>.</span>
|
|
<span class="lang-br">Seja bem-vindo(a)! Salvamos o seu progresso nos cursos</span>
|
|
</div>
|
|
<div class="homepage-banner-stats">
|
|
{% assign in_progress = 0 %}
|
|
{% assign not_started = 0 %}
|
|
{% assign completed = 0 %}
|
|
|
|
{% for course in courses.in_catalog %}
|
|
{% if course.ribbon != 'VIDEO' %}
|
|
{% if course.completed? %}
|
|
{% assign completed = completed | plus: 1 %}
|
|
{% elsif course.started? == false %}
|
|
{% assign not_started = not_started | plus: 1 %}
|
|
{% else %}
|
|
{% assign in_progress = in_progress | plus: 1 %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: #FFCC00;">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ in_progress }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">In progress</span>
|
|
<span class="lang-de">In Arbeit</span>
|
|
<span class="lang-es">En curso</span>
|
|
<span class="lang-fr">En cours</span>
|
|
<span class="lang-br">Em andamento</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: var(--purple);">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ not_started }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">Not started</span>
|
|
<span class="lang-de">Nicht gestartet</span>
|
|
<span class="lang-es">No iniciado</span>
|
|
<span class="lang-fr">Pas encore commencé</span>
|
|
<span class="lang-br">Não iniciado</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: var(--green);">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ completed }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">Completed</span>
|
|
<span class="lang-de">Abgeschlossen</span>
|
|
<span class="lang-es">Completado</span>
|
|
<span class="lang-fr">Complété</span>
|
|
<span class="lang-br">Concluído</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.homepage-banner-image {
|
|
width: 100%;
|
|
}
|
|
.homepage-banner-stat {
|
|
background: #FFF;
|
|
margin-bottom: 10px;
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
width:100%;
|
|
}
|
|
.homepage-banner-stat > div {
|
|
text-align: center;
|
|
margin-right: 8px;
|
|
}
|
|
.stat-dot {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.homepage-banner-stat .stat-number {
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.homepage-banner-stat .stat-text {
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.homepage-banner .green-banner {
|
|
padding-bottom: 0;
|
|
overflow: clip;
|
|
}
|
|
.homepage-banner .green-banner-title {
|
|
word-break: break-word;
|
|
}
|
|
.homepage-banner .green-banner {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
.homepage-banner .green-banner-content {
|
|
padding-bottom: 40px;
|
|
align-self: center;
|
|
}
|
|
.homepage-banner-image {
|
|
height: 250px;
|
|
align-self: end;
|
|
object-fit: contain;
|
|
width: auto;
|
|
margin-right: -10%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 880px) {
|
|
.homepage-banner-image {
|
|
height: 300px;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
.homepage-banner-image {
|
|
margin-right: -5%;
|
|
height: 350px;
|
|
}
|
|
.homepage-banner .green-banner-content {
|
|
flex: 1 1 0px;
|
|
width: 0;
|
|
}
|
|
.homepage-banner-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
.homepage-banner-stat {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1400px) {
|
|
.homepage-banner-image {
|
|
margin-right: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|