haitham/hostpioneers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2 free months on all annual plans - replaces percentage discounts, clearer customer value

Browse Source
This commit is contained in:
Horus AI
2026-04-24 15:25:26 +02:00
parent 65e82a2026
commit 3826f724cf
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/ristorante/index.html
+7 -6
View File
@@ -140,9 +140,9 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
</div>
<div class="wizard-panel" id="panel3">
<p class="step-eyebrow">Step 3 of 4 — Payment & Commitment</p>
<p class="step-eyebrow">Step 3 of 4 — Payment & Commitment <span style="color:#4ade80">· 2 months free on all annual plans</span></p>
<h3 class="step-heading">How do you want to pay?</h3>
<p class="step-sub">All support plans require a minimum 12-month commitment. Pay monthly or save with annual.</p>
<p class="step-sub">All support plans require minimum 12-month commitment. Pay monthly, or choose annual and <strong style="color:#4ade80">get 2 months completely free.</strong></p>
<div class="pay-toggle-wrap">
<button class="pay-toggle active" id="toggleMonthly" onclick="setPayFreq('monthly')">Monthly</button>
@@ -153,7 +153,8 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
<div class="duration-cards">
<div class="duration-card" onclick="selectDuration(1)" id="dur-1">
<div class="dur-label">12 Months</div>
<div class="dur-desc">Monthly payments. Cancel anytime after yr 1.</div>
<div class="dur-save">2 FREE MONTHS</div>
<div class="dur-desc">Pay for 10 months, get 12. Cancel after yr 1.</div>
</div>
<div class="duration-card" onclick="selectDuration(2)" id="dur-2">
<div class="dur-label">24 Months</div>
@@ -232,9 +233,9 @@ var planPrices = {launch: 499, grow: 799, dominate: 1199};
var planNames = {launch: 'Launch', grow: 'Grow + AI', dominate: 'Dominate Full AI'};
var supportPrices = {essentials: 59, standard: 99, priority: 179};
var supportLabels = {essentials: 'Essentials (2 hrs/mo)', standard: 'Standard (4 hrs/mo)', priority: 'Priority (8 hrs/mo)'};
var durationDiscounts = {1: 0, 2: 0.05, 3: 0.10};
var durationDiscounts = {1: 0.167, 2: 0.083, 3: 0.056};
var durationMonths = {1: 12, 2: 24, 3: 36};
var durationLabels = {1: '12 Months', 2: '24 Months', 3: '36 Months'};
var durationLabels = {1: '12 months (10 paid)', 2: '24 months (22 paid)', 3: '36 months (34 paid)'};
function selectPlan(p){selectedPlan=p;document.querySelectorAll('.plan-card').forEach(function(c){c.classList.remove('selected')});document.getElementById('card-'+p).classList.add('selected');document.getElementById('btnStep1').disabled=false;updateAllSummaries()}
function selectSupport(s){selectedSupport=s;document.querySelectorAll('.support-card').forEach(function(c){c.classList.remove('selected')});document.getElementById('sup-'+s).classList.add('selected');document.getElementById('btnStep2').disabled=false;updateAllSummaries()}
@@ -244,7 +245,7 @@ function setPayFreq(f){selectedFreq=f;document.getElementById('toggleMonthly').c
function getMonthlyPayment(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];return Math.round(supportPrices[selectedSupport]*(1-disc));}
function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];var firstMonthSupport=Math.round(supportPrices[selectedSupport]*(1-disc));return planPrices[selectedPlan]+firstMonthSupport;}
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var durMo=durationMonths[selectedDuration];var durLabel=durationLabels[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var savingsPct=Math.round(disc*100);var totalSavings=Math.round(supportPrice*durMo*disc);var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months — 5% off':'36 months — 10% off';var freqLabel=selectedFreq==='annual'?'Annual (save '+savingsPct+'%)':'Monthly';document.getElementById('s2-setup-label').textContent=planNames[selectedPlan]+' website';document.getElementById('s2-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s2-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent=planNames[selectedPlan]+' (setup)';document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total').textContent='€'+totalToday;document.getElementById('s3-savings-label').textContent='';document.getElementById('s3-savings-val').textContent='';if(selectedDuration>1){var remainingSupport=Math.round(supportPrices[selectedSupport]*durMo*(1-disc));document.getElementById('s3-remaining-label').textContent='Remaining support ('+durLabel+')';document.getElementById('s3-remaining-val').textContent='€'+remainingSupport;document.getElementById('s3-savings-label').textContent='Total savings vs monthly';document.getElementById('s3-savings-label').style.color='#4ade80';document.getElementById('s3-savings-label').style.fontWeight='700';document.getElementById('s3-savings-val').textContent='-€'+totalSavings;document.getElementById('s3-savings-val').style.color='#4ade80';document.getElementById('s3-savings-val').style.fontWeight='700';document.getElementById('s4-remaining-label').textContent='Remaining support ('+durLabel+')';document.getElementById('s4-remaining-val').textContent='€'+remainingSupport;document.getElementById('s4-savings-label').textContent='Total savings vs monthly';document.getElementById('s4-savings-label').style.color='#4ade80';document.getElementById('s4-savings-label').style.fontWeight='700';document.getElementById('s4-savings-val').textContent='-€'+totalSavings;document.getElementById('s4-savings-val').style.color='#4ade80';document.getElementById('s4-savings-val').style.fontWeight='700';}else{document.getElementById('s3-remaining-label').textContent='';document.getElementById('s3-remaining-val').textContent='';document.getElementById('s3-savings-label').textContent='Savings';document.getElementById('s3-savings-val').textContent='—';document.getElementById('s4-remaining-label').textContent='';document.getElementById('s4-remaining-val').textContent='';document.getElementById('s4-savings-label').textContent='Savings vs monthly';document.getElementById('s4-savings-val').textContent='—';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice+' one-time';document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel+' €'+monthlyPay+'/mo';document.getElementById('s4-grand').textContent='€'+totalToday;document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durLabel;document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;if(selectedDuration===2)document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 2 years.';if(selectedDuration===3)document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 3 years.';}
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var durMo=durationMonths[selectedDuration];var durLabel=durationLabels[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var savingsPct=Math.round(disc*100);var totalSavings=Math.round(supportPrice*durMo*disc);var commitment=selectedDuration===1?'12 months (2 free)':selectedDuration===2?'24 months (2 free)':'36 months (2 free)';var freqLabel=selectedFreq==='annual'?'Annual — 2 free months':'Monthly';document.getElementById('s2-setup-label').textContent=planNames[selectedPlan]+' website';document.getElementById('s2-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s2-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent=planNames[selectedPlan]+' (setup)';document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total').textContent='€'+totalToday;document.getElementById('s3-savings-label').textContent='';document.getElementById('s3-savings-val').textContent='';if(selectedDuration>1){var remainingSupport=Math.round(supportPrices[selectedSupport]*durMo*(1-disc));document.getElementById('s3-remaining-label').textContent='Remaining '+durLabel+' commitment';document.getElementById('s3-remaining-val').textContent='€'+remainingSupport;document.getElementById('s3-savings-label').textContent='Total savings vs monthly';document.getElementById('s3-savings-label').style.color='#4ade80';document.getElementById('s3-savings-label').style.fontWeight='700';document.getElementById('s3-savings-val').textContent='-€'+totalSavings;document.getElementById('s3-savings-val').style.color='#4ade80';document.getElementById('s3-savings-val').style.fontWeight='700';document.getElementById('s4-remaining-label').textContent='Remaining '+durLabel+' commitment';document.getElementById('s4-remaining-val').textContent='€'+remainingSupport;document.getElementById('s4-savings-label').textContent='Total savings vs monthly';document.getElementById('s4-savings-label').style.color='#4ade80';document.getElementById('s4-savings-label').style.fontWeight='700';document.getElementById('s4-savings-val').textContent='-€'+totalSavings;document.getElementById('s4-savings-val').style.color='#4ade80';document.getElementById('s4-savings-val').style.fontWeight='700';}else{document.getElementById('s3-remaining-label').textContent='';document.getElementById('s3-remaining-val').textContent='';document.getElementById('s3-savings-label').textContent='Savings';document.getElementById('s3-savings-val').textContent='—';document.getElementById('s4-remaining-label').textContent='';document.getElementById('s4-remaining-val').textContent='';document.getElementById('s4-savings-label').textContent='Savings vs monthly';document.getElementById('s4-savings-val').textContent='—';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice+' one-time';document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel+' €'+monthlyPay+'/mo';document.getElementById('s4-grand').textContent='€'+totalToday;document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durLabel;document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;if(selectedDuration===2)document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 2 years.';if(selectedDuration===3)document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 3 years.';}
function goStep(n){document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});document.getElementById('panel'+n).classList.add('active');for(var i=1;i<=4;i++){var ind=document.getElementById('step'+i+'Indicator');ind.classList.remove('active','done');if(i<n)ind.classList.add('done');if(i===n)ind.classList.add('active');}if(n===4)updateAllSummaries();document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});}