Add 2 files

index.html

@@ -25,38 +25,34 @@
         .bg-gradient-brand {
             background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
         }
-        .workflow-node {
+        .workflow-card {
             border-radius: 12px;
             padding: 16px;
-            margin: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             transition: all 0.3s ease;
+            height: 100%;
         }
-        .workflow-node:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
+        .workflow-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
-        .workflow-connector {
-            position: relative;
+        .workflow-icon {
+            width: 40px;
             height: 40px;
-            width: 2px;
-            background: linear-gradient(to bottom, #7C3AED, #4F46E5);
-            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 10px;
+            margin-right: 12px;
         }
-        .workflow-connector::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: -4px;
-            width: 10px;
-            height: 10px;
-            background: #4F46E5;
-            border-radius: 50%;
+        .workflow-steps {
+            margin-top: 12px;
+            font-size: 0.85rem;
+            line-height: 1.6;
         }
-        #mermaid-diagram {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 20px;
-            padding: 20px;
+        .workflow-steps i {
+            margin-right: 6px;
+            width: 18px;
+            text-align: center;
         }
     </style>
 </head>
@@ -94,94 +90,112 @@
             </p>
         </section>
 
-        <!-- Workflow Diagram Section -->
+        <!-- Workflow Cards Section -->
         <section id="workflows" class="mb-16">
-            <div class="bg-glass rounded-2xl p-6 shadow-2xl border border-purple-500 border-opacity-30">
-                <h2 class="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
-                    Lead-Generierungs-Workflow
-                </h2>
-                
-                <!-- Mermaid Diagram -->
-                <div id="mermaid-diagram" class="mb-8">
-                    <div class="mermaid">
-                        graph TD
-                            A[Webhook Trigger<br><i class='fas fa-mouse-pointer'></i>] --> B[Google Sheets<br><i class='fas fa-table'></i>]
-                            B --> C{Filter<br><i class='fas fa-filter'></i>}
-                            C -->|Neuer Lead| D[SendGrid Email<br><i class='fas fa-envelope'></i>]
-                            C -->|Bestehender Kunde| E[HubSpot CRM<br><i class='fas fa-user-tie'></i>]
-                            D --> F[Slack Notification<br><i class='fab fa-slack'></i>]
-                            E --> F
+            <h2 class="text-2xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
+                Unsere Top-Workflows
+            </h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- SEO Agent Workflow -->
+                <div class="workflow-card bg-gradient-to-br from-indigo-900 to-indigo-800">
+                    <div class="flex items-center mb-4">
+                        <div class="workflow-icon bg-indigo-700">
+                            <i class="fas fa-search text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold">SEO Agent</h3>
+                    </div>
+                    <div class="workflow-steps text-gray-300">
+                        <p><i class="fas fa-arrow-right text-indigo-300"></i>Keywords von Google Search Console</p>
+                        <p><i class="fas fa-arrow-right text-indigo-300"></i>Analyse mit OpenAI</p>
+                        <p><i class="fas fa-arrow-right text-indigo-300"></i>Content-Vorschläge generieren</p>
+                        <p><i class="fas fa-arrow-right text-indigo-300"></i>Notion-Datenbank aktualisieren</p>
+                        <p><i class="fas fa-arrow-right text-indigo-300"></i>Slack-Benachrichtigung an Team</p>
                     </div>
                 </div>
                 
-                <!-- Interactive Workflow Explanation -->
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                    <div>
-                        <h3 class="text-xl font-semibold mb-4 text-purple-300">Workflow-Komponenten</h3>
-                        
-                        <div class="workflow-node bg-gradient-to-br from-indigo-900 to-indigo-800 mb-4">
-                            <div class="flex items-center mb-2">
-                                <div class="bg-indigo-700 p-2 rounded-lg mr-3">
-                                    <i class="fas fa-mouse-pointer"></i>
-                                </div>
-                                <h4 class="font-bold">Webhook Trigger</h4>
-                            </div>
-                            <p class="text-sm text-gray-300">Startet den Workflow bei Formularabgabe auf Ihrer Website</p>
-                        </div>
-                        
-                        <div class="workflow-node bg-gradient-to-br from-blue-900 to-blue-800 mb-4">
-                            <div class="flex items-center mb-2">
-                                <div class="bg-blue-700 p-2 rounded-lg mr-3">
-                                    <i class="fas fa-table"></i>
-                                </div>
-                                <h4 class="font-bold">Google Sheets</h4>
-                            </div>
-                            <p class="text-sm text-gray-300">Speichert Lead-Daten in Ihrer CRM-Tabelle</p>
+                <!-- Angebotserstellung Workflow -->
+                <div class="workflow-card bg-gradient-to-br from-blue-900 to-blue-800">
+                    <div class="flex items-center mb-4">
+                        <div class="workflow-icon bg-blue-700">
+                            <i class="fas fa-file-invoice-dollar text-white"></i>
                         </div>
-                        
-                        <div class="workflow-node bg-gradient-to-br from-purple-900 to-purple-800 mb-4">
-                            <div class="flex items-center mb-2">
-                                <div class="bg-purple-700 p-2 rounded-lg mr-3">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <h4 class="font-bold">Filter</h4>
-                            </div>
-                            <p class="text-sm text-gray-300">Unterscheidet zwischen neuen Leads und bestehenden Kunden</p>
+                        <h3 class="text-xl font-semibold">Angebotserstellung</h3>
+                    </div>
+                    <div class="workflow-steps text-gray-300">
+                        <p><i class="fas fa-arrow-right text-blue-300"></i>Neue Anfrage in Typeform</p>
+                        <p><i class="fas fa-arrow-right text-blue-300"></i>Daten in Google Sheets speichern</p>
+                        <p><i class="fas fa-arrow-right text-blue-300"></i>PDF-Vorlage mit DocuSign füllen</p>
+                        <p><i class="fas fa-arrow-right text-blue-300"></i>Angebot per Email versenden</p>
+                        <p><i class="fas fa-arrow-right text-blue-300"></i>Follow-up in 7 Tagen</p>
+                    </div>
+                </div>
+                
+                <!-- Email Draft Workflow -->
+                <div class="workflow-card bg-gradient-to-br from-green-900 to-green-800">
+                    <div class="flex items-center mb-4">
+                        <div class="workflow-icon bg-green-700">
+                            <i class="fas fa-envelope text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold">Email Draft</h3>
                     </div>
-                    
-                    <div>
-                        <h3 class="text-xl font-semibold mb-4 text-purple-300">Aktionen & Ergebnisse</h3>
-                        
-                        <div class="workflow-node bg-gradient-to-br from-green-900 to-green-800 mb-4">
-                            <div class="flex items-center mb-2">
-                                <div class="bg-green-700 p-2 rounded-lg mr-3">
-                                    <i class="fas fa-envelope"></i>
-                                </div>
-                                <h4 class="font-bold">SendGrid Email</h4>
-                            </div>
-                            <p class="text-sm text-gray-300">Sendet Willkommens-E-Mail an neue Leads</p>
+                    <div class="workflow-steps text-gray-300">
+                        <p><i class="fas fa-arrow-right text-green-300"></i>Trigger bei neuem Lead</p>
+                        <p><i class="fas fa-arrow-right text-green-300"></i>Personalisierte Vorlage auswählen</p>
+                        <p><i class="fas fa-arrow-right text-green-300"></i>Inhalt mit OpenAI optimieren</p>
+                        <p><i class="fas fa-arrow-right text-green-300"></i>Entwurf in Gmail speichern</p>
+                        <p><i class="fas fa-arrow-right text-green-300"></i>Redakteur benachrichtigen</p>
+                    </div>
+                </div>
+                
+                <!-- Social Media Content Workflow -->
+                <div class="workflow-card bg-gradient-to-br from-pink-900 to-pink-800">
+                    <div class="flex items-center mb-4">
+                        <div class="workflow-icon bg-pink-700">
+                            <i class="fas fa-share-alt text-white"></i>
                         </div>
-                        
-                        <div class="workflow-node bg-gradient-to-br from-pink-900 to-pink-800 mb-4">
-                            <div class="flex items-center mb-2">
-                                <div class="bg-pink-700 p-2 rounded-lg mr-3">
-                                    <i class="fas fa-user-tie"></i>
-                                </div>
-                                <h4 class="font-bold">HubSpot CRM</h4>
-                            </div>
-                            <p class="text-sm text-gray-300">Aktualisiert Kundenprofil mit neuen Daten</p>
+                        <h3 class="text-xl font-semibold">Social Media Content</h3>
+                    </div>
+                    <div class="workflow-steps text-gray-300">
+                        <p><i class="fas fa-arrow-right text-pink-300"></i>Blog-Post in WordPress</p>
+                        <p><i class="fas fa-arrow-right text-pink-300"></i>Zusammenfassung mit OpenAI</p>
+                        <p><i class="fas fa-arrow-right text-pink-300"></i>Bilder mit DALL-E erstellen</p>
+                        <p><i class="fas fa-arrow-right text-pink-300"></i>Planung in Buffer</p>
+                        <p><i class="fas fa-arrow-right text-pink-300"></i>Twitter & LinkedIn posten</p>
+                    </div>
+                </div>
+                
+                <!-- LeadGen Workflow -->
+                <div class="workflow-card bg-gradient-to-br from-purple-900 to-purple-800">
+                    <div class="flex items-center mb-4">
+                        <div class="workflow-icon bg-purple-700">
+                            <i class="fas fa-users text-white"></i>
                         </div>
-                        
-                        <div class="workflow-node bg-gradient-to-br from-yellow-900 to-yellow-800 mb-4">
-                            <div class="flex items-center mb-2">
-                                <div class="bg-yellow-700 p-2 rounded-lg mr-3">
-                                    <i class="fab fa-slack"></i>
-                                </div>
-                                <h4 class="font-bold">Slack Notification</h4>
-                            </div>
-                            <p class="text-sm text-gray-300">Benachrichtigt Ihr Team über neuen Lead/Kunden</p>
+                        <h3 class="text-xl font-semibold">LeadGen</h3>
+                    </div>
+                    <div class="workflow-steps text-gray-300">
+                        <p><i class="fas fa-arrow-right text-purple-300"></i>Website-Formular (Webhook)</p>
+                        <p><i class="fas fa-arrow-right text-purple-300"></i>Daten in HubSpot speichern</p>
+                        <p><i class="fas fa-arrow-right text-purple-300"></i>Willkommens-Email versenden</p>
+                        <p><i class="fas fa-arrow-right text-purple-300"></i>Slack-Benachrichtigung</p>
+                        <p><i class="fas fa-arrow-right text-purple-300"></i>Follow-up in 3 Tagen</p>
+                    </div>
+                </div>
+                
+                <!-- Bonus Workflow -->
+                <div class="workflow-card bg-gradient-to-br from-yellow-900 to-yellow-800">
+                    <div class="flex items-center mb-4">
+                        <div class="workflow-icon bg-yellow-700">
+                            <i class="fas fa-tasks text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold">Projektmanagement</h3>
+                    </div>
+                    <div class="workflow-steps text-gray-300">
+                        <p><i class="fas fa-arrow-right text-yellow-300"></i>Neues Ticket in Trello</p>
+                        <p><i class="fas fa-arrow-right text-yellow-300"></i>Team in Slack benachrichtigen</p>
+                        <p><i class="fas fa-arrow-right text-yellow-300"></i>Zeitplan in Google Calendar</p>
+                        <p><i class="fas fa-arrow-right text-yellow-300"></i>Dokumente in Notion erstellen</p>
+                        <p><i class="fas fa-arrow-right text-yellow-300"></i>Zusammenfassung per Email</p>
                     </div>
                 </div>
             </div>
@@ -191,7 +205,7 @@
         <section class="mb-16">
             <div class="bg-glass rounded-2xl p-8 shadow-2xl border border-purple-500 border-opacity-30">
                 <h2 class="text-2xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
-                    Vorteile dieses Workflows
+                    Vorteile unserer Workflows
                 </h2>
                 
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -201,7 +215,7 @@
                         </div>
                         <h3 class="text-xl font-semibold mb-3">100% Automatisiert</h3>
                         <p class="text-gray-300">
-                            Kein manueller Datentransfer mehr zwischen Systemen. Der Workflow erledigt alles automatisch.
+                            Kein manueller Datentransfer mehr zwischen Systemen. Die Workflows erledigen alles automatisch.
                         </p>
                     </div>
                     
@@ -211,7 +225,7 @@
                         </div>
                         <h3 class="text-xl font-semibold mb-3">Echtzeit-Verarbeitung</h3>
                         <p class="text-gray-300">
-                            Leads werden sofort verarbeitet, ohne Verzögerung für maximale Konversionsraten.
+                            Daten werden sofort verarbeitet, ohne Verzögerung für maximale Effizienz.
                         </p>
                     </div>
                     
@@ -228,87 +242,6 @@
             </div>
         </section>
 
-        <!-- Additional Workflows -->
-        <section class="mb-16">
-            <h2 class="text-2xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
-                Weitere n8n-Workflow-Vorlagen
-            </h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="bg-glass rounded-xl p-6 border border-blue-500 border-opacity-30 hover:border-opacity-60 transition">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-blue-900 p-3 rounded-lg mr-4">
-                            <i class="fas fa-shopping-cart text-xl"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold">E-Commerce Automation</h3>
-                            <p class="text-sm text-gray-400">Shopify → Rechnungen → Versand → Kundenkommunikation</p>
-                        </div>
-                    </div>
-                    <div class="mermaid text-xs">
-                        graph LR
-                            A[Shopify Order] --> B[QuickBooks Invoice]
-                            B --> C[ShipStation]
-                            C --> D[Klaviyo Email]
-                    </div>
-                </div>
-                
-                <div class="bg-glass rounded-xl p-6 border border-purple-500 border-opacity-30 hover:border-opacity-60 transition">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-purple-900 p-3 rounded-lg mr-4">
-                            <i class="fas fa-calendar-check text-xl"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold">Termin-Management</h3>
-                            <p class="text-sm text-gray-400">Calendly → Zoom → Follow-ups → Zahlungserinnerung</p>
-                        </div>
-                    </div>
-                    <div class="mermaid text-xs">
-                        graph LR
-                            A[Calendly Booking] --> B[Zoom Meeting]
-                            B --> C[Notion Database]
-                            C --> D[Stripe Invoice]
-                    </div>
-                </div>
-                
-                <div class="bg-glass rounded-xl p-6 border border-green-500 border-opacity-30 hover:border-opacity-60 transition">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-green-900 p-3 rounded-lg mr-4">
-                            <i class="fas fa-bullhorn text-xl"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold">Social Media Automation</h3>
-                            <p class="text-sm text-gray-400">Content-Kalender → Plattformen → Analytics → Reporting</p>
-                        </div>
-                    </div>
-                    <div class="mermaid text-xs">
-                        graph LR
-                            A[Google Sheets] --> B[Twitter+LinkedIn]
-                            B --> C[Google Analytics]
-                            C --> D[Slack Report]
-                    </div>
-                </div>
-                
-                <div class="bg-glass rounded-xl p-6 border border-yellow-500 border-opacity-30 hover:border-opacity-60 transition">
-                    <div class="flex items-start mb-4">
-                        <div class="bg-yellow-900 p-3 rounded-lg mr-4">
-                            <i class="fas fa-file-invoice-dollar text-xl"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold">Rechnungsautomatisierung</h3>
-                            <p class="text-sm text-gray-400">Zeiterfassung → Rechnung → Zahlungserinnerung → Buchhaltung</p>
-                        </div>
-                    </div>
-                    <div class="mermaid text-xs">
-                        graph LR
-                            A[Harvest] --> B[Wave Apps]
-                            B --> C[Gmail]
-                            C --> D[QuickBooks]
-                    </div>
-                </div>
-            </div>
-        </section>
-
         <!-- CTA Section -->
         <section class="bg-gradient-brand p-8 rounded-xl text-center">
             <h2 class="text-2xl font-bold mb-4">Bereit für Automatisierung?</h2>

prompts.txt

@@ -1,4 +1,5 @@
 Based on your background (AI Automation, n8n, Notion systems, Supabase), here’s an improved and translated version of your prompt, perfectly suited for tools like Lovable.dev, Vercel AI SDK, or any fullstack AI builder (Next.js, Astro, FlutterFlow, etc.).  ⸻  🧠 German Prompt – für eine WebApp mit Supabase, Google Auth und AI-Funktionalität  ⸻  🔧 Projektziel  Erstelle eine moderne, performante WebApp mit Login über Google (via Supabase Auth). Nach dem Login soll der Nutzer Zugriff auf ein zentrales Dashboard erhalten, das verschiedene KI-Module bedient. Die Anwendung dient als zentrale Steuerzentrale für KI-Workflows (z. B. n8n), Prompts und Wissensdokumente – mit einem Fokus auf gute UX, klarer Struktur und erweiterbarer AI-Architektur.  ⸻  🛠 Funktionale Anforderungen  🔐 Authentifizierung 	•	Google OAuth-Login via Supabase Auth 	•	Nutzerverwaltung & Session-Handling via Supabase 	•	Redirect nach Login zu /dashboard 	•	Wenn bereits eingeloggt → automatische Weiterleitung  📊 Dashboard  Nach dem Login soll ein übersichtliches Dashboard erscheinen mit folgenden Komponenten: 	1.	✅ Agenten-Buttons 	•	Button-Karten für verschiedene Automationen (z. B. „Social Caption generieren“, „Bild erstellen“, „Daten analysieren“) 	•	Jeder Button triggert einen vordefinierten Webhook (n8n) 	2.	🧠 Prompt-Galerie 	•	Datenbankähnliches UI wie Notion (Cards, Tabellen oder Listen) 	•	Prompts sind kategorisiert (z. B. Rolle, Ziel, Stil, Tonfall) 	•	Einzelansicht mit Bearbeitungsmöglichkeit + „Prompt testen“-Button 	•	Verknüpfung zu Systemen wie OpenAI oder Gemini 	3.	📚 Knowledge-Base 	•	Markdown-kompatibles Dokumentenarchiv 	•	Kategorien und Tags 	•	Suche und Volltextfilter 	•	Optional: semantische KI-Suche mit Vektor-Datenbank 	4.	🤖 AI-Chatbot 	•	Wählbare AI-Engines: OpenAI, Gemini, DeepSeek, OpenRouter 	•	Konfiguration über API-Key (Nutzer kann Key eingeben oder hinterlegen) 	•	Chatverlauf speichern 	•	Unterstützung für Text, JSON, Bilder (z. B. Markdown oder DALL·E-Vorschau)  ⸻  🌙 UI / UX Anforderungen 	•	Dunkel-/Hellmodus-Schalter 	•	Responsive Design (Desktop & Tablet) 	•	Modernes Design mit Tailwind, Framer Motion oder ShadCN 	•	Klar strukturierte Navigation: Sidebar + Main Panel 	•	Fokus auf reduzierte Klickpfade und kontextbewusstes Arbeiten  ⸻  🧩 Technologie-Stack 	•	Frontend: Next.js (App Router), Tailwind CSS, shadcn/ui 	•	Backend/Auth: Supabase (Auth + DB) 	•	AI APIs (optional via toggle): 	•	OpenAI 	•	Google Gemini 	•	DeepSeek 	•	OpenRouter 	•	Webhook-Unterstützung: Trigger-Buttons → n8n Flows 	•	Prompt- und Output-Management: Datenbankbasiert (Supabase Tables)  ⸻  🔐 Beispiel für .env Konfiguration  NEXT_PUBLIC_SUPABASE_URL=https://xlfboxorogcafgkokjeg.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI...   ⸻  ✅ Zielgruppe  KI-Interessierte Power-User, Freelancer, Content-Teams oder Entwickler, die skalierbare Prompt-Systeme, personalisierte KI-Experimente und Automationen über ein zentrales Interface steuern wollen.  ⸻  „Don’t Travel. Explore.“ – Nur diesmal in deinem Workflow. Mach deine KI-Systeme benutzbar. Ohne Umwege.  ⸻  📦 Möchtest du dieses Prompt direkt als Lovable-ready JSON, oder soll ich dir ein deploybares Next.js Starter-Template mit Supabase + Auth + UI liefern?
 Hier ist ein umfassender Prompt, den du in ChatGPT (oder einem anderen LLM deiner Wahl) verwenden kannst, um die bestehende Website „NeuraFlow“ systematisch auf „FlowHero“ umzuschreiben – basierend auf dem zuvor erarbeiteten Christiani/FlowHero-Messaging:  ⸻  PROMPT:  Du bist ein professioneller Conversion- und Storytelling-Copywriter. Du bekommst im Folgenden eine komplette HTML-Website (basierend auf Tailwind CSS) für eine Produktivitäts-KI namens “NeuraFlow”.  Deine Aufgabe ist es, diese Website inhaltlich komplett umzuschreiben und neu zu betexten, und zwar auf Basis folgender Brand-Tonalität, Positionierung und Feature-Architektur:  ⸻  Neue Marke: FlowHero Positionierung: KI-Kommunikationssystem für Experten, Coaches & Consultants Claim: „Communication that converts“ Zielgruppe: Experten, Selbstständige, Creator mit viel Wissen, aber schwacher Content-Struktur Problem der Zielgruppe: Fachlich stark, aber kommunizieren unklar, unregelmäßig oder generisch. USP: FlowHero extrahiert Wissen, strukturiert es entlang der Customer Journey, generiert emotionales Storytelling mit psychologisch fundierter Struktur und liefert fertige Inhalte (Posts, Landingpages, E-Mails, Funnels, etc.) – im Stil der Marke. Technik im Hintergrund: GPT-4 Turbo, Fine-Tuning via Prompt Chaining, Style Token (für Markenton), Modularer Content Flow, Vector Embeddings zur Wissens-Extraktion, semantische Cluster-Analyse  ⸻  DEINE AUFGABE: 	1.	Verwandle alle Texte der bestehenden HTML-Seite in inhaltlich passende FlowHero-Texte mit Bezug auf Kommunikation, Content-Struktur, Storytelling und KI. 	2.	Lass Stil und Tonalität der aktuellen Seite bestehen (z. B. Headlines, Buttons, UI-Texte), aber ersetze alle Inhalte so, dass sie zur Positionierung von FlowHero passen. 	3.	Sprich direkt emotional und lösungsorientiert zur Zielgruppe (nicht Techies, sondern Unternehmer:innen). 	4.	Achte darauf, dass die Produktfeatures sich um Kommunikation, Storytelling, Struktur, Kanal-Texte, Expertenpositionierung und automatisierte Funnel-Inhalte drehen – nicht um klassische Task-Automation. 	5.	Beziehe dich optional auf die „Golden Nuggets“ der Nutzer und Begriffe wie: „Expertise extrahieren“, „psychologische Wirkung“, „Customer Journey“, „kein ChatGPT-Blabla“ etc.  ⸻  Technische Hinweise: • Behalte die Struktur der HTML-Datei exakt bei (z. B. <section id="features">, Klassen etc.). • Du sollst nur Texte ändern – HTML-Struktur und Klassen bleiben erhalten. • UI-Texte (z. B. Buttons, Placeholders, Menüs) dürfen inhaltlich verändert, aber in der Form belassen werden. • Verwende maximal 3 englische Begriffe pro Abschnitt, wenn sinnvoll.  Am Ende soll eine komplette neue Landingpage für FlowHero stehen, die auf der HTML-Struktur von NeuraFlow basiert – aber inhaltlich 100 % die FlowHero-Positionierung transportiert.  ⸻  Empfehlung: Lass diesen Prompt zuerst auf ein einzelnes HTML-Teilstück (z. B. Hero-Section oder Features) anwenden, bevor du die gesamte Seite umformulieren lässt – so kannst du den Ton und die Konsistenz feinjustieren.  Möchtest du direkt den ersten Block (z. B. Hero oder Features) für FlowHero live umgeschrieben bekommen?
 auf deutsch
-add page where complex n8n workflows are explained in a mermaid diagram style but fancy lookiong
+add page where complex n8n workflows are explained in a mermaid diagram style but fancy lookiong
+mache das workflow diagram vom design wie bei "Vorteile dieses Workflows" nur mit kleineren kacheln. mache 5 solcher diagramme. SEO-Agent, Angebotserstellung, Email Draft, Social Media Content, LeadGen