/* global React, ReactDOM, SECTIONS, isSectionDone, isSectionBlockingSubmit */ const { useState, useEffect, useRef, useMemo } = React; const WEBHOOK_URL = "https://hook.eu2.make.com/0cbamhy1kea4n6n4apht3yv6z8fy1cqv"; const INITIAL = { // unternehmen firmenname: "", branche: "", rechnungStrasse: "", rechnungPLZ: "", rechnungOrt: "", rechnungLand: "Deutschland", ustId: "", kontaktName: "", kontaktEmail: "", kontaktTelefon: "", hatWebsite: "", websiteUrl: "", // zielgruppe zielgruppe: "", problem: "", // angebot leistungen: "", usp: "", // tone anrede: "", toneVerspielt: 30, toneMutig: 60, toneTechnisch: 40, // visuell stil: "", hatFarbe: "", primaerfarbe: "", referenzen: "", // uploads uploadLogo: [], uploadBilder: [], uploadDocs: [], // ziel hauptziel: "", cta: "", // struktur unterseiten: [], anmerkungen: "", // technik (domain & hosting — kunde besitzt, wir richten ein) hatDomain: "", domain: "", domainAnbieter: "", wunschDomain: "", hatHosting: "", hostingAnbieter: "", }; // ── Build a structured prompt summary string ─────────────────────────────── function describeSlider(value, leftLabel, rightLabel) { const v = Number(value ?? 50); if (v <= 20) return `sehr ${leftLabel.toLowerCase()}`; if (v <= 40) return `eher ${leftLabel.toLowerCase()}`; if (v < 60) return "ausgewogen"; if (v <= 80) return `eher ${rightLabel.toLowerCase()}`; return `sehr ${rightLabel.toLowerCase()}`; } const STIL_LABEL = { modern: "Modern & Minimalistisch (klar, viel Whitespace, schwarze Typografie)", warm: "Warm & Persönlich (sanfte Farben, runde Formen, organisch)", bold: "Mutig & Auffällig (starke Farben, große Typo, starke Kontraste)", premium: "Premium & Edel (dunkle Töne, Serifen-Akzente, viel Ruhe)", tech: "Tech & Modern-B2B (Blau-Töne, Grids, Daten-fokussiert)", neutral: "Stil offen — die KI darf passend zur Branche vorschlagen", }; const ZIEL_LABEL = { leads: "Leads & Anfragen sammeln (Formular-Anfragen, Angebots-Anfragen)", termine: "Termine buchen (Beratungs-/Erstgespräche)", verkauf: "Direkt online verkaufen", info: "Informieren & Vertrauen aufbauen", recruiting: "Mitarbeitende gewinnen (Karriere-Fokus)", }; function buildPrompt(d) { const L = []; L.push("# Express-Website Briefing — Turm & Leufer (800 € Paket)"); L.push(""); L.push("Du erstellst eine erste optimierte Website-Version (Hauptseite + 2 Unterseiten) auf Basis dieses Briefings. Sprache: Deutsch."); L.push(""); L.push("## 1. Unternehmen & Rechnung"); L.push(`- Firma: ${d.firmenname || "—"}`); if (d.branche) L.push(`- Branche: ${d.branche}`); const addr = [d.rechnungStrasse, [d.rechnungPLZ, d.rechnungOrt].filter(Boolean).join(" "), d.rechnungLand].filter(Boolean).join(", "); if (addr) L.push(`- Rechnungsanschrift: ${addr}`); if (d.ustId) L.push(`- USt-IdNr.: ${d.ustId}`); L.push(`- Ansprechpartner:in: ${d.kontaktName || "—"} <${d.kontaktEmail || "—"}>${d.kontaktTelefon ? `, ${d.kontaktTelefon}` : ""}`); if (d.hatWebsite === "ja") { L.push(`- Bestehende Website: ${d.websiteUrl || "(URL nicht angegeben)"}`); } else if (d.hatWebsite === "nein") { L.push("- Bestehende Website: keine (Erstauftritt)."); } L.push(""); L.push("## 2. Zielgruppe & Problem"); if (d.zielgruppe) L.push(`**Zielgruppe:** ${d.zielgruppe}`); if (d.problem) L.push(`**Gelöstes Problem:** ${d.problem}`); L.push(""); L.push("## 3. Angebot"); if (d.leistungen) L.push("**Leistungen / Produkte:**\n" + d.leistungen.split("\n").map((s) => " " + s).join("\n")); if (d.usp) L.push(`\n**USP / Differenzierung:** ${d.usp}`); L.push(""); L.push("## 4. Tone of Voice"); L.push(`- Anrede: ${d.anrede === "du" ? "Du-Form (persönlich, modern)" : d.anrede === "sie" ? "Sie-Form (klassisch, formell)" : "—"}`); L.push(`- Tonalität: ${describeSlider(d.toneVerspielt, "Sachlich", "Verspielt")}, ${describeSlider(d.toneMutig, "Zurückhaltend", "Selbstbewusst")}, ${describeSlider(d.toneTechnisch, "Einfach", "Fachlich")}.`); L.push(""); L.push("## 5. Visueller Stil"); if (d.stil) L.push(`- Richtung: ${STIL_LABEL[d.stil] || d.stil}`); if (d.hatFarbe === "ja") { L.push(`- Markenfarbe (vorhanden): ${d.primaerfarbe || "(nicht angegeben)"}`); } else if (d.hatFarbe === "nein") { if (d.primaerfarbe) L.push(`- Markenfarbe-Wunsch: ${d.primaerfarbe} (Kund:in wählt aus Vorschlägen, finale Palette von uns)`); else L.push("- Markenfarbe: noch offen — wir schlagen passend zur Branche vor."); } if (d.referenzen) { const refs = d.referenzen.split("\n").map((s) => s.trim()).filter(Boolean); if (refs.length) L.push(`- Referenzen (Look-and-Feel): ${refs.join(", ")}`); } L.push(""); L.push("## 6. Material"); const logoNames = (d.uploadLogo || []).map((f) => f.name); const bilderNames = (d.uploadBilder || []).map((f) => f.name); const docsNames = (d.uploadDocs || []).map((f) => f.name); L.push(`- Logo: ${logoNames.length ? logoNames.join(", ") : "— (kein Upload)"}`); L.push(`- Bilder: ${bilderNames.length ? bilderNames.join(", ") : "— (kein Upload)"}`); L.push(`- Dokumente: ${docsNames.length ? docsNames.join(", ") : "— (kein Upload)"}`); L.push(""); L.push("## 7. Hauptziel der Website"); if (d.hauptziel) L.push(`- Primäres Ziel: ${ZIEL_LABEL[d.hauptziel] || d.hauptziel}`); if (d.cta) L.push(`- Wichtigste Besucher-Handlung: „${d.cta}"`); L.push(""); L.push("## 8. Seitenstruktur"); L.push("- Hauptseite (Landingpage)"); if (Array.isArray(d.unterseiten)) d.unterseiten.forEach((u) => L.push(`- Unterseite: ${u}`)); L.push("- Impressum & Datenschutz (automatisch)"); L.push(""); L.push("## 9. Domain & Hosting"); L.push("_Domain und Hosting laufen über den Kunden. Wir kümmern uns um Setup, DNS, SSL und Anbindung._"); if (d.hatDomain === "ja") { L.push(`- Domain: vorhanden — ${d.domain || "(nicht angegeben)"}${d.domainAnbieter ? ` (Anbieter: ${d.domainAnbieter})` : ""}`); } else if (d.hatDomain === "nein") { L.push(`- Domain: noch nicht vorhanden${d.wunschDomain ? ` · Wunsch: ${d.wunschDomain}` : ""} → Anbieter empfehlen, gemeinsam registrieren.`); } else if (d.hatDomain === "unsicher") { L.push("- Domain: unklar — im Onboarding-Call klären."); } if (d.hatHosting === "ja") { L.push(`- Hosting: vorhanden${d.hostingAnbieter ? ` (Anbieter: ${d.hostingAnbieter})` : ""} → Eignung prüfen.`); } else if (d.hatHosting === "nein") { L.push("- Hosting: noch nicht vorhanden → Empfehlung aussprechen, einrichten."); } else if (d.hatHosting === "unsicher") { L.push("- Hosting: unklar — im Onboarding-Call klären."); } L.push(""); if (d.anmerkungen) { L.push("## 10. Sonstige Anmerkungen"); L.push(d.anmerkungen); L.push(""); } L.push("---"); L.push("Bitte erstelle eine erste, so optimierte wie mögliche Version. Konversions-fokussiert, DSGVO-konform, responsive, im Stil von Turm & Leufer (Webflow-Premium-Partner-Qualität)."); return L.join("\n"); } // ── Submit logic ────────────────────────────────────────────────────────── async function submitToWebhook(data) { const prompt = buildPrompt(data); const fd = new FormData(); // strip file objects from the structured payload — we'll attach files separately const structured = { ...data }; const fileMeta = {}; ["uploadLogo", "uploadBilder", "uploadDocs"].forEach((k) => { const files = data[k] || []; fileMeta[k] = files.map((f) => ({ name: f.name, size: f.size, type: f.type })); delete structured[k]; }); const payload = { paket: { name: "Express", preis_eur: 800, dauer: "24 Stunden", umfang: "Hauptseite + 2 Unterseiten · Design + Aufbau + DSGVO-Setup · Domain & Hosting werden vom Kunden gestellt, wir richten ein", }, submittedAt: new Date().toISOString(), data: structured, files: fileMeta, prompt, }; fd.append("payload", JSON.stringify(payload)); fd.append("prompt", prompt); fd.append("paket", "Express (800€ — Live in 24h)"); // also append top-level fields for convenient extraction in Make Object.entries(structured).forEach(([k, v]) => { if (Array.isArray(v)) fd.append(k, v.join(", ")); else fd.append(k, v == null ? "" : String(v)); }); // attach files (data.uploadLogo || []).forEach((f) => fd.append("logo", f, f.name)); (data.uploadBilder || []).forEach((f) => fd.append("bilder", f, f.name)); (data.uploadDocs || []).forEach((f) => fd.append("dokumente", f, f.name)); const res = await fetch(WEBHOOK_URL, { method: "POST", body: fd }); if (!res.ok) throw new Error(`Webhook ${res.status}`); return res; } // ── Express banner ──────────────────────────────────────────────────────── function ExpressBanner() { return (
Dein Paket · Express

Deine Website. Live in 24 Stunden.

Hauptseite + 2 Unterseiten
Domain & Hosting Setup
Kein Abo
Moderne Landingpage
Responsives Design
Webflow Experten
DSGVO-konform
KI-Texterstellung
Festpreis
800 €
24 h Launch
); } // ── Section Card ────────────────────────────────────────────────────────── function SectionCard({ section, index, data, set, isOpen, onToggle, sectionRef }) { const done = isSectionDone(section, data); const Component = section.Component; return (
{isOpen ? (
) : null}
); } // ── Sidebar ─────────────────────────────────────────────────────────────── function Sidebar({ data, openId, onJump, completion }) { return ( ); } function ContactCard() { return (
Til Leufer
Til Kams Gründer · Webflow Expert

Noch Fragen zum Briefing oder zum Express-Paket? Sprich mich direkt an — ich helfe gerne.

15-Min Call buchen → E-Mail schreiben →
); } // ── Success screen ──────────────────────────────────────────────────────── function SuccessScreen({ data }) { const cal = "https://cal.com/til-kams/15min"; return (
Briefing erhalten

Wir legen los, {data.kontaktName ? data.kontaktName.split(" ")[0] : "los geht's"}.

Deine Angaben sind angekommen — unsere Designer und unsere KI bauen jetzt die erste Version deiner Website. Buch dir gleich einen Slot für das Onboarding-Gespräch, damit wir die letzten Details klären.

Buche jetzt dein Onboarding-Gespräch

30 Minuten, Video-Call. Wir besprechen Inhalte, klären offene Fragen und du hast deine Website morgen live.

Schritt 1 · Jetzt

Onboarding-Call

15 min Video-Call. Inhalte abstimmen, Domain & Logins klären.

Schritt 2 · 24h

Erste Version

Wir bauen mit KI-Unterstützung deine Hauptseite + 2 Unterseiten.

Schritt 3 · Launch

Setup & live

Wir verbinden deine Domain, richten Hosting & SSL ein — du gehst live.

); } // ── App ─────────────────────────────────────────────────────────────────── function App() { const [data, setData] = useState(INITIAL); const [openId, setOpenId] = useState(SECTIONS[0].id); const [submitting, setSubmitting] = useState(false); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(null); const set = (patch) => setData((d) => ({ ...d, ...patch })); const completion = useMemo(() => { const done = SECTIONS.filter((s) => isSectionDone(s, data)).length; return { done, total: SECTIONS.length }; }, [data]); const blockingOpen = SECTIONS.filter((s) => isSectionBlockingSubmit(s, data)); const allRequiredOk = blockingOpen.length === 0; const progressPct = Math.round((completion.done / completion.total) * 100); const cardRefs = useRef({}); const toggleSection = (id) => { setOpenId((curr) => (curr === id ? null : id)); }; const jumpTo = (id) => { setOpenId(id); requestAnimationFrame(() => { const el = cardRefs.current[id]; if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 84; window.scrollTo({ top, behavior: "smooth" }); } }); }; const handleSubmit = async () => { setError(null); if (!allRequiredOk) { // open the first section that still has unfilled required fields const first = blockingOpen[0]; if (first) jumpTo(first.id); setError("Bitte fülle noch die Pflichtfelder der hervorgehobenen Sektion aus."); return; } setSubmitting(true); try { await submitToWebhook(data); setSubmitted(true); window.scrollTo({ top: 0, behavior: "smooth" }); } catch (e) { setError("Da ist etwas schiefgelaufen. Bitte versuche es erneut oder schreib uns direkt: hello@turmundleufer.de"); } finally { setSubmitting(false); } }; if (submitted) { return (
Turm & Leufer
Express-Paket · Briefing eingereicht
); } return (
Turm & Leufer
Express-Paket · Onboarding
{progressPct}%
{SECTIONS.map((s, i) => ( toggleSection(s.id)} sectionRef={(el) => { if (el) cardRefs.current[s.id] = el; }} /> ))}
{allRequiredOk ? ( <> ✓ Alles fertig — Briefing kann abgeschickt werden. ) : ( <> ⚠ Noch {blockingOpen.length} Sektion{blockingOpen.length === 1 ? "" : "en"} mit Pflichtfeldern offen. )}
Sprich direkt mit uns
{error ?
⚠ {error}
: null}
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();