feat: Implement dynamic loading of application links from a JSON configuration using a new JavaScript module.

firebase/internal-launchpad/assets/js/links-loader.js

@@ -0,0 +1,63 @@
+async function loadLinks() {
+    const container = document.getElementById('links-container');
+    if (!container) return;
+
+    try {
+        const response = await fetch('./assets/data/links.json');
+        if (!response.ok) {
+            throw new Error(`Failed to load links: ${response.status}`);
+        }
+
+        const groups = await response.json();
+
+        container.innerHTML = groups.map(group => `
+            <!-- ${group.title} Card -->
+            <div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+                <div class="flex items-center space-x-3 mb-6">
+                    <div class="w-10 h-10 ${group.iconColorClass} rounded-lg flex items-center justify-center">
+                        ${group.iconSvg}
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-900">${group.title}</h3>
+                </div>
+                
+                <div class="space-y-3">
+                    ${group.links.map(link => `
+                        <a href="${link.url}" target="_blank"
+                           class="flex items-center justify-between p-4 ${link.containerClass} rounded-xl transition-all group">
+                            <div class="flex items-center space-x-3">
+                                ${link.iconClass ? `<div class="${link.iconClass}"></div>` : link.iconSvg}
+                                ${link.subtitle ? `
+                                    <div>
+                                        <div class="font-medium text-gray-900 ${link.textHoverClass}">${link.title}</div>
+                                        <div class="text-xs text-gray-500">${link.subtitle}</div>
+                                    </div>
+                                ` : `
+                                    <span class="font-medium text-gray-900 ${link.textHoverClass}">${link.title}</span>
+                                `}
+                            </div>
+                            ${link.badge ? `
+                                <span class="px-3 py-1 ${link.badgeColorClass} text-white text-xs font-semibold rounded-full">${link.badge}</span>
+                            ` : ''}
+                            ${link.arrowIcon ? `
+                                <svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                                </svg>
+                            ` : ''}
+                        </a>
+                    `).join('')}
+                </div>
+            </div>
+        `).join('');
+
+    } catch (error) {
+        console.error('Error loading links:', error);
+        container.innerHTML = `
+            <div class="col-span-full p-4 bg-red-50 text-red-600 rounded-xl border border-red-200">
+                Failed to load application links. Please try refreshing the page.
+            </div>
+        `;
+    }
+}
+
+// Load links when the DOM is loaded
+document.addEventListener('DOMContentLoaded', loadLinks);