feat: enhance ContributorList styling and improve hero section animations

Author: ptthanh02

src/components/ContributorList.astro

@@ -323,18 +323,13 @@ try {
 }
 ---
 
-<div class="contributor-section" id="contributors">
+<div class="contributor-section contributor-list" id="contributors">
   <div class="contributor-header">
     <h2 class="contributor-title">
-      <svg class="contributor-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
-        <circle cx="9" cy="7" r="4"/>
-        <path d="m22 21-3-3m0 0a5 5 0 1 0-7-7 5 5 0 0 0 7 7Z"/>
-      </svg>
       Contributors
     </h2>
 
-    <div class="status-indicators">
+    <!-- <div class="status-indicators">
       {fromCache && (
         <div class={`cache-indicator ${isStale ? 'stale' : 'fresh'}`} title={isStale ? "Data is from cache (may be outdated)" : "Data loaded from cache (up to date)"}>
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -357,7 +352,7 @@ try {
           Warning
         </div>
       )}
-    </div>
+    </div> -->
   </div>
 
   <p class="contributor-description">
@@ -432,8 +427,6 @@ try {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    font-size: 1.875rem;
-    font-weight: 700;
     color: var(--sl-color-white);
     margin: 0;
     line-height: 1.2;

src/content/docs/index.mdx

@@ -25,7 +25,7 @@ hero:
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import ContributorList from '/src/components/ContributorList.astro';
 
-<h2><strong>Quick Start</strong></h2>
+<h2>Quick Start</h2>
 <br />
 
 <CardGrid stagger>
@@ -52,7 +52,7 @@ import ContributorList from '/src/components/ContributorList.astro';
 
 <br/>
 
-<h2>📊 <strong>Plugin Statistics</strong></h2>
+<h2>Statistics</h2>
 
 Over **1400+** Minecraft servers trust and using SmartSpawner for their spawner management needs. The plugin has proven to be reliable and efficient, making it a popular **free choice** among server administrators.
 

src/styles/custom.css

@@ -164,18 +164,70 @@ a:hover::after {
   }
 }
 
-/* Page transition effect */
-.page-content {
-  animation: pageSlideIn 0.8s ease-out;
+/* Enhanced hero section with subtle overlay */
+.hero {
+  position: relative;
+  overflow: hidden;
 }
 
-@keyframes pageSlideIn {
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: 1;
+}
+
+.hero > * {
+  position: relative;
+  z-index: 2;
+}
+
+/* Floating animation for cards */
+.sl-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.sl-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+/* Add sparkle effect to the title */
+.hero h1 {
+  background: linear-gradient(45deg, #4a00e0, #8e2de2, #9c27b0, #ba68c8, #ce93d8, #e1bee7);
+  background-size: 400% 400%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientShift 4s ease infinite, textGlow 2s ease-in-out infinite alternate;
+}
+
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateX(30px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes textGlow {
+  from {
+    text-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
+  }
+  to {
+    text-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
   }
 }