Update index.html

Author: PartnerProgram

index.html

@@ -660,7 +660,9 @@ <h1 class="mt-4 text-3xl font-semibold leading-tight sm:text-4xl">
         if (STATE.showPartnerEventsModal) {
           html += renderPartnerEventsModal();
         }
-        if (STATE.showCsvModal) html += renderCsvModal();
+        if (STATE.showCsvModal) {
+          html += renderCsvModal();
+        }
         document.getElementById('app').innerHTML = html;
         lucide.createIcons();
         addEventListeners();
@@ -1073,28 +1075,6 @@ <h2 class="text-xl font-medium mb-4">Select Partner Types to Show</h2>
         const isRegistered = STATE.partnerType === 'Registered';
         let html = '<h2 class="text-xl font-medium mb-6 flex items-center gap-3"><i data-lucide="table" class="h-6 w-6 stroke-[#2563eb]"></i>Sales Motion</h2>';
         html += '<div class="mb-6 rounded-xl bg-white p-6 shadow-md">';
-        html += '<h3 class="text-lg font-medium mb-4 flex items-center gap-2"><i data-lucide="workflow" class="h-5 w-5 stroke-[#2563eb]"></i>Sales Cycle Stages</h3>';
-        html += '<div class="space-y-2">';
-        STATE.salesCycle.rows.forEach((row, index) => {
-          const active = STATE.salesCycle.activeAccordion === index;
-          const stage = STATE.salesCycle.stages[row];
-          html += `
-            <div class="border border-[#E2E8F0] rounded-xl overflow-hidden">
-              <button data-accordion="${index}" class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-sm bg-gray-50 hover:bg-gray-100 transition-colors">
-                <span>${stage.label}</span>
-                <i data-lucide="${active ? 'chevron-up' : 'chevron-down'}" class="h-4 w-4"></i>
-              </button>
-              <div class="${active ? '' : 'hidden'} px-4 py-3 text-sm text-gray-700 space-y-2">
-                <p><strong>Description:</strong> ${stage.description}</p>
-                <p><strong>Entry Criteria:</strong> ${stage.entryCriteria.join(', ')}</p>
-                <p><strong>Exit Criteria:</strong> ${stage.exitCriteria.join(', ')}</p>
-                <p><strong>Deliverables:</strong> ${stage.deliverables.join(', ')}</p>
-              </div>
-            </div>
-          `;
-        });
-        html += '</div></div>';
-        html += '<div class="mb-6 rounded-xl bg-white p-6 shadow-md">';
         html += '<h3 class="text-lg font-medium mb-4 flex items-center gap-2"><i data-lucide="layers" class="h-5 w-5 stroke-[#2563eb]"></i>Band Overviews</h3>';
         html += '<div class="grid grid-cols-1 md:grid-cols-3 gap-4">';
         if (isRegistered) {
@@ -1107,7 +1087,7 @@ <h2 class="text-xl font-medium mb-4">Select Partner Types to Show</h2>
           });
         }
         html += '</div></div>';
-        html += '<div class="rounded-xl bg-white p-6 shadow-md">';
+        html += '<div class="mb-6 rounded-xl bg-white p-6 shadow-md">';
         html += '<h3 class="text-lg font-medium mb-4 flex items-center gap-2"><i data-lucide="users-round" class="h-5 w-5 stroke-[#2563eb]"></i>Ownership by Band</h3>';
         if (isRegistered) {
           STATE.activeBand = 'band3';
@@ -1144,6 +1124,28 @@ <h2 class="text-xl font-medium mb-4">Select Partner Types to Show</h2>
           html += '</div>';
         });
         html += '</div></div>';
+        html += '<div class="mb-6 rounded-xl bg-white p-6 shadow-md">';
+        html += '<h3 class="text-lg font-medium mb-4 flex items-center gap-2"><i data-lucide="workflow" class="h-5 w-5 stroke-[#2563eb]"></i>Sales Cycle Stages</h3>';
+        html += '<div class="space-y-2">';
+        STATE.salesCycle.rows.forEach((row, index) => {
+          const active = STATE.salesCycle.activeAccordion === index;
+          const stage = STATE.salesCycle.stages[row];
+          html += `
+            <div class="border border-[#E2E8F0] rounded-xl overflow-hidden">
+              <button data-accordion="${index}" class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-sm bg-gray-50 hover:bg-gray-100 transition-colors">
+                <span>${stage.label}</span>
+                <i data-lucide="${active ? 'chevron-up' : 'chevron-down'}" class="h-4 w-4"></i>
+              </button>
+              <div class="${active ? '' : 'hidden'} px-4 py-3 text-sm text-gray-700 space-y-2">
+                <p><strong>Description:</strong> ${stage.description}</p>
+                <p><strong>Entry Criteria:</strong> ${stage.entryCriteria.join(', ')}</p>
+                <p><strong>Exit Criteria:</strong> ${stage.exitCriteria.join(', ')}</p>
+                <p><strong>Deliverables:</strong> ${stage.deliverables.join(', ')}</p>
+              </div>
+            </div>
+          `;
+        });
+        html += '</div></div>';
         html += '<div class="mt-6 text-xs text-gray-600 flex flex-wrap gap-4">';
         html += '<span class="flex items-center gap-1"><i data-lucide="handshake" class="h-3 w-3 stroke-[#2563eb]"></i>Band 1 rewards full-cycle ownership</span>';
         html += '<span class="flex items-center gap-1"><i data-lucide="users-round" class="h-3 w-3 stroke-[#2563eb]"></i> Band 2 is co-sell</span>';