From 0921ae9fc33aa4cd6f10617c7ac4528c940dd5ba Mon Sep 17 00:00:00 2001
From: bwnyasse <5323628+bwnyasse@users.noreply.github.com>
Date: Fri, 14 Nov 2025 10:05:54 -0500
Subject: [PATCH] feat(firebase/internal-launchpad): migrate launchpad to
 Tailwind CSS for improved styling and maintainability
 feat(firebase/internal-launchpad): enhance UI with Tailwind CSS, improving
 responsiveness and aesthetics feat(firebase/internal-launchpad): improve
 diagram loading and error handling feat(firebase/internal-launchpad): enhance
 navigation with Tailwind CSS styling feat(firebase/internal-launchpad):
 improve home view with Tailwind CSS styling
 feat(firebase/internal-launchpad): add pan and zoom functionalities to
 diagrams

---
 firebase/internal-launchpad/index.html | 613 +++++++++++++++----------
 firebase/internal-launchpad/logo.svg   |  45 +-
 2 files changed, 390 insertions(+), 268 deletions(-)

diff --git a/firebase/internal-launchpad/index.html b/firebase/internal-launchpad/index.html
index 2fd6cf5a..c6a6c9b4 100644
--- a/firebase/internal-launchpad/index.html
+++ b/firebase/internal-launchpad/index.html
@@ -5,266 +5,399 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KROW Launchpad</title>
-    <link rel="icon" type="image/x-icon" href="favicon.svg"> 
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+    <link rel="icon" type="image/x-icon" href="favicon.svg">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
     <!-- Mermaid -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>
-    <!-- Custom CSS -->
+    
+    <!-- Custom Tailwind Config -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    
     <style>
-        body {
-            background-color: #f8f9fa;
-        }
-
-        .main-layout {
-            display: grid;
-            grid-template-columns: 280px 1fr;
-            min-height: 100vh;
-        }
-
-        .sidebar {
-            background-color: #ffffff;
-            border-right: 1px solid #dee2e6;
-            padding: 1.5rem;
-            overflow-y: auto;
-        }
-
-        .sidebar .nav-link {
-            color: #495057;
-            font-weight: 500;
-            padding: 0.5rem 1rem;
-            border-radius: 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            transition: color 0.2s, background-color 0.2s;
-        }
-
-        .sidebar .nav-link.active,
-        .sidebar .nav-link:hover {
-            color: #0d6efd;
-            background-color: #e9ecef;
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        
+        * {
+            font-family: 'Inter', sans-serif;
         }
         
-        .sidebar-heading {
-            font-size: 0.75rem;
-            font-weight: 600;
-            color: #6c757d;
-            text-transform: uppercase;
-            padding: 0 1rem;
-            margin-top: 1.5rem;
-            margin-bottom: 0.5rem;
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
-
-        .sidebar-subheading {
-            font-size: 0.7rem;
-            font-weight: 600;
-            color: #868e96;
-            padding: 0 1rem 0 2rem;
-            margin-top: 0.75rem;
-            margin-bottom: 0.25rem;
+        
+        .card-hover {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-
-        .nav-link.sub-item {
-            padding-left: 2.5rem;
-            font-size: 0.9rem;
+        
+        .card-hover:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         }
-
-        .nav-link.sub-sub-item {
-            padding-left: 3.5rem;
-            font-size: 0.85rem;
+        
+        .nav-item {
+            transition: all 0.2s ease;
         }
-
-        .content-area {
-            padding: 2rem;
-            overflow-y: auto;
+        
+        .nav-item:hover {
+            transform: translateX(4px);
         }
-
-        #diagram-viewer {
+        
+        .badge-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: .7;
+            }
+        }
+        
+        .scrollbar-hide::-webkit-scrollbar {
             display: none;
-            height: calc(100vh - 4rem);
-            display: flex;
-            flex-direction: column;
         }
         
-        #diagram-container {
-            cursor: grab;
-            overflow: hidden;
-            flex-grow: 1;
-            position: relative;
-            background-color: #ffffff;
-            border-radius: 0.5rem;
-            border: 1px solid #dee2e6;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 2rem;
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
         }
-
+        
         #diagram-container:active {
             cursor: grabbing;
         }
-
-        #diagram-container:focus { 
-            outline: none; 
-        }
-
-        #diagram-container svg {
-            max-width: 100%;
-            height: auto;
-        }
-
-        .loading-spinner {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100%;
-        }
     </style>
 </head>
 
-<body>
-    <div class="main-layout">
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
+    <div class="flex h-screen overflow-hidden">
+        
         <!-- Sidebar -->
-        <nav class="sidebar">
-            <div class="d-flex justify-content-center align-items-center mb-4">
-                <img src="logo.svg" alt="Krow Logo" style="height: 60px;" onerror="this.style.display='none'">
+        <aside class="w-72 bg-white shadow-xl flex flex-col border-r border-gray-200">
+            <!-- Logo Section -->
+            <div class="p-6 border-b border-gray-200">
+                <div class="flex items-center justify-center space-x-3">
+                    <div class="w-12 h-12 rounded-xl flex items-center justify-center">
+                        <img src="logo.svg" alt="Krow Logo" style="height: 60px;" onerror="this.style.display='none'">
+                    </div>
+                    <div>
+                        <h1 class="text-xl font-bold text-gray-900">KROW</h1>
+                        <p class="text-xs text-gray-500">Workforce Platform</p>
+                    </div>
+                </div>
             </div>
-            <div class="nav flex-column nav-pills" id="sidebar-nav">
-                <a class="nav-link active" href="#" id="nav-home" onclick="showView('home', this)">
-                    <i class="bi bi-house-door"></i>Home
+            
+            <!-- Navigation -->
+            <nav class="flex-1 overflow-y-auto scrollbar-hide p-4" id="sidebar-nav">
+                <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>
+                    </svg>
+                    <span>Home</span>
                 </a>
                 
-                <div class="sidebar-heading">Static Diagrams</div>
+                <div class="mt-6">
+                    <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Static Diagrams</h3>
+                    
+                    <a href="#" onclick="showView('diagram', this, './assets/diagrams/high-level-overview.svg', 'Apps High-Level Overview', 'svg')"
+                       class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
+                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                        </svg>
+                        <span class="text-sm">High-Level Overview</span>
+                    </a>
+                    
+                    <a href="#" onclick="showView('diagram', this, './assets/diagrams/shift-lifecycle-workflow.svg', 'Core Workflow - Shift Lifecycle', 'svg')"
+                       class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
+                        <svg class="w-5 h-5 text-gray-400" 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>
+                        </svg>
+                        <span class="text-sm">Shift Lifecycle</span>
+                    </a>
+                    
+                    <a href="#" onclick="showView('diagram', this, './assets/diagrams/invoice-workflow.svg', 'Invoice Workflow - Complete', 'svg')"
+                       class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
+                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                        <span class="text-sm">Invoice Workflow</span>
+                    </a>
+                    
+                    <a href="#" onclick="showView('diagram', this, './assets/diagrams/complete-workflow.svg', 'Complete Workflow', 'svg')"
+                       class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
+                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                        <span class="text-sm">Complete Workflow</span>
+                    </a>
+                </div>
                 
-                <a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/high-level-overview.svg', 'Apps High-Level Overview', 'svg')">
-                    <i class="bi bi-diagram-3"></i>High-Level Overview
-                </a>
-                <a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/shift-lifecycle-workflow.svg', 'Core Workflow - Shift Lifecycle', 'svg')">
-                    <i class="bi bi-arrow-repeat"></i>Shift Lifecycle
-                </a>
-                <a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/invoice-workflow.svg', 'Invoice Workflow - Complete', 'svg')">
-                    <i class="bi bi-receipt"></i>Invoice Workflow
-                </a>
-                <a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/complete-workflow.svg', 'Complete Workflow', 'svg')">
-                    <i class="bi bi-infinity"></i>Complete Workflow
-                </a>
-
-                <!-- Dynamic Mermaid diagrams will be inserted here -->
+                <!-- Dynamic diagrams section -->
                 <div id="dynamic-diagrams-section"></div>
+            </nav>
+            
+            <!-- Footer -->
+            <div class="p-4 border-t border-gray-200 bg-gray-50">
+                <div class="flex items-center space-x-2 text-xs text-gray-500">
+                    <div class="w-2 h-2 bg-green-500 rounded-full badge-pulse"></div>
+                    <span>System Online</span>
+                </div>
             </div>
-        </nav>
-
+        </aside>
+        
         <!-- Main Content Area -->
-        <main class="content-area">
-            <!-- View 1: Home Content -->
-            <div id="home-view">
-                <h2 class="mb-4">Welcome to the Project Launchpad</h2>
-                <div class="row">
-                    <div class="col-lg-6">
-                        <div class="card shadow-sm mb-4">
-                            <div class="card-header"><h3>Applications (Hosting URLs)</h3></div>
-                            <div class="card-body">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://krow-workforce-dev.web.app">Control Tower (Dev)</a>
-                                        <span class="badge bg-primary rounded-pill">Dev</span>
-                                    </li>
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://krow-workforce-staging.web.app">Control Tower (Staging)</a>
-                                        <span class="badge bg-warning text-dark rounded-pill">Staging</span>
-                                    </li>
-                                </ul>
+        <main class="flex-1 overflow-y-auto">
+            
+            <!-- Home View -->
+            <div id="home-view" class="p-8">
+                <!-- Header -->
+                <div class="mb-8">
+                    <h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome to KROW Launchpad</h2>
+                    <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">
+                    
+                    <!-- Applications 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-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="card shadow-sm mb-4">
-                            <div class="card-header"><h3>Legacy Mobile Apps</h3></div>
-                            <div class="card-body">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en">Google Play Store</a>
-                                        <span class="badge bg-success rounded-pill">Live</span>
-                                    </li>
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287">Apple App Store</a>
-                                        <span class="badge bg-success rounded-pill">Live</span>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-6">
-                        <div class="card shadow-sm mb-4">
-                            <div class="card-header"><h3>Google Cloud & Firebase Consoles</h3></div>
-                            <div class="card-body">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://console.firebase.google.com/project/krow-workforce-dev/overview">Firebase Console (Dev)</a>
-                                        <span class="badge bg-primary rounded-pill">Dev</span>
-                                    </li>
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://console.firebase.google.com/project/krow-workforce-staging/overview">Firebase Console (Staging)</a>
-                                        <span class="badge bg-warning text-dark rounded-pill">Staging</span>
-                                    </li>
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://console.cloud.google.com/welcome/new?project=krow-workforce-dev">Google Cloud Console (Dev)</a>
-                                        <span class="badge bg-primary rounded-pill">Dev</span>
-                                    </li>
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <a target="_blank" href="https://console.cloud.google.com/welcome/new?project=krow-workforce-staging">Google Cloud Console (Staging)</a>
-                                        <span class="badge bg-warning text-dark rounded-pill">Staging</span>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="card shadow-sm mb-4">
-                            <div class="card-header"><h3>Access & Resources</h3></div>
-                            <div class="card-body">
-                                <div class="list-group list-group-flush">
-                                    <a href="https://github.com/Oloodi/krow-workforce" target="_blank" class="list-group-item list-group-item-action">
-                                        <div class="fw-bold">GitHub Repository</div>
-                                    </a>
-                                    <a href="https://chat.google.com/" target="_blank" class="list-group-item list-group-item-action">
-                                        <div class="fw-bold">Team Communication</div>
-                                    </a>
+                        
+                        <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>
-                            </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>
-
-            <!-- View 2: Diagram Viewer -->
-            <div id="diagram-viewer">
-                <div class="d-flex justify-content-between align-items-center mb-3">
-                    <h3 id="diagram-title" class="mb-0"></h3>
-                    <div class="btn-group">
-                        <button type="button" class="btn btn-outline-secondary" id="zoomInBtn" title="Zoom In"><i class="bi bi-zoom-in"></i></button>
-                        <button type="button" class="btn btn-outline-secondary" id="zoomOutBtn" title="Zoom Out"><i class="bi bi-zoom-out"></i></button>
-                        <button type="button" class="btn btn-outline-secondary" id="resetBtn" title="Reset View"><i class="bi bi-aspect-ratio"></i></button>
+            
+            <!-- Diagram Viewer -->
+            <div id="diagram-viewer" class="hidden h-full flex flex-col p-8">
+                <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">
+                            <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>
+                            </svg>
+                        </button>
+                        <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>
+                            </svg>
+                        </button>
+                        <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>
+                            </svg>
+                        </button>
                     </div>
                 </div>
-                <div id="diagram-container" tabindex="-1">
+                <div id="diagram-container" tabindex="-1" 
+                     class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden cursor-grab flex items-center justify-center p-8">
                     <!-- SVG will be loaded here -->
                 </div>
             </div>
+            
         </main>
     </div>
 
-    <!-- JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Panzoom -->
     <script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
 
     <script>
         let mermaidDiagrams = [];
-
         const homeView = document.getElementById('home-view');
         const diagramViewer = document.getElementById('diagram-viewer');
         const diagramContainer = document.getElementById('diagram-container');
         const diagramTitle = document.getElementById('diagram-title');
-        
         const zoomInBtn = document.getElementById('zoomInBtn');
         const zoomOutBtn = document.getElementById('zoomOutBtn');
         const resetBtn = document.getElementById('resetBtn');
@@ -289,8 +422,7 @@
             
             diagrams.forEach(diagram => {
                 const parts = diagram.path.split('/');
-                // Remove 'assets/diagrams/' prefix
-                const relevantParts = parts.slice(2, -1); // Everything except filename
+                const relevantParts = parts.slice(2, -1);
                 const filename = parts[parts.length - 1].replace('.mermaid', '');
                 
                 let current = hierarchy;
@@ -301,7 +433,6 @@
                     current = current[part]._children;
                 });
                 
-                // Add the item to the last level
                 const lastLevel = relevantParts.length > 0 ? 
                     relevantParts.reduce((acc, part) => acc[part]._children, hierarchy) : 
                     hierarchy;
@@ -334,26 +465,31 @@
                 
                 const section = hierarchy[key];
                 const heading = document.createElement('div');
-                heading.className = level === 0 ? 'sidebar-heading' : 'sidebar-subheading';
+                heading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider ' + 
+                                   (level === 0 ? 'mt-6 mb-3' : 'mt-4 mb-2 pl-8');
                 heading.textContent = key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
                 parentElement.appendChild(heading);
                 
-                // Add items in this section
                 if (section._items && section._items.length > 0) {
                     section._items.forEach(diagram => {
                         const link = document.createElement('a');
-                        link.className = `nav-link ${level > 0 ? 'sub-item' : ''}`;
                         link.href = '#';
+                        link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' + 
+                                        (level > 0 ? ' pl-8' : '');
                         link.onclick = (e) => {
                             e.preventDefault();
                             showView('diagram', link, diagram.path, diagram.title, 'mermaid');
                         };
-                        link.innerHTML = `<i class="bi bi-file-earmark-code"></i>${diagram.title}`;
+                        link.innerHTML = `
+                            <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                            </svg>
+                            <span class="text-sm">${diagram.title}</span>
+                        `;
                         parentElement.appendChild(link);
                     });
                 }
                 
-                // Recursively add children
                 if (section._children && Object.keys(section._children).length > 0) {
                     createNavigation(section._children, parentElement, level + 1);
                 }
@@ -365,7 +501,6 @@
             const dynamicSection = document.getElementById('dynamic-diagrams-section');
             
             try {
-                // Fetch the diagrams configuration from JSON file
                 const response = await fetch('./assets/diagrams/diagrams-config.json');
                 if (!response.ok) {
                     throw new Error(`Failed to load diagrams config: ${response.status}`);
@@ -375,7 +510,7 @@
                 
                 if (mermaidDiagrams.length > 0) {
                     const mainHeading = document.createElement('div');
-                    mainHeading.className = 'sidebar-heading';
+                    mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
                     mainHeading.textContent = 'Mermaid Diagrams';
                     dynamicSection.appendChild(mainHeading);
                     
@@ -384,15 +519,16 @@
                 }
             } catch (error) {
                 console.error('Error loading diagrams configuration:', error);
-                dynamicSection.innerHTML = `<div class="alert alert-warning m-2 small">No Mermaid diagrams configuration found</div>`;
             }
         }
 
         function setActiveNav(activeLink) {
-            document.querySelectorAll('.sidebar .nav-link').forEach(link => {
-                link.classList.remove('active');
+            document.querySelectorAll('.sidebar a').forEach(link => {
+                link.classList.remove('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
+                link.classList.add('text-gray-700');
             });
-            activeLink.classList.add('active');
+            activeLink.classList.remove('text-gray-700');
+            activeLink.classList.add('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
         }
 
         async function showView(viewName, navLink, filePath, title, type = 'svg') {
@@ -405,17 +541,21 @@
             currentScale = 1;
 
             if (viewName === 'home') {
-                homeView.style.display = 'block';
-                diagramViewer.style.display = 'none';
+                homeView.classList.remove('hidden');
+                diagramViewer.classList.add('hidden');
             } else if (viewName === 'diagram') {
-                homeView.style.display = 'none';
-                diagramViewer.style.display = 'flex';
+                homeView.classList.add('hidden');
+                diagramViewer.classList.remove('hidden');
                 diagramTitle.textContent = title;
-                diagramContainer.innerHTML = '<div class="loading-spinner"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+                diagramContainer.innerHTML = `
+                    <div class="flex flex-col items-center space-y-3">
+                        <div class="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
+                        <p class="text-gray-600 font-medium">Loading diagram...</p>
+                    </div>
+                `;
 
                 try {
                     if (type === 'svg') {
-                        // Load static SVG files
                         const response = await fetch(filePath);
                         if (!response.ok) throw new Error(`Network error: ${response.status}`);
                         const svgContent = await response.text();
@@ -439,7 +579,6 @@
                             throw new Error('No SVG element found.');
                         }
                     } else if (type === 'mermaid') {
-                        // Load and render Mermaid files
                         const response = await fetch(filePath);
                         if (!response.ok) throw new Error(`Network error: ${response.status}`);
                         const mermaidCode = await response.text();
@@ -466,7 +605,17 @@
                         }
                     }
                 } catch (error) {
-                    diagramContainer.innerHTML = `<div class="alert alert-danger m-3">Failed to load diagram: ${error.message}</div>`;
+                    diagramContainer.innerHTML = `
+                        <div class="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md">
+                            <div class="flex items-center space-x-3 mb-2">
+                                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                </svg>
+                                <h4 class="font-bold text-red-900">Failed to load diagram</h4>
+                            </div>
+                            <p class="text-red-700 text-sm">${error.message}</p>
+                        </div>
+                    `;
                 }
             }
         }
@@ -499,4 +648,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/firebase/internal-launchpad/logo.svg b/firebase/internal-launchpad/logo.svg
index b5220ffe..cbeedbc2 100644
--- a/firebase/internal-launchpad/logo.svg
+++ b/firebase/internal-launchpad/logo.svg
@@ -1,45 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Adobe Illustrator 29.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+	 viewBox="200 180 280 140" style="enable-background:new 0 0 500 500;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#24303B;}
 	.st1{fill:#002FE3;}
 </style>
 <g>
-	<g>
-		<g>
-			<path class="st1" d="M459.81,202.55c-5.03,0.59-9.08,4.49-10.36,9.38l-15.99,59.71l-16.24-56.3
-				c-1.68-5.92-6.22-10.86-12.19-12.34c-1.58-0.39-3.11-0.54-4.64-0.49h-0.15c-1.53-0.05-3.11,0.1-4.64,0.49
-				c-5.97,1.48-10.51,6.42-12.24,12.34l-3.6,12.53l-11.35,39.38l-7.9-27.54c-10.76-37.5-48.56-62.23-88.38-55.32
-				c-33.26,5.82-57.05,35.68-56.99,69.48v0.79c0,4.34,0.39,8.73,1.13,13.18c0.18,1.02,0.37,2.03,0.6,3.03
-				c1.84,8.31,10.93,12.73,18.49,8.8v0c5.36-2.79,7.84-8.89,6.42-14.77c-0.85-3.54-1.28-7.23-1.23-11.03
-				c0-25.02,20.48-45.5,45.55-45.2c7.6,0.1,15.59,2.07,23.59,6.37c13.52,7.3,23.15,20.18,27.34,34.94l13.32,46.34
-				c1.73,5.97,6.22,11,12.24,12.58c9.62,2.62,19-3.06,21.51-12.04l16.09-56.7l0.2-0.1l16.09,56.85c1.63,5.68,5.87,10.41,11.55,11.99
-				c9.13,2.57,18.11-2.66,20.67-11.2l24.13-79.6C475.35,209.85,468.64,201.56,459.81,202.55z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st1" d="M83.32,255.47c-1.7-2.2-1.67-5.29,0.07-7.46l20.19-25.12c5.63-7.01,3.73-16.22-4.64-19.53
-				c-5.29-2.09-10.99-0.39-14.28,3.75l-32.67,41v-32.24c0-6.63-4.77-12.68-11.38-13.34c-7.59-0.76-13.99,5.18-13.99,12.62v80.99
-				c0,6.63,4.77,12.68,11.37,13.34C45.6,310.24,52,304.3,52,296.86v-12.73l11.65-13.22l25.12,33.69c2.33,3.12,5.99,4.95,9.87,4.95
-				h1.4c10.23,0,16-11.75,9.74-19.85L83.32,255.47z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st1" d="M306.76,234.3c-5.42,2.52-8.26,8.45-7.01,14.3c0.64,3.01,0.98,6.14,0.98,9.35v0.3c0,0,0,0,0,0.05
-				c0,24.5-19.71,44.44-44.09,45c-22.25-0.13-43.56-9.01-59.31-24.75l-14.06-14.06c0.43-0.17,0.9-0.3,1.33-0.49
-				c5.92-2.62,10.51-6.32,13.77-11.2c1.94-2.91,3.23-6.22,4.02-9.84c0.08-0.37,0.15-0.75,0.22-1.12c0.14-0.79,0.29-1.57,0.38-2.39
-				c0.16-1.38,0.27-2.79,0.27-4.27c0-6.86-1.63-12.73-4.89-17.62c-3.26-4.89-7.85-8.59-13.77-11.2c-5.92-2.62-12.88-3.9-20.82-3.9
-				h-20.73c-12.58,0-22.75,10.21-22.75,22.75v71.65c0,7.01,5.68,12.68,12.73,12.68c3.5,0,6.66-1.43,8.98-3.7
-				c2.27-2.32,3.7-5.48,3.7-8.98V267.9h5.04l28.63,28.63c20.27,20.27,47.65,31.75,76.28,32.13v0.1c0.33,0,0.65-0.05,0.97-0.05
-				c0.16,0,0.32,0.02,0.48,0.02v-0.05c38.16-0.83,69.01-32.05,69.01-70.74c0-5.12-0.54-10.1-1.59-14.91
-				C322.83,235.11,314.11,230.88,306.76,234.3z M173.15,246.68c-3.01,2.07-7.15,3.11-12.43,3.11h-8.98c-3.31,0-6.02-2.71-6.02-6.02
-				v-14.41c0-3.31,2.71-6.02,6.02-6.02h9.53c5.23,0,9.28,1.09,12.09,3.26c2.86,2.17,4.25,5.58,4.25,10.21
-				C177.59,241.3,176.11,244.56,173.15,246.68z"/>
-		</g>
-	</g>
+	<path class="st1" d="M459.81,202.55c-5.03,0.59-9.08,4.49-10.36,9.38l-15.99,59.71l-16.24-56.3
+		c-1.68-5.92-6.22-10.86-12.19-12.34c-1.58-0.39-3.11-0.54-4.64-0.49h-0.15c-1.53-0.05-3.11,0.1-4.64,0.49
+		c-5.97,1.48-10.51,6.42-12.24,12.34l-3.6,12.53l-11.35,39.38l-7.9-27.54c-10.76-37.5-48.56-62.23-88.38-55.32
+		c-33.26,5.82-57.05,35.68-56.99,69.48v0.79c0,4.34,0.39,8.73,1.13,13.18c0.18,1.02,0.37,2.03,0.6,3.03
+		c1.84,8.31,10.93,12.73,18.49,8.8v0c5.36-2.79,7.84-8.89,6.42-14.77c-0.85-3.54-1.28-7.23-1.23-11.03
+		c0-25.02,20.48-45.5,45.55-45.2c7.6,0.1,15.59,2.07,23.59,6.37c13.52,7.3,23.15,20.18,27.34,34.94l13.32,46.34
+		c1.73,5.97,6.22,11,12.24,12.58c9.62,2.62,19-3.06,21.51-12.04l16.09-56.7l0.2-0.1l16.09,56.85c1.63,5.68,5.87,10.41,11.55,11.99
+		c9.13,2.57,18.11-2.66,20.67-11.2l24.13-79.6C475.35,209.85,468.64,201.56,459.81,202.55z"/>
 </g>
 </svg>