Skip to content

Commit 4d5ab04

Browse files
PartnerProgramPartnerProgram
authored
Update index.html
1 parent 368a0bd commit 4d5ab04

1 file changed

Lines changed: 82 additions & 70 deletions

File tree

‎index.html‎

Lines changed: 82 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
4545
model: {
4646
tiers: {
4747
Registered: {
48-
overview: "Registered partners are typically transactional resellers or LARs who help us fulfill orders or introduce Recast into unique opportunities. These partners don’t require a formal partnership agreement — we simply transact through them when the customer requests it. They may also bring Recast into a deal where we do the selling and delivery, earning up to 5% rebate at Recast’s discretion.\nThe only requirement is that the partner is set up in Salesforce with a valid bill-to address and primary finance contact. On the order form, the bill-to is the partner, and the ship-to is the customer.\nThese relationships are lightweight and transactional — low overhead, but still important when we need a resale mechanism or local presence.",
48+
overview: "Registered partners are either License Added Resellers (LARs) or referral partners who help Recast reach more customers.\n\n* LARs handle the transaction — they place the order and act as the bill-to on behalf of the customer. They earn up to a 5% margin on those deals.\n\n* Referral partners introduce Recast to a customer or opportunity. If we close the deal directly, they can receive up to a 5% rebate at Recast’s discretion.\n\nThese partnerships are lightweight and transactional — no formal agreement is required. We simply set up the partner in Salesforce with valid billing information and process orders as needed.\nThey’re a low-overhead way for Recast to fulfill deals or expand into new opportunities through trusted local or resale partners.",
4949
requirements: [
5050
"Create Salesforce account with bill-to and finance contact",
5151
"No formal agreement required",
@@ -237,19 +237,19 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
237237
html += renderDropdown();
238238
html += renderOverview(data.overview);
239239
html += '</div>';
240-
html += '<div class="grid gap-4" aria-live="polite">';
241-
html += renderRequirements(data.requirements, data.isPremier);
242-
html += renderBenefits(data.benefits);
240+
html += '<div class="space-y-4">';
241+
html += renderRequirementsCard(data.requirements, data.isPremier);
242+
html += renderBenefitsCard(data.benefits);
243243
if (data.isStandard) {
244-
html += renderMargins();
244+
html += renderMarginsCard();
245245
} else {
246-
html += renderDetails(data.specific);
246+
html += renderDetailsCard(data.specific);
247247
}
248-
html += '</div>';
249-
html += renderROE();
248+
html += renderROECard();
250249
if (STATE.partnerType !== "Registered") {
251-
html += renderOnboarding();
250+
html += renderOnboardingCard();
252251
}
252+
html += '</div>';
253253
html += '<footer class="pt-2 text-xs text-[#4A5568]">Preview purposes only. Program terms subject to agreement.</footer>';
254254
html += "</div>";
255255
document.getElementById("app").innerHTML = html;
@@ -304,7 +304,8 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
304304
function renderDropdown() {
305305
let options = '';
306306
PARTNER_TYPES.forEach((t) => {
307-
options += `<option value="${t}" ${STATE.partnerType === t ? 'selected' : ''}>${t}</option>`;
307+
const display = t === "Registered" ? "Registered (LAR/Referral)" : t;
308+
options += `<option value="${t}" ${STATE.partnerType === t ? 'selected' : ''}>${display}</option>`;
308309
});
309310
return `
310311
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
@@ -323,7 +324,7 @@ <h3 class="text-lg font-semibold">Overview</h3>
323324
</div>
324325
`;
325326
}
326-
function renderRequirements(reqs, isPremier) {
327+
function renderRequirementsCard(reqs, isPremier) {
327328
let listHtml = "";
328329
reqs.forEach((r) => {
329330
listHtml += `
@@ -351,14 +352,16 @@ <h3 class="text-lg font-semibold">Overview</h3>
351352
}
352353
}
353354
return `
354-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
355-
<h3 class="text-lg font-semibold">Requirements</h3>
356-
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
357-
${businessPlanHtml}
358-
</div>
355+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
356+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Requirements</summary>
357+
<div class="p-5 pt-0">
358+
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
359+
${businessPlanHtml}
360+
</div>
361+
</details>
359362
`;
360363
}
361-
function renderBenefits(bens) {
364+
function renderBenefitsCard(bens) {
362365
let listHtml = "";
363366
bens.forEach((b) => {
364367
listHtml += `
@@ -369,13 +372,15 @@ <h3 class="text-lg font-semibold">Requirements</h3>
369372
`;
370373
});
371374
return `
372-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
373-
<h3 class="text-lg font-semibold">Benefits</h3>
374-
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
375-
</div>
375+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
376+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Benefits</summary>
377+
<div class="p-5 pt-0">
378+
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
379+
</div>
380+
</details>
376381
`;
377382
}
378-
function renderMargins() {
383+
function renderMarginsCard() {
379384
const disabled = STATE.partnerType === "Registered";
380385
const universe = STATE.model.margins[STATE.commitment][STATE.dealType];
381386
const key = STATE.partnerType === "Registered" ? "Registered" : "Preferred|Premier";
@@ -411,40 +416,42 @@ <h3 class="text-lg font-semibold">Benefits</h3>
411416
`;
412417
}
413418
return `
414-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
415-
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
416-
<h3 class="text-lg font-semibold">Margins</h3>
417-
<div class="flex flex-wrap items-center gap-3">
418-
<label class="flex items-center gap-2 text-sm ${disabled ? "opacity-60" : ""}" title="For your first 3 net-new deals, we co-sell end-to-end and you keep full margin.">
419-
<input type="checkbox" id="newPartner" class="h-4 w-4 accent-[#0070F3]" ${disabled ? "disabled" : ""} ${STATE.newPartner ? "checked" : ""} />
420-
<span>New partner boost (first 3 net-new deals)</span>
421-
</label>
422-
<select id="commitment" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
423-
<option ${STATE.commitment === "Annual" ? "selected" : ""}>Annual</option>
424-
<option ${STATE.commitment === "Monthly" ? "selected" : ""}>Monthly</option>
425-
</select>
426-
<select id="dealType" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
427-
<option ${STATE.dealType === "Net New" ? "selected" : ""}>Net New</option>
428-
<option ${STATE.dealType === "Renewal" ? "selected" : ""}>Renewal</option>
429-
</select>
419+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
420+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Margins</summary>
421+
<div class="p-5 pt-0">
422+
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
423+
<div class="flex flex-wrap items-center gap-3">
424+
<label class="flex items-center gap-2 text-sm ${disabled ? "opacity-60" : ""}" title="For your first 3 net-new deals, we co-sell end-to-end and you keep full margin.">
425+
<input type="checkbox" id="newPartner" class="h-4 w-4 accent-[#0070F3]" ${disabled ? "disabled" : ""} ${STATE.newPartner ? "checked" : ""} />
426+
<span>New partner boost (first 3 net-new deals)</span>
427+
</label>
428+
<select id="commitment" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
429+
<option ${STATE.commitment === "Annual" ? "selected" : ""}>Annual</option>
430+
<option ${STATE.commitment === "Monthly" ? "selected" : ""}>Monthly</option>
431+
</select>
432+
<select id="dealType" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
433+
<option ${STATE.dealType === "Net New" ? "selected" : ""}>Net New</option>
434+
<option ${STATE.dealType === "Renewal" ? "selected" : ""}>Renewal</option>
435+
</select>
436+
</div>
430437
</div>
438+
<div class="mt-3">${contentHtml}</div>
431439
</div>
432-
<div class="mt-3">${contentHtml}</div>
433-
</div>
440+
</details>
434441
`;
435442
}
436-
function renderDetails(specific) {
443+
function renderDetailsCard(specific) {
437444
let tableHtml = '<table class="min-w-full divide-y divide-[#E2E8F0]"><thead><tr><th class="px-6 py-3 text-left text-sm font-semibold">Partner Type</th><th class="px-6 py-3 text-left text-sm font-semibold">Tier Eligibility</th><th class="px-6 py-3 text-left text-sm font-semibold">Margin</th><th class="px-6 py-3 text-left text-sm font-semibold">Deal Registration</th><th class="px-6 py-3 text-left text-sm font-semibold">MDF Access</th><th class="px-6 py-3 text-left text-sm font-semibold">Enablement</th></tr></thead><tbody class="divide-y divide-[#E2E8F0]">';
438445
tableHtml += `<tr><td class="px-6 py-4 text-sm font-medium">${specific.partnerType}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.tierEligibility}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.margin}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.dealRegistration}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.mdfAccess}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.enablement}</td></tr>`;
439446
tableHtml += '</tbody></table>';
440447
return `
441-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md overflow-hidden">
442-
<h3 class="text-lg font-semibold mb-4">Details</h3>
443-
<div class="overflow-x-auto">${tableHtml}</div>
444-
</div>
448+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
449+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Details</summary>
450+
<div class="p-5 pt-0 overflow-x-auto">${tableHtml}</div>
451+
</details>
445452
`;
446453
}
447-
function renderROE() {
454+
function renderROECard() {
448455
let principlesTable = '<table class="min-w-full divide-y divide-[#E2E8F0]"><thead><tr><th class="px-6 py-3 text-left text-sm font-semibold">Principle</th><th class="px-6 py-3 text-left text-sm font-semibold">Description</th><th class="px-6 py-3 text-left text-sm font-semibold">Intent</th></tr></thead><tbody class="divide-y divide-[#E2E8F0]">';
449456
STATE.model.roe.principles.forEach((p) => {
450457
principlesTable += `<tr><td class="px-6 py-4 text-sm font-medium">${p.principle}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${p.description}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${p.intent}</td></tr>`;
@@ -469,27 +476,30 @@ <h3 class="text-lg font-semibold mb-4">Details</h3>
469476
});
470477
summaryTable += '</tbody></table>';
471478
return `
472-
<div class="mt-8 space-y-8">
473-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
474-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Rules of Engagement (ROE)</h3>
475-
<div class="overflow-x-auto">${principlesTable}</div>
476-
</div>
477-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
478-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Margin Bands & Definitions</h3>
479-
<div class="overflow-x-auto">${bandsTable}</div>
480-
</div>
481-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
482-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Partner Margin Governance</h3>
483-
<div class="overflow-x-auto">${governanceTable}</div>
484-
</div>
485-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
486-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Example Summary Table</h3>
487-
<div class="overflow-x-auto">${summaryTable}</div>
479+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
480+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Rules of Engagement</summary>
481+
<div class="p-5 pt-0 space-y-8">
482+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
483+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Rules of Engagement (ROE)</h3>
484+
<div class="overflow-x-auto">${principlesTable}</div>
485+
</div>
486+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
487+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Margin Bands & Definitions</h3>
488+
<div class="overflow-x-auto">${bandsTable}</div>
489+
</div>
490+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
491+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Partner Margin Governance</h3>
492+
<div class="overflow-x-auto">${governanceTable}</div>
493+
</div>
494+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
495+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Example Summary Table</h3>
496+
<div class="overflow-x-auto">${summaryTable}</div>
497+
</div>
488498
</div>
489-
</div>
499+
</details>
490500
`;
491501
}
492-
function renderOnboarding() {
502+
function renderOnboardingCard() {
493503
const steps = STATE.model.onboarding.steps;
494504
let buttonsHtml = "";
495505
steps.forEach((s, i) => {
@@ -516,13 +526,15 @@ <h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Example Summary
516526
`;
517527
});
518528
return `
519-
<div class="mt-8 rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
520-
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
521-
<h3 class="text-lg font-semibold">Onboarding Requirements</h3>
522-
<div class="flex gap-2">${buttonsHtml}</div>
529+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
530+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Onboarding Requirements</summary>
531+
<div class="p-5 pt-0">
532+
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
533+
<div class="flex gap-2">${buttonsHtml}</div>
534+
</div>
535+
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
523536
</div>
524-
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
525-
</div>
537+
</details>
526538
`;
527539
}
528540
function renderBusinessPlan() {

0 commit comments

Comments
 (0)