253 lines
38 KiB
HTML
253 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
: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)}
|
|
html{scroll-behavior:smooth}
|
|
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
|
|
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)}
|
|
.header-logo{font-size:0.8rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase}.header-logo span{color:var(--gold)}
|
|
.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)}
|
|
.hero{padding:10rem 3rem 6rem;max-width:860px;margin:0 auto;text-align:center}
|
|
.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)}
|
|
.hero-desc{font-size:0.95rem;color:var(--muted);max-width:520px;margin:0 auto 2.5rem;line-height:1.8;font-weight:300}
|
|
.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)}
|
|
.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)}
|
|
.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)}
|
|
.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}
|
|
.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-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:760px;margin-left:auto;margin-right:auto}.duration-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:1.4rem 1rem;cursor:pointer;transition:all 0.25s;text-align:center}.duration-card:hover{border-color:rgba(201,165,90,0.3)}.duration-card.selected{border-color:var(--gold);background:rgba(201,165,90,0.05)}.duration-card .dur-label{font-size:1.05rem;font-weight:700;margin-bottom:0.3rem;color:var(--text)}.duration-card.selected .dur-label{color:var(--gold)}.duration-card .dur-save{font-size:0.62rem;font-weight:700;color:#4ade80;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.35rem}.duration-card .dur-desc{font-size:0.65rem;color:var(--muted);line-height:1.5}
|
|
.price-summary{background:var(--bg-card);border:1px solid rgba(201,165,90,0.2);border-radius:8px;padding:1.5rem 1.6rem;max-width:460px;margin:0 auto 1.5rem;text-align:left}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;font-size:0.8rem;color:var(--muted)}.summary-row.total{border-top:1px solid var(--border);margin-top:0.5rem;padding-top:0.9rem;font-size:0.95rem;font-weight:600;color:var(--text)}.summary-row .summary-val{font-weight:600;color:var(--text)}.summary-row.total .summary-val{font-size:1.1rem;color:var(--gold);font-weight:700}.summary-discount{color:#4ade80;font-weight:600}
|
|
.wizard-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}.wizard-btn{background:transparent;border:1px solid rgba(201,165,90,0.25);color:var(--gold);padding:0.6rem 1.6rem;border-radius:4px;font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;font-family:'Inter',sans-serif}.wizard-btn:hover{background:rgba(201,165,90,0.08);border-color:rgba(201,165,90,0.4)}.wizard-btn.primary{background:var(--gold);color:#080809;border-color:var(--gold)}.wizard-btn.primary:hover{background:#e0bc72}.wizard-btn:disabled{opacity:0.35;cursor:not-allowed}
|
|
.commitment{text-align:center;font-size:0.68rem;color:var(--muted);margin-top:1rem;max-width:400px;margin-left:auto;margin-right:auto}
|
|
.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{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>
|
|
<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, 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>WhatsApp integration — AI answers & takes orders</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 Chatbot — answers questions, takes reservations 24/7</li>
|
|
<li>Multi-language menu (EN/ES/FR/DE)</li>
|
|
<li>AI review assistant — auto-suggested replies</li>
|
|
<li>1 year hosting included</li>
|
|
</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-setup-label">Website setup</span><span class="summary-val" id="s2-setup-price">—</span></div>
|
|
<div class="summary-row"><span id="s2-support-label">Support plan</span><span class="summary-val" id="s2-support-price">—</span></div>
|
|
<div class="summary-row total"><span>Est. monthly total</span><span class="summary-val" id="s2-monthly-total">—</span></div>
|
|
</div>
|
|
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(1)">← Back</button><button class="wizard-btn primary" id="btnStep2" onclick="goStep(3)" disabled>Continue →</button></div>
|
|
</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">5% OFF</div>
|
|
<div class="dur-desc">Support billed monthly. Save ~5% vs monthly.</div>
|
|
</div>
|
|
<div class="duration-card" onclick="selectDuration(3)" id="dur-3">
|
|
<div class="dur-label">36 Months</div>
|
|
<div class="dur-save">10% OFF</div>
|
|
<div class="dur-desc">Support billed monthly. Save ~10% vs monthly.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="price-summary" id="priceSummary3">
|
|
<div class="summary-row"><span id="s3-setup-label">Website setup (one-time)</span><span class="summary-val" id="s3-setup-price">—</span></div>
|
|
<div class="summary-row"><span id="s3-support-label">Support plan</span><span class="summary-val" id="s3-support-price">—</span></div>
|
|
<div class="summary-row"><span id="s3-freq-label">—</span><span class="summary-val" id="s3-freq-price">—</span></div>
|
|
<div class="summary-row"><span id="s3-savings-label" style="color:#4ade80;font-weight:700">—</span><span class="summary-val" id="s3-savings-val" style="color:#4ade80;font-weight:700">—</span></div>
|
|
<div class="summary-row total"><span>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>
|
|
|
|
<div class="wizard-panel" id="panel4">
|
|
<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 (one-time)</span><span class="summary-val" id="s4-site">—</span></div>
|
|
<div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
|
|
<div class="summary-row"><span>Support payment</span><span class="summary-val" id="s4-pay">—</span></div>
|
|
<div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-commitment">—</span></div>
|
|
<div class="summary-row"><span id="s4-savings-label" style="color:#4ade80;font-weight:700">Savings vs monthly</span><span class="summary-val" id="s4-savings-val" style="color:#4ade80;font-weight:700">—</span></div>
|
|
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s4-grand">—</span></div>
|
|
</div>
|
|
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(3)">← Edit</button><button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<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>
|
|
<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>
|
|
<button type="submit" class="form-submit">Send Enquiry</button>
|
|
<p class="form-note">No spam. No commitment. Just a real conversation.</p>
|
|
</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>
|
|
</section>
|
|
|
|
<footer><p>© 2012-2026 <a href="https://hostpioneers.com">HostPioneers.com</a> — HostPioneers, Benalmádena Costa</p></footer>
|
|
|
|
<script>
|
|
var selectedPlan = null;
|
|
var selectedSupport = null;
|
|
var selectedDuration = null;
|
|
var selectedFreq = 'monthly';
|
|
|
|
var planPrices = {launch: 499, grow: 799, dominate: 1199};
|
|
var planNames = {launch: 'Launch', grow: 'Grow + AI', dominate: 'Dominate Full AI'};
|
|
var supportPrices = {essentials: 59, standard: 99, priority: 179};
|
|
var supportLabels = {essentials: 'Essentials (2 hrs/mo)', standard: 'Standard (4 hrs/mo)', priority: 'Priority (8 hrs/mo)'};
|
|
var durationDiscounts = {1: 0, 2: 0.05, 3: 0.10};
|
|
var durationMonths = {1: 12, 2: 24, 3: 36};
|
|
var durationLabels = {1: '12 Months', 2: '24 Months', 3: '36 Months'};
|
|
|
|
function selectPlan(p){selectedPlan=p;document.querySelectorAll('.plan-card').forEach(function(c){c.classList.remove('selected')});document.getElementById('card-'+p).classList.add('selected');document.getElementById('btnStep1').disabled=false;updateAllSummaries()}
|
|
function selectSupport(s){selectedSupport=s;document.querySelectorAll('.support-card').forEach(function(c){c.classList.remove('selected')});document.getElementById('sup-'+s).classList.add('selected');document.getElementById('btnStep2').disabled=false;updateAllSummaries()}
|
|
function selectDuration(d){selectedDuration=d;document.querySelectorAll('.duration-card').forEach(function(c){c.classList.remove('selected')});document.getElementById('dur-'+d).classList.add('selected');document.getElementById('btnStep3').disabled=false;updateAllSummaries()}
|
|
function setPayFreq(f){selectedFreq=f;document.getElementById('toggleMonthly').classList.toggle('active',f==='monthly');document.getElementById('toggleAnnual').classList.toggle('active',f==='annual');updateAllSummaries()}
|
|
|
|
function getMonthlyPayment(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];return Math.round(supportPrices[selectedSupport]*(1-disc));}
|
|
function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];var monthlySupport=Math.round(supportPrices[selectedSupport]*(1-disc));if(selectedFreq==='monthly'){return planPrices[selectedPlan]+monthlySupport;}else{return planPrices[selectedPlan]+Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));}}
|
|
|
|
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var saveAmt=selectedFreq==='annual'?Math.round(supportPrice*durationMonths[selectedDuration]*disc):0;var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months (5% off support)':'36 months (10% off support)';var freqLabel=selectedFreq==='annual'?'Annual (~'+Math.round(monthlyPay)+'/mo, save €'+saveAmt+')':'Monthly';document.getElementById('s2-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s2-setup-price').textContent='€'+sitePrice+' (one-time)';document.getElementById('s2-support-label').textContent='Support: '+supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total-label').textContent='Due today';document.getElementById('s3-total').textContent='€'+totalToday;var totalSavings=0;if(selectedDuration>1){var monthlyTotalSupport=supportPrices[selectedSupport]*durationMonths[selectedDuration];var discountedTotal=Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));totalSavings=monthlyTotalSupport-discountedTotal;document.getElementById('s3-savings-label').textContent='Total savings vs monthly';document.getElementById('s3-savings-val').textContent='-€'+totalSavings+' ('+Math.round(disc*100)+'% off support)';}else{document.getElementById('s3-savings-label').textContent='Savings';document.getElementById('s3-savings-val').textContent='—';}if(selectedDuration===2){document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 2 years.';}if(selectedDuration===3){document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 3 years.';}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;if(selectedDuration>1){var monthlyTotal=supportPrices[selectedSupport]*durationMonths[selectedDuration];var disc=durationDiscounts[selectedDuration];var totalSav2=Math.round(monthlyTotal*(1-(1-disc)));document.getElementById('s4-savings-label').textContent='Total savings vs monthly';document.getElementById('s4-savings-val').textContent='-€'+totalSav2;}else{document.getElementById('s4-savings-label').textContent='Savings vs monthly';document.getElementById('s4-savings-val').textContent='—';}document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durationLabels[selectedDuration];document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;}
|
|
|
|
function goStep(n){document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});document.getElementById('panel'+n).classList.add('active');for(var i=1;i<=4;i++){var ind=document.getElementById('step'+i+'Indicator');ind.classList.remove('active','done');if(i<n)ind.classList.add('done');if(i===n)ind.classList.add('active');}if(n===4)updateAllSummaries();document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});}
|
|
|
|
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>
|