Fix WhatsApp to Launch only, add 36mo option (10% off), fix payment logic, clearer setup vs monthly breakdown
This commit is contained in:
+24
-19
@@ -32,7 +32,7 @@ header{padding:2rem 3rem;display:flex;justify-content:space-between;align-items:
|
||||
.plan-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.8rem 1.5rem;cursor:pointer;transition:all 0.25s;position:relative}.plan-card:hover{border-color:rgba(201,165,90,0.3);transform:translateY(-2px)}.plan-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.plan-card.featured{border-color:rgba(201,165,90,0.35)}.plan-card.featured::before{content:'BEST VALUE';position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gold);color:#080809;font-size:0.52rem;font-weight:700;letter-spacing:0.12em;padding:0.22rem 0.6rem;border-radius:0 0 4px 4px;white-space:nowrap}.plan-card h3{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}.plan-card h4{font-size:1.1rem;font-weight:600;margin-bottom:0.4rem}.plan-card .plan-price{font-size:2rem;font-weight:700;color:var(--gold);margin-bottom:0.15rem}.plan-card .plan-price-note{font-size:0.68rem;color:var(--muted);margin-bottom:1.2rem}.plan-card ul{list-style:none;display:flex;flex-direction:column;gap:0.45rem}.plan-card li{font-size:0.73rem;color:var(--muted);display:flex;align-items:center;gap:0.5rem}.plan-card li::before{content:'✓';color:var(--gold);font-weight:700;flex-shrink:0}
|
||||
.ai-badge{display:inline-block;background:var(--gold-dim);border:1px solid rgba(201,165,90,0.2);color:var(--gold);font-size:0.52rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.45rem;border-radius:2px;margin-left:0.3rem;vertical-align:middle}
|
||||
.support-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2rem}.support-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.6rem 1.2rem;cursor:pointer;transition:all 0.25s;text-align:center}.support-card:hover{border-color:rgba(201,165,90,0.3)}.support-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.support-card.featured{border-color:rgba(201,165,90,0.3)}.support-card .s-badge{font-size:0.58rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);margin-bottom:0.7rem}.support-card .s-hours{font-size:3rem;font-weight:700;color:var(--text);line-height:1;margin-bottom:0.2rem}.support-card.selected .s-hours{color:var(--gold)}.support-card .s-unit{font-size:0.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.7rem}.support-card .s-price{font-size:1.7rem;font-weight:700;color:var(--gold);margin-bottom:0.1rem}.support-card .s-price-note{font-size:0.62rem;color:var(--muted);margin-bottom:0.8rem}.support-card ul{list-style:none;text-align:left;display:flex;flex-direction:column;gap:0.38rem}.support-card li{font-size:0.7rem;color:var(--muted);padding-left:1rem;position:relative}.support-card li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700;font-size:0.6rem}
|
||||
.duration-label{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}.duration-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;max-width:640px;margin-left:auto;margin-right:auto}.duration-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.4rem 1rem;cursor:pointer;transition:all 0.25s;text-align:center}.duration-card:hover{border-color:rgba(201,165,90,0.3)}.duration-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.duration-card .dur-label{font-size:1.05rem;font-weight:700;margin-bottom:0.3rem;color:var(--text)}.duration-card.selected .dur-label{color:var(--gold)}.duration-card .dur-save{font-size:0.62rem;font-weight:700;color:#4ade80;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.35rem}.duration-card .dur-desc{font-size:0.65rem;color:var(--muted);line-height:1.5}
|
||||
.duration-label{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}.duration-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;max-width:760px;margin-left:auto;margin-right:auto}.duration-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.4rem 1rem;cursor:pointer;transition:all 0.25s;text-align:center}.duration-card:hover{border-color:rgba(201,165,90,0.3)}.duration-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.duration-card .dur-label{font-size:1.05rem;font-weight:700;margin-bottom:0.3rem;color:var(--text)}.duration-card.selected .dur-label{color:var(--gold)}.duration-card .dur-save{font-size:0.62rem;font-weight:700;color:#4ade80;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.35rem}.duration-card .dur-desc{font-size:0.65rem;color:var(--muted);line-height:1.5}
|
||||
.price-summary{background:var(--bg-card);border:1px solid rgba(201,165,90,0.2);border-radius:8px;padding:1.5rem 1.6rem;max-width:460px;margin:0 auto 1.5rem;text-align:left}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;font-size:0.8rem;color:var(--muted)}.summary-row.total{border-top:1px solid var(--border);margin-top:0.5rem;padding-top:0.9rem;font-size:0.95rem;font-weight:600;color:var(--text)}.summary-row .summary-val{font-weight:600;color:var(--text)}.summary-row.total .summary-val{font-size:1.1rem;color:var(--gold);font-weight:700}.summary-discount{color:#4ade80;font-weight:600}
|
||||
.wizard-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}.wizard-btn{background:transparent;border:1px solid rgba(201,165,90,0.25);color:var(--gold);padding:0.6rem 1.6rem;border-radius:4px;font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;font-family:'Inter',sans-serif}.wizard-btn:hover{background:rgba(201,165,90,0.08);border-color:rgba(201,165,90,0.4)}.wizard-btn.primary{background:var(--gold);color:#080809;border-color:var(--gold)}.wizard-btn.primary:hover{background:#e0bc72}.wizard-btn:disabled{opacity:0.35;cursor:not-allowed}
|
||||
.commitment{text-align:center;font-size:0.68rem;color:var(--muted);margin-top:1rem;max-width:400px;margin-left:auto;margin-right:auto}
|
||||
@@ -67,6 +67,7 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
||||
<li>Google Maps + contact form</li>
|
||||
<li>Mobile optimised</li>
|
||||
<li>Social links + basic SEO</li>
|
||||
<li>WhatsApp integration — AI answers & takes orders</li>
|
||||
<li>1 year hosting included</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -77,8 +78,7 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
||||
<div class="plan-price-note">One-time · €30/mo from yr 2</div>
|
||||
<ul>
|
||||
<li>Everything in Launch</li>
|
||||
<li>AI menu chatbot — customers ask in plain language</li>
|
||||
<li>AI booking assistant — 24/7 reservations</li>
|
||||
<li>AI Chatbot — answers questions, takes reservations 24/7</li>
|
||||
<li>Multi-language menu (EN/ES/FR/DE)</li>
|
||||
<li>AI review assistant — auto-suggested replies</li>
|
||||
<li>1 year hosting included</li>
|
||||
@@ -132,8 +132,8 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
||||
</div>
|
||||
</div>
|
||||
<div class="price-summary" id="priceSummary2">
|
||||
<div class="summary-row"><span id="s2-site-name">—</span><span class="summary-val" id="s2-site-price">—</span></div>
|
||||
<div class="summary-row"><span id="s2-support-label">Support: —</span><span class="summary-val" id="s2-support-price">—</span></div>
|
||||
<div class="summary-row"><span id="s2-setup-label">Website setup</span><span class="summary-val" id="s2-setup-price">—</span></div>
|
||||
<div class="summary-row"><span id="s2-support-label">Support plan</span><span class="summary-val" id="s2-support-price">—</span></div>
|
||||
<div class="summary-row total"><span>Est. monthly total</span><span class="summary-val" id="s2-monthly-total">—</span></div>
|
||||
</div>
|
||||
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(1)">← Back</button><button class="wizard-btn primary" id="btnStep2" onclick="goStep(3)" disabled>Continue →</button></div>
|
||||
@@ -157,16 +157,21 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
||||
</div>
|
||||
<div class="duration-card" onclick="selectDuration(2)" id="dur-2">
|
||||
<div class="dur-label">24 Months</div>
|
||||
<div class="dur-save">Best Value</div>
|
||||
<div class="dur-desc">~€[X]/mo. Lock in low rate for 2 years.</div>
|
||||
<div class="dur-save">5% OFF</div>
|
||||
<div class="dur-desc">Support billed monthly. Save ~5% vs monthly.</div>
|
||||
</div>
|
||||
<div class="duration-card" onclick="selectDuration(3)" id="dur-3">
|
||||
<div class="dur-label">36 Months</div>
|
||||
<div class="dur-save">10% OFF</div>
|
||||
<div class="dur-desc">Support billed monthly. Save ~10% vs monthly.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-summary" id="priceSummary3">
|
||||
<div class="summary-row"><span id="s3-site">—</span><span class="summary-val" id="s3-site-price">—</span></div>
|
||||
<div class="summary-row"><span id="s3-support-label">Support: —</span><span class="summary-val" id="s3-support-price">—</span></div>
|
||||
<div class="summary-row"><span id="s3-setup-label">Website setup (one-time)</span><span class="summary-val" id="s3-setup-price">—</span></div>
|
||||
<div class="summary-row"><span id="s3-support-label">Support plan</span><span class="summary-val" id="s3-support-price">—</span></div>
|
||||
<div class="summary-row"><span id="s3-freq-label">—</span><span class="summary-val" id="s3-freq-price">—</span></div>
|
||||
<div class="summary-row total"><span id="s3-total-label">Total due today</span><span class="summary-val" id="s3-total">—</span></div>
|
||||
<div class="summary-row total"><span id="s3-total-label">Due today</span><span class="summary-val" id="s3-total">—</span></div>
|
||||
</div>
|
||||
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(2)">← Back</button><button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button></div>
|
||||
</div>
|
||||
@@ -177,11 +182,11 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
||||
<p class="step-sub">Here is your custom package. Ready to get started?</p>
|
||||
<div class="price-summary" id="priceSummary4">
|
||||
<div class="summary-row"><span>Website plan</span><span class="summary-val" id="s4-plan">—</span></div>
|
||||
<div class="summary-row"><span>Website setup</span><span class="summary-val" id="s4-site">—</span></div>
|
||||
<div class="summary-row"><span>Website setup (one-time)</span><span class="summary-val" id="s4-site">—</span></div>
|
||||
<div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
|
||||
<div class="summary-row"><span>Support payment</span><span class="summary-val" id="s4-pay">—</span></div>
|
||||
<div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-commitment">—</span></div>
|
||||
<div class="summary-row"><span>Payment</span><span class="summary-val" id="s4-pay">—</span></div>
|
||||
<div class="summary-row total"><span>Total due today</span><span class="summary-val" id="s4-grand">—</span></div>
|
||||
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s4-grand">—</span></div>
|
||||
</div>
|
||||
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(3)">← Edit</button><button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button></div>
|
||||
</div>
|
||||
@@ -223,19 +228,19 @@ 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.16};
|
||||
var durationMonths = {1: 12, 2: 24};
|
||||
var durationLabels = {1: '12 Months', 2: '24 Months'};
|
||||
var durationDiscounts = {1: 0, 2: 0.05, 3: 0.10};
|
||||
var durationMonths = {1: 12, 2: 24, 3: 36};
|
||||
var durationLabels = {1: '12 Months', 2: '24 Months', 3: '36 Months'};
|
||||
|
||||
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()}
|
||||
function selectDuration(d){selectedDuration=d;document.querySelectorAll('.duration-card').forEach(function(c){c.classList.remove('selected')});document.getElementById('dur-'+d).classList.add('selected');document.getElementById('btnStep3').disabled=false;updateAllSummaries()}
|
||||
function setPayFreq(f){selectedFreq=f;document.getElementById('toggleMonthly').classList.toggle('active',f==='monthly');document.getElementById('toggleAnnual').classList.toggle('active',f==='annual');updateAllSummaries()}
|
||||
|
||||
function getMonthlyPayment(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var base=planPrices[selectedPlan]+supportPrices[selectedSupport];if(selectedFreq==='monthly'){return base;if(selectedDuration===1)return base;var disc=durationDiscounts[selectedDuration];return Math.round(base*(1-disc));}else{var totalMo=durationMonths[selectedDuration];var disc=durationDiscounts[selectedDuration];return Math.round((planPrices[selectedPlan]+supportPrices[selectedSupport]*totalMo*(1-disc))/totalMo);}}
|
||||
function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;if(selectedFreq==='monthly'){return planPrices[selectedPlan]+supportPrices[selectedSupport];}else{var disc=durationDiscounts[selectedDuration];return planPrices[selectedPlan]+Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));}}
|
||||
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 monthlySupport=Math.round(supportPrices[selectedSupport]*(1-disc));if(selectedFreq==='monthly'){return planPrices[selectedPlan]+monthlySupport;}else{return planPrices[selectedPlan]+Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));}}
|
||||
|
||||
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var saveAmt=selectedFreq==='annual'?Math.round(supportPrice*durationMonths[selectedDuration]*disc):0;var commitment=selectedDuration===1?'12 months (cancel anytime)':'24 months (best value)';var freqLabel=selectedFreq==='annual'?'Annual (~'+Math.round(monthlyPay)+'/mo, save €'+saveAmt+')':'Monthly';document.getElementById('s2-site-name').textContent=planNames[selectedPlan];document.getElementById('s2-site-price').textContent='€'+sitePrice;document.getElementById('s2-support-label').textContent='Support: '+supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-site').textContent=planNames[selectedPlan]+' website';document.getElementById('s3-site-price').textContent='€'+sitePrice;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-label').textContent=selectedFreq==='annual'?'Total ('+durationLabels[selectedDuration]+')':selectedDuration===1?'Due today':'Total due today';document.getElementById('s3-total').textContent='€'+totalToday;if(selectedDuration===2){document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save ~€'+saveAmt+' over 2 years.';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice;document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel;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=durationLabels[selectedDuration];document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;}
|
||||
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var saveAmt=selectedFreq==='annual'?Math.round(supportPrice*durationMonths[selectedDuration]*disc):0;var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months (5% off support)':'36 months (10% off support)';var freqLabel=selectedFreq==='annual'?'Annual (~'+Math.round(monthlyPay)+'/mo, save €'+saveAmt+')':'Monthly';document.getElementById('s2-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s2-setup-price').textContent='€'+sitePrice+' (one-time)';document.getElementById('s2-support-label').textContent='Support: '+supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent='Website: '+planNames[selectedPlan];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-label').textContent='Due today';document.getElementById('s3-total').textContent='€'+totalToday;if(selectedDuration===2){document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save ~€'+saveAmt+' over 2 years.';}if(selectedDuration===3){document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save ~€'+saveAmt+' over 3 years.';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice;document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel;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=durationLabels[selectedDuration];document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;}
|
||||
|
||||
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'});}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user