<template>
    <section class="max-w-xl m-auto">
        <van-nav-bar :title="t('about.title')" :border="false">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="router.back" />
            </template></van-nav-bar>
        <h1 class="text-lg text-black p-4">{{ t('about.profile') }}</h1>
        <div class="h-[1px] bg-gray-200"></div>
        <div>
            <h6>{{ t('about.profile') }}</h6>
            <h6>{{ t('about.h_1') }}</h6>
            <h6>{{ t('about.h_2') }}</h6>
            <h6>{{ t('about.h_3') }}</h6>
            <h6>{{ t('about.h_4') }}</h6>
            <h6>{{ t('about.h_5') }}</h6>
            <h6>{{ t('about.h_6') }}</h6>
            <h6>{{ t('about.h_7') }}</h6>
            <h6>{{ t('about.h_8') }}</h6>
            <h6>{{ t('about.h_9') }}</h6>
        </div>
    </section>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; 

const { t } = useI18n()

const router = useRouter()

</script>

<style scoped>
h6 {
    @apply text-sm text-gray-500 px-4 py-8;
}
</style>