feat: Refactor hero sections in facilities and stats pages for improved structure and styling

css/pages/facilities.css

@@ -1,24 +1,7 @@
 /* Page-Specific Styles for Facilities */
 
-.facilities-hero {
+.facilities-hero-bg {
-    margin-top: 44px; /* Navbar height */
+    background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');
-    padding: 100px 20px 60px;
-    text-align: center;
-    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
-    color: #1d1d1f;
-}
-
-.facilities-hero h1 {
-    font-size: 48px;
-    font-weight: 700;
-    margin-bottom: 16px;
-    letter-spacing: -0.02em;
-}
-
-.hero-subtitle {
-    font-size: 20px;
-    font-weight: 400;
-    opacity: 0.8;
 }
 
 /* Container */

css/pages/stats.css

@@ -1,9 +1,4 @@
 /* Specific styles for stats page override/additions */
-.stats-hero {
-    height: 40vh;
-    min-height: 300px;
-}
-
 .stats-hero-bg {
     background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');
 }

css/style.css

@@ -125,6 +125,11 @@ body {
     color: white;
 }
 
+.page-hero {
+    height: 40vh;
+    min-height: 300px;
+}
+
 .home-hero {
     background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');
 }

facilities.html

@@ -54,10 +54,8 @@
 
     <div id="navbar-component"></div>
 
-    <div class="facilities-hero">
+    <!-- Hero Section -->
-        <h1>全服共享资源</h1>
+    <header id="hero-component" data-title="全服共享资源" data-subtitle="共同建设，共同分享，让生存更轻松。" data-class="facilities-hero-bg"></header>
-        <p class="hero-subtitle">共同建设，共同分享，让生存更轻松。</p>
-    </div>
 
     <div class="facilities-container">
         

js/components.js

@@ -52,6 +52,22 @@ const Components = {
     </footer>
     `,
 
+    initPageHero: function() {
+        const heroContainer = document.getElementById('hero-component');
+        if (heroContainer) {
+            const title = heroContainer.dataset.title || '';
+            const subtitle = heroContainer.dataset.subtitle || '';
+            const extraClass = heroContainer.dataset.class || '';
+            heroContainer.className = `hero page-hero ${extraClass}`;
+            heroContainer.innerHTML = `
+                <div class="hero-overlay"></div>
+                <div class="hero-content">
+                    <h1 class="hero-title">${title}</h1>
+                    <p class="hero-subtitle">${subtitle}</p>
+                </div>`;
+        }
+    },
+
     init: function() {
         // Inject Navbar
         const navContainer = document.getElementById('navbar-component');
@@ -59,6 +75,9 @@ const Components = {
             navContainer.innerHTML = this.navbarHTML;
         }
 
+        // Inject Page Hero
+        this.initPageHero();
+
         // Inject Footer
         const footerContainer = document.getElementById('footer-component');
         if (footerContainer) {

stats.html

@@ -56,13 +56,7 @@
     <div id="navbar-component"></div>
 
     <!-- Hero Section -->
-    <header class="hero stats-hero stats-hero-bg">
+    <header id="hero-component" data-title="数据中心" data-subtitle="记录每一位冒险者的足迹" data-class="stats-hero-bg"></header>
-        <div class="hero-overlay"></div>
-        <div class="hero-content">
-            <h1 class="hero-title">数据中心</h1>
-            <p class="hero-subtitle">记录每一位冒险者的足迹</p>
-        </div>
-    </header>
 
     <!-- Main Content -->
     <div class="features-section stats-main-section">