feat: redesign landing page to brand green/mint palette, integrate Vietnamese editorial manifesto with sticky metrics, highlight media channels

Author: lucthienphong1120

app.js

@@ -80,36 +80,37 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // 4. Statistics Counter Animation
-    const statNumbers = document.querySelectorAll('.stat-number');
+    const statNumbers = document.querySelectorAll('.stat-counter');
     const animateCounters = (element) => {
         const target = parseInt(element.getAttribute('data-target'), 10);
-        const suffix = element.textContent.includes('%') ? '%' : (element.textContent.includes('x') ? 'x' : '');
+        const prefix = element.getAttribute('data-prefix') || '';
+        const suffix = element.getAttribute('data-suffix') || '';
         let current = 0;
-        const duration = 2000; // 2 seconds
+        const duration = 1500; // 1.5 seconds
         const stepTime = Math.max(Math.floor(duration / target), 15);
 
         const timer = setInterval(() => {
             current += 1;
-            element.textContent = current + suffix;
+            element.textContent = prefix + current + suffix;
             if (current >= target) {
-                element.textContent = target + suffix;
+                element.textContent = prefix + target + suffix;
                 clearInterval(timer);
             }
         }, stepTime);
     };
 
-    const statsSection = document.getElementById('stats');
-    if (statsSection) {
+    const manifestoSection = document.getElementById('manifesto');
+    if (manifestoSection) {
         const statsObserver = new IntersectionObserver((entries, observer) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     statNumbers.forEach(num => animateCounters(num));
                     observer.unobserve(entry.target);
                 }
             });
-        }, { threshold: 0.3 });
+        }, { threshold: 0.15 });
 
-        statsObserver.observe(statsSection);
+        statsObserver.observe(manifestoSection);
     }
 
     // 5. Dynamic Collaboration Form Submission
@@ -131,7 +132,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 setTimeout(() => {
                     card.innerHTML = `
                         <div style="text-align: center; padding: 2rem 0;">
-                            <div style="width: 80px; height: 80px; background: rgba(98, 196, 49, 0.1); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--primary); font-size: 2.5rem; animation: pulse-glow 2s infinite;">
+                            <div style="width: 80px; height: 80px; background: rgba(var(--primary-rgb), 0.1); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--primary); font-size: 2.5rem; animation: pulse-glow 2s infinite;">
                                 <i class="fa-solid fa-check"></i>
                             </div>
                             <h3 style="font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-primary);">Đăng Ký Thành Công!</h3>
@@ -191,13 +192,13 @@ const styleSheet = document.createElement("style");
 styleSheet.textContent = `
 @keyframes pulse-glow {
     0% {
-        box-shadow: 0 0 0 0 rgba(98, 196, 49, 0.4);
+        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
     }
     70% {
-        box-shadow: 0 0 0 15px rgba(98, 196, 49, 0);
+        box-shadow: 0 0 0 15px rgba(var(--primary-rgb), 0);
     }
     100% {
-        box-shadow: 0 0 0 0 rgba(98, 196, 49, 0);
+        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
     }
 }
 `;