Refactor: Update banner sorting logic to prioritize relevance

src/components/Banner.astro

@@ -1,26 +1,36 @@
 ---
 // src/components/Banner.astro
 import "../styles/components/Banner.css"
+---
 
-const API_BASE = 'https://cms.gallus-pub.ch';
+<div id="banner-container"></div>
 
-let banner = null;
+<script>
+  const API_BASE = 'https://cms.gallus-pub.ch';
 
-try {
+  async function loadBanner() {
+    try {
       const response = await fetch(`${API_BASE}/api/banners/active`);
       if (response.ok) {
         const data = await response.json();
-    banner = data.banner;
+        if (data.banner) {
-  }
+          const container = document.getElementById('banner-container');
-} catch (error) {
+          if (container) {
-  console.error('Failed to fetch banner:', error);
+            container.innerHTML = `
-}
----
-
-{banner && (
               <div class="banner-wrapper">
                 <div class="banner container">
-      <p>{banner.text}</p>
+                  <p>${data.banner.text}</p>
                 </div>
               </div>
-)}
+            `;
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch banner:', error);
+    }
+  }
+
+  // Load banner when page loads
+  loadBanner();
+</script>