<section class="jumbotron jumbotron-fluid bg-transparent">
  <div class="container">
    <h1 class="text-center">{% t index.services_title %}</h1>

    <hr class="border-primary">

    <div class="row mt-5">
      <div class="col-12 col-lg-6 mb-4">
        <div class="card border-0 shadow">
          <div class="card-body">
            <h5 class="card-title font-weight-bold">{% t index.services.software_development %}</h5>
            <p class="mb-4">{% t index.services.software_development_text %}</p>
            <a class="text-dark mr-2" href="{% link _pages/software-technologies.html %}">{% t buttons.find_how_we_build_software %}</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-4">
        <div class="card border-0 shadow">
          <div class="card-body">
            <h5 class="card-title font-weight-bold">{% t index.services.technical_advice %}</h5>
            <p class="card-text mb-4">{% t index.services.technical_advice_text %}</p>
            <a class="text-dark mr-2" href="{% link _pages/technical_advice.html %}">{% t buttons.find_what %}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white pt-5 pb-5">
  <div class="container">
    <h1 class="text-center">{% t index.products_title %}</h1>

    <hr class="border-primary mb-5">

    <div class="row">
      <div class="col-lg-6">
        <h3>{% t index.products.nextcloud %}</h3>
        <p>
          {% t index.products.nextcloud_text %}
        </p>
        <a class="text-dark mr-2" href="https://www.nextcloud.com" rel="nofollow" target="_blank">
          <i class="fas fa-external-link-alt"></i> {% t index.products.nextcloud_website %}
        </a>
      </div>
      <div class="col text-right">
        {% asset nextcloud-example.webp %}
      </div>
    </div>

    <br><br><br>

    <div class="row">
      <div class="col text-left">
        {% asset azuracast-example.webp %}
      </div>
      <div class="col-lg-6">
        <h3>{% t index.products.azuracast %}</h3>
        <p>
          {% t index.products.azuracast_text %}
        </p>
        <a class="text-dark mr-2" href="https://radio.unitoo.it" rel="nofollow" target="_blank">
          <i class="fas fa-external-link-alt"></i> {% t index.products.azuracast_website %}
        </a>
      </div>
    </div>

    <br><br><br>

    <div class="row">
      <div class="col-lg-6">
        <h3>{% t index.products.pihole %}</h3>
        <p>
          {% t index.products.pihole_text %}
        </p>
        <a class="text-dark mr-2" href="https://pi-hole.net/" rel="nofollow" target="_blank">
          <i class="fas fa-external-link-alt"></i> {% t index.products.pihole_website %}
        </a>
      </div>
      <div class="col text-right">
        {% asset pihole-example.webp %}
      </div>
    </div>
  </div>
</section>