diff --git a/app/app.vue b/app/app.vue
index e620648..cb0eb30 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,58 +1,132 @@
 <template>
   <UApp>
     <NuxtLayout>
-      <Upagae>
-
+      <UPage>
         <!-- 主要内容区域 -->
         <main role="main">
-          <img src="/img/banner.png" alt="公司服务横幅图片" class="w-full mb-4">
+          <img src="/img/banner.png" alt="" class="w-full">
           <UPageSection :ui="{container:'lg:py-0 lg:px-0' }">
-            
-            
 
             <!-- 服务展示区域 -->
-            <section aria-label="服务展示">
-
-              <img src="/img/1.jpg" alt="服务项目展示图片1" class="w-full mb-4">
-              <img src="/img/2.jpg" alt="服务项目展示图片2" class="w-full mb-4">
-              <img src="/img/3.jpg" alt="服务项目展示图片3" class="w-full mb-4">
-              <img src="/img/4.jpg" alt="服务项目展示图片4" class="w-full mb-4">
-              <img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full mb-4">
-              <img src="/img/6.jpg" alt="服务项目展示图片6" class="w-full mb-4">
-              <img src="/img/7.jpg" alt="服务项目展示图片7" class="w-full mb-4">
-              <img src="/img/8.jpg" alt="服务项目展示图片8" class="w-full mb-4">
-              <img src="/img/9.jpg" alt="服务项目展示图片9" class="w-full mb-4">
+            <section aria-label="服务展示" class="mb-16">
+              <div class="grid grid-cols-1">
+                <div class="group cursor-pointer">
+                  <img src="/img/1.jpg" alt="服务项目展示图片1" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/2.jpg" alt="服务项目展示图片2" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/3.jpg" alt="服务项目展示图片3" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/4.jpg" alt="服务项目展示图片4" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/6.jpg" alt="服务项目展示图片6" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/7.jpg" alt="服务项目展示图片7" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/8.jpg" alt="服务项目展示图片8" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+                <div class="group cursor-pointer">
+                  <img src="/img/9.jpg" alt="服务项目展示图片9" class="w-full rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
+                </div>
+              </div>
             </section>
+            <section aria-label="服务保障" class="mb-16">
+              <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">服务保障</h2>
+                <p class="text-gray-600 text-lg">我们承诺为您提供最优质的服务保障</p>
+              </div>
 
+              <div class="grid md:grid-cols-3 gap-8">
+                <!-- 协助维权 -->
+                <div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow duration-300">
+                  <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <UIcon name="i-lucide-shield-check" class="w-8 h-8 text-green-600" />
+                  </div>
+                  <h3 class="text-xl font-semibold text-gray-800 mb-4">协助维权</h3>
+                  <p class="text-gray-600 leading-relaxed">蒙受经济损失，可申请协助维权服务，我们为您提供专业的法律支持</p>
+                </div>
+
+                <!-- 虚假赔偿 -->
+                <div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow duration-300">
+                  <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <UIcon name="i-lucide-badge-check" class="w-8 h-8 text-blue-600" />
+                  </div>
+                  <h3 class="text-xl font-semibold text-gray-800 mb-4">虚假赔偿</h3>
+                  <p class="text-gray-600 leading-relaxed">遇到品牌或资质冒用，可申请保障服务，维护您的合法权益</p>
+                </div>
+
+                <!-- 欺诈赔偿 -->
+                <div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow duration-300">
+                  <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <UIcon name="i-lucide-shield-alert" class="w-8 h-8 text-red-600" />
+                  </div>
+                  <h3 class="text-xl font-semibold text-gray-800 mb-4">欺诈赔偿</h3>
+                  <p class="text-gray-600 leading-relaxed">遇到欺诈行为，经核查属实，可申请保障退还费用</p>
+                </div>
+              </div>
+            </section>
             <!-- 联系信息区域 -->
-            <section aria-label="联系信息" class="grid lg:grid-cols-12 gap-6 items-center mt-8">
-              <div class="col-span-12 lg:col-span-5 shadow-2xl">
-
-                <UPageList divide>
-                  <UPageCard
-                      v-for="(user, index) in users"
-                      :key="index"
-                      :target="user.target"
-                      variant="ghost"
-                  >
-                    <template #body>
-                      <UUser :avatar="user.avatar" :description="user.description" :name="user.name" size="xl"/>
-                    </template>
-                  </UPageCard>
-                </UPageList>
+            <section aria-label="联系信息" class="mb-16">
+              <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">联系我们</h2>
+                <p class="text-gray-600 text-lg">多种方式联系我们，我们随时为您服务</p>
               </div>
               
-              <!-- 地图区域 -->
-              <div class="col-span-12 lg:col-span-7">
-
-                <img alt="公司位置地图 - 福建省福鼎市太姥山镇海埕路13号" class="shadow-2xl" src="/img/map.png">
+              <div class="grid lg:grid-cols-12 gap-8 items-start">
+                <!-- 联系方式卡片 -->
+                <div class="col-span-12 lg:col-span-5">
+                  <div class="bg-white rounded-xl shadow-lg p-8">
+                    <h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">联系方式</h3>
+                    <UPageList divide>
+                      <UPageCard
+                          v-for="(user, index) in users"
+                          :key="index"
+                          :target="user.target"
+                          variant="ghost"
+                          class="hover:bg-gray-50 transition-colors duration-200"
+                      >
+                        <template #body>
+                          <UUser :avatar="user.avatar" :description="user.description" :name="user.name" size="xl"/>
+                        </template>
+                      </UPageCard>
+                    </UPageList>
+                  </div>
+                </div>
+                
+                <!-- 地图区域 -->
+                <div class="col-span-12 lg:col-span-7">
+                  <div class="bg-white rounded-xl shadow-lg p-6">
+                    <h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">公司位置</h3>
+                    <img 
+                      alt="公司位置地图 - 福建省福鼎市太姥山镇海埕路13号" 
+                      class="w-full rounded-lg shadow-md" 
+                      src="/img/map.png"
+                    >
+                    <div class="mt-4 text-center">
+                      <p class="text-gray-600">
+                        <UIcon name="i-lucide-map-pin" class="w-5 h-5 inline mr-2 text-blue-500" />
+                        福建省福鼎市太姥山镇海埕路13号
+                      </p>
+                    </div>
+                  </div>
+                </div>
               </div>
             </section>
-            
+
+
           </UPageSection>
         </main>
           
-      </Upagae>
+      </UPage>
     </NuxtLayout>
   </UApp>
 </template>