Hubert just completed a project for Pipedrive, so downloaded those templates. I kept the old ones as the Pipedrive team noticed some things were overwritten. So until they are fully in production and working correctly, I'm keeping two copies. Will update with the correct files once Hubert investigates.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,271 @@
|
||||
<div class="green-banner-wrapper green-banner-wrapper-image">
|
||||
<div class="green-banner width-limit">
|
||||
<img class="green-banner-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/images/1.webp" 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">Find the best training courses, video tutorials and webinars to master your CRM and sales skills.</span>
|
||||
<span class="lang-de">Finden Sie die besten Schulungskurse, Video-Tutorials und Webinare, um Ihre CRM- und Vertriebsfähigkeiten zu meistern.</span>
|
||||
<span class="lang-es">Encuentre los mejores cursos de formación, tutoriales en vídeo y seminarios web para dominar sus habilidades de CRM y ventas.</span>
|
||||
<span class="lang-fr">Trouvez les meilleures formations, tutoriels vidéo et webinaires pour maîtriser vos compétences en CRM et en vente.</span>
|
||||
<span class="lang-br">Encontre os melhores cursos de treinamento, tutoriais em vídeo e webinars para dominar suas habilidades de CRM e vendas.</span>
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="green-banner-search">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" class="banner-search-form">
|
||||
<input aria-label="{% t .search %}" class="banner-search-input" type="text" name="q" placeholder="Search Pipedrive Academy">
|
||||
<i class="banner-search-icon fal fa-search" aria-hidden="true"></i>
|
||||
<button type="button" class="clear-btn" aria-label="Clear input">
|
||||
<img class="close-icon" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/close.svg" alt="">
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% if current_person.properties.group_selected == false %}
|
||||
<script>
|
||||
<!-- Script to redirect to the custom page --!>
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% comment %} <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> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.banner-search-input:focus-visible {
|
||||
outline: 2px solid #017737;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.banner-search-form {
|
||||
max-width: 530px;
|
||||
position: relative;
|
||||
}
|
||||
.banner-search-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
.banner-search-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 17.5px;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.banner-search-input {
|
||||
max-width: 530px;
|
||||
width: 100%;
|
||||
border-radius: 100px;
|
||||
border: none;
|
||||
height: 50px;
|
||||
padding: 0 22px 0 44px;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding-left: 17.5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
.close-icon {
|
||||
width: 100%;
|
||||
}
|
||||
.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 (max-width: 768px) {
|
||||
.banner-search-input, .banner-search-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@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>
|
||||
|
||||
<script>
|
||||
const input = document.querySelector('.banner-search-input');
|
||||
const icon = document.querySelector('.banner-search-icon');
|
||||
const clearBtn = document.querySelector('.clear-btn');
|
||||
|
||||
function updateState() {
|
||||
const hasValue = input.value.trim().length > 0;
|
||||
|
||||
icon.style.display = hasValue ? 'none' : 'flex';
|
||||
clearBtn.style.display = hasValue ? 'flex' : 'none';
|
||||
|
||||
if (hasValue) {
|
||||
input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('input', updateState);
|
||||
|
||||
clearBtn.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
input.focus();
|
||||
updateState();
|
||||
});
|
||||
|
||||
|
||||
updateState();
|
||||
</script>
|
||||
Reference in New Issue
Block a user