Wizard v3: realistic Launch/Grow/Dominate plans, Essentials/Standard/Priority support, monthly/annual toggle, form captures all wizard choices
This commit is contained in:
+149
-122
@@ -24,22 +24,23 @@
|
||||
.demo-badge{position:absolute;top:0.8rem;right:0.8rem;background:rgba(8,8,9,0.75);backdrop-filter:blur(8px);font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);padding:0.3rem 0.7rem;border-radius:2px;border:1px solid rgba(201,165,90,0.2)}
|
||||
.demo-info{padding:1.4rem}.demo-type{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}.demo-name{font-size:1.05rem;font-weight:600;margin-bottom:0.5rem}.demo-desc{font-size:0.78rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}.demo-link{font-size:0.72rem;font-weight:600;color:var(--gold);letter-spacing:0.05em;display:flex;align-items:center;gap:0.4rem}.demo-link::after{content:'→';transition:transform 0.2s}.demo-card:hover .demo-link::after{transform:translateX(4px)}
|
||||
.included-section{padding:5rem 3rem;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.included-inner{max-width:1100px;margin:0 auto}.included-header{text-align:center;margin-bottom:3rem}.included-header h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.included-header p{font-size:0.85rem;color:var(--muted)}.included-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.included-item{text-align:center;padding:1.5rem 1rem}.included-icon{width:44px;height:44px;border-radius:50%;background:var(--gold-dim);border:1px solid rgba(201,165,90,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.included-icon svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.5}.included-item h4{font-size:0.85rem;font-weight:600;margin-bottom:0.4rem}.included-item p{font-size:0.75rem;color:var(--muted);line-height:1.6}
|
||||
.pricing-section{padding:6rem 3rem;max-width:1060px;margin:0 auto;text-align:center}.pricing-section h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.pricing-section>p{font-size:0.85rem;color:var(--muted);margin-bottom:3rem}
|
||||
.pricing-section{padding:6rem 3rem;max-width:1060px;margin:0 auto;text-align:center}.pricing-section h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.pricing-section p{font-size:0.85rem;color:var(--muted);margin-bottom:3rem}
|
||||
.wizard-steps{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:3rem;flex-wrap:wrap}.wizard-step{display:flex;align-items:center;gap:0.4rem;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.wizard-step.active{color:var(--gold)}.wizard-step.done{color:var(--gold)}.wizard-step-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--muted);display:flex;align-items:center;justify-content:center;font-size:0.58rem;font-weight:700;flex-shrink:0}.wizard-step.active .wizard-step-num{border-color:var(--gold);background:var(--gold);color:#080809}.wizard-step.done .wizard-step-num{border-color:var(--gold);background:var(--gold);color:#080809}.wizard-step-divider{width:24px;height:1px;background:var(--border);flex-shrink:0}
|
||||
.wizard-panel{display:none}.wizard-panel.active{display:block;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
||||
.step-eyebrow{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}.step-heading{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:300;margin-bottom:0.4rem}.step-sub{font-size:0.82rem;color:var(--muted);margin-bottom:2rem}
|
||||
.plan-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left;margin-bottom:2rem}.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left;margin-bottom:2rem}
|
||||
.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:'MOST POPULAR';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}
|
||||
.plan-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left;margin-bottom:2rem}
|
||||
.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}
|
||||
.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}
|
||||
.pay-toggle-wrap{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:0.3rem;width:fit-content;margin-left:auto;margin-right:auto}.pay-toggle{background:transparent;border:none;padding:0.5rem 1.4rem;border-radius:6px;font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;color:var(--muted);transition:all 0.2s;font-family:'Inter',sans-serif}.pay-toggle.active{background:var(--gold);color:#080809}.pay-toggle:hover:not(.active){color:var(--text)}
|
||||
.contact-section{padding:6rem 3rem;background:var(--bg-card);border-top:1px solid var(--border)}.contact-inner{max-width:640px;margin:0 auto}.contact-header{text-align:center;margin-bottom:2.5rem}.contact-header h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:0.8rem}.contact-header p{font-size:0.85rem;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-full{grid-column:1/-1}.form-group{display:flex;flex-direction:column;gap:0.4rem}.form-group label{font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}.form-group input,.form-group select,.form-group textarea{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:'Inter',sans-serif;font-size:0.85rem;padding:0.7rem 0.9rem;width:100%;transition:border-color 0.2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:rgba(201,165,90,0.4)}.form-group textarea{resize:vertical;min-height:100px}.form-submit{background:var(--gold);color:#080809;border:none;padding:0.9rem 2.5rem;border-radius:4px;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;width:100%;margin-top:1rem;transition:all 0.3s;font-family:'Inter',sans-serif}.form-submit:hover{background:#e0bc72;transform:translateY(-1px)}.form-note{text-align:center;font-size:0.72rem;color:var(--muted);margin-top:0.8rem}
|
||||
footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}footer p{font-size:0.72rem;color:var(--muted)}footer a{color:var(--gold)}
|
||||
.form-success{display:none;text-align:center;padding:3rem}.form-success.show{display:block}.form-success h3{font-size:1.3rem;margin-bottom:0.5rem}.form-success p{color:var(--muted);font-size:0.85rem}
|
||||
@media(max-width:960px){.plan-cards-3,.support-cards,.plan-cards{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}.duration-cards{grid-template-columns:1fr;max-width:280px}.demos-grid{grid-template-columns:repeat(2,1fr)}.included-grid{grid-template-columns:repeat(2,1fr)}header{padding:1.2rem 1.5rem}.hero{padding:8rem 1.5rem 4rem}.demos-section,.included-section,.pricing-section,.contact-section{padding-left:1.5rem;padding-right:1.5rem}.form-grid{grid-template-columns:1fr}}
|
||||
@media(max-width:960px){.plan-cards-3,.support-cards{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}.duration-cards{grid-template-columns:1fr;max-width:280px}.demos-grid{grid-template-columns:repeat(2,1fr)}.included-grid{grid-template-columns:repeat(2,1fr)}header{padding:1.2rem 1.5rem}.hero{padding:8rem 1.5rem 4rem}.demos-section,.included-section,.pricing-section,.contact-section{padding-left:1.5rem;padding-right:1.5rem}.form-grid{grid-template-columns:1fr}}
|
||||
@media(max-width:600px){.demos-grid{grid-template-columns:1fr}.wizard-steps{gap:0.3rem}.wizard-step-divider{width:14px}}
|
||||
</style>
|
||||
</head>
|
||||
@@ -48,53 +49,153 @@
|
||||
<section class="hero"><p class="hero-eyebrow">6 Restaurant Templates — Ready Now</p><h1>Your restaurant.<br><em>Online. Professional.</em><br>Ready to impress.</h1><p class="hero-desc">Beautiful, mobile-ready websites built for independent restaurants. Custom design, not templates. Includes hosting, domain setup, and AI menu extras.</p><div class="hero-pricing"><span class="from">From</span><span class="price">€499</span><span class="per">one-time setup</span></div></section>
|
||||
<section class="demos-section"><div class="demos-grid"><a href="/demos/ristorante/italian/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80" alt="Italian" loading="lazy"><span class="demo-badge">Italian</span></div><div class="demo-info"><p class="demo-type">Italian · Pizza · Pasta</p><h4 class="demo-name">Trattoria Da Marco</h4><p class="demo-desc">Wood-fired pizza, handmade pasta, wine list. Dark luxury aesthetic with Fraunces typography.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/steakhouse/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=600&q=80" alt="Steakhouse" loading="lazy"><span class="demo-badge">Steakhouse</span></div><div class="demo-info"><p class="demo-type">Steakhouse · Grill · Wine</p><h4 class="demo-name">The Argentine Grill</h4><p class="demo-desc">Premium dry-aged cuts, Malbec wine list, open-fire aesthetic. Bold, moody, sophisticated.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/indian/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&q=80" alt="Indian" loading="lazy"><span class="demo-badge">Indian</span></div><div class="demo-info"><p class="demo-type">Indian · Tandoor · Curry</p><h4 class="demo-name">Maharaja Spice</h4><p class="demo-desc">Rich warm tones, tandoor section, thali specialties, butter chicken focus. Warm and inviting.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/spanish/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80" alt="Spanish" loading="lazy"><span class="demo-badge">Spanish</span></div><div class="demo-info"><p class="demo-type">Spanish · Tapas · Mediterranean</p><h4 class="demo-name">La Bodega del Mar</h4><p class="demo-desc">Light Mediterranean aesthetic, tapas grid, sherry and wine list, paella specials, beach vibes.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/sushi/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=600&q=80" alt="Japanese" loading="lazy"><span class="demo-badge">Japanese</span></div><div class="demo-info"><p class="demo-type">Japanese · Omakase · Izakaya</p><h4 class="demo-name">Kaito Sushi</h4><p class="demo-desc">Editorial minimal design with Japanese typography. Horizontal scrolling menu, omakase feature section.</p><div class="demo-link">View Template</div></div></a><a href="/demos/ristorante/pizza/" class="demo-card" target="_blank"><div class="demo-img"><img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&q=80" alt="Pizza" loading="lazy"><span class="demo-badge">Pizza</span></div><div class="demo-info"><p class="demo-type">Pizza · Casual · Italian</p><h4 class="demo-name">Pizzeria da Marco</h4><p class="demo-desc">Italian flag accent, wood-fired menu, pasta section. Casual but premium, great for delivery.</p><div class="demo-link">View Template</div></div></a></div></section>
|
||||
<section class="included-section"><div class="included-inner"><div class="included-header"><h2>Everything included</h2><p>One price. No surprises. Your site live in days.</p></div><div class="included-grid"><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div><h4>Custom Design</h4><p>Built for your restaurant type — not a generic template</p></div><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></div><h4>Mobile Ready</h4><p>Perfect on every device — phone, tablet, desktop</p></div><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><h4>AI Menu Chat</h4><p>Customers ask the menu in plain language, AI answers</p></div><div class="included-item"><div class="included-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div><h4>Email Support</h4><p>Direct line to us — fast replies, no bots</p></div></div></div></section>
|
||||
<section class="pricing-section" id="pricing"><h2>Build your plan</h2><p>Choose your website, pick your support level, lock in your term.</p>
|
||||
<div class="wizard-steps"><div class="wizard-step active" id="step1Indicator"><div class="wizard-step-num">1</div><span>Website</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step2Indicator"><div class="wizard-step-num">2</div><span>Support</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step3Indicator"><div class="wizard-step-num">3</div><span>Term</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step4Indicator"><div class="wizard-step-num">4</div><span>Summary</span></div></div>
|
||||
<div class="wizard-panel active" id="panel1"><p class="step-eyebrow">Step 1 of 4 — Website Package</p><h3 class="step-heading">Choose your website</h3><p class="step-sub">All plans include 1 year hosting. Setup is one-time.</p><div class="plan-cards-3"><div class="plan-card" onclick="selectPlan('starter')" id="card-starter"><h3>Starter</h3><h4>Your Restaurant Website</h4><div class="plan-price">€499</div><div class="plan-price-note">One-time · then €25/mo hosting</div><ul><li>Custom restaurant template</li><li>Menu + photos + content</li><li>Google Maps + contact form</li><li>Mobile optimised</li><li>Social media links</li><li>1 year hosting included</li></ul></div><div class="plan-card featured" onclick="selectPlan('professional')" id="card-professional"><h3>Professional <span class="ai-badge">+ AI</span></h3><h4>Website + AI Extras</h4><div class="plan-price">€699</div><div class="plan-price-note">One-time · then €30/mo hosting</div><ul><li>Everything in Starter</li><li>AI menu chatbot (24/7)</li><li>AI booking assistant</li><li>Multi-language menu</li><li>1 year hosting included</li></ul></div><div class="plan-card" onclick="selectPlan('enterprise')" id="card-enterprise"><h3>Enterprise <span class="ai-badge">Full AI</span></h3><h4>Website + Full AI Suite</h4><div class="plan-price">€999</div><div class="plan-price-note">One-time · then €35/mo hosting</div><ul><li>Everything in Professional</li><li>AI voice phone assistant</li><li>AI review responder</li><li>AI customer nurture emails</li><li>Dedicated Slack channel</li><li>Priority support line</li><li>1 year hosting included</li></ul></div></div><div class="wizard-nav"><button class="wizard-btn primary" id="btnStep1" onclick="goStep(2)" disabled>Continue →</button></div></div>
|
||||
<div class="wizard-panel" id="panel2"><p class="step-eyebrow">Step 2 of 4 — Monthly Support</p><h3 class="step-heading">Choose your support plan</h3><p class="step-sub">Prepay hours each month. Unused hours roll over. Cancel anytime.</p><div class="support-cards"><div class="support-card" onclick="selectSupport('starter')" id="sup-starter"><div class="s-badge">Starter</div><div class="s-hours">2</div><div class="s-unit">hours / month</div><div class="s-price">€69<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div><div class="s-price-note">≈ €35/hr</div><ul><li>Menu updates</li><li>Seasonal changes</li><li>Photo swaps</li><li>Email support</li></ul></div><div class="support-card featured" onclick="selectSupport('standard')" id="sup-standard"><div class="s-badge">Standard</div><div class="s-hours">4</div><div class="s-unit">hours / month</div><div class="s-price">€119<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div><div class="s-price-note">≈ €30/hr</div><ul><li>Everything in Starter</li><li>New menu sections</li><li>Layout adjustments</li><li>New pages (about, events)</li><li>Priority response</li></ul></div><div class="support-card" onclick="selectSupport('pro')" id="sup-pro"><div class="s-badge">Pro</div><div class="s-hours">8</div><div class="s-unit">hours / month</div><div class="s-price">€219<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div><div class="s-price-note">≈ €27/hr</div><ul><li>Everything in Standard</li><li>Full page redesigns</li><li>New features + integrations</li><li>AI training for your restaurant</li><li>Dedicated Slack channel</li></ul></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 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></div>
|
||||
<div class="wizard-panel" id="panel3"><p class="step-eyebrow">Step 3 of 4 — Commitment Term</p><h3 class="step-heading">How long do you want to commit?</h3><p class="step-sub">Longer commitment = bigger discount on your support plan.</p><div class="duration-cards"><div class="duration-card" onclick="selectDuration(1)" id="dur-1"><div class="dur-label">1 Year</div><div class="dur-desc">Full price. Cancel anytime.</div></div><div class="duration-card" onclick="selectDuration(2)" id="dur-2"><div class="dur-label">2 Years</div><div class="dur-save">Save 5%</div><div class="dur-desc">Billed as 23 months</div></div><div class="duration-card" onclick="selectDuration(3)" id="dur-3">
|
||||
|
||||
<div class="dur-label">3 Years</div><div class="dur-save">Save 10%</div><div class="dur-desc">Billed as 32 months</div></div></div>
|
||||
<section class="pricing-section" id="pricing"><h2>Build your plan</h2><p>Choose your website, pick your support, lock in your commitment.</p>
|
||||
<div class="wizard-steps"><div class="wizard-step active" id="step1Indicator"><div class="wizard-step-num">1</div><span>Website</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step2Indicator"><div class="wizard-step-num">2</div><span>Support</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step3Indicator"><div class="wizard-step-num">3</div><span>Payment</span></div><div class="wizard-step-divider"></div><div class="wizard-step" id="step4Indicator"><div class="wizard-step-num">4</div><span>Summary</span></div></div>
|
||||
<div class="wizard-panel active" id="panel1">
|
||||
<p class="step-eyebrow">Step 1 of 4 — Website Package</p>
|
||||
<h3 class="step-heading">Choose your website</h3>
|
||||
<p class="step-sub">One-time setup fee. Hosting billed monthly from year two.</p>
|
||||
<div class="plan-cards-3">
|
||||
<div class="plan-card" onclick="selectPlan('launch')" id="card-launch">
|
||||
<h3>Launch</h3>
|
||||
<h4>Your Restaurant, Online</h4>
|
||||
<div class="plan-price">€499</div>
|
||||
<div class="plan-price-note">One-time · €20/mo from yr 2</div>
|
||||
<ul>
|
||||
<li>Custom restaurant template</li>
|
||||
<li>Menu + photos + content setup</li>
|
||||
<li>Google Maps + contact form</li>
|
||||
<li>Mobile optimised</li>
|
||||
<li>Social links + basic SEO</li>
|
||||
<li>1 year hosting included</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="plan-card featured" onclick="selectPlan('grow')" id="card-grow">
|
||||
<h3>Grow <span class="ai-badge">+ AI</span></h3>
|
||||
<h4>Smart AI Customer Touchpoints</h4>
|
||||
<div class="plan-price">€799</div>
|
||||
<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>Multi-language menu (EN/ES/FR/DE)</li>
|
||||
<li>AI review assistant — auto-suggested replies</li>
|
||||
<li>1 year hosting included</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="plan-card" onclick="selectPlan('dominate')" id="card-dominate">
|
||||
<h3>Dominate <span class="ai-badge">Full AI</span></h3>
|
||||
<h4>Full AI Voice + Automation</h4>
|
||||
<div class="plan-price">€1,199</div>
|
||||
<div class="plan-price-note">One-time · €45/mo from yr 2</div>
|
||||
<ul>
|
||||
<li>Everything in Grow</li>
|
||||
<li>AI voice phone agent — handles calls, takes orders</li>
|
||||
<li>AI email marketing — automated campaigns</li>
|
||||
<li>AI competitor insights — monthly report</li>
|
||||
<li>Priority support + Slack channel</li>
|
||||
<li>1 year hosting included</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-nav"><button class="wizard-btn primary" id="btnStep1" onclick="goStep(2)" disabled>Continue →</button></div>
|
||||
</div>
|
||||
<div class="wizard-panel" id="panel2">
|
||||
<p class="step-eyebrow">Step 2 of 4 — Monthly Support</p>
|
||||
<h3 class="step-heading">Choose your support plan</h3>
|
||||
<p class="step-sub">Prepay hours each month. Unused hours roll over. Cancel anytime — your website keeps running.</p>
|
||||
<div class="support-cards">
|
||||
<div class="support-card" onclick="selectSupport('essentials')" id="sup-essentials">
|
||||
<div class="s-badge">Essentials</div>
|
||||
<div class="s-hours">2</div>
|
||||
<div class="s-unit">hours / month</div>
|
||||
<div class="s-price">€59<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div>
|
||||
<div class="s-price-note">≈ €30/hr</div>
|
||||
<ul><li>Menu updates</li><li>Seasonal changes</li><li>Photo swaps</li><li>Email support</li></ul>
|
||||
</div>
|
||||
<div class="support-card featured" onclick="selectSupport('standard')" id="sup-standard">
|
||||
<div class="s-badge">Standard</div>
|
||||
<div class="s-hours">4</div>
|
||||
<div class="s-unit">hours / month</div>
|
||||
<div class="s-price">€99<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div>
|
||||
<div class="s-price-note">≈ €25/hr</div>
|
||||
<ul><li>Everything in Essentials</li><li>New menu sections</li><li>Layout adjustments</li><li>New pages (about, events)</li><li>Priority email response</li></ul>
|
||||
</div>
|
||||
<div class="support-card" onclick="selectSupport('priority')" id="sup-priority">
|
||||
<div class="s-badge">Priority</div>
|
||||
<div class="s-hours">8</div>
|
||||
<div class="s-unit">hours / month</div>
|
||||
<div class="s-price">€179<span style="font-size:0.8rem;font-weight:400;color:var(--muted)">/mo</span></div>
|
||||
<div class="s-price-note">≈ €22/hr</div>
|
||||
<ul><li>Everything in Standard</li><li>Full page redesigns</li><li>New features + integrations</li><li>Dedicated Slack channel</li></ul>
|
||||
</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 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>
|
||||
</div>
|
||||
|
||||
<div class="wizard-panel" id="panel3">
|
||||
<p class="step-eyebrow">Step 3 of 4 — Payment & Commitment</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>
|
||||
|
||||
<div class="pay-toggle-wrap">
|
||||
<button class="pay-toggle active" id="toggleMonthly" onclick="setPayFreq('monthly')">Monthly</button>
|
||||
<button class="pay-toggle" id="toggleAnnual" onclick="setPayFreq('annual')">Annual <span style="font-size:0.58rem;opacity:0.7">(save ~2 months)</span></button>
|
||||
</div>
|
||||
|
||||
<div class="duration-label">Choose your commitment length</div>
|
||||
<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>
|
||||
<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>
|
||||
</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">—</span><span class="summary-val" id="s3-support-monthly">—</span></div>
|
||||
<div class="summary-row"><span id="s3-term-label">—</span><span class="summary-val" id="s3-term-val">—</span></div>
|
||||
<div class="summary-row total"><span>Total due today</span><span class="summary-val" id="s3-total">—</span></div>
|
||||
</div>
|
||||
<p class="commitment" id="commitment-text">No lock-in. Cancel support anytime — your website stays live.</p>
|
||||
<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 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-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>
|
||||
<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>
|
||||
|
||||
<!-- STEP 4: Summary -->
|
||||
<div class="wizard-panel" id="panel4">
|
||||
<p class="step-eyebrow">Step 4 of 4 — Your Plan</p>
|
||||
<h3 class="step-heading">You're all set!</h3>
|
||||
<p class="step-sub">Here's your custom package. Ready to get started?</p>
|
||||
<p class="step-eyebrow">Step 4 of 4 — Your Package</p>
|
||||
<h3 class="step-heading">You are all set!</h3>
|
||||
<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>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
|
||||
<div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-term">—</span></div>
|
||||
<div class="summary-row"><span>Support discount</span><span class="summary-val summary-discount" id="s4-discount">—</span></div>
|
||||
<div class="summary-row"><span>Support subtotal</span><span class="summary-val" id="s4-support-total">—</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>
|
||||
<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 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>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT FORM -->
|
||||
<section class="contact-section" id="contact">
|
||||
<div class="contact-inner">
|
||||
<div class="contact-header"><h2>Start your website</h2><p>Tell us about your restaurant — we will be in touch within 24 hours.</p></div>
|
||||
<form id="contactForm" onsubmit="handleSubmit(event)">
|
||||
<input type="hidden" name="wizard_plan" id="wizard_plan" value="">
|
||||
<input type="hidden" name="wizard_support" id="wizard_support" value="">
|
||||
<input type="hidden" name="wizard_duration" id="wizard_duration" value="">
|
||||
<input type="hidden" name="wizard_freq" id="wizard_freq" value="">
|
||||
<input type="hidden" name="wizard_total" id="wizard_total" value="">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Restaurant Name</label><input type="text" name="restaurant" placeholder="La Casa Grande" required></div>
|
||||
<div class="form-group"><label>Contact Name</label><input type="text" name="name" placeholder="Javier" required></div>
|
||||
@@ -116,103 +217,29 @@
|
||||
var selectedPlan = null;
|
||||
var selectedSupport = null;
|
||||
var selectedDuration = null;
|
||||
var selectedFreq = 'monthly';
|
||||
|
||||
var planPrices = {starter: 499, professional: 699, enterprise: 999};
|
||||
var planNames = {starter: 'Starter', professional: 'Professional + AI', enterprise: 'Enterprise Full AI'};
|
||||
var supportPrices = {starter: 69, standard: 119, pro: 219};
|
||||
var supportLabels = {starter: 'Starter (2 hrs/mo)', standard: 'Standard (4 hrs/mo)', pro: 'Pro (8 hrs/mo)'};
|
||||
var durationDiscounts = {1: 0, 2: 0.05, 3: 0.10};
|
||||
var durationLabels = {1: '1 Year', 2: '2 Years', 3: '3 Years'};
|
||||
var durationBilled = {1: 12, 2: 23, 3: 32};
|
||||
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'};
|
||||
|
||||
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;
|
||||
updateS2Summary();
|
||||
}
|
||||
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;
|
||||
updateS2Summary();
|
||||
}
|
||||
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;
|
||||
updateS3Summary();
|
||||
}
|
||||
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 updateS2Summary() {
|
||||
if (!selectedPlan || !selectedSupport) return;
|
||||
document.getElementById('s2-site-name').textContent = planNames[selectedPlan];
|
||||
document.getElementById('s2-site-price').textContent = '€' + planPrices[selectedPlan];
|
||||
document.getElementById('s2-support-label').textContent = 'Support: ' + supportLabels[selectedSupport];
|
||||
document.getElementById('s2-support-price').textContent = '€' + supportPrices[selectedSupport] + '/mo';
|
||||
document.getElementById('s2-monthly-total').textContent = '€' + (planPrices[selectedPlan] + supportPrices[selectedSupport]);
|
||||
}
|
||||
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 updateS3Summary() {
|
||||
if (!selectedPlan || !selectedSupport || !selectedDuration) return;
|
||||
var disc = durationDiscounts[selectedDuration];
|
||||
var totalSupport = supportPrices[selectedSupport] * durationBilled[selectedDuration];
|
||||
var discountAmount = totalSupport * disc;
|
||||
var sitePrice = planPrices[selectedPlan];
|
||||
var totalToday = sitePrice + (totalSupport - discountAmount);
|
||||
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;}
|
||||
|
||||
document.getElementById('s3-site').textContent = planNames[selectedPlan] + ' website';
|
||||
document.getElementById('s3-site-price').textContent = '€' + sitePrice;
|
||||
document.getElementById('s3-support').textContent = supportLabels[selectedSupport] + ' (' + durationLabels[selectedDuration] + ')';
|
||||
document.getElementById('s3-support-monthly').textContent = '€' + supportPrices[selectedSupport] + '/mo';
|
||||
document.getElementById('s3-term-label').textContent = durationLabels[selectedDuration] + ' commitment';
|
||||
document.getElementById('s3-term-val').textContent = disc > 0 ? '-' + Math.round(discountAmount) + '€ (' + Math.round(disc*100) + '% off)' : 'No discount';
|
||||
document.getElementById('s3-total').textContent = '€' + Math.round(totalToday);
|
||||
document.getElementById('commitment-text').textContent = disc > 0 ? durationLabels[selectedDuration] + ' commitment. Cancel anytime — your website stays live.' : 'No lock-in. Cancel support anytime — your website stays live.';
|
||||
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'});}
|
||||
|
||||
// Also update step 4 summary
|
||||
document.getElementById('s4-plan').textContent = planNames[selectedPlan];
|
||||
document.getElementById('s4-site').textContent = '€' + sitePrice;
|
||||
document.getElementById('s4-support').textContent = supportLabels[selectedSupport];
|
||||
document.getElementById('s4-term').textContent = durationLabels[selectedDuration];
|
||||
document.getElementById('s4-discount').textContent = disc > 0 ? '-' + Math.round(discountAmount) + '€' : '—';
|
||||
document.getElementById('s4-support-total').textContent = '€' + Math.round(totalSupport - discountAmount);
|
||||
document.getElementById('s4-grand').textContent = '€' + Math.round(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) updateS3Summary();
|
||||
document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});
|
||||
}
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
var form = document.getElementById('contactForm');
|
||||
var success = document.getElementById('formSuccess');
|
||||
var submitBtn = form.querySelector('.form-submit');
|
||||
var data = new FormData(form);
|
||||
submitBtn.textContent = 'Sending…';
|
||||
submitBtn.disabled = true;
|
||||
fetch('/autojobs/api/contact/telegram', {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams({name: data.get('name'), email: data.get('email'), phone: data.get('phone'), type: data.get('type')||'other', restaurant: data.get('restaurant'), message: data.get('message')})
|
||||
}).catch(function(){}).finally(function(){
|
||||
form.style.display = 'none';
|
||||
success.classList.add('show');
|
||||
success.scrollIntoView({behavior:'smooth',block:'center'});
|
||||
});
|
||||
}
|
||||
function handleSubmit(e){e.preventDefault();var form=document.getElementById('contactForm');var success=document.getElementById('formSuccess');var submitBtn=form.querySelector('.form-submit');var data=new FormData(form);submitBtn.textContent='Sending...';submitBtn.disabled=true;var params=new URLSearchParams({name:data.get('name'),email:data.get('email'),phone:data.get('phone'),type:data.get('type')||'other',restaurant:data.get('restaurant'),message:data.get('message'),wizard_plan:data.get('wizard_plan'),wizard_support:data.get('wizard_support'),wizard_duration:data.get('wizard_duration'),wizard_freq:data.get('wizard_freq'),wizard_total:data.get('wizard_total')});fetch('/autojobs/api/contact/telegram',{method:'POST',body:params}).catch(function(){}).finally(function(){form.style.display='none';success.classList.add('show');success.scrollIntoView({behavior:'smooth',block:'center'});});}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user