{% extends "header_slim.html" %}
{%- block title -%}{{ this.title }}{%- endblock -%}
{%- block meta_description -%}
  {%- if this.meta_description is defined and this.meta_description != "" -%}
    {{ this.meta_description }}
  {%- else -%}
    Werkkooperative der Technikfreundinnen eG
  {%- endif -%}
{%- endblock -%}
{% block body %}
    <section class="content">
      <div class="content__box">

        <div class="services_box">
          <h1>{{ this.title }}</h1>
          {#
            TODO: Services-Karten in Flow-Blocks umbauen, damit der Inhalt getrennt von der
            Optik gepflegt werden kann.
          #}
          <div class="services_card_box">
            <div class="services_card -odd">
              <div class="services_card__image_box">
                <img src="{{'/images/icon_gears_bubble.svg'|asseturl }}" alt="" aria-hidden="true">
              </div>
              <div class="services_card__text_box">
                <h2>Beratung</h2>
                <p>
                  Profitieren Sie vom breit aufgestellten IT-Know-how, vom Erfahrungsaustausch und der Vernetzung unserer Mitglieder, Expertinnen und Experten in der Genossenschaft. Die WTF Kooperative ist Ihr kompetenter Ansprechpartner.
                </p>
              </div>
            </div>

            <div class="services_card -even">
              <div class="services_card__image_box">
                <img src="{{'/images/icon_processor.svg'|asseturl }}" alt="" aria-hidden="true">
              </div>
              <div class="services_card__text_box">
                <h2>Entwicklung</h2>
                <p>
                  Wir realisieren Ihre Projekte – egal ob Web-Applikation, mobile App oder hardwarenahe Programmierung. Auch können wir Sie bei Bedarf hinsichtlich passender Wirtschaftsförderprogramme beraten.
                </p>
              </div>
            </div>

            <div class="services_card -odd">
              <div class="services_card__image_box">
                <img src="{{'/images/icon_connected_servers.svg'|asseturl }}" alt="" aria-hidden="true">
              </div>
              <div class="services_card__text_box">
                <h2>Betrieb</h2>
                <p>
                  Nach dem Projekt lassen wir Sie nicht mit dem Ergebnis im Regen stehen, sondern bieten Ihnen auch über das Projekt hinaus Services für den Betrieb des abgeschlossenen Projekts und die Administration der Infrastruktur.
                </p>
              </div>
            </div>

          </div>

        </div>
      </div>
      <div class="content__box">
          <div class="content__inner_box">
              <h1 class="big_heading">Kompetenzen</h1>
          </div>
      </div>
      <section class="content">
      <div class="content__box">
          <div class="bubble_grid">

            <div class="bubble_grid__bubble">
              <img src="/images/logos/Python_logo_and_wordmark.svg" alt="Logo of the Python programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/ISO_C++_Logo.svg'|asseturl }}" alt="Logo of the C++ programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Tux.svg'|asseturl }}" alt="Tux the penguin mascott of Linux">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Unofficial_JavaScript_logo_2.svg'|asseturl }}" alt="Logo of the JavaScript programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/PHP-logo.svg'|asseturl }}" alt="Logo of the PHP programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/C_Programming_Language.svg'|asseturl }}" alt="Logo of the C programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Ansible_logo.svg'|asseturl }}" alt="Logo of the Ansible project">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Postgresql_elephant.svg'|asseturl }}" alt="Logo of the Postgres database">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Java-Logo.svg'|asseturl }}" alt="Logo of the Java programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Rust_programming_language_black_logo.svg'|asseturl }}" alt="Logo of the Rust programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/CSS3_logo_and_wordmark.svg'|asseturl }}" alt="Logo of CSS3">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Debian-OpenLogo.svg'|asseturl }}" alt="Logo of the Debian operating system">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/MySQL_textlogo.svg'|asseturl }}" alt="Logo of the MySQL database">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Vue.js_Logo_2.svg'|asseturl }}" alt="Logo of the Vue.js framework">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/LaTeX_logo.svg'|asseturl }}" alt="Logo of the LaTeX typesetting language">
            </div>

            <div class="bubble_grid__card">
              <ul>
                <li>Agiles Projektmanagement</li>
                <li>Barrierefreiheit</li>
                <li>Operations</li>
                <li>Software-Audits</li>
                <li>Softwareentwicklung</li>
                <li>Projektmanagement</li>
                <li>User Experience</li>
                <li>Übersetzung & Internationalisierung (i18n/l10n)</li>
              </ul>
            </div>

        </div>
      </div>
    </section>
{% endblock %}