feat: introduction

app/citizen-frontend/src/pages/index.vue

@@ -79,6 +79,14 @@
           <HealthRadarChart :radar-data="store.radarData" />
         </v-card>
 
+        <ModuleRouterCard
+          description="了解公益普測計畫、研究依據與平台流程。"
+          icon="mdi-information-outline"
+          icon-color="primary"
+          title="簡介"
+          to="/introduction"
+        />
+
         <ModuleRouterCard
           description="完成線上自評，取得初步風險分級。"
           icon="mdi-clipboard-text-search"
@@ -172,7 +180,9 @@
                 color="primary"
                 variant="flat"
                 @click="prescriptionDialog = false"
-              >確認關閉</v-btn>
+              >
+                確認關閉
+              </v-btn>
             </v-card-actions>
           </v-card>
         </v-dialog>
@@ -183,7 +193,7 @@
           <BrandAvatar class="elevation-2" :icon-size="42" :size="72" />
         </div>
 
-        <v-card class="rounded-xl elevation-2 mb-12 py-4" color="surface">
+        <v-card class="rounded-xl elevation-2 mb-4 py-4" color="surface">
           <v-card-text>
             <div class="d-flex align-center mb-4">
               <v-avatar class="mr-4 text-white" color="accent" size="36">
@@ -222,20 +232,28 @@
             >
               登入平台
             </v-btn>
-          </v-card-text>
-        </v-card>
 
-        <v-card color="surface" variant="flat">
-          <v-card-text class="pa-4 d-flex align-center text-left">
-            <v-icon class="mr-3" color="primary" icon="mdi-lock-outline" size="28" />
+            <div class="d-flex align-center mt-4">
+              <v-icon class="mr-3" color="primary" icon="mdi-lock-outline" size="28" />
 
-            <div>
-              <div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
+              <div>
+                <div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
 
-              <div class="text-title-small text-grey">普測預約、現場報到、量測紀錄與運動處方。</div>
+                <div class="text-title-small text-grey">
+                  普測預約、現場報到、量測紀錄與運動處方。
+                </div>
+              </div>
             </div>
           </v-card-text>
         </v-card>
+
+        <ModuleRouterCard
+          description="了解公益普測計畫、研究依據與平台流程。"
+          icon="mdi-information-outline"
+          icon-color="primary"
+          title="簡介"
+          to="/introduction"
+        />
       </template>
     </template>
   </Layout>