knowyt/client/src/components/InfoModal.vue

<template>
  <ModalDialog @close="$emit('close')">
      <h1 class="info__title">Know Your Teammates</h1>
      <h2 class="info__subtitle">{{ $t('credits') }}</h2>
      <table class="info__table">
        <tr>
          <td class="info__table-key">Settel</td>
          <td>{{ $t('idea') }}</td>
        </tr>
        <tr>
          <td class="info__table-key">Denis</td>
          <td>{{ $t('design') }}</td>
        </tr>
      </table>
      <h2 class="info__subtitle">{{ $t('technologies') }}</h2>
      <table class="info__table">
        <tr>
          <td class="info__table-key">Frontend</td>
          <td>Vue3 + Nuxt3</td>
        </tr>
        <tr>
          <td class="info__table-key">Backend</td>
          <td>Go</td>
        </tr>
        <tr>
          <td class="info__table-key">Tools</td>
          <td>Podman/Docker, GNU Make, VS Code, Figma</td>
        </tr>
      </table>
      <template v-slot:footer>
        <Button :border="true" @click="$emit('close')">{{ $t('back') }}</Button>
      </template>
  </ModalDialog>
</template>

<script setup lang="ts">
import useI18n from '@/composables/useI18n'
import ModalDialog from '../components/ModalDialog.vue';

const $emit = defineEmits(['close'])

const { $t } = useI18n({
  back: { en: 'back', de: 'zurück' },
  idea: { en: 'concept, code, add. design', de: 'Konzept, Code, zusätzl. Design' },
  design: { en: 'design', de: 'Design' },
  credits: { en: 'Credits', de: 'Mitwirkende' },
  technologies: { en: 'Technologies used', de: 'verwendete Technologien' },
})

const close = () => { window.location.href = '/' }
</script>

<style lang="scss">
@import '~/assets/css/components';

.info {
  &__container {
    display: flex;
    width: 100%;
    height: 100%;
    color: $text-primary-color;
  }

  &__box {
    display: flex;
    flex-direction: column;
    min-width: 600px;
    margin: auto;
    padding: 32px;
    border: 1px solid white;
    border-radius: 16px;
  }

  &__title {
    font-family: $font-primary;
    margin: 0 32px 32px 0;
    font-size: 48px;
  }

  &__subtitle {
    margin: 32px 0 8px 0;
    font-size: 24px;
    font-family: $font-secondary;
  }

  &__table {
    font-family: $font-secondary;

    &-key {
      width: 6em;
    }
  }
}
</style>