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

firebase/internal-launchpad/assets/data/links.json

@@ -0,0 +1,145 @@
+[
+  {
+    "title": "Applications",
+    "iconColorClass": "bg-primary-100",
+    "iconSvg": "<svg class=\"w-6 h-6 text-primary-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"></path></svg>",
+    "links": [
+      {
+        "title": "Control Tower",
+        "url": "https://krow-workforce-dev.web.app",
+        "badge": "Dev",
+        "badgeColorClass": "bg-blue-500",
+        "containerClass": "bg-gradient-to-r from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200",
+        "iconClass": "w-2 h-2 bg-blue-500 rounded-full",
+        "textHoverClass": "group-hover:text-blue-700"
+      },
+      {
+        "title": "Control Tower",
+        "url": "https://krow-workforce-staging.web.app",
+        "badge": "Staging",
+        "badgeColorClass": "bg-amber-500",
+        "containerClass": "bg-gradient-to-r from-amber-50 to-amber-100 hover:from-amber-100 hover:to-amber-200",
+        "iconClass": "w-2 h-2 bg-amber-500 rounded-full",
+        "textHoverClass": "group-hover:text-amber-700"
+      }
+    ]
+  },
+  {
+    "title": "Legacy Mobile Apps",
+    "iconColorClass": "bg-green-100",
+    "iconSvg": "<svg class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z\"></path></svg>",
+    "links": [
+      {
+        "title": "Google Play Store",
+        "url": "https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en",
+        "badge": "Live",
+        "badgeColorClass": "bg-green-500",
+        "containerClass": "bg-gradient-to-r from-green-50 to-emerald-100 hover:from-green-100 hover:to-emerald-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-green-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"></path></svg>",
+        "textHoverClass": "group-hover:text-green-700"
+      },
+      {
+        "title": "Apple App Store",
+        "url": "https://apps.apple.com/us/developer/thinkloops-llc/id1719034287",
+        "badge": "Live",
+        "badgeColorClass": "bg-gray-700",
+        "containerClass": "bg-gradient-to-r from-gray-50 to-gray-100 hover:from-gray-100 hover:to-gray-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z\"></path></svg>",
+        "textHoverClass": "group-hover:text-gray-700"
+      }
+    ]
+  },
+  {
+    "title": "Cloud Infrastructure",
+    "iconColorClass": "bg-purple-100",
+    "iconSvg": "<svg class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z\"></path></svg>",
+    "links": [
+      {
+        "title": "Firebase Console",
+        "url": "https://console.firebase.google.com/project/krow-workforce-dev/overview",
+        "badge": "Dev",
+        "badgeColorClass": "bg-blue-500",
+        "containerClass": "bg-gradient-to-r from-blue-50 to-indigo-100 hover:from-blue-100 hover:to-indigo-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-orange-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z\"></path></svg>",
+        "textHoverClass": "group-hover:text-indigo-700"
+      },
+      {
+        "title": "Firebase Console",
+        "url": "https://console.firebase.google.com/project/krow-workforce-staging/overview",
+        "badge": "Staging",
+        "badgeColorClass": "bg-amber-500",
+        "containerClass": "bg-gradient-to-r from-amber-50 to-orange-100 hover:from-amber-100 hover:to-orange-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-orange-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z\"></path></svg>",
+        "textHoverClass": "group-hover:text-orange-700"
+      },
+      {
+        "title": "Google Cloud",
+        "url": "https://console.cloud.google.com/welcome/new?project=krow-workforce-dev",
+        "badge": "Dev",
+        "badgeColorClass": "bg-blue-500",
+        "containerClass": "bg-gradient-to-r from-blue-50 to-cyan-100 hover:from-blue-100 hover:to-cyan-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z\"></path></svg>",
+        "textHoverClass": "group-hover:text-cyan-700"
+      },
+      {
+        "title": "Google Cloud",
+        "url": "https://console.cloud.google.com/welcome/new?project=krow-workforce-staging",
+        "badge": "Staging",
+        "badgeColorClass": "bg-amber-500",
+        "containerClass": "bg-gradient-to-r from-amber-50 to-yellow-100 hover:from-amber-100 hover:to-yellow-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z\"></path></svg>",
+        "textHoverClass": "group-hover:text-yellow-700"
+      }
+    ]
+  },
+  {
+    "title": "Design",
+    "iconColorClass": "bg-pink-100",
+    "iconSvg": "<svg class=\"w-6 h-6 text-pink-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a2 2 0 01-2 2h-2zM15 7h6a2 2 0 012 2v8a2 2 0 01-2 2h-6a2 2 0 01-2-2V9a2 2 0 012-2z\"></path></svg>",
+    "links": [
+      {
+        "title": "Staff App Figma File",
+        "url": "#",
+        "badge": "Design",
+        "badgeColorClass": "bg-pink-500",
+        "containerClass": "bg-gradient-to-r from-pink-50 to-rose-100 hover:from-pink-100 hover:to-rose-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-pink-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12,2C14.2,2 16,3.8 16,6C16,8.2 14.2,10 12,10C9.8,10 8,8.2 8,6C8,3.8 9.8,2 12,2M12,10C14.2,10 16,11.8 16,14C16,16.2 14.2,18 12,18C9.8,18 8,16.2 8,14C8,11.8 9.8,10 12,10M12,18C14.2,18 16,19.8 16,22H8C8,19.8 9.8,18 12,18Z\"></path></svg>",
+        "textHoverClass": "group-hover:text-pink-700"
+      },
+      {
+        "title": "Staff App Preview",
+        "url": "#",
+        "badge": "Preview",
+        "badgeColorClass": "bg-purple-500",
+        "containerClass": "bg-gradient-to-r from-purple-50 to-fuchsia-100 hover:from-purple-100 hover:to-fuchsia-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"></path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"></path></svg>",
+        "textHoverClass": "group-hover:text-purple-700"
+      }
+    ]
+  },
+  {
+    "title": "Resources",
+    "iconColorClass": "bg-indigo-100",
+    "iconSvg": "<svg class=\"w-6 h-6 text-indigo-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"></path></svg>",
+    "links": [
+      {
+        "title": "GitHub Repository",
+        "subtitle": "View source code",
+        "url": "https://github.com/Oloodi/krow-workforce",
+        "containerClass": "bg-gradient-to-r from-gray-50 to-slate-100 hover:from-gray-100 hover:to-slate-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-gray-900\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"></path></svg>",
+        "textHoverClass": "group-hover:text-gray-700",
+        "arrowIcon": true
+      },
+      {
+        "title": "Team Communication",
+        "subtitle": "Google Chat",
+        "url": "https://chat.google.com/",
+        "containerClass": "bg-gradient-to-r from-green-50 to-teal-100 hover:from-green-100 hover:to-teal-200",
+        "iconSvg": "<svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"></path></svg>",
+        "textHoverClass": "group-hover:text-teal-700",
+        "arrowIcon": true
+      }
+    ]
+  }
+]

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);

firebase/internal-launchpad/index.html

@@ -73,9 +73,12 @@
         }
 
         @keyframes pulse {
-            0%, 100% {
+
+            0%,
+            100% {
                 opacity: 1;
             }
+
             50% {
                 opacity: .7;
             }
@@ -102,21 +105,29 @@
             width: 100%;
             padding: 0.75rem 1rem;
             font-size: 0.875rem;
-            color: #4b5563; /* text-gray-600 */
+            color: #4b5563;
+            /* text-gray-600 */
             text-align: left;
-            background-color: #f9fafb; /* bg-gray-50 */
+            background-color: #f9fafb;
-            border-radius: 0.5rem; /* rounded-lg */
+            /* bg-gray-50 */
+            border-radius: 0.5rem;
+            /* rounded-lg */
             transition: background-color 0.2s ease;
         }
+
         .accordion-button:hover {
-            background-color: #f3f4f6; /* bg-gray-100 */
+            background-color: #f3f4f6;
+            /* bg-gray-100 */
         }
+
         .accordion-button .chevron {
             transition: transform 0.2s ease;
         }
+
         .accordion-button[aria-expanded="true"] .chevron {
             transform: rotate(90deg);
         }
+
         .accordion-panel {
             overflow: hidden;
             transition: max-height 0.3s ease-out;
@@ -130,8 +141,13 @@
         }
 
         @keyframes fadeIn {
-            from { opacity: 0; }
+            from {
-            to { opacity: 1; }
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
         }
 
         .modal-content {
@@ -143,6 +159,7 @@
                 opacity: 0;
                 transform: translateY(20px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
@@ -199,7 +216,8 @@
             margin-bottom: 1em;
         }
 
-        .markdown-content ul, .markdown-content ol {
+        .markdown-content ul,
+        .markdown-content ol {
             margin-bottom: 1em;
             padding-left: 2em;
         }
@@ -263,7 +281,8 @@
             margin-bottom: 1em;
         }
 
-        .markdown-content th, .markdown-content td {
+        .markdown-content th,
+        .markdown-content td {
             border: 1px solid #e5e7eb;
             padding: 0.5em;
             text-align: left;
@@ -312,7 +331,9 @@
                 <a href="#" id="nav-home" onclick="showView('home', this)"
                     class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 bg-primary-50 border border-primary-200 font-medium mb-2">
                     <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
+                        </path>
                     </svg>
                     <span>Home</span>
                 </a>
@@ -344,180 +365,11 @@
                     <p class="text-gray-600">Your central hub for workforce management infrastructure</p>
                 </div>
 
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div id="links-container" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    
+                    <!-- Links will be loaded dynamically -->
-                    <!-- Applications Card -->
+                    <div class="col-span-full flex justify-center p-12">
-                    <div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-                        <div class="flex items-center space-x-3 mb-6">
-                            <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
-                                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
-                                </svg>
                     </div>
-                            <h3 class="text-xl font-bold text-gray-900">Applications</h3>
-                        </div>
-                        
-                        <div class="space-y-3">
-                            <a href="https://krow-workforce-dev.web.app" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl hover:from-blue-100 hover:to-blue-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
-                                    <span class="font-medium text-gray-900 group-hover:text-blue-700">Control Tower</span>
-                                </div>
-                                <span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
-                            </a>
-                            
-                            <a href="https://krow-workforce-staging.web.app" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-xl hover:from-amber-100 hover:to-amber-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <div class="w-2 h-2 bg-amber-500 rounded-full"></div>
-                                    <span class="font-medium text-gray-900 group-hover:text-amber-700">Control Tower</span>
-                                </div>
-                                <span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
-                            </a>
-                        </div>
-                    </div>
-                    
-                    <!-- Legacy Mobile Apps 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 bg-green-100 rounded-lg flex items-center justify-center">
-                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
-                                </svg>
-                            </div>
-                            <h3 class="text-xl font-bold text-gray-900">Legacy Mobile Apps</h3>
-                        </div>
-                        
-                        <div class="space-y-3">
-                            <a href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-emerald-100 rounded-xl hover:from-green-100 hover:to-emerald-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"></path>
-                                    </svg>
-                                    <span class="font-medium text-gray-900 group-hover:text-green-700">Google Play Store</span>
-                                </div>
-                                <span class="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">Live</span>
-                            </a>
-                            
-                            <a href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-gray-100 hover:to-gray-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"></path>
-                                    </svg>
-                                    <span class="font-medium text-gray-900 group-hover:text-gray-700">Apple App Store</span>
-                                </div>
-                                <span class="px-3 py-1 bg-gray-700 text-white text-xs font-semibold rounded-full">Live</span>
-                            </a>
-                        </div>
-                    </div>
-                    
-                    <!-- Cloud Consoles 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 bg-purple-100 rounded-lg flex items-center justify-center">
-                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
-                                </svg>
-                            </div>
-                            <h3 class="text-xl font-bold text-gray-900">Cloud Infrastructure</h3>
-                        </div>
-                        
-                        <div class="space-y-3">
-                            <a href="https://console.firebase.google.com/project/krow-workforce-dev/overview" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-xl hover:from-blue-100 hover:to-indigo-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
-                                    </svg>
-                                    <span class="font-medium text-gray-900 group-hover:text-indigo-700">Firebase Console</span>
-                                </div>
-                                <span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
-                            </a>
-                            
-                            <a href="https://console.firebase.google.com/project/krow-workforce-staging/overview" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-orange-100 rounded-xl hover:from-amber-100 hover:to-orange-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
-                                    </svg>
-                                    <span class="font-medium text-gray-900 group-hover:text-orange-700">Firebase Console</span>
-                                </div>
-                                <span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
-                            </a>
-                            
-                            <a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-dev" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-cyan-100 rounded-xl hover:from-blue-100 hover:to-cyan-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
-                                    </svg>
-                                    <span class="font-medium text-gray-900 group-hover:text-cyan-700">Google Cloud</span>
-                                </div>
-                                <span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
-                            </a>
-                            
-                            <a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-staging" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-yellow-100 rounded-xl hover:from-amber-100 hover:to-yellow-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
-                                    </svg>
-                                    <span class="font-medium text-gray-900 group-hover:text-yellow-700">Google Cloud</span>
-                                </div>
-                                <span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
-                            </a>
-                        </div>
-                    </div>
-                    
-                    <!-- Access & Resources 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 bg-indigo-100 rounded-lg flex items-center justify-center">
-                                <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
-                                </svg>
-                            </div>
-                            <h3 class="text-xl font-bold text-gray-900">Resources</h3>
-                        </div>
-                        
-                        <div class="space-y-3">
-                            <a href="https://github.com/Oloodi/krow-workforce" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-slate-100 rounded-xl hover:from-gray-100 hover:to-slate-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-gray-900" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
-                                    </svg>
-                                    <div>
-                                        <div class="font-medium text-gray-900 group-hover:text-gray-700">GitHub Repository</div>
-                                        <div class="text-xs text-gray-500">View source code</div>
-                                    </div>
-                                </div>
-                                <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>
-                            
-                            <a href="https://chat.google.com/" target="_blank"
-                               class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-teal-100 rounded-xl hover:from-green-100 hover:to-teal-200 transition-all group">
-                                <div class="flex items-center space-x-3">
-                                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                    </svg>
-                                    <div>
-                                        <div class="font-medium text-gray-900 group-hover:text-teal-700">Team Communication</div>
-                                        <div class="text-xs text-gray-500">Google Chat</div>
-                                    </div>
-                                </div>
-                                <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>
-                        </div>
-                    </div>
-                    
                 </div>
             </div>
 
@@ -526,19 +378,26 @@
                 <div class="flex items-center justify-between mb-6">
                     <h3 id="diagram-title" class="text-2xl font-bold text-gray-900"></h3>
                     <div class="flex items-center space-x-2 bg-white rounded-xl shadow-lg p-2 border border-gray-200">
-                        <button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom In">
+                        <button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="Zoom In">
                             <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
                             </svg>
                         </button>
-                        <button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom Out">
+                        <button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="Zoom Out">
                             <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
                             </svg>
                         </button>
-                        <button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Reset View">
+                        <button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="Reset View">
                             <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
+                                </path>
                             </svg>
                         </button>
                     </div>
@@ -563,6 +422,9 @@
         </main>
     </div>
 
+    <!-- Links Loader -->
+    <script src="assets/js/links-loader.js"></script>
+
     <!-- Panzoom -->
     <script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>