BPPP/smb-online
2
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

Add pizzeria demo w/ online ordering; fix gcal dots; reword chooser

Browse Source 
- New demo-pizzeria (Bella Napoli): interactive menu -> cart (qty +/-,
  live total) -> order form (pickup/delivery, address, time, notes) that
  POSTs the order summary to the lead-intake webhook (client_id
  DEMO-PIZZA, source order-pizzeria). Verified end-to-end (~5s).
- Fix barbershop "Google Kalender" header: the 3 dots were faked via
  box-shadow with no layout width, so text overlapped them. Reserve space.
- Chooser: client-friendly wording (no "self-hosted"/Cal.com jargon, no
  "~0 EUR"), reframed as example businesses, 3-up responsive layout.
- TODO.md: decouple tier from business type; demos as stack-agnostic
  starters; hosting (Google vs self-host) decided per client. Plus notes
  on n8n auth hardening and a real Orders flow/tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rogalik27
2026-06-25 08:32:01 +02:00
parent e151bbd734
commit cde0cb0fa8
4 changed files with 544 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/landing/index.html
+17 -9
View File
@@ -5,18 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>smb-online — Demo-Auswahl</title>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0f1419; color: #e7edf2; margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.box { width: min(820px, 100%); }
.box { width: min(980px, 100%); }
h1 { font-size: 1.7rem; margin: 0 0 6px; }
p.sub { color: #93a1ad; margin: 0 0 32px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
a.card { display: block; text-decoration: none; color: inherit; background: #182029; border: 1px solid #26303b; border-radius: 16px; padding: 26px; transition: transform .15s, border-color .2s; }
a.card:hover { transform: translateY(-4px); }
.a:hover { border-color: #c8a05a; }
.b:hover { border-color: #0f8a7e; }
.c:hover { border-color: #e0533a; }
.tag { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.a .tag { color: #c8a05a; }
.b .tag { color: #2bb3a3; }
.c .tag { color: #f0795f; }
.card h2 { margin: 10px 0 6px; font-size: 1.3rem; }
.card span { color: #93a1ad; font-size: .92rem; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
@@ -24,18 +27,23 @@
</head>
<body>
<div class="box">
<h1>smb-online — Tier-Demos</h1>
<p class="sub">Zwei Beispiel-Landingpages, eine pro Stufe. <button class="cb-open" type="button" onclick="cbOpen()" style="margin-left:0">📞 Rückruf anfordern</button></p>
<h1>smb-online — Beispielseiten</h1>
<p class="sub">So könnte Ihr Online-Auftritt aussehen — drei Beispiele aus verschiedenen Branchen. Klicken Sie sich durch, dann sprechen wir über Ihren. <button class="cb-open" type="button" onclick="cbOpen()" style="margin-left:0">📞 Rückruf anfordern</button></p>
<div class="cards">
<a class="card a" href="demo-tier-a/index.html">
<span class="tag">Tier A · Google-Stack</span>
<span class="tag">Beispiel · Friseur</span>
<h2>Schnittpunkt — Barbershop</h2>
<span>Casual-Business: Google Forms + Google-Kalender-Buchung. Infra ≈ 0 €.</span>
<span>Eine schlanke Website mit Online-Terminbuchung — Ihre Kund:innen buchen selbst, rund um die Uhr, ganz ohne Anruf.</span>
</a>
<a class="card b" href="demo-tier-b/index.html">
<span class="tag">Tier B · Self-Hosted</span>
<h2>PhysioVital — Physiotherapie</h2>
<span>Datenschutz-sensibel: self-hosted Cal.com + Formular + KI-Rezeption + Datenschutz-Badge.</span>
<span class="tag">Beispiel · Physiotherapie</span>
<h2>PhysioVital — Praxis</h2>
<span>Ein vertrauenswürdiger Auftritt mit Online-Terminanfrage und Kontaktformular — Anfragen landen direkt und sicher bei Ihnen.</span>
</a>
<a class="card c" href="demo-pizzeria/index.html">
<span class="tag">Beispiel · Pizzeria</span>
<h2>Bella Napoli — Pizzeria</h2>
<span>Speisekarte mit Online-Bestellung — Gäste stellen ihre Bestellung selbst zusammen, alles läuft zentral bei Ihnen ein.</span>
</a>
</div>
</div>