增加服务入口图片卡片

index.html

@@ -62,27 +62,39 @@
 
       <section class="services-section" id="services" aria-labelledby="services-title">
         <div class="section-heading">
-          <p class="eyebrow">Quick Access</p>
-          <h2 id="services-title">常用服务</h2>
+          <div>
+            <p class="eyebrow">Quick Access</p>
+            <h2 id="services-title">常用服务</h2>
+          </div>
+          <p class="section-note">像游戏门户一样把入口做成清晰的视觉卡片，看到就能点。</p>
         </div>
 
         <div class="services">
           <a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
-            <span class="service-icon">FRP</span>
-            <span class="service-title">FRP 面板</span>
-            <span class="service-desc">内网穿透管理</span>
+            <img src="assets/service-frp.jpg" alt="" loading="lazy" />
+            <span class="service-content">
+              <span class="service-icon">FRP</span>
+              <span class="service-title">FRP 面板</span>
+              <span class="service-desc">内网穿透管理</span>
+            </span>
           </a>
 
           <a class="service-card accent-green" href="/git/" aria-label="进入 Git 服务">
-            <span class="service-icon">Git</span>
-            <span class="service-title">Git 服务</span>
-            <span class="service-desc">代码仓库</span>
+            <img src="assets/service-git.jpg" alt="" loading="lazy" />
+            <span class="service-content">
+              <span class="service-icon">Git</span>
+              <span class="service-title">Git 服务</span>
+              <span class="service-desc">代码仓库</span>
+            </span>
           </a>
 
           <a class="service-card accent-orange" href="/sync/" aria-label="进入 Syncthing">
-            <span class="service-icon">Sync</span>
-            <span class="service-title">Syncthing</span>
-            <span class="service-desc">文件同步</span>
+            <img src="assets/workspace-hero.jpg" alt="" loading="lazy" />
+            <span class="service-content">
+              <span class="service-icon">Sync</span>
+              <span class="service-title">Syncthing</span>
+              <span class="service-desc">文件同步</span>
+            </span>
           </a>
 
           <a
@@ -92,9 +104,12 @@
             rel="noreferrer"
             aria-label="打开 Gemini"
           >
-            <span class="service-icon">AI</span>
-            <span class="service-title">Gemini</span>
-            <span class="service-desc">Google AI 助手</span>
+            <img src="assets/service-gemini.jpg" alt="" loading="lazy" />
+            <span class="service-content">
+              <span class="service-icon">AI</span>
+              <span class="service-title">Gemini</span>
+              <span class="service-desc">Google AI 助手</span>
+            </span>
           </a>
         </div>
       </section>