升级风格

src/pages/index.js

@@ -6,90 +6,138 @@ import Layout from '@theme/Layout';
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Amlogic from '@site/src/components/Amlogic';
-
 import styles from './index.module.css';
 
+const stats = [
+  { value: '~3W', label: '满载功耗' },
+  { value: '4核', label: 'ARM CPU' },
+  { value: '1.6GHz', label: '最高主频' },
+  { value: '¥18/年', label: '全年电费' },
+];
+
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={styles.heroBanner}>
+      <div className={styles.heroGrid} />
+      <div className={styles.heroGlow} />
       <div className="container">
-		<img src="https://doc.ecoo.top/img/hinas01.svg" alt="Logo" />
+        <div className={styles.heroContent}>
-		<h1 className="hero__title">{siteConfig.title}</h1>
+          <img
-		<p className="hero__subtitle">{siteConfig.tagline}</p>
+            src="https://doc.ecoo.top/img/hinas01.svg"
-        <div className={styles.buttons}>
+            alt="HiNas Logo"
-          <Link className="button button--secondary button--lg" style={{marginTop: "1rem", marginRight: ".5rem", marginLeft: ".5rem", display: "flex"}} to={useBaseUrl("docs/category/机顶盒刷机教程")}>保姆级刷机教程</Link>
+            className={styles.heroLogo}
-          <Link className="button button--secondary button--lg" style={{marginTop: "1rem", marginRight: ".5rem", marginLeft: ".5rem", display: "flex"}} to="download">最新固件下载</Link>
+          />
-          <Link className="button button--secondary button--lg" style={{marginTop: "1rem", marginRight: ".5rem", marginLeft: ".5rem", display: "flex"}} to={useBaseUrl("devices")}>设备支持适配表</Link>
+          <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+          <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
+
+          <div className={styles.statsRow}>
+            {stats.map((s) => (
+              <div key={s.label} className={styles.statItem}>
+                <span className={styles.statValue}>{s.value}</span>
+                <span className={styles.statLabel}>{s.label}</span>
               </div>
-        <br></br>
+            ))}
-        <div className={styles.buttons}>
+          </div>
-          <Link
+
-            className="button button--success button--lg" style={{marginTop: "1rem", marginRight: ".5rem", marginLeft: ".5rem", display: "flex"}} 
+          <div className={styles.buttonGroup}>
-            to={useBaseUrl("news")}>
+            <Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('docs/category/机顶盒刷机教程')}>
-            系统最新升级公告
+              保姆级刷机教程
             </Link>
-          <Link
+            <Link className={clsx(styles.btn, styles.btnPrimary)} to="download">
-            className="button button--success button--lg" style={{marginTop: "1rem", marginRight: ".5rem", marginLeft: ".5rem", display: "flex"}} 
+              最新固件下载
-            to={useBaseUrl("docs/intro")}>
-            海纳思系统使用手册
             </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>
     </header>
   );
 }
 
-function PolicyPersistence() {
+function SectionPersistence() {
-  const {siteConfig} = useDocusaurusContext();
   return (
-    <div className={styles.policypersistence}>
+    <section className={styles.section}>
-      <div className="container text--center">
+      <div className="container">
-        <div className="row">
+        <div className={styles.sectionInner}>
-          <div className="col" style={{marginBlock: "auto"}}>
+          <div className={styles.sectionText}>
-            <h2>开源，免费，易用的家用 Linux 服务器系统</h2>
+            <span className={styles.sectionBadge}>开源 · 免费 · 易用</span>
-            <p>
+            <h2 className={styles.sectionTitle}>家用 Linux 服务器系统</h2>
-			海纳思系统，一个基于开源 Linux Ubuntu 20.04 LTS 打造的 NAS 系统，<br />
+            <p className={styles.sectionDesc}>
-			开发者精心打造，已开发和内置丰富的程序和功能，内网穿透，网盘共享，<br />
+              海纳思系统，基于 Ubuntu 20.04 LTS 打造的 NAS 系统，开发者精心内置丰富功能：
-			远程下载，Docker安装，个人博客，网络建站，socks5服务，ftp上传下载，<br />
+              内网穿透、网盘共享、远程下载、Docker 安装、个人博客、网络建站、
-			webdav接口，终端控制，一键还原，计划任务等等。<br />
+              Socks5 服务、FTP 上传下载、WebDAV 接口、终端控制、一键还原、计划任务等。
             </p>
           </div>
-          <div style={{marginInline: "auto"}}>
+          <div className={styles.sectionImage}>
-            <img src="img/about.png" alt="Policy Persistence" width="400" height="466" />
+            <img src="img/about.png" alt="系统功能概览" width="400" height="466" />
-          </div>
           </div>
         </div>
       </div>
+    </section>
   );
 }
 
-function PolicyEnforcement() {
+function SectionEnforcement() {
-  const {siteConfig} = useDocusaurusContext();
   return (
-    <div className={styles.policyenforcement}>
+    <section className={clsx(styles.section, styles.sectionAlt)}>
-      <div className="container text--center">
+      <div className="container">
-        <div className="row">
+        <div className={clsx(styles.sectionInner, styles.sectionReverse)}>
-          <div style={{marginInline: "auto"}}>
+          <div className={styles.sectionImage}>
-            <img height="250" width="400" src="img/huawei.png" alt="homepage" />
+            <img src="img/huawei.png" alt="海思机顶盒" height="250" width="400" />
-          </div>
-          <div className="col" style={{marginBlock: "auto"}}>
-            <h2>将千家万户的机顶盒打造成一台超低功耗的 Linux 服务器</h2>
-            <p>实测功耗约 3 瓦，全年无休≈18元/年，一杯奶茶钱，养活它一年。<br />
-			盒子4核心CPU，内核频率达1.4GHz-1.6GHz，流畅运行各项 NAS 程序。<br />
-			作为家用存储，Linux 学习，学生技术孵化，网络下载，组网跳板，均可。<br />
-			网页建站，内网穿越，公网映射，科学上网，跑脚本，定时任务等，更佳。<br />
-			我是小盒子，也是大世界！千家万户都有一个机顶盒，开启您的探索之旅！</p>
           </div>
+          <div className={styles.sectionText}>
+            <span className={styles.sectionBadge}>变废为宝</span>
+            <h2 className={styles.sectionTitle}>将机顶盒变成超低功耗服务器</h2>
+            <p className={styles.sectionDesc}>
+              实测功耗约 3 瓦，全年无休电费 ≈18 元/年，一杯奶茶钱养活它一年。
+              盒子 4 核 CPU，主频达 1.4~1.6GHz，流畅运行各类 NAS 程序。
+            </p>
+            <ul className={styles.featureList}>
+              <li>家用存储 / Linux 学习 / 学生技术孵化</li>
+              <li>网页建站 / 内网穿透 / 公网映射</li>
+              <li>科学上网 / 跑脚本 / 定时任务</li>
+            </ul>
           </div>
         </div>
       </div>
+    </section>
   );
 }
 
 function OpenCollective() {
   return (
-      <iframe title="Sponsors" src="juanzhu.html" style={{width: "100%", height: "900px", display: "block"}}></iframe>
+    <section className={styles.donateSection}>
+      <div className="container">
+        <h2 className={styles.donateTitle}>捐助作者，持续开发</h2>
+        <div className={styles.donateRow}>
+          <div className={styles.donateCard}>
+            <img src="img/danote.png" alt="作者赞赏码" />
+            <p className={styles.donateCaption}>
+              作者赞赏码<br /><br />
+              作者"神雕"开发的固件和提供的个人网站，为了持续维护和进步，呼吁有能力的网友支持本站持续运作和固件持续开发更新。不甚感激！您的捐助将用于本站的服务器架设和固件升级维护。
+            </p>
+          </div>
+          <div className={styles.donateCard}>
+            <img src="img/alipay.png" alt="支付宝" />
+            <p className={styles.donateCaption}>
+              支付宝<br /><br />
+              可以抽出时间为小白网友提供付费远程协助，包括刷机、运维、疑难解决等需求。已组建微信群，加微信注明入群将定期邀请加入。
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
   );
 }
 
@@ -103,8 +151,8 @@ export default function Home() {
       <main>
         <HomepageFeatures />
         <Amlogic />
-        <PolicyPersistence />
+        <SectionPersistence />
-        <PolicyEnforcement />
+        <SectionEnforcement />
         <OpenCollective />
       </main>
     </Layout>

src/pages/index.module.css

@@ -1,40 +1,323 @@
-/**
+/* ===== Hero ===== */
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
   position: relative;
   overflow: hidden;
+  padding: 5rem 0 4rem;
+  text-align: center;
+  background: linear-gradient(160deg, #071525 0%, #0d2137 45%, #071525 100%);
+  color: #fff;
 }
 
-@media screen and (max-width: 996px) {
+.heroGrid {
-  .heroBanner {
+  position: absolute;
-    padding: 2rem;
+  inset: 0;
-  }
+  background-image:
+    linear-gradient(rgba(6, 182, 212, 0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(6, 182, 212, 0.07) 1px, transparent 1px);
+  background-size: 48px 48px;
+  pointer-events: none;
 }
 
-.buttons {
+.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%);
+  pointer-events: none;
+}
+
+.heroContent {
+  position: relative;
+  z-index: 1;
+}
+
+.heroLogo {
+  height: 120px;
+  margin-bottom: 1.5rem;
+  filter: drop-shadow(0 0 28px rgba(6, 182, 212, 0.45));
+}
+
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  background: linear-gradient(90deg, #38bdf8, #06b6d4, #67e8f9);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.heroSubtitle {
+  font-size: 1.15rem;
+  color: rgba(255, 255, 255, 0.65);
+  margin-bottom: 2.5rem;
+}
+
+/* ===== Stats ===== */
+.statsRow {
   display: flex;
-  align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  margin-top: 5px;
+  gap: 1rem;
+  margin-bottom: 2.5rem;
 }
 
-.policypersistence {
+.statItem {
-  padding: 60px 0;
+  display: flex;
-  font-size: 1.3rem;
+  flex-direction: column;
-  justify-content: center;
+  align-items: center;
-  line-height: 40px;
+  padding: 0.75rem 1.5rem;
-  background-color: var(--ifm-color-emphasis-100);
+  border: 1px solid rgba(6, 182, 212, 0.22);
+  border-radius: 12px;
+  background: rgba(6, 182, 212, 0.06);
+  min-width: 90px;
+  transition: border-color 0.2s;
 }
 
-.policyenforcement {
+.statItem:hover {
-  padding: 60px 0;
+  border-color: rgba(6, 182, 212, 0.5);
-  font-size: 1.3rem;
+}
-  justify-content: center;
+
-  line-height: 40px;
+.statValue {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #38bdf8;
+  line-height: 1.2;
+}
+
+.statLabel {
+  font-size: 0.78rem;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 0.25rem;
+}
+
+/* ===== Buttons ===== */
+.buttonGroup {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.6rem 1.5rem;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-decoration: none !important;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.btnPrimary {
+  background: #0891b2;
+  color: #fff !important;
+  border: 1px solid transparent;
+}
+
+.btnPrimary:hover {
+  background: #0e7490;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
+  color: #fff !important;
+}
+
+.btnSecondary {
+  background: transparent;
+  color: #7dd3fc !important;
+  border: 1px solid rgba(6, 182, 212, 0.35);
+}
+
+.btnSecondary:hover {
+  background: rgba(6, 182, 212, 0.1);
+  border-color: #06b6d4;
+  color: #bae6fd !important;
+}
+
+/* ===== Content Sections ===== */
+.section {
+  padding: 5rem 0;
+}
+
+.sectionAlt {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.sectionInner {
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+}
+
+.sectionReverse {
+  flex-direction: row-reverse;
+}
+
+.sectionText {
+  flex: 1;
+}
+
+.sectionImage {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.sectionImage img {
+  max-width: 100%;
+  border-radius: 16px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+}
+
+.sectionBadge {
+  display: inline-block;
+  padding: 0.28rem 0.9rem;
+  background: rgba(8, 145, 178, 0.1);
+  color: #0891b2;
+  border: 1px solid rgba(6, 182, 212, 0.25);
+  border-radius: 100px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  letter-spacing: 0.03em;
+}
+
+:global([data-theme='dark']) .sectionBadge {
+  background: rgba(6, 182, 212, 0.12);
+  color: #38bdf8;
+  border-color: rgba(6, 182, 212, 0.28);
+}
+
+.sectionTitle {
+  font-size: 1.9rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  line-height: 1.35;
+}
+
+.sectionDesc {
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.85;
+  font-size: 1rem;
+}
+
+.featureList {
+  list-style: none;
+  padding: 0;
+  margin-top: 1.25rem;
+}
+
+.featureList li {
+  padding: 0.4rem 0 0.4rem 1.4rem;
+  position: relative;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.95rem;
+}
+
+.featureList li::before {
+  content: '→';
+  position: absolute;
+  left: 0;
+  color: #06b6d4;
+  font-weight: 600;
+}
+
+/* ===== Donate / Sponsors ===== */
+.donateSection {
+  padding: 4rem 0;
+}
+
+.donateTitle {
+  text-align: center;
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.donateRow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+}
+
+.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;
+}
+
+.donateCard:hover {
+  transform: translateY(-8px);
+}
+
+.donateCard img {
+  width: 80%;
+  height: auto;
+}
+
+.donateCaption {
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  padding: 0.5rem;
+  line-height: 1.7;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 996px) {
+  .sectionInner,
+  .sectionReverse {
+    flex-direction: column !important;
+    gap: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .heroBanner {
+    padding: 3.5rem 0 3rem;
+  }
+
+  .heroTitle {
+    font-size: 2.2rem;
+  }
+
+  .heroLogo {
+    height: 90px;
+  }
+
+  .heroSubtitle {
+    font-size: 1rem;
+  }
+
+  .statsRow {
+    gap: 0.75rem;
+  }
+
+  .statItem {
+    padding: 0.6rem 1.1rem;
+    min-width: 78px;
+  }
+
+  .statValue {
+    font-size: 1.25rem;
+  }
+
+  .sectionTitle {
+    font-size: 1.5rem;
+  }
+
+  .section {
+    padding: 3rem 0;
+  }
 }