Was macht Landing Page Builder — CAE EEC Pattern?

Beschreibung

Dieses Skill hilft dir, eine qualitativ hochwertige Landing Page (nach dem EEC Pattern der CAE Vietnam) aus den vom Benutzer bereitgestellten Informationen zu erstellen. Der gesamte Prozess wird von Antigravity durchgeführt – der Benutzer muss nur die Fragen beantworten.

Endausgabe:

index.html + styles.css — vollständige, responsive Landing Page mit Animationen
google-apps-script.js — Backend zum Empfangen von Formulardaten → Schreiben in Google Sheets → Senden von E-Mail-Benachrichtigungen
Schritt-für-Schritt-Anleitung zur Bereitstellung auf Cloudflare Pages

Seitenarchitektur nach EEC (Standard-Blueprint)

1. NAV — sticky, blur beim Scrollen, Logo + Links + CTA-Button
2. HERO — Vollbild, roter Gradient, Partikel, Überschrift + Untertext + 2 Buttons
3. STATISTIK-LEISTE — 4 hervorgehobene Zahlen, animierter Zähler
4. WARUM WIR — 6 Feature-Karten mit Hover-Effekten (3 Spalten)
5. INSTRUKTOR (optional) — YouTube Short-Einbettung + Qualifikationen
6. KURSE — 3 Kurse, hervorgehobene Karte in der Mitte, Preisbox
7. ZEITLEISTE — N-Wochen-Route im Rasterformat
8. TESTIMONIALS — 3 Bewertungskarten mit Sternen
9. FAQ — Akkordeon auf-/zuklappbar
10. CTA + FORMULAR — Verlaufssection, Anmeldeformular → Google Sheets + E-Mail
11. FUSSZEILE — 3 Spalten: Marke, Kurse, Kontakt

PROZESS (MUSS IN DER REIHENFOLGE AUSGEFÜHRT WERDEN)

PHASE 0: Scan & Kontext (IMMER ZUERST AUSFÜHREN)

Bevor du irgendetwas fragst, überprüfe die Umgebung und suche nach altem Kontext:

Prüfe, ob Mem0 verfügbar ist:
- Versuche search_memory mit der Abfrage aufzurufen: "landing page preference màu font domain"
- Wenn das Tool NICHT existiert / einen Fehler meldet → ignoriere es vollständig, gehe sofort zu Phase 1, melde dem Benutzer keinen Fehler
- Wenn das Tool existiert und etwas findet → melde: "Ich erinnere mich, dass du letztes Mal [Farbe X / Schriftart Y / Domain Z] verwendet hast. Dieses Mal beibehalten oder ändern?"
- Wenn das Tool existiert, aber nichts findet → führe Phase 1 normal durch
Neuen Kontext speichern (falls Mem0 verfügbar ist) — nachdem der Benutzer alle 7 Gruppen bestätigt hat, rufe add_memory auf:
```
Landing page [Kampagnenname]: Farbe=[hex], Schriftart=Be Vietnam Pro, Domain=[domain], E-Mail=[email], Sheet=[sheet link]
```
- Wenn Mem0 nicht verfügbar ist → überspringe diesen Schritt, das Ergebnis wird nicht beeinträchtigt

Designprinzip: Mem0 ist eine zusätzliche Funktion (progressive enhancement), keine zwingende Abhängigkeit. Das Skill muss auf einem System ohne Mem0 vollständig normal funktionieren.

PHASE 1: Informationen sammeln (jede Gruppe einzeln fragen, auf Antwort warten)

⚠️ WICHTIG: Frage JEDE GRUPPE einzeln. Frage nicht alles auf einmal. Frage erst die nächste Gruppe, nachdem der Benutzer eine Gruppe beantwortet hat.

Gruppe A — Marke & Farbe

Frage:

Um eine Landing Page zu erstellen, benötige ich ein paar grundlegende Informationen.

**Gruppe 1: Marke**
1. Wie lautet der Markenname / der Name des Zentrums? (z.B. CAE Vietnam, ABC-Zentrum...)
2. Die URL Ihres PNG-Logos (oder sagen Sie "nicht vorhanden" für Textersatz)
3. Welche Hauptfarbe möchten Sie verwenden?
   - 🔴 CAE-Rot (wie die EEC-Seite) — #8F1A1A + Gold #FEC46F
   - 🔵 Professionelles Marineblau — #1A3A5C + Cyan #00C9FF
   - 🟢 Frisches Grün — #0D6E3F + Gold #FFD700
   - ✏️ Ich möchte eine andere Farbe eingeben (Hex-Code angeben)
4. Geplanter Domainname? (z.B. angebot.meinunternehmen.com oder "noch nicht vorhanden")

Gruppe B — Hero-Inhalt

Nachdem Gruppe A erhalten wurde, frage:

**Gruppe 2: Kopfbereich (Hero Section)**
1. Welche Hauptüberschrift soll angezeigt werden? (z.B. "100% Stipendium für Akademisches Chinesisch")
2. Ein kleiner Slogan über der Überschrift? (z.B. "Pilotprogramm — Begrenzte Teilnehmerzahl")
3. Eine kurze Beschreibung (1-2 Sätze) unter der Überschrift?
4. Text des primären CTA-Buttons? (z.B. "📝 Jetzt anmelden", "🎓 Stipendium erhalten")
5. Möchten Sie 4 statistische Zahlen anzeigen? (z.B. 3 Klassen, 100% kostenlos, 8 Wochen, 15 Schüler/Klasse)

Gruppe C — Stärken & Kurse

Nachdem Gruppe B erhalten wurde, frage:

**Gruppe 3: Stärken & Produkte**
1. Listen Sie 3-6 Ihrer Stärken auf (jede mit: Emoji-Symbol, kurzem Titel, 1-2 Sätzen Beschreibung)
   z.B.: 🎓 Lizenzierte Programme | Von internationalen Partnern lizenziert...

2. Listen Sie 1-3 Kurse/Dienstleistungspakete auf (jedes Paket enthält):
   - Kursname
   - Kleines Badge (z.B. "Online · 8 Wochen", "Offline · Hanoi")
   - 3-4 herausragende Funktionen
   - Originalpreis (zum Durchstreichen)
   - Aktionspreis / "100% KOSTENLOS" / Rabattprozentsatz
   - Hinweis (z.B. "Nur 15 Plätze")
   - Welcher Kurs ist der "herausragendste"?

Gruppe D — Zeitplan & Lehrer

Nachdem Gruppe C erhalten wurde, frage:

**Gruppe 4: Zusätzliche Inhalte**
1. Gibt es einen wöchentlichen Lernplan? (Wenn ja, listen Sie N Wochen mit Themen auf)
2. Möchten Sie einen Lehrer/Experten vorstellen?
   - Name, Titel
   - Link zu einem YouTube-Video (optional)
   - 3 herausragende Zertifikate/Erfolge
3. Gibt es 3 Kundenstimmen?
   (Initialen, vollständiger Name, Rolle, Zitat)

Gruppe E — FAQ & Kontakt

Nachdem Gruppe D erhalten wurde, frage:

**Gruppe 5: FAQ & Kontakt**
1. Listen Sie 5-7 häufig gestellte Fragen und Antworten auf.
2. Kontaktinformationen:
   - Büroadresse
   - Hotline/Zalo
   - E-Mail
   - Facebook-Seiten-URL
3. Fußzeilen-Copyright: "© 2025 [Organisationsname]"

Gruppe F — Formular & Backend

Nachdem Gruppe E erhalten wurde, frage:

**Gruppe 6: Anmeldeformular & Datenverbindung**
1. Welche Felder soll das Formular erfassen?
   - [x] Vollständiger Name (erforderlich)
   - [x] Telefonnummer (erforderlich)
   - [ ] E-Mail
   - [ ] Adresse / Stadt
   - [ ] Kontrollkästchen zur Kursauswahl
   - [ ] Textfeld für Notizen
   - [ ] Anderes Feld?

2. An welche E-Mail-Adresse soll die Benachrichtigung gesendet werden, wenn sich jemand anmeldet?
   (z.B. [email protected])

3. Welchen Betreff möchten Sie für die E-Mail-Benachrichtigung verwenden?
   (z.B. "🔔 Neue Anmeldung von der Landing Page!")

4. Bitte senden Sie mir den Link zu dem Google Sheet, in dem Sie die Anmeldedaten speichern möchten.
   (Ich werde das Skript entsprechend den obigen Formularfeldern erstellen und Ihnen dann erklären, wie Sie es auf diesem Sheet ausführen)

⚠️ Nachdem der Benutzer den Sheet-Link gesendet hat → STOPPEN und sofort PHASE 2 ausführen.

Gruppe G — Cloudflare-Deployment

Nachdem Gruppe F erhalten wurde, frage:

**Gruppe 7: Deploy-Informationen (letzter Schritt)**
1. Ihre Cloudflare Account ID?
   (Gehen Sie zu dash.cloudflare.com → wählen Sie Ihr Konto → sehen Sie die URL: cloudflare.com/ACCOUNT_ID)
2. Ihr Cloudflare API Token?
   (Gehen Sie zu Mein Profil → API-Tokens → Token erstellen → verwenden Sie die Vorlage "Edit Cloudflare Pages")
3. Name des Cloudflare Pages-Projekts? (Kleinbuchstaben, Bindestriche, z.B. meine-landingpage-2025)
4. Benutzerdefinierte Domain, die Sie zuweisen möchten? (z.B. angebot.domain.com oder "nicht nötig")

PHASE 1.5 — 10-STAR-VISION ⭐ (VERPFLICHTEND vor der Generierung)

"Entwerfen Sie nicht für Millionen von Menschen. Entwerfen Sie so, dass EIN MENSCH die erstaunlichste Erfahrung macht, die er je hatte." — Garry Tan

Halte inne und beantworte diese 4 Fragen, BEVOR du eine Zeile Code schreibst:

Ist die Überschrift "einschlagend"?
- Lies die Überschrift in 3 Sekunden: Weiß der Kunde sofort, dass dies für ihn ist?
- Wenn nicht stark genug → wende die Copy-Formel aus diesem Skill an, um sie umzuschreiben
Hat diese Seite EINE unvergessliche Sache?
- Eine beeindruckende Zahl? Ein kühnes Versprechen? Ein unerwarteter Vorteil?
- z.B.: "100% kostenlos lernen — Nur 15 Plätze" → klar, knapp, sofort handeln
Welche tödliche Schwachstelle könnte diese Landing Page haben?
- Zu viele Formularfelder? Kein sozialer Beweis im Hero? Schwacher CTA?
- Identifiziere und behebe sie sofort im Design
Wenn Steve Jobs diese Seite überprüfen würde, was würde er streichen?
- Entferne alles, was nicht dem einzigen Ziel dient: Anmeldung

Ausgabe: Notiere die Vision in der Antwort, bevor du fortfährst:

🎯 10-STAR-VISION:
- Einzigartige Stärke: [..]
- Entscheidende Überschrift: [..]
- 1 unvergessliche Sache: [..]
- Bereits gestrichen: [..]

FOUNDER-CHALLENGE-REGEL (Anwendung am Vision Gate)

"Spiele die Rolle des CEO — die Aufgabe ist es, Mittelmäßigkeit herauszufordern, nicht sie anzuerkennen."

Wenn der Benutzer eine schwache Überschrift liefert (generisch, unklare Zielgruppe, kein konkreter Nutzen), darf diese NICHT sofort akzeptiert werden. Stattdessen:

⚡ Founder Mode:
Die Überschrift "[Überschrift des Benutzers]" ist noch generisch. Ich schlage 3 stärkere Alternativen vor:

[A] [Konkreter Nutzen] — [Zahl/Zeitraum] — [Klare Zielgruppe]
    z.B.: "Akademisches Chinesisch kostenlos lernen — Nur 15 Plätze"

[B] [Frage-Hook] + [Überraschendes Ergebnis]
    z.B.: "Ihr Kind lernt 8 Wochen Chinesisch — selbstbewusster als internationale Schüler?"

[C] [Kühnes Versprechen] + [Beweis]
    z.B.: "Keine Fortschritte nach 4 Sitzungen — 100% Geld-zurück, keine Fragen"

Welche Richtung wählen Sie, oder möchten Sie, dass ich eine andere Version schreibe?

Wann herausfordern: Die Überschrift enthält nicht mindestens 2 der 3 Elemente: (1) klare Zielgruppe, (2) konkreter Nutzen, (3) Zahl/Versprechen.

PHASE 2: Google Apps Script erstellen (Backend)

Auslöser: Benutzer hat den Google Sheet-Link gesendet (Gruppe F.4).

Schritt 1 — Benutzerdefiniertes Skript generieren:

Basierend auf der Vorlage unter templates/google-apps-script.js ein Skript erstellen, das genau an das Formular der Landing Page angepasst ist:

NOTIFICATION_EMAIL = E-Mail aus Gruppe F.2 eintragen
EMAIL_SUBJECT = Betreff aus Gruppe F.3 eintragen
CAMPAIGN_NAME = Kampagnenname aus Gruppe A.1 eintragen
Funktion writeToSheet() aktualisieren, um die genaue Spaltenanzahl entsprechend der Formularfelder aus Gruppe F.1 zu haben
Funktion doPost() aktualisieren, um die korrekten e.parameter gemäß den ausgewählten Feldern zu parsen

Schritt 2 — Codeblock zur Kopie für den Benutzer ausgeben:

Nach der Generierung den GESAMTEN Code in einem einzigen Block anzeigen:

✅ Ich habe das Skript für Ihr Google Sheet erstellt!

Hier ist der Code, den Sie kopieren und in Ihr Sheet einfügen müssen:
[CODE BLOCK]

📋 ANLEITUNG ZUR AUSFÜHRUNG IN IHREM GOOGLE SHEET (5 Schritte):

① Öffnen Sie das Google Sheet, dessen Link Sie gerade gesendet haben → Gehen Sie zu Menü Extensions → Apps Script
   (Oder klicken Sie auf den Sheet-Link und suchen Sie das Menü Extensions in der oberen Leiste)

② Löschen Sie den gesamten Standardcode im Editor (Strg+A → Entf)

③ Fügen Sie den gesamten oben erstellten Code ein (Strg+V)

④ Drücken Sie Strg+S zum Speichern → Geben Sie dem Projekt den Namen "Landing Page Handler" → OK

⑤ Skript bereitstellen:
   • Klicken Sie auf die Schaltfläche "Deploy" (oben rechts) → "New deployment"
   • Bei "Type": wählen Sie "Web app"
   • Bei "Execute as": wählen Sie "Me (Ihre E-Mail-Adresse)"
   • Bei "Who has access": wählen Sie "Anyone"
   • Klicken Sie auf "Deploy" → Google fragt nach Berechtigungen → Klicken Sie auf "Authorize access" → Wählen Sie Ihr Google-Konto
   • Kopieren Sie die lange URL, die erscheint (Format: https://script.google.com/macros/s/.../exec)

📌 Sobald Sie diese URL haben, fügen Sie sie hier ein, damit ich sie in die Landing Page einfügen kann.

Schritt 3 — Warte auf die Benutzerbestätigung der SHEETS_ENDPOINT-URL, bevor du mit PHASE 3 fortfährst.

PHASE 3: Landing Page HTML generieren

Basierend auf allen gesammelten Informationen die Datei index.html vollständig erstellen:

Dateistruktur, die erstellt werden muss:

Eine einzige Datei index.html (CSS inline im <style>-Tag, KEINE separate Datei)
JavaScript-Formularübermittlung inline im <script>-Tag
Keine Framework-Abhängigkeit, nur Vanilla HTML/CSS/JS
Vollständig responsiv (Mobile-First)
Be Vietnam Pro verwenden (von Google Fonts CDN laden) — vollständige Unterstützung für vietnamesische Akzente, ersetzt Inter/Montserrat

Design nach EEC-Pattern:

Farbschema aus Gruppe A.3
Alle Abschnitte aus dem Blueprint
Wenn der Benutzer keinen Instruktor angibt → Abschnitt weglassen
Wenn keine Testimonials vorhanden → Abschnitt weglassen
Wenn keine Zeitleiste vorhanden → Abschnitt weglassen

Formularübermittlungsmuster (MUSS verstecktes iframe verwenden — CORS vermeiden):

const SHEETS_ENDPOINT = 'URL_GAS_DES_BENUTZERS'; // URL aus Schritt 2 eintragen

const hiddenFrame = document.createElement('iframe');
hiddenFrame.name = 'hidden_iframe';
hiddenFrame.style.display = 'none';
document.body.appendChild(hiddenFrame);

// Beim Absenden: verstecktes Formular erstellen, POST an GAS-Endpunkt, Ziel ist verstecktes iframe
// Kein fetch() verwenden — natives Formular-POST wird nicht von CORS blockiert

Backup localStorage:

// Vor dem Absenden immer in localStorage sichern
const regs = JSON.parse(localStorage.getItem('lp_registrations') || '[]');
regs.push(data);
localStorage.setItem('lp_registrations', JSON.stringify(regs));

Optimistische UI + GAS-Resilienz (PFLICHT):

// 1. Erfolg SOFORT anzeigen — nicht auf GAS-Antwort warten
function submitForm(data) {
  // Zuerst in localStorage sichern
  backupToLocal(data);

  // Erfolgsmeldung sofort anzeigen (optimistisch)
  showSuccessMessage();

  // GAS im Hintergrund senden — UI nicht blockieren
  submitToGAS(data).catch(() => {
    // GAS fehlgeschlagen, aber localStorage vorhanden → stiller Wiederholungsversuch
    scheduleRetry(data);
  });
}

// 2. Automatischer Wiederholungsversuch bei GAS-Fehler
function scheduleRetry(data, attempt = 1) {
  if (attempt > 3) return; // Nach 3 Versuchen aufgeben
  setTimeout(() => {
    submitToGAS(data).catch(() => scheduleRetry(data, attempt + 1));
  }, attempt * 3000); // 3s, 6s, 9s
}

// 3. GAS-Timeout 10s (Benutzer nicht unendlich warten lassen)
async function submitToGAS(data) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 10000);
  try {
    // fetch mit mode no-cors verwenden (GAS gibt keinen Antworttext zurück)
    await fetch(SHEETS_ENDPOINT, {
      method: 'POST', mode: 'no-cors',
      body: new URLSearchParams(data),
      signal: controller.signal
    });
  } finally {
    clearTimeout(timeout);
  }
}

Hinweis: no-cors-Modus mit fetch + URLSearchParams ist eine Alternative zum versteckten iframe, die nicht von CORS blockiert wird. Je nach Kontext eine der beiden Methoden verwenden.

PHASE 3.5 — BROWSER-VERIFIZIERUNG (vor dem Deployment)

Auslöser: Datei index.html wurde erstellt.

Verwende das Browser-Tool zur Verifizierung, bevor du dem Benutzer die Freigabe erteilst:

Datei im Browser öffnen (oder auf einem lokalen Server)
Responsive-Check:
- Mobil 375px: Menü bricht nicht, Formular passt auf den Bildschirm, Text wird nicht abgeschnitten
- Desktop 1440px: nicht zu breit, Layout ausgewogen
UX-Check:
- CTA-Button ist sichtbar above-the-fold ohne Scrollen
- Formularübermittlung: Testdaten eingeben → Konsole auf Fehler prüfen
- FAQ-Akkordeon öffnen/schließen funktioniert
- Scrollen ist flüssig, kein Ruckeln
Visueller Check:
- Farben entsprechen der ausgewählten Palette
- Schriftart wird korrekt geladen (Be Vietnam Pro)
- Keine Platzhaltertexte mehr vorhanden
Screenshot und Bericht: Screenshots von Desktop + Mobil machen und dem Benutzer zur Vorschau senden

⚠️ MUSS die gesamte Checkliste bestanden haben, bevor PHASE 3.6 Verfeinerung und PHASE 4 Deployment ausgeführt werden.

PHASE 3.6 — VERFEINERUNGSDURCHLAUF (Polieren)

Nachdem der Benutzer den Inhalt bestätigt hat, einen Polierdurchgang durchführen:

Mikro-Animationen: fade-in beim Scrollen für jeden Abschnitt hinzufügen (IntersectionObserver)
Hover-Effekte: Leichte Skalierung des Buttons bei Hover (transform: scale(1.03))
CTA-Pulsieren: Der primäre Anmeldebutton erhält eine subtile Puls-Animation, um die Aufmerksamkeit zu erregen
Zähler-Animation: Die statistischen Zahlen (3 Klassen, 500+ Schüler) zählen beim Betreten des Viewports hoch
Formular-Feedback: Ladezustand beim Absenden anzeigen, Erfolgsmeldung nach dem Senden
Nav-Unschärfe: Beim Herunterscrollen erhält die Navigation eine backdrop-filter: blur()-Unschärfe

Code-Formatierung: Stelle sicher, dass der gesamte generierte Code konsistent und sauber formatiert ist.

PHASE 4: Cloudflare Pages Deployment

Auslöser: Benutzer hat Gruppe G (Cloudflare-Informationen) bereitgestellt.

Schritt 1 — Zwei-Dateien-Struktur vorbereiten: index.html + _redirects erstellen (für SPA-Routing-Unterstützung).

Schritt 2 — Deployment-Befehl vorbereiten:

# 1. Im Projektordner: `index.html` und `_redirects` müssen vorhanden sein
# 2. Deployment über Wrangler CLI (oder Cloudflare Dashboard):

# Mit Wrangler:
#   npm install -g wrangler
#   wrangler pages project create [PROJEKTNAME]
#   wrangler pages deploy . --project-name=[PROJEKTNAME]

# Oder mit Cloudflare API (CURL):
curl -X POST "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects/PROJEKTNAME/deployments" \
     -H "Authorization: Bearer CLOUDFLARE_API_TOKEN" \
     -H "Content-Type: multipart/form-data" \
     -F "metadata={"branch":"main"}" \
     -F "[email protected]"

Schritt 3 — Deployment manuell bestätigen:

✅ Führen Sie diesen Befehl im Terminal aus (ersetzen Sie die Werte in GROSSBUCHSTABEN):

curl -X POST "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects/PROJEKTNAME/deployments" \
     -H "Authorization: Bearer CLOUDFLARE_API_TOKEN" \
     -H "Content-Type: multipart/form-data" \
     -F "metadata={\"branch\":\"main\"}" \
     -F "[email protected]"

📌 Nach erfolgreichem Deployment:
- Standard-Cloudflare-Domain: https://PROJEKTNAME.pages.dev
- Wenn Sie eine benutzerdefinierte Domain konfiguriert haben (Gruppe G.4), fügen Sie sie im Cloudflare-Dashboard → Pages-Projekt → Custom domains hinzu.
- Warten Sie 1-2 Minuten, bis DNS propagiert ist.

PHASE 5: Qualitätssicherung & Übergabe

Schritt 1 — Gesamtüberprüfung nach dem Deployment:

Seite unter der bereitgestellten URL öffnen
Alle Abschnitte korrekt rendern (insbesondere mobile Ansicht)
Kontaktformular ausfüllen und absenden → Prüfen, ob Daten im Google Sheet landen
Prüfen, ob die E-Mail-Benachrichtigung am Ziel-Eingang eingeht
CTA-Button funktioniert (weiterleiten oder Formular auslösen)
Ladegeschwindigkeit: < 3s First Contentful Paint

Schritt 2 — Übergabe:

🎉 **Landing Page deployment erfolgreich!**

Hier ist die Zusammenfassung:

🌐 URL: https://ihre-domain.com
📊 Google Sheet: [Link zum Sheet mit Daten]
📧 E-Mail-Benachrichtigung: [email protected]

💡 **Nächste Schritte (optional):**
1. Google Analytics 4 einrichten, um Besucher und Konversionen zu verfolgen
2. Facebook Pixel hinzufügen, um Retargeting-Anzeigen zu schalten
3. SEO-Optimierung: Meta-Title/-Description überarbeiten
4. A/B-Test mit verschiedenen CTA-Texten durchführen

Bei Bedarf kann ich Ihnen bei diesen Anpassungen helfen!

ANHANG: Template-Struktur

`templates/google-apps-script.js`

// Google Apps Script — Landing Page Handler
// Erstellt automatisch von Antigravity

const SHEET_NAME = 'Sheet1';
const CAMPAIGN_NAME = '{CAMPAIGN_NAME}';
const NOTIFICATION_EMAIL = '{NOTIFICATION_EMAIL}';
const EMAIL_SUBJECT = '{EMAIL_SUBJECT}';

function doPost(e) {
  try {
    const data = e.parameter;
    writeToSheet(data);
    sendEmail(data);
    return ContentService.createTextOutput(JSON.stringify({success: true})).setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({success: false, error: error.toString()})).setMimeType(ContentService.MimeType.JSON);
  }
}

function writeToSheet(data) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(SHEET_NAME);
  const headers = sheet.getDataRange().getValues()[0] || [];
  const timestamp = new Date();
  const row = [timestamp];
  headers.slice(1).forEach(header => {
    row.push(data[header] || '');
  });
  sheet.appendRow(row);
}

function sendEmail(data) {
  let htmlBody = `
    <h2>${EMAIL_SUBJECT}</h2>
    <p><strong>Kampagne:</strong> ${CAMPAIGN_NAME}</p>
    <table border="1" cellpadding="8" cellspacing="0" style="border-collapse:collapse;">
      <tr><td><strong>Feld</strong></td><td><strong>Wert</strong></td></tr>
  `;
  Object.keys(data).forEach(key => {
    htmlBody += `<tr><td>${key}</td><td>${data[key]}</td></tr>`;
  });
  htmlBody += `</table>`;

  MailApp.sendEmail({
    to: NOTIFICATION_EMAIL,
    subject: EMAIL_SUBJECT,
    htmlBody: htmlBody
  });
}

function doGet() {
  return ContentService.createTextOutput('Landing Page Handler is ready.');
}

`templates/_redirects`

# Cloudflare Pages SPA Redirect
/*    /index.html   200

HÄUFIGE FRAGEN

F: Kann ich eine andere Schriftart als Be Vietnam Pro verwenden? A: Ja, aber Be Vietnam Pro wird empfohlen, da es vietnamesische Akzente gut unterstützt und für vietnamesische Landing Pages optimiert ist. Wenn eine andere Schriftart gewünscht wird, aktualisiere den Google Fonts Link und den CSS-Font-Stack im HTML.

F: Was ist, wenn ich kein Cloudflare Pages verwenden möchte? A: Du kannst die generierte index.html auf jedem statischen Hosting-Dienst deployen (Netlify, Vercel, GitHub Pages, etc.). Das Backend (Google Apps Script) bleibt gleich. Sage einfach Bescheid, und ich passe die Schritt-für-Schritt-Anleitung an.

F: Kann die Anzahl der Testimonials/Kurse erhöht werden? A: Ja, das Layout kann angepasst werden. Derzeit beträgt das Maximum auf Basis des Blueprints 3 Testimonials und 3 Kurse. Wenn mehr benötigt werden, lasse es mich während der Fragephase wissen.

F: Erhalten die Benutzer nach der Anmeldung eine automatische Bestätigungs-E-Mail? A: Das aktuelle Backend sendet nur eine Benachrichtigung an den Administrator. Um eine automatische Bestätigungs-E-Mail an den Anmeldenden zu senden, muss das Skript um eine Funktion zum Senden von E-Mails an die im Formular angegebene Adresse erweitert werden. Dies kann auf Anfrage hinzugefügt werden.

Landing Page Builder — CAE EEC Pattern

Was ist Landing Page Builder — CAE EEC Pattern?

In Ihrer bevorzugten KI fragen

Dokumentation