656 lines
33 KiB
HTML
656 lines
33 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 ── */
|
|
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 ── */
|
|
.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 GRID ── */
|
|
.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); }
|
|
|
|
/* ── 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>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
</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="summary-row">
|
|
<span>Plan</span>
|
|
<span class="summary-val" id="s3-plan">—</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Website setup</span>
|
|
<span class="summary-val" id="s3-site">—</span>
|
|
</div>
|
|
<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 class="wizard-nav">
|
|
<button class="wizard-btn" onclick="goStep(2)">← Edit</button>
|
|
<button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- CONTACT FORM -->
|
|
<section class="contact-section" id="contact">
|
|
<div class="contact-inner">
|
|
<div class="contact-header">
|
|
<h2>Start your website</h2>
|
|
<p>Tell us about your restaurant — we'll be in touch within 24 hours.</p>
|
|
</div>
|
|
|
|
<form id="contactForm" onsubmit="handleSubmit(event)">
|
|
<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'll 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>
|
|
// ── Wizard state ──
|
|
var selectedPlan = null; // 'starter' | 'professional'
|
|
var selectedDuration = null; // 1 | 2 | 3
|
|
|
|
// ── 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 durationDiscounts = { 1: 0, 2: 0.05, 3: 0.10 };
|
|
var durationLabels = { 1: '1 Year', 2: '2 Years', 3: '3 Years' };
|
|
|
|
function selectPlan(plan) {
|
|
selectedPlan = plan;
|
|
document.querySelectorAll('.plan-card').forEach(function(c) { c.classList.remove('selected'); });
|
|
document.getElementById('card-' + plan).classList.add('selected');
|
|
document.getElementById('btnStep1').disabled = false;
|
|
updatePriceSummary();
|
|
}
|
|
|
|
function selectDuration(dur) {
|
|
selectedDuration = dur;
|
|
document.querySelectorAll('.duration-card').forEach(function(c) { c.classList.remove('selected'); });
|
|
document.getElementById('dur-' + dur).classList.add('selected');
|
|
document.getElementById('btnStep2').disabled = false;
|
|
updatePriceSummary();
|
|
}
|
|
|
|
function updatePriceSummary() {
|
|
if (!selectedPlan || !selectedDuration) return;
|
|
|
|
var sitePrice = planPrices[selectedPlan];
|
|
var disc = durationDiscounts[selectedDuration];
|
|
var tier = supportTiers[selectedDuration];
|
|
var monthlySupport = tier.hours * tier.pricePerHr;
|
|
|
|
// 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);
|
|
|
|
// Panel 2 summary
|
|
var planName = selectedPlan === 'starter' ? 'Starter Website' : 'Professional Website + AI';
|
|
document.getElementById('summary-plan-name').textContent = planName;
|
|
document.getElementById('summary-site-price').textContent = '€' + sitePrice;
|
|
document.getElementById('summary-support-label').textContent =
|
|
durationLabels[selectedDuration] + ' support (' + tier.hours + ' hrs/mo, ' + tier.label + ')';
|
|
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);
|
|
|
|
// Commitment text
|
|
var commitEl = document.getElementById('commitment-text');
|
|
if (disc > 0) {
|
|
commitEl.textContent = selectedDuration + '-year commitment. Cancel anytime — your website stays live.';
|
|
} else {
|
|
commitEl.textContent = 'No lock-in. Cancel support anytime — your website stays live.';
|
|
}
|
|
}
|
|
|
|
function goStep(n) {
|
|
// Update panels
|
|
document.querySelectorAll('.wizard-panel').forEach(function(p) { p.classList.remove('active'); });
|
|
document.getElementById('panel' + n).classList.add('active');
|
|
|
|
// Update step indicators
|
|
for (var i = 1; i <= 3; 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');
|
|
}
|
|
|
|
// Refresh summary when showing step 3
|
|
if (n === 3) updatePriceSummary();
|
|
|
|
// Scroll to pricing
|
|
document.getElementById('pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
var form = document.getElementById('contactForm');
|
|
var success = document.getElementById('formSuccess');
|
|
var submitBtn = form.querySelector('.form-submit');
|
|
var data = new FormData(form);
|
|
|
|
submitBtn.textContent = 'Sending…';
|
|
submitBtn.disabled = true;
|
|
|
|
fetch('/autojobs/api/contact/telegram', {
|
|
method: 'POST',
|
|
body: new URLSearchParams({
|
|
name: data.get('name'),
|
|
email: data.get('email'),
|
|
phone: data.get('phone'),
|
|
type: data.get('type') || 'other',
|
|
restaurant: data.get('restaurant'),
|
|
message: data.get('message')
|
|
})
|
|
}).catch(function() {
|
|
// Telegram failure is non-fatal
|
|
}).finally(function() {
|
|
form.style.display = 'none';
|
|
success.classList.add('show');
|
|
success.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|