| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function mk(tag, cls, styles) { |
| 5 |
var d = document.createElement(tag); |
| 6 |
if (cls) d.className = cls; |
| 7 |
if (styles) Object.keys(styles).forEach(function (k) { d.style[k] = styles[k]; }); |
| 8 |
return d; |
| 9 |
} |
| 10 |
function mkText(tag, cls, text, styles) { |
| 11 |
var d = mk(tag, cls, styles); |
| 12 |
d.textContent = text; |
| 13 |
return d; |
| 14 |
} |
| 15 |
function mkA(cls, href, styles) { |
| 16 |
var a = mk('a', cls, styles); |
| 17 |
a.href = href || '#'; |
| 18 |
return a; |
| 19 |
} |
| 20 |
|
| 21 |
function init() { |
| 22 |
document.querySelectorAll('.bkbg-value-proposition-app').forEach(function (appEl) { |
| 23 |
if (appEl.dataset.rendered) return; |
| 24 |
appEl.dataset.rendered = '1'; |
| 25 |
|
| 26 |
var opts; try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 27 |
|
| 28 |
var o = { |
| 29 |
eyebrow: opts.eyebrow || '', |
| 30 |
showEyebrow: opts.showEyebrow !== false, |
| 31 |
headline: opts.headline || '', |
| 32 |
subheadline: opts.subheadline || '', |
| 33 |
showSubheadline: opts.showSubheadline !== false, |
| 34 |
benefits: opts.benefits || [], |
| 35 |
badges: opts.badges || [], |
| 36 |
showBadges: opts.showBadges !== false, |
| 37 |
ctaText: opts.ctaText || 'Get Started', |
| 38 |
ctaUrl: opts.ctaUrl || '#', |
| 39 |
ctaSecondaryText: opts.ctaSecondaryText || '', |
| 40 |
ctaSecondaryUrl: opts.ctaSecondaryUrl || '#', |
| 41 |
showCta: opts.showCta !== false, |
| 42 |
showSecondaryCta: opts.showSecondaryCta !== false, |
| 43 |
layout: opts.layout || 'center', |
| 44 |
benefitColumns: opts.benefitColumns || 2, |
| 45 |
style: opts.style || 'clean', |
| 46 |
borderRadius: opts.borderRadius !== undefined ? opts.borderRadius : 12, |
| 47 |
gap: opts.gap !== undefined ? opts.gap : 20, |
| 48 |
paddingV: opts.paddingV !== undefined ? opts.paddingV : 64, |
| 49 |
paddingH: opts.paddingH !== undefined ? opts.paddingH : 32, |
| 50 |
headlineFontSize: opts.headlineFontSize !== undefined ? opts.headlineFontSize : 40, |
| 51 |
subFontSize: opts.subFontSize !== undefined ? opts.subFontSize : 18, |
| 52 |
benefitTitleSize: opts.benefitTitleSize !== undefined ? opts.benefitTitleSize : 16, |
| 53 |
benefitTextSize: opts.benefitTextSize !== undefined ? opts.benefitTextSize : 14, |
| 54 |
bgColor: opts.bgColor || '#f8fafc', |
| 55 |
accentColor: opts.accentColor || '#6366f1', |
| 56 |
headlineColor: opts.headlineColor || '#0f172a', |
| 57 |
subColor: opts.subColor || '#475569', |
| 58 |
eyebrowColor: opts.eyebrowColor || '#6366f1', |
| 59 |
benefitBg: opts.benefitBg || '#ffffff', |
| 60 |
benefitBorderColor:opts.benefitBorderColor || '#e2e8f0', |
| 61 |
benefitTitleColor:opts.benefitTitleColor || '#1e293b', |
| 62 |
benefitTextColor: opts.benefitTextColor || '#64748b', |
| 63 |
iconBg: opts.iconBg || '#ede9fe', |
| 64 |
badgeBg: opts.badgeBg || '#ffffff', |
| 65 |
badgeColor: opts.badgeColor || '#475569', |
| 66 |
ctaBg: opts.ctaBg || '#6366f1', |
| 67 |
ctaColor: opts.ctaColor || '#ffffff', |
| 68 |
ctaSecondaryColor:opts.ctaSecondaryColor || '#6366f1' |
| 69 |
}; |
| 70 |
|
| 71 |
var textAlign = o.layout === 'center' ? 'center' : 'left'; |
| 72 |
var justifyContent = o.layout === 'center' ? 'center' : 'flex-start'; |
| 73 |
var marginAuto = o.layout === 'center' ? 'auto' : '0'; |
| 74 |
var colTemplate = o.benefitColumns === 1 ? '1fr' |
| 75 |
: o.benefitColumns === 3 ? '1fr 1fr 1fr' |
| 76 |
: '1fr 1fr'; |
| 77 |
|
| 78 |
/* ── Outer block ─────────────────────────────────── */ |
| 79 |
var block = mk('div', 'bkbg-vp-block', { |
| 80 |
background: o.bgColor, |
| 81 |
padding: o.paddingV + 'px ' + o.paddingH + 'px', |
| 82 |
textAlign: textAlign, |
| 83 |
boxSizing: 'border-box' |
| 84 |
}); |
| 85 |
|
| 86 |
/* ── Eyebrow ─────────────────────────────────────── */ |
| 87 |
if (o.showEyebrow && o.eyebrow) { |
| 88 |
var eyebrow = mkText('div', 'bkbg-vp-eyebrow', o.eyebrow, { |
| 89 |
background: o.accentColor + '18', |
| 90 |
color: o.eyebrowColor |
| 91 |
}); |
| 92 |
block.appendChild(eyebrow); |
| 93 |
} |
| 94 |
|
| 95 |
/* ── Headline ────────────────────────────────────── */ |
| 96 |
if (o.headline) { |
| 97 |
var headline = mkText('h2', 'bkbg-vp-headline', o.headline, { |
| 98 |
color: o.headlineColor, |
| 99 |
maxWidth: '760px', |
| 100 |
marginLeft: marginAuto, |
| 101 |
marginRight: marginAuto |
| 102 |
}); |
| 103 |
block.appendChild(headline); |
| 104 |
} |
| 105 |
|
| 106 |
/* ── Subheadline ─────────────────────────────────── */ |
| 107 |
if (o.showSubheadline && o.subheadline) { |
| 108 |
var sub = mkText('p', 'bkbg-vp-sub', o.subheadline, { |
| 109 |
color: o.subColor, |
| 110 |
maxWidth: '620px', |
| 111 |
marginLeft: marginAuto, |
| 112 |
marginRight: marginAuto |
| 113 |
}); |
| 114 |
block.appendChild(sub); |
| 115 |
} |
| 116 |
|
| 117 |
/* ── CTA buttons ─────────────────────────────────── */ |
| 118 |
if (o.showCta || o.showSecondaryCta) { |
| 119 |
var ctas = mk('div', 'bkbg-vp-ctas', { justifyContent: justifyContent }); |
| 120 |
|
| 121 |
if (o.showCta && o.ctaText) { |
| 122 |
var ctaA = mkA('bkbg-vp-cta-primary', o.ctaUrl, { |
| 123 |
background: o.ctaBg, |
| 124 |
color: o.ctaColor, |
| 125 |
borderRadius: o.borderRadius + 'px' |
| 126 |
}); |
| 127 |
ctaA.textContent = o.ctaText; |
| 128 |
ctas.appendChild(ctaA); |
| 129 |
} |
| 130 |
|
| 131 |
if (o.showSecondaryCta && o.ctaSecondaryText) { |
| 132 |
var ctaB = mkA('bkbg-vp-cta-secondary', o.ctaSecondaryUrl, { color: o.ctaSecondaryColor }); |
| 133 |
ctaB.textContent = o.ctaSecondaryText; |
| 134 |
ctas.appendChild(ctaB); |
| 135 |
} |
| 136 |
|
| 137 |
block.appendChild(ctas); |
| 138 |
} |
| 139 |
|
| 140 |
/* ── Benefits grid ───────────────────────────────── */ |
| 141 |
if (o.benefits.length) { |
| 142 |
var grid = mk('div', 'bkbg-vp-benefits', { |
| 143 |
gridTemplateColumns: colTemplate, |
| 144 |
gap: o.gap + 'px' |
| 145 |
}); |
| 146 |
|
| 147 |
o.benefits.forEach(function (ben) { |
| 148 |
var card = mk('div', 'bkbg-vp-benefit', { |
| 149 |
background: o.benefitBg, |
| 150 |
borderRadius: o.borderRadius + 'px' |
| 151 |
}); |
| 152 |
|
| 153 |
if (o.style === 'card') { |
| 154 |
card.style.boxShadow = '0 2px 12px rgba(0,0,0,0.07)'; |
| 155 |
card.style.border = '1px solid ' + o.benefitBorderColor; |
| 156 |
} else if (o.style === 'bordered') { |
| 157 |
card.style.border = '1px solid ' + o.benefitBorderColor; |
| 158 |
} |
| 159 |
|
| 160 |
if (ben.icon) { |
| 161 |
var iconWrap = mkText('div', 'bkbg-vp-benefit-icon', ben.icon, { background: o.iconBg }); |
| 162 |
card.appendChild(iconWrap); |
| 163 |
} |
| 164 |
|
| 165 |
var title = mkText('div', 'bkbg-vp-benefit-title', ben.title || '', { |
| 166 |
color: o.benefitTitleColor |
| 167 |
}); |
| 168 |
card.appendChild(title); |
| 169 |
|
| 170 |
if (ben.description) { |
| 171 |
var desc = mkText('div', 'bkbg-vp-benefit-text', ben.description, { |
| 172 |
color: o.benefitTextColor |
| 173 |
}); |
| 174 |
card.appendChild(desc); |
| 175 |
} |
| 176 |
|
| 177 |
grid.appendChild(card); |
| 178 |
}); |
| 179 |
|
| 180 |
block.appendChild(grid); |
| 181 |
} |
| 182 |
|
| 183 |
/* ── Badges ──────────────────────────────────────── */ |
| 184 |
if (o.showBadges && o.badges.length) { |
| 185 |
var badgesRow = mk('div', 'bkbg-vp-badges', { justifyContent: justifyContent }); |
| 186 |
|
| 187 |
o.badges.forEach(function (badge) { |
| 188 |
var b = mk('div', 'bkbg-vp-badge', { |
| 189 |
background: o.badgeBg, |
| 190 |
color: o.badgeColor, |
| 191 |
borderColor: o.benefitBorderColor |
| 192 |
}); |
| 193 |
if (badge.icon) { |
| 194 |
var bIcon = document.createElement('span'); |
| 195 |
bIcon.textContent = badge.icon; |
| 196 |
b.appendChild(bIcon); |
| 197 |
} |
| 198 |
var bText = document.createElement('span'); |
| 199 |
bText.textContent = badge.text || ''; |
| 200 |
b.appendChild(bText); |
| 201 |
badgesRow.appendChild(b); |
| 202 |
}); |
| 203 |
|
| 204 |
block.appendChild(badgesRow); |
| 205 |
} |
| 206 |
|
| 207 |
/* ── Insert ──────────────────────────────────────── */ |
| 208 |
appEl.parentNode.insertBefore(block, appEl); |
| 209 |
appEl.style.display = 'none'; |
| 210 |
}); |
| 211 |
} |
| 212 |
|
| 213 |
if (document.readyState !== 'loading') { init(); } |
| 214 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 215 |
})(); |
| 216 |
|
