jekyll-theme-marketing 0.5.0 → 1.0.0

data/_includes/components/footers/progressive/top.html

@@ -0,0 +1,27 @@
+{% for section in site.data.components.footers.progressive.common %}
+  {% unless site.links.footer[section.name.title].disabled %}
+    <aside class="col-md-{{ section.grid-class }}">
+      <div class="title-block pb-2 mb-3">
+        <h3 class="title text-white m-0">
+          <i class="{{ section.icon }}"></i>
+          {% include components/footers/progressive/custom-title.liquid %}
+        </h3>
+      </div>
+      <div class="custom">
+        <ul class="footer-list">
+          {% for item in section.items %}
+            {% unless site.links.footer[item.title].disabled %}
+              <li class="footer-list">
+                <a class="white" href="{{ item.link | relative_url }}">
+                  <i class="{{ item.pre-icon }}" data-fa-transform="grow-2 left-3 up-1"></i>
+                  {% include components/footers/progressive/custom-item.liquid %}
+                   <i class="{{ item.post-icon }}"></i>
+                </a>
+              </li>
+            {% endunless %}
+          {% endfor %}
+        </ul>
+      </div>
+    </aside>
+  {% endunless %}
+{% endfor %}

data/_includes/components/forms/formspree.html

@@ -0,0 +1,59 @@
+<form id="contact-form" method="POST" class="needs-validation" data-component="forms/formspree" novalidate>
+
+  <!-- Start Formspree configuration -->
+  <input type="hidden" name="_subject" value="{{ page.form.request.subject | default: page.title }} | {{ site.title }}" /> <!-- email's subject -->
+  <input type="hidden" name="_next" value="{{ page.form.response.url | default: page.url | append: '?response' }}" /> <!-- thank-you page -->
+  <input type="hidden" name="_language" value="{{ page.form.lang | default: 'en' }}" /> <!-- reCAPTCHA language -->
+  <input type="hidden" name="_format" value="{{ page.form.body-style | default: 'plain' }}" /> <!-- email's style -->
+  <input type="hidden" name="_cc" value="{{ page.form.cc | default: site.formspree.contact-form.cc }}" /> <!-- email's cc -->
+  <input type="text" name="_gotcha" class="candy-gotcha" /> <!-- avoid SPAM -->
+  <!-- End Formspree configuration -->
+
+  <p data-appear-animation="fadeInUp">
+    {{ page.i18n[site.lang].form.request.header | default: page.form.request.header }}
+  </p>
+
+  {% for field in page.form.request.fields %}
+    <div class="form-group" data-appear-animation="fadeInUp">
+      <label>{{ field.label }}</label>
+      {% if field.type == 'checkbox' %}
+        {% for value in field.values %}
+          <input type="{{ field.type }}" name="{{ field.label }}" id="a{{ forloop.index }}" value="{{ value }}"/>
+          <label class="label-checkbox text-muted" for="a{{ forloop.index }}">{{ value }}</label>
+        {% endfor %}
+      {% elsif field.type == 'select' %}
+        <select name="{{ field.label }}">
+          <option selected disabled>Selecciona</option>
+          {% for value in field.values %}
+            <option value="{{ value }}">{{ value }}</option>
+          {% endfor %}
+        </select>
+      {% elsif field.type == 'date' %}
+        <input name="{{ field.label }}_day" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+        <input name="{{ field.label }}_month" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+        <input name="{{ field.label }}_year" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+      {% elsif field.type == 'textarea' %}
+        <textarea name="{{ field.label }}" placeholder="{{ field.placeholder }}" class="form-control" rows="3" required></textarea>
+      {% else %}
+        <input name="{{ field.label }}" type="{{ field.type }}" class="form-control" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+      {% endif %}
+      <small id="{{ field.label | downcase }}Help" class="form-text text-muted">{{ field.caption }}</small>
+    </div>
+  {% endfor %}
+
+  <hr class="my-4" data-appear-animation="fadeInUp">
+  <button type="submit" class="btn btn-primary" data-appear-animation="bounceIn">{{ page.form.request.send-button }}</button>
+
+</form>
+
+<div id="form-response" class="jumbotron rounded bg-white text-center">
+  <span class="text-success">
+    <h1>{{ page.form.response.header }}</h1>
+    <i class="fas fa-check fa-8x"></i>
+  </span>
+  <p class="lead">{{ page.form.response.subheader }}</p>
+</div>
+
+<script type="text/javascript">
+  {% include components/forms/formspree.js %}
+</script>

data/_includes/components/forms/formspree.js

@@ -0,0 +1,35 @@
+// Configure constants
+
+//// Response URL
+const response = new URL(window.location.href).searchParams.has("response");
+
+//// Email
+const user = {{ site.formspree.contact-form.email.user }};
+const company = {{ site.formspree.contact-form.email.company }};
+const global_domain = {{ site.formspree.contact-form.email.global_domain }};
+
+// Hide elements as needed
+document.getElementById(response ? 'contact-form' : 'form-response').classList.add("d-none");
+document.getElementById(response ? '{{ page.form.id }}' : 'form-response').classList.add("d-none")
+
+// Define form action
+document.querySelector('#contact-form').setAttribute('action', 'https://formspree.io/' + user + '@' + company + '.' + global_domain);
+
+// Disable form submission if there are invalid fields
+(function() {
+  'use strict';
+  window.addEventListener('load', function() {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    var forms = document.getElementsByClassName('needs-validation');
+    // Loop over them and prevent submission
+    var validation = Array.prototype.filter.call(forms, function(form) {
+      form.addEventListener('submit', function(event) {
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        form.classList.add('was-validated');
+      }, false);
+    });
+  }, false);
+})();

data/_includes/components/forms/google-forms.css

@@ -0,0 +1,5 @@
+<style>
+  .blur-background:before {
+    background-image: url('{{ site.amazon-s3 }}/assets/img/common/forms/{{ page.form.id }}-bg.png');
+  }
+</style>

data/_includes/components/forms/google-forms.html

@@ -0,0 +1,76 @@
+<script type="text/javascript">document.getElementById("{{ page.form.id }}").classList.add("d-none")</script>
+
+{% include components/forms/google-forms.css %}
+
+<nav id="progressive-progress-navbar" class="navbar bg-white sticky">
+  <div class="container">
+    <div class="col-sm-8 mx-auto">
+      <p class="text-center">
+        <span>
+          {{ site.data.components.forms.google-forms[site.lang].completed.title | default: "You have completed" }}
+          <strong id="progress-bar-status"></strong>
+          {{ site.data.components.forms.google-forms[site.lang].form.title | default: "of the form" }}.
+        </span>
+        <span class="progress progress-striped active border-radius hover" style="height:20px">
+          <span id="progressive-progress-bar" class="progress-bar progress-bar-info"></span>
+        </span>
+      </p>
+    </div>
+  </div>
+</nav>
+
+<div class="container marketing-theme blur-background" data-appear-animation="fadeInUp">
+  <div class="row">
+    <div class="col-sm-3"></div>
+    <div class="col-sm-6">
+      <script type="text/javascript">var submitted=false;</script>
+      <iframe id="hidden_iframe" class="d-none" name="hidden_iframe" onload="submitted&amp;&amp;(window.location='{{ page.url }}?response')"></iframe>
+      <div id="form-request" class="jumbotron rounded bg-white">
+        <h3>{{ page.form.request.header }}</h3>
+        <p>{{ page.form.request.subheader }}</p>
+        <hr class="my-4">
+        <form class="form" method="post" onsubmit="submitted=!0" target="hidden_iframe" action="{{ page.form.google-forms-url }}">
+          {% for field in page.form.request.fields %}
+            <div class="form-group" data-appear-animation="fadeInUp">
+              <label>{{ field.label }}</label>
+              {% if field.type == 'checkbox' %}
+                {% for value in field.values %}
+                  <input type="{{ field.type }}" name="entry.{{ field.google-entry }}" id="a{{ forloop.index }}" value="{{ value }}"/>
+                  <label class="label-checkbox text-muted" for="a{{ forloop.index }}">{{ value }}</label>
+                {% endfor %}
+              {% elsif field.type == 'select' %}
+                <select name="entry.{{ field.google-entry }}">
+                  <option selected disabled>Selecciona</option>
+                  {% for value in field.values %}
+                    <option value="{{ value }}">{{ value }}</option>
+                  {% endfor %}
+                </select>
+              {% elsif field.type == 'date' %}
+                <input name="entry.{{ field.google-entry }}_day" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+                <input name="entry.{{ field.google-entry }}_month" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+                <input name="entry.{{ field.google-entry }}_year" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+              {% else %}
+                <input name="entry.{{ field.google-entry }}" type="{{ field.type }}" aria-describedby="{{ field.label | downcase }}Help" placeholder="{{ field.placeholder }}" required/>
+              {% endif %}
+              <small id="{{ field.label | downcase }}Help" class="form-text text-muted">{{ field.caption }}</small>
+            </div>
+          {% endfor %}
+          <p class="text-danger" data-appear-animation="fadeInUp">{{ page.form.request.footer-danger }}</p>
+          <hr class="my-4">
+          <button type="submit" class="btn btn-primary" value="Send" data-appear-animation="bounceIn" onsubmit="this.disabled = true">{{ page.form.request.send-button }}</button>
+        </form>
+      </div>
+      <div id="form-response" class="jumbotron rounded bg-white text-center">
+        <span class="text-success">
+          <h1>{{ page.form.response.header }}</h1>
+          <i class="fas fa-check fa-8x"></i>
+        </span>
+        <p><sub>{{ page.form.response.subheader }}</sub></p>
+        <p class="marketing-theme red"><sub><sub>{{ page.form.response.footer-danger }}</sub></sub></p>
+      </div>
+    </div>
+    <div class="col-sm-3"></div>
+  </div>
+</div>
+
+{% include components/forms/google-forms.js %}

data/_includes/components/forms/google-forms.js

@@ -0,0 +1,31 @@
+<script type="text/javascript">
+
+  let response = new URL(window.location.href).searchParams.has("response");
+  document.getElementById(response ? 'form-request' : 'form-response').classList.add("d-none");
+  document.getElementById(response ? 'progressive-progress-navbar' : 'form-response').classList.add("d-none");
+
+  statusText = document.getElementById('progress-bar-status');
+  formInputs = document.querySelectorAll("[required]");
+  progressBar = document.getElementById('progressive-progress-bar');
+
+  progressBar.style.width = "1%";
+  progressBar.innerHTML = "1%";
+  statusText.innerHTML = "1%";
+
+  for (var i = 0; i < formInputs.length; i++) {
+    formInputs[i].addEventListener("input", updateProgressBar);
+  }
+
+  function updateProgressBar() {
+    progressBar.value = 0;
+    for (var i = 0; i < formInputs.length; i++) {
+      if ( formInputs[i].value != '' ){
+        progressBar.value += 100/formInputs.length;
+      }
+    }
+    progressBar.style.width = progressBar.value + "%";
+    progressBar.innerHTML = Math.round(progressBar.value) + "%";
+    statusText.innerHTML = Math.round(progressBar.value) + "%";
+  }
+
+</script>

data/_includes/components/generators/pdf/special-offers.html

@@ -0,0 +1,51 @@
+{% if page.resources.special-offers.quantity > 0 %}
+  {% unless site.original or site.special-offers.customers == false %}
+    <p>
+      {% for resource in (1..page.resources.special-offers.quantity) %}
+        {% assign page-categories-size = page.categories | size %}
+        {% if page-categories-size >= 1 %}
+          {% assign page-categories = page.categories | join: "/" | append: "/" %}
+        {% endif %}
+        {% if forloop.index == 1 %}
+          {% assign image-num = '' %}
+        {% elsif forloop.index < 10 %}
+          {% assign image-num = forloop.index | prepend: "_0" %}
+        {% else %}
+          {% assign image-num = forloop.index | prepend: "_" %}
+        {% endif %}
+        <div class="mb-2 marketing-theme content-right">
+          <a class="btn btn-primary btn-sm text-white" onclick="specialOffersPDF{{ forloop.index }}();">
+            <strong><i class="fas fa-download fa-lg"></i> {{ site.data.i18n.common.product-layout[site.lang].download }}</strong>
+          </a>
+        </div>
+        <div id="special-offers-{{ forloop.index }}">
+          <img id="special-offers-promo{{ forloop.index }}" crossOrigin="Anonymous" src="https://s3-us-west-2.amazonaws.com/grupopv-public/components/generators/pdf/special-offers/img/{{ page.collection }}/{{ page-categories }}{% if page.resources.special-offers.model %}{{ page.resources.special-offers.model | downcase }}{% else %}{{ page.title | downcase  }}{% endif %}{{ image-num | append: '.jpg' }}" alt="{{ page.title }}" title="{{ page.title }}">
+          <img id="special-offers-data{{ forloop.index }}" crossOrigin="Anonymous" src="https://s3-us-west-2.amazonaws.com/grupopv-public/components/generators/pdf/special-offers/img/customers/{{ site.domain | replace:'.',' ' | truncatewords: 1,"" }}.png" alt="{{ page.title }}" title="{{ page.title }}">
+          <canvas id="special-offers-promoCanvas{{ forloop.index }}" class="d-none" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | times: layout.special-offers.dpi }}"></canvas>
+          <canvas id="special-offers-dataCanvas{{ forloop.index }}" class="d-none" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | minus: 10.5 | times: layout.special-offers.dpi | times: -1 }}"></canvas>
+        </div>
+        <script>
+          function specialOffersPDF{{ forloop.index }}(){
+            var doc = new jsPDF({
+              orientation: '{{ layout.special-offers.orientation }}',
+              unit: '{{ layout.special-offers.unit }}',
+              format: '{{ layout.special-offers.format }}'
+            })
+            var promo = document.getElementById("special-offers-promo{{ forloop.index }}");
+            var promoCanvas = document.getElementById("special-offers-promoCanvas{{ forloop.index }}");
+            var data = document.getElementById("special-offers-data{{ forloop.index }}");
+            var dataCanvas = document.getElementById("special-offers-dataCanvas{{ forloop.index }}");
+            promoCanvas.getContext("2d").drawImage(promo, 0, 0);
+            dataCanvas.getContext("2d").drawImage(data, 0, 0);
+            doc.addImage(promoCanvas.toDataURL(), 'JPG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }}, {{ layout.special-offers.width }}, {{ layout.special-offers.height }},'promoImg','FAST')
+            doc.addImage(dataCanvas.toDataURL(), 'PNG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }} + {{ layout.special-offers.height }}, {{ layout.special-offers.width }}, {{ 11 | minus: layout.special-offers.margin | minus: layout.special-offers.margin }} - {{ layout.special-offers.height }},'dataImg','FAST')
+            doc.save('{{ page.title }}.pdf')
+          }
+        </script>
+      {% endfor %}
+    </p>
+
+  {% endunless %}
+{% else %}
+  <p>{{ site.data.i18n.common.product-layout[site.lang].special-offers-empty }}</p>
+{% endif %}

data/_includes/components/icons/bootstrap.html

@@ -0,0 +1,14 @@
+<div class="d-none d-sm-block order-lg-1" data-component="icons/bootstrap">
+  <a href="{{ '/search/' | relative_url }}">
+    <i class="fas fa-search" data-fa-transform="down-5"></i>
+  </a>
+  <a href="{{ '/our-offices/' | relative_url }}">
+    <i class="fas fa-map-marker-alt" data-fa-transform="down-5"></i>
+  </a>
+  <a href="{{ '/contact/' | relative_url }}">
+    <i class="fas fa-envelope" data-fa-transform="down-6 grow-2"></i>
+  </a>
+  <a href="tel:{{ site.address[0].phone[0].number }}">
+    <i class="fas fa-phone" data-fa-transform="down-5"></i>
+  </a>
+</div>

data/_includes/components/icons/progressive.html

@@ -0,0 +1,29 @@
+<div class="header-icons">
+
+  <div id="navbarSearchButton" class="search-header hidden-600"> <!-- start search button -->
+    <a href="#" data-proofer-ignore>
+      <i class="fas fa-search fa-lg" data-fa-transform="up-1 shrink-2"></i>
+    </a>
+  </div> <!-- end search button -->
+
+  <div class="location-header hidden-600"> <!-- start location button -->
+    <a href="{{ '/our-offices/' | relative_url }}">
+      <i class="fas fa-map-marker-alt fa-lg" data-fa-transform="up-1"></i>
+    </a>
+  </div> <!-- end location button -->
+
+  <div class="contact-header hidden-600"> <!-- start contact button -->
+    <a href="{{ '/contact/' | relative_url }}">
+      <i class="fas fa-envelope fa-lg" data-fa-transform="grow-2"></i>
+    </a>
+  </div> <!-- end contact button -->
+
+  <div class="phone-header hidden-600"> <!-- start phone button -->
+    <a href="#" data-proofer-ignore>
+      <i class="fas fa-phone fa-lg" data-fa-transform="shrink-1"></i>
+    </a>
+  </div> <!-- end phone button -->
+
+</div>
+
+{% include components/icons/progressive.js %}

data/_includes/components/icons/progressive.js

@@ -0,0 +1,5 @@
+<script>
+  document.querySelector('#navbarSearchButton').addEventListener("click", function(){
+    document.querySelector("#mod-search-searchword").focus();
+  });
+</script>

data/_includes/components/info-cards/card-deck.html

@@ -0,0 +1,16 @@
+<div class="card-deck">
+  {% for info-card in page.info-cards %}
+    <div class="card pt-0 pt-sm-5 pt-lg-0" data-appear-animation="{{ info-card.animation }}">
+      <a href="{{ info-card.href | relative_url }}">
+        <img src="{{ site.amazon-s3 }}/components/info-cards/card-deck/img/{{ info-card.img }}.png" class="card-img-top" alt="{{ info-card.title }}">
+      </a>
+      <div class="card-body">
+        <h5 class="card-title">{{ info-card.title }}</h5>
+        <p class="card-text">{{ info-card.desc }}</p>
+      </div>
+      <div class="card-footer text-right bg-white border-top-0">
+        <a class="btn btn-primary" href="{{ info-card.href | relative_url }}">{{ info-card.button }}</a>
+      </div>
+    </div>
+  {% endfor %}
+</div>

data/_includes/components/info-cards/progressive.html

@@ -0,0 +1,20 @@
+<div class="container-fluid">
+  <div class="row services">
+    {% for info-card in page.info-cards %}
+      <div class="text-center col-12 col-sm my-4 my-sm-0">
+        <a href="{{ info-card.href }}">
+          <div class="big-icon bg text-primary" data-appear-animation="{{ info-card.animation }}">
+            {{ info-card.icon }}
+          </div>
+        </a>
+        <h4 class="title" data-appear-animation="{{ info-card.animation }}">{{ info-card.title }}</h4>
+        <div class="text-small" data-appear-animation="{{ info-card.animation }}">
+          {{ info-card.desc }}
+          <div class="clearfix"></div>
+          <br>
+          <button onclick="window.location.href='{{ info-card.href }}'" class="btn btn-primary" data-appear-animation="{{ info-card.animation }}">{{ info-card.button }}</button>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>

data/_includes/components/info-cards/search-results.html

@@ -0,0 +1,38 @@
+<li id="${results[i].ref}" class="pb-4" data-component="info-cards/search-results">
+
+  <div class="row">
+
+    <div class="col-4 col-md-3 col-lg-2 mt-0 d-flex align-items-center">
+      <a href="${item.url}">
+        <img src="${item.image}" alt="${item.title}">
+      </a>
+    </div>
+
+    <div class="col-8 col-md-9 col-lg-10 mt-0 d-flex align-items-center">
+      <div class="mt-0">
+        <div class="mt-0 mb-1">
+          <a href="${item.url}" class="text-dark">
+            <i class="fas fa-angle-right fa-xs text-muted ml-1" data-fa-transform="left-2"></i>
+            ${item.title}
+          </a>
+        </div>
+
+        <div class="line-clamp mb-1">
+          <a href="${item.url}" class="nav-link text-break py-1 px-0 text-success">
+            <i class="fas fa-link fa-xs"></i>
+            ${window.location.protocol}//${window.location.hostname}${item.url}
+          </a>
+        </div>
+
+        <div class="line-clamp">
+          <span class="badge badge-primary">
+            <i class="fas fa-star"></i> ${results[i].score.toFixed(1)}
+          </span>
+          <span class="text-muted">${(item.description ? item.description : item.content)}</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</li>

data/_includes/components/jumbotron/bootstrap.html

@@ -0,0 +1,5 @@
+<div class="jumbotron bg-cover h-100" data-component="jumbotron/bootstrap" style="background-image: url('{{ site.amazon-s3 }}/assets/img/components/jumbotron/bootstrap/{{ include.img }}.jpg');">
+  <h2 class="display-4 text-white" data-appear-animation="fadeInDown">{{ include.title }}</h2>
+  <p class="lead text-white" data-appear-animation="fadeInUp">{{ include.desc }}</p>
+  <a class="btn btn-primary" href="{{ include.href | relative_url }}" role="button" data-appear-animation="fadeInUp">{{ include.button }}</a>
+</div>

data/_includes/components/lang-switchers/two-langs.html

@@ -0,0 +1,27 @@
+<a href="javascript:switchLang()" class="lang-switcher mt-1">
+  <span class="flag-icon flag-icon-squared" id="lang-switcher"></span>
+</a>
+
+<script type="text/javascript">
+  if (!window.location.href.includes('grupopv')) {
+    document.querySelector('.lang-switcher').classList.add('d-none');
+  }
+
+  currentLang = document.getElementsByTagName("html")[0].getAttribute("lang");
+
+  if (currentLang == 'en') {
+    document.querySelector('#lang-switcher').classList.add('flag-icon-mx');
+  } else {
+    document.querySelector('#lang-switcher').classList.add('flag-icon-us');
+  }
+
+  function switchLang(){
+    if (currentLang == 'en') {
+      url = window.location.href.replace('localhost:4000','grupopv.mx').replace('grupopv.us','grupopv.mx');
+      window.location.href = url;
+    } else {
+      url = window.location.href.replace('localhost:4000','grupopv.us').replace('grupopv.mx','grupopv.us');
+      window.location.href = url;
+    }
+  }
+</script>