Update index.html

Author: PartnerProgram

index.html

@@ -6,6 +6,7 @@
     <title>Recast Partner Program – Branded Preview</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <script src="https://unpkg.com/lucide@latest"></script>
   </head>
   <body class="bg-[#F7F9FB] text-[#0A1C60] font-['Inter',sans-serif] min-h-screen">
     <header class="relative overflow-hidden">
@@ -42,6 +43,7 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
         newPartner: false,
         activeStep: 0,
         showBusinessPlan: false,
+        showEvaluation: false,
         model: {
           tiers: {
             Registered: {
@@ -299,6 +301,13 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
               render();
             });
           }
+          const evaluationButton = document.getElementById("evaluationButton");
+          if (evaluationButton) {
+            evaluationButton.addEventListener("click", () => {
+              STATE.showEvaluation = !STATE.showEvaluation;
+              render();
+            });
+          }
         }
       }
       function renderDropdown() {
@@ -331,13 +340,63 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
             contentHtml += `<p class="mt-2 text-[#4A5568]">${para.replace(/\n/g, '<br>')}</p>`;
           }
         });
+        let evaluationHtml = '';
+        if (STATE.partnerType === 'Premier') {
+          evaluationHtml = `
+            <div class="mt-4">
+              <button id="evaluationButton" class="rounded-full bg-[#0070F3] px-4 py-2 text-sm text-white hover:bg-[#005AD0] focus:outline-none focus:ring-2 focus:ring-[#0070F3] focus:ring-offset-2">
+                ${STATE.showEvaluation ? 'Hide' : 'Show'} Preferred vs. Premier Evaluation Guide
+              </button>
+            </div>
+          `;
+          if (STATE.showEvaluation) {
+            evaluationHtml += `
+              <div class="mt-4 rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
+                ${renderEvaluationGuide()}
+              </div>
+            `;
+          }
+        }
         return `
           <div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
             <h3 class="text-lg font-semibold">Overview</h3>
             ${contentHtml}
+            ${evaluationHtml}
           </div>
         `;
       }
+      function renderEvaluationGuide() {
+        return `
+          <h3 class="text-lg font-semibold mb-4">Preferred vs. Premier Partner Evaluation Guide</h3>
+          <p class="mb-4 text-[#4A5568]">When evaluating whether a Preferred Partner is ready to advance to Premier status, Recast looks at three key areas — Focus, Capability, and Commitment.\nThese criteria ensure we’re investing in partners that can truly scale with us, represent our brand effectively, and deliver measurable revenue outcomes.</p>
+          <h4 class="text-md font-semibold mb-2">1. Focus — Are they aligned with Recast’s go-to-market direction?</h4>
+          <p class="mb-4 text-[#4A5568]">We assess whether the partner’s business focus and customer base align with the markets and segments Recast wants to grow in.</p>
+          <ul class="list-disc pl-5 mb-4 text-[#4A5568]">
+            <li>Do they specialize in the right customer segment (e.g., enterprise, mid-market, or public sector)?</li>
+            <li>Are they active in the industries or regions where Recast wants to expand?</li>
+            <li>Do they have core competencies that complement Recast’s product strengths (endpoint management, automation, workspace delivery, etc.)?</li>
+            <li>Are they targeting the functional buyers that align with Recast’s motion (IT Ops, Security, Endpoint, Workspace)?</li>
+          </ul>
+          <h4 class="text-md font-semibold mb-2">2. Capability — Do they have the structure to scale with Recast?</h4>
+          <p class="mb-4 text-[#4A5568]">We evaluate whether the partner has the resources, skills, and reach to build and grow a sustainable Recast practice.</p>
+          <ul class="list-disc pl-5 mb-4 text-[#4A5568]">
+            <li>Do they have technical resources trained or able to support Recast deployments?</li>
+            <li>Do they have a dedicated sales team capable of positioning and selling Recast solutions?</li>
+            <li>Is there a marketing function that can run co-branded or joint campaigns?</li>
+            <li>Do they have customer reach in the accounts and regions Recast wants to penetrate?</li>
+            <li>Are they geographically positioned in areas where Recast needs stronger coverage?</li>
+          </ul>
+          <h4 class="text-md font-semibold mb-2">3. Commitment — Are they invested in mutual growth and measurable results?</h4>
+          <p class="mb-4 text-[#4A5568]">We confirm that the partner isn’t just opportunistic, but strategically committed to driving joint revenue and customer success.</p>
+          <ul class="list-disc pl-5 mb-4 text-[#4A5568]">
+            <li>Have they committed to a defined revenue target or growth goal for Recast?</li>
+            <li>Are they showing year-over-year progress in pipeline creation and customer adoption?</li>
+            <li>Are they actively pursuing upsell, cross-sell, and expansion within existing customers?</li>
+            <li>Do they have joint business plans or defined KPIs aligned with Recast’s objectives?</li>
+            <li>Are they investing in training, enablement, and certification to build long-term capability?</li>
+          </ul>
+        `;
+      }
       function renderRequirementsCard(reqs, isPremier) {
         let listHtml = "";
         reqs.forEach((r) => {
@@ -880,6 +939,7 @@ <h4 class="text-md font-semibold mb-2 mt-6">8. KEY CONTACTS</h4>
       }
       document.addEventListener("DOMContentLoaded", () => {
         render();
+        lucide.createIcons();
       });
     </script>
   </body>