udpate: setup page use wizard form step

src/app/app.vue

@@ -37,6 +37,10 @@ useHead({
     },
   ],
   meta: [
+    {
+      name: 'mobile-web-app-capable',
+      content: 'yes',
+    },
     {
       name: 'apple-mobile-web-app-capable',
       content: 'yes',

src/app/components/icons/ArrowLeftCircle.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+</template>

src/app/components/icons/ArrowRightCircle.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+</template>

src/app/pages/setup.vue

@@ -2,13 +2,14 @@
   <main class="container mx-auto px-4">
     <UiBanner />
     <Panel>
-      <PanelBody class="lg:w-[60%] mx-auto mt-10 p-4">
+      <PanelBody class="md:w-[70%] lg:w-[60%] mx-auto mt-10 p-4">
         <h2 class="mt-8 mb-16 text-3xl font-medium">
           {{ $t('setup.welcome') }}
         </h2>
 
-        <div id="step1" class="tab">
+        <div class="tab">
           <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
+          <form>
             <div>
               <label for="username" class="inline-block py-2">{{
                 $t('username')
@@ -42,21 +43,35 @@
               <Label for="accept" class="inline-block my-4 mr-4">{{
                 $t('setup.accept')
               }}</Label>
-            <input id="accept" v-model="accept" type="checkbox" name="accept" />
+              <input
+                id="accept"
+                v-model="accept"
+                type="checkbox"
+                name="accept"
+              />
             </div>
+          </form>
         </div>
 
-        <div id="step2" class="tab">
+        <div class="tab hidden">
           <p class="text-lg p-8">Host/Port section</p>
         </div>
 
-        <div id="step3" class="tab">
+        <div class="tab hidden">
           <p class="text-lg p-8">Migration section</p>
         </div>
 
-        <div>
+        <div class="tab hidden">
-          <div>Previous</div>
+          <p class="text-lg p-8">Validation section</p>
-          <div>Next</div>
+        </div>
+
+        <div class="flex justify-between items-center">
+          <IconsArrowLeftCircle class="size-12" />
+          <div class="step grow h-[3px] mx-4 bg-white"></div>
+          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <IconsArrowRightCircle class="size-12" />
         </div>
       </PanelBody>
     </Panel>