Phase 1: tier demo landing pages, CRM schema, playbooks
- templates/landing: two self-contained demos (Tier A barbershop / Google stack, Tier B physio / self-hosted) + chooser page - sheets/SCHEMA.md: Google Sheets CRM workbook spec - playbooks: per-client setup checklists for both tiers - README + .gitignore - Demos avoid unverifiable claims (no "DSGVO-konform", no "Ende-zu-Ende") Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Schnittpunkt — Barbershop Nürnberg | Termin online buchen</title>
|
||||
<meta name="description" content="Klassische Herrenschnitte, Bartpflege und Rasur in Nürnberg. Jetzt bequem online einen Termin buchen." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #14110f;
|
||||
--bg-2: #1d1916;
|
||||
--card: #221d19;
|
||||
--ink: #f4efe9;
|
||||
--muted: #b3a89c;
|
||||
--gold: #c8a05a;
|
||||
--gold-2: #e0c184;
|
||||
--line: #342d27;
|
||||
--radius: 14px;
|
||||
--shadow: 0 18px 50px rgba(0,0,0,.45);
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
background: var(--bg); color: var(--ink);
|
||||
line-height: 1.65; -webkit-font-smoothing: antialiased;
|
||||
}
|
||||
h1, h2, h3, .display { font-family: 'Bebas Neue', 'Inter', sans-serif; letter-spacing: .5px; line-height: 1.05; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
|
||||
section { padding: 92px 0; }
|
||||
.eyebrow { color: var(--gold); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: .72rem; }
|
||||
|
||||
/* demo ribbon */
|
||||
.demo-bar {
|
||||
background: repeating-linear-gradient(45deg, #2a2017, #2a2017 12px, #2f241a 12px, #2f241a 24px);
|
||||
color: var(--gold-2); font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase;
|
||||
text-align: center; padding: 7px 12px; border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* nav */
|
||||
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(20,17,15,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
|
||||
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
|
||||
.brand { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 2px; }
|
||||
.brand span { color: var(--gold); }
|
||||
nav ul { display: flex; gap: 30px; list-style: none; align-items: center; }
|
||||
nav a { color: var(--muted); font-size: .92rem; font-weight: 500; transition: color .2s; }
|
||||
nav a:hover { color: var(--ink); }
|
||||
.btn {
|
||||
display: inline-block; background: linear-gradient(180deg, var(--gold-2), var(--gold));
|
||||
color: #1a1410; font-weight: 700; padding: 12px 22px; border-radius: 999px;
|
||||
border: 0; cursor: pointer; font-size: .95rem; transition: transform .15s, box-shadow .2s;
|
||||
box-shadow: 0 8px 22px rgba(200,160,90,.28);
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,160,90,.4); }
|
||||
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
|
||||
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.6rem; cursor: pointer; }
|
||||
|
||||
/* hero */
|
||||
.hero { position: relative; background:
|
||||
linear-gradient(rgba(15,12,10,.72), rgba(15,12,10,.86)),
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%231a1512'/%3E%3Cpath d='M0 59h60M0 29h60' stroke='%23241d18' stroke-width='1'/%3E%3C/svg%3E");
|
||||
border-bottom: 1px solid var(--line); }
|
||||
.hero-inner { padding: 96px 0 104px; max-width: 720px; }
|
||||
.hero h1 { font-size: clamp(3rem, 8vw, 5.6rem); margin: 14px 0 6px; }
|
||||
.hero h1 em { color: var(--gold); font-style: normal; }
|
||||
.hero p { color: var(--muted); font-size: 1.18rem; max-width: 540px; margin: 18px 0 30px; }
|
||||
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
|
||||
.hero-meta { margin-top: 34px; display: flex; gap: 28px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
|
||||
.hero-meta b { color: var(--ink); }
|
||||
|
||||
/* services */
|
||||
.sec-head { max-width: 620px; margin-bottom: 46px; }
|
||||
.sec-head h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-top: 8px; }
|
||||
.sec-head p { color: var(--muted); margin-top: 10px; }
|
||||
.grid { display: grid; gap: 18px; }
|
||||
.services { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
|
||||
.svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .18s, border-color .2s; }
|
||||
.svc:hover { transform: translateY(-4px); border-color: var(--gold); }
|
||||
.svc .ic { font-size: 1.8rem; }
|
||||
.svc h3 { font-size: 1.5rem; margin: 14px 0 6px; }
|
||||
.svc p { color: var(--muted); font-size: .92rem; min-height: 42px; }
|
||||
.svc .price { color: var(--gold-2); font-weight: 700; font-size: 1.05rem; margin-top: 12px; font-family: 'Inter'; }
|
||||
|
||||
/* booking */
|
||||
.booking { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
||||
.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; }
|
||||
.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); }
|
||||
.slot.off { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
|
||||
.booking ul.points { list-style: none; display: grid; gap: 14px; margin: 22px 0 28px; }
|
||||
.booking ul.points li { padding-left: 30px; position: relative; color: var(--muted); }
|
||||
.booking ul.points li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
|
||||
|
||||
/* hours / about */
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
|
||||
.hours { width: 100%; border-collapse: collapse; }
|
||||
.hours td { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
|
||||
.hours td:last-child { text-align: right; color: var(--ink); font-weight: 500; }
|
||||
|
||||
/* contact */
|
||||
.contact { background: var(--bg-2); border-top: 1px solid var(--line); }
|
||||
form.lead { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 560px; }
|
||||
.field { margin-bottom: 16px; }
|
||||
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
|
||||
.field input, .field textarea, .field select {
|
||||
width: 100%; background: #1a1611; border: 1px solid var(--line); border-radius: 9px;
|
||||
color: var(--ink); padding: 12px 14px; font: inherit; font-size: .95rem;
|
||||
}
|
||||
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
|
||||
.form-note { font-size: .78rem; color: var(--muted); margin-top: 10px; }
|
||||
.toast { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 9px; background: #1e2a1c; border: 1px solid #2f5a2c; color: #bfe6b6; font-size: .9rem; }
|
||||
|
||||
/* footer */
|
||||
footer { padding: 54px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
|
||||
.foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
|
||||
footer .brand { color: var(--ink); }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
nav ul { display: none; }
|
||||
.nav-toggle { display: block; }
|
||||
nav.open ul { display: flex; position: absolute; inset: 68px 0 auto 0; flex-direction: column; background: var(--bg-2); padding: 18px 6vw; gap: 18px; border-bottom: 1px solid var(--line); }
|
||||
.booking-grid, .split { grid-template-columns: 1fr; }
|
||||
section { padding: 64px 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-bar">Demo · Tier A (Google-Stack) — Beispielseite für Kund:innen · Formular & Buchung noch nicht aktiv</div>
|
||||
|
||||
<header class="nav">
|
||||
<div class="wrap nav-inner">
|
||||
<a href="#top" class="brand">SCHNITT<span>PUNKT</span></a>
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="#leistungen">Leistungen</a></li>
|
||||
<li><a href="#buchen">Termin buchen</a></li>
|
||||
<li><a href="#zeiten">Öffnungszeiten</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
<li><a href="#buchen" class="btn">Termin buchen</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Menü" onclick="document.getElementById('nav').classList.toggle('open')">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="wrap hero-inner">
|
||||
<span class="eyebrow">Barbershop · Nürnberg Altstadt</span>
|
||||
<h1>Sauberer Schnitt.<br><em>Echtes Handwerk.</em></h1>
|
||||
<p>Klassische Herrenschnitte, Bartpflege und die heiße Rasur — von Profis, die ihr Handwerk lieben. Buch deinen Termin in 30 Sekunden.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#buchen" class="btn">Termin online buchen</a>
|
||||
<a href="tel:+4991100000" class="btn ghost">☎ 0911 000000</a>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span>⭐ <b>4,9</b> · 320+ Bewertungen</span>
|
||||
<span>✂ Seit <b>2014</b></span>
|
||||
<span>📍 Königstraße 1, Nürnberg</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<section id="leistungen">
|
||||
<div class="wrap">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">Leistungen</span>
|
||||
<h2>Was wir am besten können</h2>
|
||||
<p>Faire Preise, keine Überraschungen. Jeder Termin inklusive Beratung und einem Getränk aufs Haus.</p>
|
||||
</div>
|
||||
<div class="grid services">
|
||||
<article class="svc"><div class="ic">✂️</div><h3>Herrenschnitt</h3><p>Waschen, Schnitt, Styling — individuell auf deinen Typ abgestimmt.</p><div class="price">ab 29 €</div></article>
|
||||
<article class="svc"><div class="ic">🧔</div><h3>Bartpflege</h3><p>Konturieren, trimmen und pflegen für den perfekten Bart.</p><div class="price">ab 19 €</div></article>
|
||||
<article class="svc"><div class="ic">🪒</div><h3>Heiße Rasur</h3><p>Klassische Nassrasur mit heißen Tüchern. Pure Entspannung.</p><div class="price">ab 25 €</div></article>
|
||||
<article class="svc"><div class="ic">👦</div><h3>Kids Cut</h3><p>Entspannter Schnitt für die Kleinen — bis 12 Jahre.</p><div class="price">ab 17 €</div></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BOOKING -->
|
||||
<section class="booking" id="buchen">
|
||||
<div class="wrap booking-grid">
|
||||
<div>
|
||||
<span class="eyebrow">Termin buchen</span>
|
||||
<h2 style="font-size:clamp(2.2rem,5vw,3.2rem);margin:8px 0 6px;">Wähl deinen Slot.<br>Den Rest machen wir.</h2>
|
||||
<ul class="points">
|
||||
<li>Sofortige Bestätigung per E-Mail</li>
|
||||
<li>Automatische Erinnerung am Vortag</li>
|
||||
<li>Kostenlos umbuchen bis 24 Std. vorher</li>
|
||||
</ul>
|
||||
<!-- Tier A: dieser Button öffnet in der echten Version den Google Kalender „Terminplan" (Appointment Schedule). -->
|
||||
<a href="#" class="btn" onclick="return false;">Verfügbare Zeiten ansehen →</a>
|
||||
</div>
|
||||
<div class="booking-card">
|
||||
<div class="gcal-head"><span class="gcal-dot"></span> Google Kalender · Terminplan — Heute, 23. Juni</div>
|
||||
<div class="slots">
|
||||
<div class="slot off">09:00</div>
|
||||
<div class="slot">10:30</div>
|
||||
<div class="slot">11:15</div>
|
||||
<div class="slot off">13:00</div>
|
||||
<div class="slot">14:30</div>
|
||||
<div class="slot">15:45</div>
|
||||
<div class="slot">16:30</div>
|
||||
<div class="slot off">17:15</div>
|
||||
<div class="slot">18:00</div>
|
||||
</div>
|
||||
<p class="form-note" style="margin-top:16px;">Demo-Vorschau. In der Live-Version wird hier der echte Google-Kalender-Terminplan eingebettet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOURS / ABOUT -->
|
||||
<section id="zeiten">
|
||||
<div class="wrap split">
|
||||
<div>
|
||||
<span class="eyebrow">Über uns</span>
|
||||
<h2 style="font-size:clamp(2rem,4.5vw,2.8rem);margin:8px 0 14px;">Drei Stühle, ein Anspruch: gute Arbeit.</h2>
|
||||
<p style="color:var(--muted)">Seit 2014 schneiden wir in der Nürnberger Altstadt. Kein Schnickschnack, keine Wartezeiten dank Online-Termin — einfach ein Ort, an dem du dich auf einen sauberen Schnitt verlassen kannst. Komm vorbei, bleib auf einen Kaffee.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="eyebrow">Öffnungszeiten</span>
|
||||
<table class="hours" style="margin-top:14px;">
|
||||
<tr><td>Montag – Freitag</td><td>09:00 – 19:00</td></tr>
|
||||
<tr><td>Samstag</td><td>09:00 – 16:00</td></tr>
|
||||
<tr><td>Sonntag</td><td>geschlossen</td></tr>
|
||||
</table>
|
||||
<p class="form-note" style="margin-top:16px;">📍 Königstraße 1, 90402 Nürnberg</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT / LEAD FORM -->
|
||||
<section class="contact" id="kontakt">
|
||||
<div class="wrap">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">Kontakt</span>
|
||||
<h2>Frage stellen oder Rückruf anfordern</h2>
|
||||
<p>Schreib uns kurz — wir melden uns am selben Tag.</p>
|
||||
</div>
|
||||
<!-- Tier A: in der Live-Version postet dieses Formular an einen n8n-Webhook -> Google Sheet (Leads). -->
|
||||
<form class="lead" onsubmit="event.preventDefault(); this.querySelector('.toast').style.display='block'; this.reset();">
|
||||
<div class="field"><label for="a-name">Name</label><input id="a-name" type="text" placeholder="Max Mustermann" required /></div>
|
||||
<div class="field"><label for="a-contact">E-Mail oder Telefon</label><input id="a-contact" type="text" placeholder="max@example.de" required /></div>
|
||||
<div class="field"><label for="a-svc">Gewünschte Leistung</label>
|
||||
<select id="a-svc"><option>Herrenschnitt</option><option>Bartpflege</option><option>Heiße Rasur</option><option>Kids Cut</option><option>Sonstiges</option></select>
|
||||
</div>
|
||||
<div class="field"><label for="a-msg">Nachricht (optional)</label><textarea id="a-msg" rows="3" placeholder="Wunschtermin, Frage, …"></textarea></div>
|
||||
<button class="btn" type="submit">Anfrage senden</button>
|
||||
<div class="toast">✓ Danke! Demo-Formular — in der Live-Version landet deine Anfrage automatisch im CRM.</div>
|
||||
<p class="form-note">Mit dem Absenden stimmst du der Verarbeitung deiner Angaben zur Kontaktaufnahme zu.</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap foot-grid">
|
||||
<div>
|
||||
<div class="brand">SCHNITT<span style="color:var(--gold)">PUNKT</span></div>
|
||||
<p style="margin-top:8px;">Königstraße 1 · 90402 Nürnberg</p>
|
||||
</div>
|
||||
<div>
|
||||
<p><b style="color:var(--ink)">Öffnungszeiten</b></p>
|
||||
<p>Mo–Fr 09–19 · Sa 09–16</p>
|
||||
</div>
|
||||
<div>
|
||||
<p><b style="color:var(--ink)">Kontakt</b></p>
|
||||
<p>0911 000000 · hallo@schnittpunkt-nbg.de</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap" style="margin-top:30px;opacity:.6;font-size:.8rem;">© 2026 Schnittpunkt Barbershop · Demo-Seite · Impressum · Datenschutz</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,323 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>PhysioVital — Praxis für Physiotherapie | Termin online buchen</title>
|
||||
<meta name="description" content="Physiotherapie, Manuelle Therapie und Krankengymnastik in Erlangen. Online Termin buchen — Ihre Gesundheitsdaten bleiben in Deutschland." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6f8f8;
|
||||
--surface: #ffffff;
|
||||
--ink: #16302f;
|
||||
--muted: #5d716f;
|
||||
--teal: #0f8a7e;
|
||||
--teal-2: #0b6b62;
|
||||
--teal-soft: #e4f3f1;
|
||||
--sand: #f3efe7;
|
||||
--line: #e3eae9;
|
||||
--radius: 16px;
|
||||
--shadow: 0 16px 44px rgba(16,48,47,.10);
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; }
|
||||
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.12; font-weight: 600; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
|
||||
section { padding: 90px 0; }
|
||||
.eyebrow { color: var(--teal); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; }
|
||||
|
||||
/* demo ribbon */
|
||||
.demo-bar { background: #0c2b29; color: #9fe6dc; font-size: .76rem; letter-spacing: 1px; text-align: center; padding: 7px 12px; }
|
||||
|
||||
/* nav */
|
||||
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(246,248,248,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
|
||||
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
|
||||
.brand { display: flex; align-items: center; gap: 9px; font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; }
|
||||
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--teal), var(--teal-2)); display: grid; place-items: center; color: #fff; font-size: 1rem; }
|
||||
nav ul { display: flex; gap: 28px; list-style: none; align-items: center; }
|
||||
nav a { color: var(--muted); font-size: .92rem; font-weight: 500; transition: color .2s; }
|
||||
nav a:hover { color: var(--ink); }
|
||||
.btn { display: inline-block; background: var(--teal); color: #fff; font-weight: 600; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; font-size: .95rem; transition: transform .15s, background .2s; }
|
||||
.btn:hover { transform: translateY(-2px); background: var(--teal-2); }
|
||||
.btn.ghost { background: #fff; color: var(--teal-2); border: 1px solid var(--line); }
|
||||
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.6rem; cursor: pointer; }
|
||||
|
||||
/* hero */
|
||||
.hero { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
|
||||
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding: 78px 0 86px; }
|
||||
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 3.9rem); margin: 16px 0 0; }
|
||||
.hero h1 em { font-style: italic; color: var(--teal-2); }
|
||||
.hero p { color: var(--muted); font-size: 1.12rem; margin: 18px 0 28px; max-width: 480px; }
|
||||
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
|
||||
.trust-row { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .88rem; }
|
||||
.pill { background: var(--teal-soft); color: var(--teal-2); padding: 6px 13px; border-radius: 999px; font-weight: 600; font-size: .82rem; }
|
||||
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 26px; }
|
||||
.hero-card h3 { font-family: 'Inter'; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
|
||||
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0 6px; }
|
||||
.mini-cal span { text-align: center; font-size: .72rem; color: var(--muted); padding: 6px 0; }
|
||||
.mini-cal b { text-align: center; font-size: .82rem; padding: 8px 0; border-radius: 8px; background: var(--bg); cursor: pointer; font-weight: 500; }
|
||||
.mini-cal b.free { background: var(--teal-soft); color: var(--teal-2); font-weight: 700; }
|
||||
.mini-cal b.sel { background: var(--teal); color: #fff; }
|
||||
|
||||
/* services */
|
||||
.sec-head { max-width: 640px; margin-bottom: 46px; }
|
||||
.sec-head h2 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-top: 8px; }
|
||||
.sec-head p { color: var(--muted); margin-top: 10px; }
|
||||
.grid { display: grid; gap: 18px; }
|
||||
.services { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
|
||||
.svc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .18s, box-shadow .2s; }
|
||||
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
||||
.svc .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--teal-soft); display: grid; place-items: center; font-size: 1.4rem; }
|
||||
.svc h3 { font-size: 1.3rem; margin: 16px 0 6px; }
|
||||
.svc p { color: var(--muted); font-size: .92rem; }
|
||||
|
||||
/* privacy band */
|
||||
.privacy { background: linear-gradient(135deg, #0c2b29, #134a44); color: #eafaf7; border-radius: 0; }
|
||||
.privacy-grid { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; }
|
||||
.shield { width: 96px; height: 96px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; font-size: 3rem; }
|
||||
.privacy h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
|
||||
.privacy p { color: #b9ded8; margin-top: 12px; max-width: 620px; }
|
||||
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
|
||||
.badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 15px; font-size: .82rem; font-weight: 600; color: #eafaf7; }
|
||||
|
||||
/* booking (Cal.com style) */
|
||||
.booking { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
||||
.booking-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
|
||||
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
|
||||
.cal-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
|
||||
.cal-top .who { display: flex; align-items: center; gap: 10px; }
|
||||
.cal-top .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,var(--teal),var(--teal-2)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
|
||||
.cal-top small { color: var(--muted); }
|
||||
.cal-body { display: grid; grid-template-columns: 1fr 150px; }
|
||||
.cal-days { padding: 18px; border-right: 1px solid var(--line); }
|
||||
.cal-days .row { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
|
||||
.cal-days .row span { text-align: center; font-size: .7rem; color: var(--muted); padding: 4px 0; }
|
||||
.cal-days .row b { text-align: center; font-size: .82rem; padding: 9px 0; border-radius: 8px; cursor: pointer; font-weight: 500; }
|
||||
.cal-days .row b.free { background: var(--teal-soft); color: var(--teal-2); font-weight: 700; }
|
||||
.cal-days .row b.sel { background: var(--teal); color: #fff; }
|
||||
.cal-times { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.cal-times .t { border: 1px solid var(--teal); color: var(--teal-2); text-align: center; padding: 9px 0; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: .15s; }
|
||||
.cal-times .t:hover { background: var(--teal); color: #fff; }
|
||||
.cal-foot { padding: 8px 20px 14px; color: var(--muted); font-size: .74rem; border-top: 1px solid var(--line); }
|
||||
|
||||
/* contact */
|
||||
.contact { background: var(--bg); }
|
||||
form.lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 560px; box-shadow: var(--shadow); }
|
||||
.field { margin-bottom: 16px; }
|
||||
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
|
||||
.field input, .field textarea, .field select { width: 100%; background: #fbfdfc; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); padding: 12px 14px; font: inherit; font-size: .95rem; }
|
||||
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
|
||||
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted); }
|
||||
.form-note { font-size: .78rem; color: var(--muted); margin-top: 10px; }
|
||||
.toast { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--teal-soft); border: 1px solid var(--teal); color: var(--teal-2); font-size: .9rem; }
|
||||
|
||||
/* footer */
|
||||
footer { padding: 54px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; background: var(--surface); }
|
||||
.foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
|
||||
|
||||
/* AI receptionist bubble */
|
||||
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: var(--teal); color: #fff; border: 0; font-size: 1.5rem; cursor: pointer; box-shadow: 0 12px 30px rgba(15,138,126,.45); transition: transform .15s; }
|
||||
.chat-fab:hover { transform: scale(1.06); }
|
||||
.chat-panel { position: fixed; right: 22px; bottom: 92px; z-index: 90; width: min(340px, 88vw); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(16,48,47,.25); overflow: hidden; display: none; }
|
||||
.chat-panel.open { display: block; }
|
||||
.chat-head { background: linear-gradient(135deg,var(--teal),var(--teal-2)); color: #fff; padding: 16px 18px; }
|
||||
.chat-head b { font-family: 'Fraunces', serif; font-size: 1.05rem; }
|
||||
.chat-head small { display: block; opacity: .85; font-size: .76rem; margin-top: 2px; }
|
||||
.chat-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 280px; }
|
||||
.msg { padding: 10px 13px; border-radius: 13px; font-size: .88rem; max-width: 85%; }
|
||||
.msg.bot { background: var(--teal-soft); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
|
||||
.msg.user { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
|
||||
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
|
||||
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: .88rem; }
|
||||
.chat-input button { background: var(--teal); border: 0; color: #fff; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; }
|
||||
.chat-foot { text-align: center; font-size: .68rem; color: var(--muted); padding: 0 0 10px; }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
nav ul { display: none; }
|
||||
.nav-toggle { display: block; }
|
||||
nav.open ul { display: flex; position: absolute; inset: 72px 0 auto 0; flex-direction: column; background: var(--surface); padding: 18px 6vw; gap: 18px; border-bottom: 1px solid var(--line); }
|
||||
.hero-grid, .booking-grid, .privacy-grid { grid-template-columns: 1fr; }
|
||||
.privacy-grid { text-align: center; }
|
||||
.shield { margin: 0 auto; }
|
||||
section { padding: 64px 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-bar">Demo · Tier B (Self-Hosted / Datenschutz) — Beispielseite · Buchung, Formular & KI-Assistent noch nicht aktiv</div>
|
||||
|
||||
<header class="nav">
|
||||
<div class="wrap nav-inner">
|
||||
<a href="#top" class="brand"><span class="logo">＋</span> PhysioVital</a>
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="#leistungen">Leistungen</a></li>
|
||||
<li><a href="#datenschutz">Datenschutz</a></li>
|
||||
<li><a href="#buchen">Termin</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
<li><a href="#buchen" class="btn">Termin buchen</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Menü" onclick="document.getElementById('nav').classList.toggle('open')">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="wrap hero-grid">
|
||||
<div>
|
||||
<span class="eyebrow">Praxis für Physiotherapie · Erlangen</span>
|
||||
<h1>Beweglich bleiben.<br><em>Schmerzfrei leben.</em></h1>
|
||||
<p>Physiotherapie, Manuelle Therapie und Krankengymnastik — individuell, evidenzbasiert und mit Zeit für Sie. Termine online, ganz ohne Wartezeit am Telefon.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#buchen" class="btn">Termin online buchen</a>
|
||||
<a href="#leistungen" class="btn ghost">Unsere Leistungen</a>
|
||||
</div>
|
||||
<div class="trust-row">
|
||||
<span class="pill">🔒 Daten in Deutschland gehostet</span>
|
||||
<span>Alle Kassen & privat</span>
|
||||
<span>⭐ 4,9 / 5</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-card">
|
||||
<h3>Nächste freie Termine</h3>
|
||||
<div class="mini-cal">
|
||||
<span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span>
|
||||
<b>23</b><b class="free">24</b><b class="sel">25</b><b class="free">26</b><b class="free">27</b><b>28</b><b style="opacity:.4">29</b>
|
||||
</div>
|
||||
<p class="form-note" style="margin-top:14px;">Mi, 25. Juni — freie Zeiten:</p>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;">
|
||||
<span class="pill" style="background:#fff;border:1px solid var(--teal);">08:30</span>
|
||||
<span class="pill" style="background:#fff;border:1px solid var(--teal);">11:00</span>
|
||||
<span class="pill" style="background:#fff;border:1px solid var(--teal);">15:30</span>
|
||||
</div>
|
||||
<a href="#buchen" class="btn" style="width:100%;text-align:center;margin-top:18px;">Diesen Termin wählen</a>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<section id="leistungen">
|
||||
<div class="wrap">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">Leistungen</span>
|
||||
<h2>Therapie, die zu Ihnen passt</h2>
|
||||
<p>Von der akuten Verletzung bis zur langfristigen Prävention — wir begleiten Sie auf dem ganzen Weg.</p>
|
||||
</div>
|
||||
<div class="grid services">
|
||||
<article class="svc"><div class="ic">🖐️</div><h3>Manuelle Therapie</h3><p>Gezielte Mobilisation von Gelenken und Muskulatur bei Bewegungseinschränkungen.</p></article>
|
||||
<article class="svc"><div class="ic">🏃</div><h3>Krankengymnastik</h3><p>Aktive Übungstherapie zur Wiederherstellung von Kraft, Stabilität und Beweglichkeit.</p></article>
|
||||
<article class="svc"><div class="ic">💆</div><h3>Massage & Lymphdrainage</h3><p>Lösen von Verspannungen und Förderung des Lymphabflusses nach OPs oder Verletzungen.</p></article>
|
||||
<article class="svc"><div class="ic">🧘</div><h3>Prävention</h3><p>Rückenschule und Trainingsberatung, damit Beschwerden gar nicht erst entstehen.</p></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRIVACY BAND -->
|
||||
<section class="privacy" id="datenschutz">
|
||||
<div class="wrap privacy-grid">
|
||||
<div class="shield">🛡️</div>
|
||||
<div>
|
||||
<span class="eyebrow" style="color:#7fd8cb">Datenschutz by Design</span>
|
||||
<h2>Ihre Gesundheitsdaten bleiben in Deutschland.</h2>
|
||||
<p>Buchungen, Kontaktanfragen und Patientendaten laufen über unsere eigene, in Deutschland gehostete Infrastruktur — keine Weitergabe an Werbenetzwerke, kein Tracking durch Dritte. Verschlüsselt übertragen, vom ersten Klick an.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">🇩🇪 Hosting in Deutschland</span>
|
||||
<span class="badge">🔐 Verschlüsselte Übertragung (TLS)</span>
|
||||
<span class="badge">🍪 Keine Cookies von Dritten</span>
|
||||
<span class="badge">🚫 Kein Drittanbieter-Tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BOOKING (Cal.com style) -->
|
||||
<section class="booking" id="buchen">
|
||||
<div class="wrap booking-grid">
|
||||
<div>
|
||||
<span class="eyebrow">Termin buchen</span>
|
||||
<h2 style="font-size:clamp(2rem,4.6vw,2.9rem);margin:8px 0 12px;">In drei Klicks zum Termin.</h2>
|
||||
<p style="color:var(--muted);max-width:420px;">Wählen Sie Behandlung, Tag und Uhrzeit — Sie erhalten sofort eine verschlüsselte Bestätigung. Erinnerung folgt automatisch, Umbuchung jederzeit möglich.</p>
|
||||
<p class="form-note" style="margin-top:18px;">Self-hosted Buchung — läuft in der Live-Version über Ihre eigene Cal.com-Instanz auf der Praxis-Infrastruktur.</p>
|
||||
</div>
|
||||
<!-- Tier B: in der Live-Version ist hier die self-hosted Cal.com-Instanz eingebettet. -->
|
||||
<div class="cal">
|
||||
<div class="cal-top">
|
||||
<div class="who"><span class="av">PV</span><div><b style="font-family:'Inter';font-weight:600;">Physiotherapie · 30 Min</b><br><small>PhysioVital Erlangen</small></div></div>
|
||||
<small>🔒 self-hosted</small>
|
||||
</div>
|
||||
<div class="cal-body">
|
||||
<div class="cal-days">
|
||||
<div class="row" style="margin-bottom:6px;"><span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span></div>
|
||||
<div class="row">
|
||||
<b style="opacity:.3">21</b><b style="opacity:.3">22</b><b>23</b><b class="free">24</b><b class="sel">25</b><b class="free">26</b><b class="free">27</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-times">
|
||||
<div class="t">08:30</div>
|
||||
<div class="t">11:00</div>
|
||||
<div class="t">15:30</div>
|
||||
<div class="t">16:15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-foot">Zeitzone: Europa/Berlin · Demo-Vorschau</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT -->
|
||||
<section class="contact" id="kontakt">
|
||||
<div class="wrap">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">Kontakt</span>
|
||||
<h2>Rezept einreichen oder Frage stellen</h2>
|
||||
<p>Schreiben Sie uns — wir melden uns zeitnah und vertraulich zurück.</p>
|
||||
</div>
|
||||
<!-- Tier B: in der Live-Version postet dies an einen self-hosted Endpoint -> n8n -> CRM (kein Drittanbieter). -->
|
||||
<form class="lead" onsubmit="event.preventDefault(); this.querySelector('.toast').style.display='block'; this.reset();">
|
||||
<div class="field"><label for="b-name">Name</label><input id="b-name" type="text" placeholder="Maria Musterfrau" required /></div>
|
||||
<div class="field"><label for="b-contact">E-Mail oder Telefon</label><input id="b-contact" type="text" placeholder="maria@example.de" required /></div>
|
||||
<div class="field"><label for="b-svc">Anliegen</label>
|
||||
<select id="b-svc"><option>Neuer Termin</option><option>Rezept einreichen</option><option>Manuelle Therapie</option><option>Krankengymnastik</option><option>Sonstiges</option></select>
|
||||
</div>
|
||||
<div class="field"><label for="b-msg">Nachricht</label><textarea id="b-msg" rows="3" placeholder="Ihr Anliegen, Wunschtermin, Diagnose laut Rezept …"></textarea></div>
|
||||
<div class="field consent"><input type="checkbox" id="b-consent" style="width:auto;margin-top:4px;" required /><label for="b-consent" style="margin:0;">Ich willige ein, dass meine Angaben zur Bearbeitung meiner Anfrage verarbeitet werden. Die Daten werden verschlüsselt in Deutschland gespeichert.</label></div>
|
||||
<button class="btn" type="submit">Anfrage sicher senden</button>
|
||||
<div class="toast">✓ Danke! Demo-Formular — in der Live-Version landet Ihre Anfrage verschlüsselt im Praxis-CRM.</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap foot-grid">
|
||||
<div>
|
||||
<div class="brand" style="margin-bottom:8px;"><span class="logo">＋</span> PhysioVital</div>
|
||||
<p>Hauptstraße 12 · 91054 Erlangen</p>
|
||||
</div>
|
||||
<div><p><b style="color:var(--ink)">Sprechzeiten</b></p><p>Mo–Fr 08–19 Uhr</p></div>
|
||||
<div><p><b style="color:var(--ink)">Kontakt</b></p><p>09131 000000 · praxis@physiovital-er.de</p></div>
|
||||
</div>
|
||||
<div class="wrap" style="margin-top:30px;opacity:.7;font-size:.8rem;">© 2026 PhysioVital · Demo-Seite · 🇩🇪 Daten in Deutschland · Impressum · Datenschutz</div>
|
||||
</footer>
|
||||
|
||||
<!-- AI RECEPTIONIST (placeholder for Phase 6 — Claude Haiku 4.5) -->
|
||||
<button class="chat-fab" aria-label="Online-Rezeption öffnen" onclick="document.getElementById('chat').classList.toggle('open')">💬</button>
|
||||
<div class="chat-panel" id="chat">
|
||||
<div class="chat-head"><b>Online-Rezeption</b><small>Meist sofort eine Antwort</small></div>
|
||||
<div class="chat-body">
|
||||
<div class="msg bot">Hallo! 👋 Ich bin die digitale Rezeption von PhysioVital. Wie kann ich helfen?</div>
|
||||
<div class="msg user">Habt ihr diese Woche noch einen Termin frei?</div>
|
||||
<div class="msg bot">Ja — am Mittwoch um 11:00 oder 15:30. Soll ich einen davon für Sie vormerken?</div>
|
||||
</div>
|
||||
<div class="chat-input"><input type="text" placeholder="Nachricht schreiben …" /><button aria-label="Senden">➤</button></div>
|
||||
<div class="chat-foot">Demo — in der Live-Version KI-gestützt (Claude)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>smb-online — Demo-Auswahl</title>
|
||||
<style>
|
||||
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%); }
|
||||
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; }
|
||||
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; }
|
||||
.tag { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
|
||||
.a .tag { color: #c8a05a; }
|
||||
.b .tag { color: #2bb3a3; }
|
||||
.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; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<h1>smb-online — Tier-Demos</h1>
|
||||
<p class="sub">Zwei Beispiel-Landingpages, eine pro Stufe. Formulare/Buchung sind in der Demo noch nicht aktiv.</p>
|
||||
<div class="cards">
|
||||
<a class="card a" href="demo-tier-a/index.html">
|
||||
<span class="tag">Tier A · Google-Stack</span>
|
||||
<h2>Schnittpunkt — Barbershop</h2>
|
||||
<span>Casual-Business: Google Forms + Google-Kalender-Buchung. Infra ≈ 0 €.</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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user