services.liquid

---
permalink: /services
layout: index.liquid
data:
  route: services
---
<style>

section {
  display: flex;
  gap: 2em;
}
.services-section {
  justify-content: space-around;
}

.services-section__lock-icon svg {
  width: clamp(250px, 30vw, 500px);
  height: auto;
}

#lock-icon path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 4s ease-in-out forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

#lock-icon .lock-glare {
  stroke: var(--clr-green-lighter);
  stroke-width: 1; 
  stroke-dasharray: 5 5;
  stroke-dashoffset: 10;
  animation: electrify .5s linear infinite;
}

@keyframes electrify {
  0% {
    stroke-dashoffset: 10;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -10;
  }
}

#key_features {
    background-image: url('/img/features_bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.key_features--list {
    display: flex;
    width: 90%;
    gap: 2em;
    flex-direction: column;
}

.key_features--list li {
    width: 40%;
    display: grid;
    gap: .5em;
}

.key_features--list li h2 {
    font-size: 1.75em;
}

.align-right {
    align-self:self-end;
    text-align: right;
}

.key_features--title {
  position: relative;
  bottom: -20px;
  width: 60%;
}

#optimize_resources > article {
  align-items: flex-start;
  display: grid;
  grid-template-columns: 1fr;
  margin: 5em 0;
  padding: 0 2em;
}

.optimize_resources--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
  grid-column: 1 / -1;
}

.optimize_resources--grid li {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.optimize_resources--svg_list svg {
  width: 100%;
  object-fit: contain;
  height: auto;
  margin-bottom: 1em;
}

#allies {
  display: flex;
}

#allies article {
  gap: 3em;
  flex-direction: column;
}

.allies--container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 900px;
}
.allies--svg {
    width: 50%;
}

.floating-rotation {
  animation: floatAndRotate 5s linear infinite;
  transform-origin: 45% 50%;
}

@keyframes floatAndRotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

#cta_services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2em;
  width: 100%
}

#cta_services article {
  margin: 0;
  padding: 0;
}

#cta_services div {
  display: flex;
  gap: 1em;
}
.cta_services--svg {
    align-items: flex-start;
    max-width: 90%;
}

@media (max-width: 1279px) {
  #cta_services article:nth-child(2) {
    flex-wrap: wrap;
  }
  #key_features {
    background-image: url('/img/features_bg_sm.svg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .allies--container {
    flex-direction: column;
    max-width: 320px;
  }
  .allies--container h3 {
    text-align: center;
  }
  .allies--svg {
    height: 150px;
    position: relative;
    bottom: 180px;
  }
}

@media (min-width: 1279px) {
  #cta_services article:nth-child(2) {
    flex-wrap: nowrap;
  }
}

</style>

{% for service in site.data[site.data.lang].services %}
        <section {% if service.id == "intro" %} id="intro" class="services-section">
          <article class="services-section__content max animated">
            <div class="text-section lightest-lavender-text">
              <h1 class="dark-green-text">{{ service.title_part_one}} {{ service.title_part_two }}</h1>
              <p>{{ service.paragraph }}</p> 
              <a href="#key_features" class="scroll-link">
                <span class="dark-green-text">{{ service.call_to_action }}</span>
                <figure class="scroll-arrow">
                    {% include "services_arrow.svg" %} 
                </figure>
            </a>
            </div>
            <figure class="services-section__lock-icon">
              {% include "lock-icon.svg" %} 
            </figure>
          </article>
        </section>
      {% endif %}
 
        <section {% if service.id == "key_features" %} id="key_features" class="light-lavender-bg">
          <article class="max animated">
            <ul class="key_features--list">
            {% for item in service.list %}
                    <li class={{ item.class }}>
                        <h2 class="dark-lavender-text">{{ item.title }}</h2>
                        <p class="thin">{{ item.content }}</p>
                    </li>  
            {% endfor %}
            </ul>
            <h2 class="key_features--title dark-lavender-text center">{{ service.last-title }}</h2>
          </article>
        </section>
      {% endif %}

      <section {% if service.id == "optimize_resources" %} id="optimize_resources" class="white-bg">
        <article class="max animated dark-olive-text">
                <h3 class="boldest">{{ service.title }}</h3>
                <p>{{ service.paragraph }}</p>
              <ul class="optimize_resources--grid">
                {% for item in service.list %}
                  <li class="animated">
                    <figure class="optimize_resources--svg_list">
                        {% include item.img %} 
                    </figure>
                    <h3 class="bolder">{{ item.title }}</h3>
                    <p>{{ item.content }}</p>
                  </li>
                {% endfor %}
              </ul>
        </article>
      </section>
    {% endif %}

    <section {% if service.id == "allies" %} id="allies" class="whitest-bg">
        <article class="max animated dark-olive-text center">
                <h2 class="maxwidth--text_desktop bold">{{ service.title_part_one }}{{ service.title_part_two }}</h2>
                <div class="allies--container">
                    <figure class="allies--svg">
                        {% include "cubos.svg" %}
                    </figure>
                    <h3 class="left">{{ service.paragraph }}</h3>
                </div>
                <h3 class="title-max-width dark-lavender-text bolder">{{ service.strong_paragraph }}</h3>
                <a class="button" href={{ service.href }}>{{ service.cta }}</a>
        </article>
      </section>
    {% endif %}

    <section {% if service.id == "cta_services" %} id="cta_services" class="mail light-lavender-bg dark-olive-text">
      <article class="column">
        <h2 class="title-max-width bold">{{ service.title }}</h2>
        <h2 class="title-max-width">{{ service.subtitle }}</h2>
      </article>
      <article class="max animated">
          <div class="column">
              <p>{{ service.paragraph }}</p>
              <h3 class="bolder">{{ service.strong_paragraph }}</h3>
              <form id="mail-form">
                <input type="text" name="contactName" placeholder="{{ service.placeholder_name }}">
                <input type="text" name="contactLastName" placeholder="{{ service.placeholder_last_name }}">
                <input type="email" name="contactEmail" placeholder="{{ service.placeholder_email }}" required>
                <button type="submit" id="mail-button" class="bolder dark-green-bg">{{ service.cta }}</button>
              </form>
          </div>
          <figure class="cta_services--svg">
              {% include "dancingperson.svg" %}
          </figure>
      </article>
      </section>
    {% endif %}

{% endfor %}