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

- 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:
2026-06-25 08:32:01 +02:00
parent e151bbd734
commit cde0cb0fa8
4 changed files with 544 additions and 10 deletions
+1 -1
View File
@@ -90,7 +90,7 @@
.booking-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.booking-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.gcal-head { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.gcal-dot { width: 12px; height: 12px; border-radius: 50%; background: #4285F4; box-shadow: 18px 0 0 #34A853, 36px 0 0 #FBBC05; }
.gcal-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #4285F4; box-shadow: 18px 0 0 #34A853, 36px 0 0 #FBBC05; margin-right: 40px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { text-align: center; padding: 11px 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: .9rem; cursor: pointer; transition: .15s; background: #1b1611; }
.slot:hover { border-color: var(--gold); color: var(--gold-2); }