Update index.html

Author: PartnerProgram

index.html

@@ -642,33 +642,35 @@ <h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0] flex items-center
         const meta = STATE.salesCycle.bandMeta[STATE.band];
         html += '<div class="flex flex-wrap items-center gap-3 mb-6">';
         html += `<span class="px-3 py-1 text-xs rounded-2xl ${meta.color}">${meta.name}</span>`;
-        html += `<span class="text-xs text-[#4A5568]">${meta.summary}</span>`;
         html += '</div>';
-        html += '<div class="overflow-x-auto rounded-2xl border border-[#E2E8F0]">';
-        html += '<table class="min-w-[920px] w-full text-sm">';
-        html += '<thead class="bg-[#F7F9FB]">';
-        html += '<tr class="text-left"><th class="p-3">Stage</th><th class="p-3">Owner</th><th class="p-3">Support</th><th class="p-3">Exit Criteria</th><th class="p-3">Deliverables</th></tr>';
-        html += '</thead><tbody>';
+        html += '<div class="space-y-6">';
         STATE.salesCycle.rows.forEach(key => {
           const stage = STATE.salesCycle.stages[key];
           const own = STATE.salesCycle.bands[STATE.band][key];
-          html += '<tr class="border-t border-[#E2E8F0] align-top">';
-          html += '<td class="p-3 w-[18%]"><div class="font-medium">' + stage.label + '</div><div class="text-xs text-[#4A5568] mt-1">' + stage.description + '</div></td>';
-          html += '<td class="p-3 w-[18%]"><div class="flex items-start gap-2"><i data-lucide="user-round" class="h-4 w-4 mt-0.5 stroke-[#0070F3]"></i><div><div class="font-medium">' + own.primaryOwner + '</div><div class="text-[11px] text-[#4A5568]">Accountable: ' + own.accountable + '</div></div></div></td>';
-          html += '<td class="p-3 w-[18%]"><div class="flex flex-wrap gap-2">';
+          html += '<div class="rounded-2xl bg-white p-6 shadow-lg border border-[#E2E8F0] hover:shadow-xl transition-shadow duration-300">';
+          html += '<h3 class="text-xl font-semibold mb-2 text-[#0A1C60]">' + stage.label + '</h3>';
+          html += '<p class="text-sm text-[#4A5568] mb-6">' + stage.description + '</p>';
+          html += '<div class="grid grid-cols-1 md:grid-cols-3 gap-6">';
+          html += '<div class="bg-[#F7F9FB] rounded-xl p-4">';
+          html += '<div class="font-medium mb-2 flex items-center gap-2"><i data-lucide="user-round" class="h-5 w-5 stroke-[#0070F3]"></i>Owner</div>';
+          html += '<div class="text-[#0A1C60]">' + own.primaryOwner + '</div>';
+          html += '<div class="text-xs text-[#4A5568] mt-1">Accountable: ' + own.accountable + '</div>';
+          html += '</div>';
+          html += '<div class="bg-[#F7F9FB] rounded-xl p-4">';
+          html += '<div class="font-medium mb-2 flex items-center gap-2"><i data-lucide="users-round" class="h-5 w-5 stroke-[#0070F3]"></i>Support</div>';
+          html += '<div class="flex flex-wrap gap-2">';
           own.support.forEach(s => {
-            html += '<span class="rounded-xl bg-[#E2E8F0] px-2 py-1 text-xs text-[#4A5568]">' + s + '</span>';
+            html += '<span class="rounded-full bg-white px-3 py-1 text-xs text-[#4A5568] border border-[#E2E8F0]">' + s + '</span>';
           });
-          html += '</div></td>';
-          html += '<td class="p-3 w-[23%]"><ul class="list-disc pl-4 space-y-1">';
+          html += '</div></div>';
+          html += '<div class="bg-[#F7F9FB] rounded-xl p-4">';
+          html += '<div class="font-medium mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="h-5 w-5 stroke-[#0070F3]"></i>Exit Criteria</div>';
+          html += '<ul class="list-disc pl-4 space-y-1 text-sm text-[#4A5568]">';
           stage.exitCriteria.forEach(e => { html += '<li>' + e + '</li>'; });
-          html += '</ul></td>';
-          html += '<td class="p-3 w-[23%]"><ul class="list-disc pl-4 space-y-1">';
-          stage.deliverables.forEach(d => { html += '<li>' + d + '</li>'; });
-          html += '</ul></td>';
-          html += '</tr>';
+          html += '</ul></div>';
+          html += '</div></div>';
         });
-        html += '</tbody></table></div>';
+        html += '</div>';
         html += '<div class="mt-6 text-xs text-[#4A5568] flex flex-wrap gap-4">';
         html += '<span class="flex items-center gap-1"><i data-lucide="handshake" class="h-3 w-3 stroke-[#0070F3]"></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-[#0070F3]"></i> Band 2 is co-sell</span>';