<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import HelloWorld from './components/HelloWorld.vue'
import SvgDemo from './components/SvgDemo.vue'

const { t } = useI18n()
</script>

<template>
  <header>
    <img alt="logo" class="logo" src="./assets/imgs/logo.png" width="125" height="125">
  </header>
  <HelloWorld :msg="t('goodjob')" />
  <SvgDemo />
</template>

<style scoped>
header {
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -220px;
  z-index: 10;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
  border-radius: 20px;
}
</style>
