diff --git a/src/pages/index.js b/src/pages/index.js
index 331894d..09696b9 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -21,6 +21,7 @@ function HomepageHeader() {
     <header className={styles.heroBanner}>
       <div className={styles.heroGrid} />
       <div className={styles.heroGlow} />
+      <div className={styles.heroGlowRight} />
       <div className="container">
         <div className={styles.heroContent}>
           <img
@@ -42,25 +43,30 @@ function HomepageHeader() {
 
           <div className={styles.buttonGroup}>
             <Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('docs/category/机顶盒刷机教程')}>
-              保姆级刷机教程
+              📖 保姆级刷机教程
             </Link>
             <Link className={clsx(styles.btn, styles.btnPrimary)} to="download">
-              最新固件下载
+              ⬇️ 最新固件下载
             </Link>
             <Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('devices')}>
-              设备适配表
+              📋 设备适配表
             </Link>
           </div>
           <div className={styles.buttonGroup}>
             <Link className={clsx(styles.btn, styles.btnSecondary)} to={useBaseUrl('news')}>
-              系统升级公告
+              📣 系统升级公告
             </Link>
             <Link className={clsx(styles.btn, styles.btnSecondary)} to={useBaseUrl('docs/intro')}>
-              海纳思使用手册
+              📚 海纳思使用手册
             </Link>
           </div>
         </div>
       </div>
+      <div className={styles.heroWave}>
+        <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z" fill="var(--ifm-background-color)" />
+        </svg>
+      </div>
     </header>
   );
 }
@@ -71,16 +77,20 @@ function SectionPersistence() {
       <div className="container">
         <div className={styles.sectionInner}>
           <div className={styles.sectionText}>
-            <span className={styles.sectionBadge}>开源 · 免费 · 易用</span>
+            <span className={styles.sectionBadge}>✦ 开源 · 免费 · 易用</span>
             <h2 className={styles.sectionTitle}>家用 Linux 服务器系统</h2>
             <p className={styles.sectionDesc}>
               海纳思系统，基于 Ubuntu 20.04 LTS 打造的 NAS 系统，开发者精心内置丰富功能：
-              内网穿透、网盘共享、远程下载、Docker 安装、个人博客、网络建站、
-              Socks5 服务、FTP 上传下载、WebDAV 接口、终端控制、一键还原、计划任务等。
             </p>
+            <div className={styles.tagCloud}>
+              {['内网穿透','网盘共享','远程下载','Docker','个人博客','网络建站','Socks5','FTP','WebDAV','终端控制','一键还原','计划任务'].map(tag => (
+                <span key={tag} className={styles.tag}>{tag}</span>
+              ))}
+            </div>
           </div>
-          <div className={styles.sectionImage}>
-            <img src="img/about.png" alt="系统功能概览" width="400" height="466" />
+          <div className={styles.sectionImageWrap}>
+            <div className={styles.imageGlow} />
+            <img src="img/about.png" alt="系统功能概览" className={styles.sectionImg} width="400" height="466" />
           </div>
         </div>
       </div>
@@ -93,11 +103,12 @@ function SectionEnforcement() {
     <section className={clsx(styles.section, styles.sectionAlt)}>
       <div className="container">
         <div className={clsx(styles.sectionInner, styles.sectionReverse)}>
-          <div className={styles.sectionImage}>
-            <img src="img/huawei.png" alt="海思机顶盒" height="250" width="400" />
+          <div className={styles.sectionImageWrap}>
+            <div className={styles.imageGlow} />
+            <img src="img/huawei.png" alt="海思机顶盒" className={styles.sectionImg} height="250" width="400" />
           </div>
           <div className={styles.sectionText}>
-            <span className={styles.sectionBadge}>变废为宝</span>
+            <span className={styles.sectionBadge}>✦ 变废为宝</span>
             <h2 className={styles.sectionTitle}>将机顶盒变成超低功耗服务器</h2>
             <p className={styles.sectionDesc}>
               实测功耗约 3 瓦，全年无休电费 ≈18 元/年，一杯奶茶钱养活它一年。
@@ -108,6 +119,9 @@ function SectionEnforcement() {
               <li>网页建站 / 内网穿透 / 公网映射</li>
               <li>科学上网 / 跑脚本 / 定时任务</li>
             </ul>
+            <blockquote className={styles.sectionQuote}>
+              "我是小盒子，也是大世界！千家万户都有一个机顶盒，开启您的探索之旅！"
+            </blockquote>
           </div>
         </div>
       </div>
@@ -119,21 +133,34 @@ function OpenCollective() {
   return (
     <section className={styles.donateSection}>
       <div className="container">
-        <h2 className={styles.donateTitle}>捐助作者，持续开发</h2>
+        <div className={styles.donateTitleWrap}>
+          <h2 className={styles.donateTitle}>捐助作者，持续开发</h2>
+          <p className={styles.donateSubtitle}>您的支持是项目持续进步的动力</p>
+        </div>
         <div className={styles.donateRow}>
-          <div className={styles.donateCard}>
-            <img src="img/danote.png" alt="作者赞赏码" />
-            <p className={styles.donateCaption}>
-              作者赞赏码<br /><br />
-              作者"神雕"开发的固件和提供的个人网站，为了持续维护和进步，呼吁有能力的网友支持本站持续运作和固件持续开发更新。不胜感激! 您的捐助将用于本站的服务器架设和固件升级维护。
-            </p>
+          <div className={clsx(styles.donateCard, styles.donateCardBlue)}>
+            <div className={styles.donateCardAccent} />
+            <div className={styles.donateQrWrap}>
+              <img src="img/danote.png" alt="作者赞赏码" className={styles.donateQr} />
+            </div>
+            <div className={styles.donateCardBody}>
+              <h3 className={styles.donateCardTitle}>作者赞赏码</h3>
+              <p className={styles.donateCaption}>
+                作者"神雕"开发的固件和提供的个人网站，为了持续维护和进步，呼吁有能力的网友支持本站持续运作和固件持续开发更新。不胜感激! 您的捐助将用于本站的服务器架设和固件升级维护。
+              </p>
+            </div>
           </div>
-          <div className={styles.donateCard}>
-            <img src="img/alipay.png" alt="支付宝" />
-            <p className={styles.donateCaption}>
-              支付宝<br /><br />
-              可以抽出时间为小白网友提供付费远程协助，包括刷机、运维、疑难解决等需求。已组建微信群，加微信注明入群将定期邀请加入。
-            </p>
+          <div className={clsx(styles.donateCard, styles.donateCardCyan)}>
+            <div className={styles.donateCardAccent} />
+            <div className={styles.donateQrWrap}>
+              <img src="img/alipay.png" alt="支付宝" className={styles.donateQr} />
+            </div>
+            <div className={styles.donateCardBody}>
+              <h3 className={styles.donateCardTitle}>支付宝 / 远程协助</h3>
+              <p className={styles.donateCaption}>
+                可以抽出时间为小白网友提供付费远程协助，包括刷机、运维、疑难解决等需求。已组建微信群，加微信注明入群将定期邀请加入。
+              </p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 84e26d0..b51b486 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -2,7 +2,7 @@
 .heroBanner {
   position: relative;
   overflow: hidden;
-  padding: 5rem 0 4rem;
+  padding: 5rem 0 6rem;
   text-align: center;
   background: linear-gradient(160deg, #071525 0%, #0d2137 45%, #071525 100%);
   color: #fff;
@@ -20,12 +20,21 @@
 
 .heroGlow {
   position: absolute;
-  top: -220px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 700px;
-  height: 700px;
-  background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 65%);
+  top: -200px;
+  left: 30%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 65%);
+  pointer-events: none;
+}
+
+.heroGlowRight {
+  position: absolute;
+  bottom: -150px;
+  right: 20%;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 65%);
   pointer-events: none;
 }
 
@@ -37,7 +46,13 @@
 .heroLogo {
   height: 120px;
   margin-bottom: 1.5rem;
-  filter: drop-shadow(0 0 28px rgba(6, 182, 212, 0.45));
+  filter: drop-shadow(0 0 32px rgba(6, 182, 212, 0.5));
+  animation: floatLogo 4s ease-in-out infinite;
+}
+
+@keyframes floatLogo {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
 }
 
 .heroTitle {
@@ -52,8 +67,24 @@
 
 .heroSubtitle {
   font-size: 1.15rem;
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.6);
   margin-bottom: 2.5rem;
+  letter-spacing: 0.05em;
+}
+
+/* Wave bottom of hero */
+.heroWave {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  line-height: 0;
+}
+
+.heroWave svg {
+  display: block;
+  width: 100%;
+  height: 80px;
 }
 
 /* ===== Stats ===== */
@@ -70,15 +101,17 @@
   flex-direction: column;
   align-items: center;
   padding: 0.75rem 1.5rem;
-  border: 1px solid rgba(6, 182, 212, 0.22);
+  border: 1px solid rgba(6, 182, 212, 0.2);
   border-radius: 12px;
-  background: rgba(6, 182, 212, 0.06);
+  background: rgba(6, 182, 212, 0.07);
   min-width: 90px;
-  transition: border-color 0.2s;
+  transition: all 0.25s ease;
 }
 
 .statItem:hover {
-  border-color: rgba(6, 182, 212, 0.5);
+  border-color: rgba(6, 182, 212, 0.55);
+  background: rgba(6, 182, 212, 0.12);
+  transform: translateY(-3px);
 }
 
 .statValue {
@@ -106,12 +139,13 @@
 .btn {
   display: inline-flex;
   align-items: center;
-  padding: 0.6rem 1.5rem;
+  gap: 0.35rem;
+  padding: 0.6rem 1.4rem;
   border-radius: 8px;
   font-size: 0.95rem;
   font-weight: 500;
   text-decoration: none !important;
-  transition: all 0.2s ease;
+  transition: all 0.22s ease;
   white-space: nowrap;
   cursor: pointer;
 }
@@ -125,23 +159,24 @@
 .btnPrimary:hover {
   background: #0e7490;
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
+  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.38);
   color: #fff !important;
 }
 
 .btnSecondary {
-  background: transparent;
+  background: rgba(255,255,255,0.05);
   color: #7dd3fc !important;
-  border: 1px solid rgba(6, 182, 212, 0.35);
+  border: 1px solid rgba(6, 182, 212, 0.32);
 }
 
 .btnSecondary:hover {
-  background: rgba(6, 182, 212, 0.1);
+  background: rgba(6, 182, 212, 0.12);
   border-color: #06b6d4;
   color: #bae6fd !important;
+  transform: translateY(-2px);
 }
 
-/* ===== Content Sections ===== */
+/* ===== Sections ===== */
 .section {
   padding: 5rem 0;
 }
@@ -164,21 +199,38 @@
   flex: 1;
 }
 
-.sectionImage {
+.sectionImageWrap {
   flex: 1;
   display: flex;
   justify-content: center;
+  position: relative;
 }
 
-.sectionImage img {
+.imageGlow {
+  position: absolute;
+  inset: -20px;
+  background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
+  border-radius: 24px;
+  pointer-events: none;
+}
+
+.sectionImg {
   max-width: 100%;
   border-radius: 16px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
+  transition: transform 0.35s ease, box-shadow 0.35s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.sectionImg:hover {
+  transform: translateY(-6px) scale(1.01);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
 }
 
 .sectionBadge {
   display: inline-block;
-  padding: 0.28rem 0.9rem;
+  padding: 0.3rem 1rem;
   background: rgba(8, 145, 178, 0.1);
   color: #0891b2;
   border: 1px solid rgba(6, 182, 212, 0.25);
@@ -186,7 +238,7 @@
   font-size: 0.8rem;
   font-weight: 600;
   margin-bottom: 1rem;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.04em;
 }
 
 :global([data-theme='dark']) .sectionBadge {
@@ -206,72 +258,174 @@
   color: var(--ifm-color-emphasis-700);
   line-height: 1.85;
   font-size: 1rem;
+  margin-bottom: 1rem;
 }
 
+/* Tag cloud */
+.tagCloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.tag {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  background: var(--ifm-color-emphasis-100);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  font-size: 0.82rem;
+  color: var(--ifm-color-emphasis-700);
+  transition: all 0.2s;
+}
+
+.tag:hover {
+  border-color: #06b6d4;
+  color: #0891b2;
+  background: rgba(6, 182, 212, 0.06);
+}
+
+:global([data-theme='dark']) .tag:hover {
+  color: #38bdf8;
+}
+
+/* Feature list */
 .featureList {
   list-style: none;
   padding: 0;
   margin-top: 1.25rem;
+  margin-bottom: 1.5rem;
 }
 
 .featureList li {
-  padding: 0.4rem 0 0.4rem 1.4rem;
+  padding: 0.45rem 0 0.45rem 1.5rem;
   position: relative;
   color: var(--ifm-color-emphasis-700);
   font-size: 0.95rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.featureList li:last-child {
+  border-bottom: none;
 }
 
 .featureList li::before {
-  content: '→';
+  content: '▸';
   position: absolute;
   left: 0;
   color: #06b6d4;
-  font-weight: 600;
+  font-size: 0.9rem;
 }
 
-/* ===== Donate / Sponsors ===== */
+/* Quote */
+.sectionQuote {
+  margin: 0;
+  padding: 1rem 1.25rem;
+  border-left: 3px solid #06b6d4;
+  background: rgba(6, 182, 212, 0.05);
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.92rem;
+  line-height: 1.7;
+}
+
+:global([data-theme='dark']) .sectionQuote {
+  background: rgba(6, 182, 212, 0.08);
+}
+
+/* ===== Donate Section ===== */
 .donateSection {
-  padding: 4rem 0;
+  padding: 5rem 0;
+  background: linear-gradient(180deg, var(--ifm-color-emphasis-100) 0%, var(--ifm-background-color) 100%);
+}
+
+.donateTitleWrap {
+  text-align: center;
+  margin-bottom: 2.5rem;
 }
 
 .donateTitle {
-  text-align: center;
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.donateSubtitle {
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.95rem;
+  margin: 0;
 }
 
 .donateRow {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 24px;
+  gap: 2rem;
 }
 
 .donateCard {
   flex: 1;
-  max-width: 300px;
-  text-align: center;
-  border: 2px solid #ccc;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  padding: 1rem;
-  transition: transform 0.3s;
+  max-width: 320px;
+  min-width: 260px;
+  background: var(--ifm-background-color);
+  border-radius: 16px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .donateCard:hover {
   transform: translateY(-8px);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
 }
 
-.donateCard img {
-  width: 80%;
-  height: auto;
+.donateCardAccent {
+  height: 4px;
+  width: 100%;
+}
+
+.donateCardBlue .donateCardAccent {
+  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
+}
+
+.donateCardCyan .donateCardAccent {
+  background: linear-gradient(90deg, #06b6d4, #22d3ee);
+}
+
+.donateQrWrap {
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem 1.5rem 1rem;
+  background: var(--ifm-color-emphasis-100);
+}
+
+.donateQr {
+  width: 160px;
+  height: 160px;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+}
+
+.donateCardBody {
+  padding: 1.25rem 1.5rem 1.5rem;
+}
+
+.donateCardTitle {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  color: var(--ifm-color-emphasis-900);
 }
 
 .donateCaption {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   color: var(--ifm-color-emphasis-600);
-  padding: 0.5rem;
-  line-height: 1.7;
+  line-height: 1.75;
+  margin: 0;
 }
 
 /* ===== Responsive ===== */
@@ -279,13 +433,17 @@
   .sectionInner,
   .sectionReverse {
     flex-direction: column !important;
-    gap: 2rem;
+    gap: 2.5rem;
+  }
+
+  .sectionImageWrap {
+    width: 100%;
   }
 }
 
 @media (max-width: 768px) {
   .heroBanner {
-    padding: 3.5rem 0 3rem;
+    padding: 3.5rem 0 5rem;
   }
 
   .heroTitle {
@@ -305,8 +463,8 @@
   }
 
   .statItem {
-    padding: 0.6rem 1.1rem;
-    min-width: 78px;
+    padding: 0.6rem 1rem;
+    min-width: 76px;
   }
 
   .statValue {
@@ -320,4 +478,8 @@
   .section {
     padding: 3rem 0;
   }
+
+  .donateSection {
+    padding: 3rem 0;
+  }
 }