<script setup>
  import MenuVue from "../../components/Menu.vue";
  import Employee from "../../components/Employee.vue";
</script>

<template>
  <MenuVue type="about" :title="$t('about.title')"></MenuVue>
  <section class="about-section content">
    <h2>{{ $t('about.subtitle1') }}</h2>
    <p>{{ $t('about.paragraph1') }}</p>
    <p>{{ $t('about.paragraph2') }}</p>
    <h2>{{ $t('about.subtitle2') }}</h2>
    <p>{{ $t('about.paragraph3') }}</p>
    <h4>{{ $t('about.subtitle3') }}</h4>
    <div class="employees">
      <Employee class="employee" image="foto_alejo.png" name="Alejandro Valderrama" :role="$t('common.rol_managing_partner')" />
      <Employee class="employee" image="foto_jose.png" name="Jose Lacouture" :role="$t('common.rol_managing_partner')" />
    </div>
  </section>
</template>

<style lang="scss" scoped>
  .about-section {
  }

  

  .employees {
    display: flex;
    justify-content: center;

    .employee {
      margin: 0 150px;
    }
  }
</style>