chore: improve lighthouse

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <router-view />
     <Footer />
-  </div>
+  </main>
 </template>

src/components/Footer.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="text-xl mt-6">
-    <router-link class="icon-btn mx-2" to="/">
+  <nav class="text-xl mt-6">
+    <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
       <Icon icon="carbon:campsite" class="inline-block" />
     </router-link>
 
-    <div class="icon-btn mx-2" @click="isDark = !isDark">
+    <a class="icon-btn mx-2" @click="isDark = !isDark" :title="t('button.toggle_dark')">
       <Icon :icon="isDark ? 'carbon:moon' : 'carbon:sun'" class="inline-block" />
-    </div>
+    </a>
 
-    <div class="icon-btn mx-2" @click="toggleLocales">
+    <a class="icon-btn mx-2" @click="toggleLocales" :title="t('button.toggle_langs')">
       <Icon icon="carbon:language" class="inline-block" />
-    </div>
+    </a>
 
-    <router-link class="icon-btn mx-2" to="/about">
+    <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
       <Icon icon="carbon:dicom-overlay" class="inline-block" />
     </router-link>
 
-    <a class="icon-btn mx-2" href="https://github.com/antfu/vitesse" target="_blank">
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
       <Icon icon="carbon:logo-github" class="inline-block" />
     </a>
-  </div>
+  </nav>
 </template>
 
 <script setup lang='ts'>

src/pages/index.vue

@@ -4,12 +4,12 @@
       <Icon class="iconify inline-block" icon="carbon:campsite" />
     </p>
     <p>
-      <a href="https://github.com/antfu/vitesse" target="_blank">
+      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
         Vitesse
       </a>
     </p>
-    <p class="text-sm opacity-50">
-      <em>{{ t('intro.desc') }}</em>
+    <p>
+      <em class="text-sm opacity-50">{{ t('intro.desc') }}</em>
     </p>
 
     <div class="py-4" />
@@ -17,6 +17,9 @@
     <input
       v-model="name"
       :placeholder="t('intro.whats-your-name')"
+      type="text"
+      autocomplete="false"
+      autofocus
       class="px-4 py-2 border border-gray-200 rounded text-center text-sm outline-none active:outline-none bg-transparent dark:border-gray-700"
       style="width: 250px"
       @keydown.enter="go"