Redesign pricing wizard: 3 website plans (€499/€699/€999) + 3 support tiers + 1yr/2yr(5%)/3yr(10%) commitment
This commit is contained in:
+135
-572
@@ -6,618 +6,193 @@
|
|||||||
<title>Restaurant Website Templates — HostPioneers</title>
|
<title>Restaurant Website Templates — HostPioneers</title>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||||
:root {
|
:root{--bg:#080809;--bg-card:#111114;--border:rgba(255,255,255,0.07);--text:#f0ede8;--muted:#6b6560;--gold:#c9a55a;--gold-dim:rgba(201,165,90,0.15)}
|
||||||
--bg: #080809;
|
html{scroll-behavior:smooth}
|
||||||
--bg-card: #111114;
|
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
|
||||||
--border: rgba(255,255,255,0.07);
|
header{padding:2rem 3rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,8,9,0.9);backdrop-filter:blur(16px)}
|
||||||
--text: #f0ede8;
|
.header-logo{font-size:0.8rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase}.header-logo span{color:var(--gold)}
|
||||||
--muted: #6b6560;
|
.header-cta{background:var(--gold);color:#080809;padding:0.55rem 1.5rem;border-radius:2px;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border:none;transition:all 0.3s}.header-cta:hover{background:#e0bc72;transform:translateY(-1px)}
|
||||||
--gold: #c9a55a;
|
.hero{padding:10rem 3rem 6rem;max-width:860px;margin:0 auto;text-align:center}
|
||||||
--gold-dim: rgba(201,165,90,0.15);
|
.hero-eyebrow{font-size:0.68rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
|
||||||
}
|
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:300;line-height:1.15;margin-bottom:1.5rem}.hero h1 em{font-style:italic;color:var(--gold)}
|
||||||
html { scroll-behavior: smooth; }
|
.hero-desc{font-size:0.95rem;color:var(--muted);max-width:520px;margin:0 auto 2.5rem;line-height:1.8;font-weight:300}
|
||||||
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
|
.hero-pricing{display:inline-flex;align-items:baseline;gap:0.5rem;background:var(--gold-dim);border:1px solid rgba(201,165,90,0.2);padding:0.8rem 2rem;border-radius:2px}.hero-pricing .from{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}.hero-pricing .price{font-size:1.8rem;font-weight:700;color:var(--gold)}.hero-pricing .per{font-size:0.75rem;color:var(--muted)}
|
||||||
a { color: inherit; text-decoration: none; }
|
.demos-section{padding:4rem 3rem 6rem;max-width:1280px;margin:0 auto}.demos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
|
||||||
|
.demo-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color 0.3s,transform 0.3s;cursor:pointer;display:block}.demo-card:hover{border-color:rgba(201,165,90,0.35);transform:translateY(-6px)}.demo-card:hover .demo-img img{transform:scale(1.04)}
|
||||||
/* ── HEADER ── */
|
.demo-img{height:200px;overflow:hidden;position:relative}.demo-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
|
||||||
header { padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,8,9,0.9); backdrop-filter: blur(16px); }
|
.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)}
|
||||||
.header-logo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
|
.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)}
|
||||||
.header-logo span { color: var(--gold); }
|
.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}
|
||||||
.header-cta { background: var(--gold); color: #080809; padding: 0.55rem 1.5rem; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.3s; }
|
.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}
|
||||||
.header-cta:hover { background: #e0bc72; transform: translateY(-1px); }
|
.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)}}
|
||||||
/* ── HERO ── */
|
.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}
|
||||||
.hero { padding: 10rem 3rem 6rem; max-width: 860px; margin: 0 auto; text-align: center; }
|
.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}
|
||||||
.hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
.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}
|
||||||
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.5rem; }
|
.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}
|
||||||
.hero h1 em { font-style: italic; color: var(--gold); }
|
.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}
|
||||||
.hero-desc { font-size: 0.95rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; font-weight: 300; }
|
.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}
|
||||||
.hero-pricing { display: inline-flex; align-items: baseline; gap: 0.5rem; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); padding: 0.8rem 2rem; border-radius: 2px; }
|
.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}
|
||||||
.hero-pricing .from { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
|
.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}
|
||||||
.hero-pricing .price { font-size: 1.8rem; font-weight: 700; color: var(--gold); }
|
.commitment{text-align:center;font-size:0.68rem;color:var(--muted);margin-top:1rem;max-width:400px;margin-left:auto;margin-right:auto}
|
||||||
.hero-pricing .per { font-size: 0.75rem; color: var(--muted); }
|
.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)}
|
||||||
/* ── DEMOS GRID ── */
|
.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}
|
||||||
.demos-section { padding: 4rem 3rem 6rem; max-width: 1280px; margin: 0 auto; }
|
@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}}
|
||||||
.demos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
@media(max-width:600px){.demos-grid{grid-template-columns:1fr}.wizard-steps{gap:0.3rem}.wizard-step-divider{width:14px}}
|
||||||
.demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; cursor: pointer; display: block; }
|
|
||||||
.demo-card:hover { border-color: rgba(201,165,90,0.35); transform: translateY(-6px); }
|
|
||||||
.demo-card:hover .demo-img img { transform: scale(1.04); }
|
|
||||||
.demo-img { height: 200px; overflow: hidden; position: relative; }
|
|
||||||
.demo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
|
|
||||||
.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); }
|
|
||||||
|
|
||||||
/* ── WHAT'S INCLUDED ── */
|
|
||||||
.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; }
|
|
||||||
|
|
||||||
/* ── WIZARD PRICING ── */
|
|
||||||
.pricing-section { padding: 6rem 3rem; max-width: 960px; 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 */
|
|
||||||
.wizard-steps { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 3rem; }
|
|
||||||
.wizard-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
|
|
||||||
.wizard-step.active { color: var(--gold); }
|
|
||||||
.wizard-step.done { color: var(--gold); }
|
|
||||||
.wizard-step-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--muted); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; }
|
|
||||||
.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: 40px; height: 1px; background: var(--border); }
|
|
||||||
|
|
||||||
/* Step panels */
|
|
||||||
.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); } }
|
|
||||||
|
|
||||||
/* Plan cards */
|
|
||||||
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; max-width: 760px; margin: 0 auto 2rem; }
|
|
||||||
.plan-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 8px; padding: 2rem; 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.3); }
|
|
||||||
.plan-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; left: 2rem; background: var(--gold); color: #080809; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.3rem 0.8rem; border-radius: 0 0 4px 4px; }
|
|
||||||
.plan-card h3 { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
|
|
||||||
.plan-card h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }
|
|
||||||
.plan-card .plan-price { font-size: 2.2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.2rem; }
|
|
||||||
.plan-card .plan-price-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.5rem; }
|
|
||||||
.plan-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
|
|
||||||
.plan-card li { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
|
|
||||||
.plan-card li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
|
|
||||||
.plan-card .ai-badge { display: inline-block; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); color: var(--gold); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 2px; margin-left: 0.4rem; }
|
|
||||||
|
|
||||||
/* Duration selector */
|
|
||||||
.duration-section { max-width: 680px; margin: 0 auto; }
|
|
||||||
.duration-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
|
|
||||||
.duration-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
|
|
||||||
.duration-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 8px; padding: 1.5rem 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.1rem; font-weight: 700; margin-bottom: 0.3rem; }
|
|
||||||
.duration-card .dur-save { font-size: 0.68rem; font-weight: 700; color: #4ade80; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
|
|
||||||
.duration-card .dur-desc { font-size: 0.7rem; color: var(--muted); line-height: 1.5; }
|
|
||||||
.duration-card.selected .dur-label { color: var(--gold); }
|
|
||||||
|
|
||||||
/* Price summary */
|
|
||||||
.price-summary { background: var(--bg-card); border: 1px solid rgba(201,165,90,0.2); border-radius: 8px; padding: 1.8rem 2rem; max-width: 520px; margin: 0 auto 2rem; text-align: left; }
|
|
||||||
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.85rem; color: var(--muted); }
|
|
||||||
.summary-row.total { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--text); }
|
|
||||||
.summary-row .summary-val { font-weight: 600; color: var(--text); }
|
|
||||||
.summary-row.total .summary-val { font-size: 1.2rem; color: var(--gold); font-weight: 700; }
|
|
||||||
.summary-discount { color: #4ade80; font-weight: 600; }
|
|
||||||
|
|
||||||
/* Wizard nav */
|
|
||||||
.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.7rem 2rem; border-radius: 4px; font-size: 0.72rem; 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.4; cursor: not-allowed; }
|
|
||||||
|
|
||||||
/* Commitment badge */
|
|
||||||
.commitment { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 1rem; }
|
|
||||||
|
|
||||||
/* ── CONTACT FORM ── */
|
|
||||||
.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 ── */
|
|
||||||
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); }
|
|
||||||
|
|
||||||
/* ── SUCCESS STATE ── */
|
|
||||||
.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; }
|
|
||||||
|
|
||||||
/* ── RESPONSIVE ── */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.demos-grid { grid-template-columns: repeat(2, 1fr); }
|
|
||||||
.included-grid { grid-template-columns: repeat(2, 1fr); }
|
|
||||||
.plan-cards { grid-template-columns: 1fr; max-width: 420px; }
|
|
||||||
.duration-cards { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; }
|
|
||||||
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; }
|
|
||||||
.wizard-steps { flex-wrap: wrap; }
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.demos-grid { grid-template-columns: 1fr; }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header><div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div><button class="header-cta" onclick="document.getElementById('pricing').scrollIntoView({behavior:'smooth'})">Build Your Site</button></header>
|
||||||
|
<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">
|
||||||
|
|
||||||
<header>
|
<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>
|
||||||
<div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div>
|
|
||||||
<button class="header-cta" onclick="document.getElementById('pricing').scrollIntoView({behavior:'smooth'})">Build Your Site</button>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- HERO -->
|
|
||||||
<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>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- DEMOS -->
|
|
||||||
<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 restaurant" 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 restaurant" 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 restaurant" 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 restaurant" 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 restaurant" 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>
|
|
||||||
|
|
||||||
<!-- WHAT'S INCLUDED -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- WIZARD PRICING -->
|
|
||||||
<section class="pricing-section" id="pricing">
|
|
||||||
<h2>Build your plan</h2>
|
|
||||||
<p>Pick your website package, then lock in your support plan. The longer the commitment, the more you save.</p>
|
|
||||||
|
|
||||||
<!-- Steps indicator -->
|
|
||||||
<div class="wizard-steps">
|
|
||||||
<div class="wizard-step active" id="step1Indicator">
|
|
||||||
<div class="wizard-step-num">1</div>
|
|
||||||
<span>Choose Plan</span>
|
|
||||||
</div>
|
|
||||||
<div class="wizard-step-divider"></div>
|
|
||||||
<div class="wizard-step" id="step2Indicator">
|
|
||||||
<div class="wizard-step-num">2</div>
|
|
||||||
<span>Support Length</span>
|
|
||||||
</div>
|
|
||||||
<div class="wizard-step-divider"></div>
|
|
||||||
<div class="wizard-step" id="step3Indicator">
|
|
||||||
<div class="wizard-step-num">3</div>
|
|
||||||
<span>Summary</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- STEP 1: Choose Plan -->
|
|
||||||
<div class="wizard-panel active" id="panel1">
|
|
||||||
<div class="plan-cards">
|
|
||||||
<div class="plan-card featured" 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 setup · 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" onclick="selectPlan('professional')" id="card-professional">
|
|
||||||
<h3>Professional <span class="ai-badge">+ AI Suite</span></h3>
|
|
||||||
<h4>Website + Full AI Extras</h4>
|
|
||||||
<div class="plan-price">€899</div>
|
|
||||||
<div class="plan-price-note">One-time setup · 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>AI voice phone assistant</li>
|
|
||||||
<li>AI review responder</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>
|
|
||||||
|
|
||||||
<!-- STEP 2: Choose Duration -->
|
|
||||||
<div class="wizard-panel" id="panel2">
|
|
||||||
<div class="duration-section">
|
|
||||||
<p class="duration-label">How long do you want to commit?</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</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>
|
|
||||||
|
|
||||||
<div class="price-summary" id="priceSummary2">
|
|
||||||
<div class="summary-row">
|
|
||||||
<span id="summary-plan-name">Starter Website</span>
|
|
||||||
<span class="summary-val" id="summary-site-price">€499</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row">
|
|
||||||
<span id="summary-support-label">1 yr support (2 hrs/mo)</span>
|
|
||||||
<span class="summary-val" id="summary-support-price">—</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row total">
|
|
||||||
<span>Total due today</span>
|
|
||||||
<span class="summary-val" id="summary-total-2">€499</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="commitment" id="commitment-text">No lock-in. Cancel support anytime — your website stays live.</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>See Summary →</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- STEP 3: Summary -->
|
|
||||||
<div class="wizard-panel" id="panel3">
|
|
||||||
<div class="price-summary" id="priceSummary3">
|
<div class="price-summary" id="priceSummary3">
|
||||||
<div class="summary-row">
|
<div class="summary-row"><span id="s3-site">—</span><span class="summary-val" id="s3-site-price">—</span></div>
|
||||||
<span>Plan</span>
|
<div class="summary-row"><span id="s3-support">—</span><span class="summary-val" id="s3-support-monthly">—</span></div>
|
||||||
<span class="summary-val" id="s3-plan">—</span>
|
<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>
|
</div>
|
||||||
<div class="summary-row">
|
<p class="commitment" id="commitment-text">No lock-in. Cancel support anytime — your website stays live.</p>
|
||||||
<span>Website setup</span>
|
<div class="wizard-nav">
|
||||||
<span class="summary-val" id="s3-site">—</span>
|
<button class="wizard-btn" onclick="goStep(2)">← Back</button>
|
||||||
</div>
|
<button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button>
|
||||||
<div class="summary-row">
|
|
||||||
<span>Support</span>
|
|
||||||
<span class="summary-val" id="s3-support">—</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row">
|
|
||||||
<span>Discount</span>
|
|
||||||
<span class="summary-val summary-discount" id="s3-discount">—</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row total">
|
|
||||||
<span>Due today</span>
|
|
||||||
<span class="summary-val" id="s3-total">—</span>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
<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 total"><span>Total due today</span><span class="summary-val" id="s4-grand">—</span></div>
|
||||||
|
</div>
|
||||||
<div class="wizard-nav">
|
<div class="wizard-nav">
|
||||||
<button class="wizard-btn" onclick="goStep(2)">← Edit</button>
|
<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>
|
<button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CONTACT FORM -->
|
<!-- CONTACT FORM -->
|
||||||
<section class="contact-section" id="contact">
|
<section class="contact-section" id="contact">
|
||||||
<div class="contact-inner">
|
<div class="contact-inner">
|
||||||
<div class="contact-header">
|
<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>
|
||||||
<h2>Start your website</h2>
|
|
||||||
<p>Tell us about your restaurant — we'll be in touch within 24 hours.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form id="contactForm" onsubmit="handleSubmit(event)">
|
<form id="contactForm" onsubmit="handleSubmit(event)">
|
||||||
<div class="form-grid">
|
<div class="form-grid">
|
||||||
<div class="form-group">
|
<div class="form-group"><label>Restaurant Name</label><input type="text" name="restaurant" placeholder="La Casa Grande" required></div>
|
||||||
<label>Restaurant Name</label>
|
<div class="form-group"><label>Contact Name</label><input type="text" name="name" placeholder="Javier" required></div>
|
||||||
<input type="text" name="restaurant" placeholder="La Casa Grande" required>
|
<div class="form-group"><label>Phone</label><input type="tel" name="phone" placeholder="+34 600 000 000"></div>
|
||||||
</div>
|
<div class="form-group"><label>Email</label><input type="email" name="email" placeholder="javier@lacasa.es" required></div>
|
||||||
<div class="form-group">
|
<div class="form-group form-full"><label>Restaurant Type</label><select name="type"><option value="">Select type...</option><option value="spanish">Spanish / Tapas</option><option value="italian">Italian / Pizza / Pasta</option><option value="steakhouse">Steakhouse / Grill</option><option value="indian">Indian / Asian</option><option value="sushi">Japanese / Sushi</option><option value="seafood">Seafood</option><option value="other">Fusion / Other</option></select></div>
|
||||||
<label>Contact Name</label>
|
<div class="form-group form-full"><label>Tell us about your restaurant (optional)</label><textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea></div>
|
||||||
<input type="text" name="name" placeholder="Javier" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Phone</label>
|
|
||||||
<input type="tel" name="phone" placeholder="+34 600 000 000">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Email</label>
|
|
||||||
<input type="email" name="email" placeholder="javier@lacasa.es" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group form-full">
|
|
||||||
<label>Restaurant Type</label>
|
|
||||||
<select name="type">
|
|
||||||
<option value="">Select type...</option>
|
|
||||||
<option value="spanish">Spanish / Tapas</option>
|
|
||||||
<option value="italian">Italian / Pizza / Pasta</option>
|
|
||||||
<option value="steakhouse">Steakhouse / Grill</option>
|
|
||||||
<option value="indian">Indian / Asian</option>
|
|
||||||
<option value="sushi">Japanese / Sushi</option>
|
|
||||||
<option value="seafood">Seafood</option>
|
|
||||||
<option value="other">Fusion / Other</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group form-full">
|
|
||||||
<label>Tell us about your restaurant (optional)</label>
|
|
||||||
<textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="form-submit">Send Enquiry</button>
|
<button type="submit" class="form-submit">Send Enquiry</button>
|
||||||
<p class="form-note">No spam. No commitment. Just a real conversation.</p>
|
<p class="form-note">No spam. No commitment. Just a real conversation.</p>
|
||||||
</form>
|
</form>
|
||||||
|
<div class="form-success" id="formSuccess"><h3>Message sent!</h3><p>We will be in touch within 24 hours. Check your email.</p></div>
|
||||||
<div class="form-success" id="formSuccess">
|
|
||||||
<h3>Message sent!</h3>
|
|
||||||
<p>We'll be in touch within 24 hours. Check your email.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer><p>© 2012-2026 <a href="https://hostpioneers.com">HostPioneers.com</a> — HostPioneers, Benalmádena Costa</p></footer>
|
||||||
<p>© 2012-2026 <a href="https://hostpioneers.com">HostPioneers.com</a> — HostPioneers, Benalmádena Costa</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// ── Wizard state ──
|
var selectedPlan = null;
|
||||||
var selectedPlan = null; // 'starter' | 'professional'
|
var selectedSupport = null;
|
||||||
var selectedDuration = null; // 1 | 2 | 3
|
var selectedDuration = null;
|
||||||
|
|
||||||
// ── Support tiers (monthly price per hour) ──
|
|
||||||
var supportTiers = {
|
|
||||||
1: { hours: 2, pricePerHr: 35, label: 'Starter' },
|
|
||||||
2: { hours: 4, pricePerHr: 30, label: 'Standard' },
|
|
||||||
3: { hours: 8, pricePerHr: 27, label: 'Pro' }
|
|
||||||
};
|
|
||||||
|
|
||||||
var planPrices = {
|
|
||||||
starter: 499,
|
|
||||||
professional: 899
|
|
||||||
};
|
|
||||||
|
|
||||||
|
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 durationDiscounts = {1: 0, 2: 0.05, 3: 0.10};
|
||||||
var durationLabels = {1: '1 Year', 2: '2 Years', 3: '3 Years'};
|
var durationLabels = {1: '1 Year', 2: '2 Years', 3: '3 Years'};
|
||||||
|
var durationBilled = {1: 12, 2: 23, 3: 32};
|
||||||
|
|
||||||
function selectPlan(plan) {
|
function selectPlan(p) {
|
||||||
selectedPlan = plan;
|
selectedPlan = p;
|
||||||
document.querySelectorAll('.plan-card').forEach(function(c) { c.classList.remove('selected'); });
|
document.querySelectorAll('.plan-card').forEach(function(c){c.classList.remove('selected')});
|
||||||
document.getElementById('card-' + plan).classList.add('selected');
|
document.getElementById('card-' + p).classList.add('selected');
|
||||||
document.getElementById('btnStep1').disabled = false;
|
document.getElementById('btnStep1').disabled = false;
|
||||||
updatePriceSummary();
|
updateS2Summary();
|
||||||
}
|
}
|
||||||
|
function selectSupport(s) {
|
||||||
function selectDuration(dur) {
|
selectedSupport = s;
|
||||||
selectedDuration = dur;
|
document.querySelectorAll('.support-card').forEach(function(c){c.classList.remove('selected')});
|
||||||
document.querySelectorAll('.duration-card').forEach(function(c) { c.classList.remove('selected'); });
|
document.getElementById('sup-' + s).classList.add('selected');
|
||||||
document.getElementById('dur-' + dur).classList.add('selected');
|
|
||||||
document.getElementById('btnStep2').disabled = false;
|
document.getElementById('btnStep2').disabled = false;
|
||||||
updatePriceSummary();
|
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 updatePriceSummary() {
|
function updateS2Summary() {
|
||||||
if (!selectedPlan || !selectedDuration) return;
|
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]);
|
||||||
|
}
|
||||||
|
|
||||||
var sitePrice = planPrices[selectedPlan];
|
function updateS3Summary() {
|
||||||
|
if (!selectedPlan || !selectedSupport || !selectedDuration) return;
|
||||||
var disc = durationDiscounts[selectedDuration];
|
var disc = durationDiscounts[selectedDuration];
|
||||||
var tier = supportTiers[selectedDuration];
|
var totalSupport = supportPrices[selectedSupport] * durationBilled[selectedDuration];
|
||||||
var monthlySupport = tier.hours * tier.pricePerHr;
|
var discountAmount = totalSupport * disc;
|
||||||
|
var sitePrice = planPrices[selectedPlan];
|
||||||
// months billed with discount
|
|
||||||
var monthsBilled = selectedDuration === 2 ? 23 : selectedDuration === 3 ? 32 : 12;
|
|
||||||
var totalSupport = monthlySupport * monthsBilled;
|
|
||||||
var discountAmount = disc > 0 ? totalSupport * disc : 0;
|
|
||||||
var totalToday = sitePrice + (totalSupport - discountAmount);
|
var totalToday = sitePrice + (totalSupport - discountAmount);
|
||||||
|
|
||||||
// Panel 2 summary
|
document.getElementById('s3-site').textContent = planNames[selectedPlan] + ' website';
|
||||||
var planName = selectedPlan === 'starter' ? 'Starter Website' : 'Professional Website + AI';
|
document.getElementById('s3-site-price').textContent = '€' + sitePrice;
|
||||||
document.getElementById('summary-plan-name').textContent = planName;
|
document.getElementById('s3-support').textContent = supportLabels[selectedSupport] + ' (' + durationLabels[selectedDuration] + ')';
|
||||||
document.getElementById('summary-site-price').textContent = '€' + sitePrice;
|
document.getElementById('s3-support-monthly').textContent = '€' + supportPrices[selectedSupport] + '/mo';
|
||||||
document.getElementById('summary-support-label').textContent =
|
document.getElementById('s3-term-label').textContent = durationLabels[selectedDuration] + ' commitment';
|
||||||
durationLabels[selectedDuration] + ' support (' + tier.hours + ' hrs/mo, ' + tier.label + ')';
|
document.getElementById('s3-term-val').textContent = disc > 0 ? '-' + Math.round(discountAmount) + '€ (' + Math.round(disc*100) + '% off)' : 'No discount';
|
||||||
document.getElementById('summary-support-price').textContent =
|
|
||||||
(disc > 0 ? '€' + Math.round(totalSupport - discountAmount) + ' (before €' + Math.round(discountAmount) + ' off)' : '€' + totalSupport);
|
|
||||||
document.getElementById('summary-total-2').textContent = '€' + Math.round(totalToday);
|
|
||||||
|
|
||||||
// Panel 3 summary
|
|
||||||
document.getElementById('s3-plan').textContent = planName;
|
|
||||||
document.getElementById('s3-site').textContent = '€' + sitePrice;
|
|
||||||
document.getElementById('s3-support').textContent =
|
|
||||||
durationLabels[selectedDuration] + ' · ' + tier.hours + ' hrs/mo · ' + tier.label;
|
|
||||||
document.getElementById('s3-discount').textContent =
|
|
||||||
disc > 0 ? '-' + Math.round(discountAmount) + '€ (' + (disc * 100) + '% off)' : '—';
|
|
||||||
document.getElementById('s3-total').textContent = '€' + Math.round(totalToday);
|
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.';
|
||||||
|
|
||||||
// Commitment text
|
// Also update step 4 summary
|
||||||
var commitEl = document.getElementById('commitment-text');
|
document.getElementById('s4-plan').textContent = planNames[selectedPlan];
|
||||||
if (disc > 0) {
|
document.getElementById('s4-site').textContent = '€' + sitePrice;
|
||||||
commitEl.textContent = selectedDuration + '-year commitment. Cancel anytime — your website stays live.';
|
document.getElementById('s4-support').textContent = supportLabels[selectedSupport];
|
||||||
} else {
|
document.getElementById('s4-term').textContent = durationLabels[selectedDuration];
|
||||||
commitEl.textContent = 'No lock-in. Cancel support anytime — your website stays live.';
|
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) {
|
function goStep(n) {
|
||||||
// Update panels
|
document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});
|
||||||
document.querySelectorAll('.wizard-panel').forEach(function(p) { p.classList.remove('active'); });
|
|
||||||
document.getElementById('panel' + n).classList.add('active');
|
document.getElementById('panel' + n).classList.add('active');
|
||||||
|
for (var i = 1; i <= 4; i++) {
|
||||||
// Update step indicators
|
|
||||||
for (var i = 1; i <= 3; i++) {
|
|
||||||
var ind = document.getElementById('step' + i + 'Indicator');
|
var ind = document.getElementById('step' + i + 'Indicator');
|
||||||
ind.classList.remove('active','done');
|
ind.classList.remove('active','done');
|
||||||
if (i < n) ind.classList.add('done');
|
if (i < n) ind.classList.add('done');
|
||||||
if (i === n) ind.classList.add('active');
|
if (i === n) ind.classList.add('active');
|
||||||
}
|
}
|
||||||
|
if (n === 4) updateS3Summary();
|
||||||
// Refresh summary when showing step 3
|
|
||||||
if (n === 3) updatePriceSummary();
|
|
||||||
|
|
||||||
// Scroll to pricing
|
|
||||||
document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});
|
document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -627,29 +202,17 @@ function handleSubmit(e) {
|
|||||||
var success = document.getElementById('formSuccess');
|
var success = document.getElementById('formSuccess');
|
||||||
var submitBtn = form.querySelector('.form-submit');
|
var submitBtn = form.querySelector('.form-submit');
|
||||||
var data = new FormData(form);
|
var data = new FormData(form);
|
||||||
|
|
||||||
submitBtn.textContent = 'Sending…';
|
submitBtn.textContent = 'Sending…';
|
||||||
submitBtn.disabled = true;
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
fetch('/autojobs/api/contact/telegram', {
|
fetch('/autojobs/api/contact/telegram', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: new URLSearchParams({
|
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')})
|
||||||
name: data.get('name'),
|
}).catch(function(){}).finally(function(){
|
||||||
email: data.get('email'),
|
|
||||||
phone: data.get('phone'),
|
|
||||||
type: data.get('type') || 'other',
|
|
||||||
restaurant: data.get('restaurant'),
|
|
||||||
message: data.get('message')
|
|
||||||
})
|
|
||||||
}).catch(function() {
|
|
||||||
// Telegram failure is non-fatal
|
|
||||||
}).finally(function() {
|
|
||||||
form.style.display = 'none';
|
form.style.display = 'none';
|
||||||
success.classList.add('show');
|
success.classList.add('show');
|
||||||
success.scrollIntoView({behavior:'smooth',block:'center'});
|
success.scrollIntoView({behavior:'smooth',block:'center'});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user