|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FlowHero - n8n Workflows</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 0.5s ease-in-out; |
|
|
} |
|
|
.bg-glass { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.bg-gradient-brand { |
|
|
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); |
|
|
} |
|
|
.workflow-card { |
|
|
border-radius: 12px; |
|
|
padding: 16px; |
|
|
transition: all 0.3s ease; |
|
|
height: 100%; |
|
|
} |
|
|
.workflow-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.workflow-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 10px; |
|
|
margin-right: 12px; |
|
|
} |
|
|
.workflow-steps { |
|
|
margin-top: 12px; |
|
|
font-size: 0.85rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
.workflow-steps i { |
|
|
margin-right: 6px; |
|
|
width: 18px; |
|
|
text-align: center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white font-sans"> |
|
|
|
|
|
<nav class="bg-glass fixed w-full z-10"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-comments text-purple-400 text-2xl"></i> |
|
|
<span class="text-xl font-bold">FlowHero</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="hover:text-purple-300 transition">Startseite</a> |
|
|
<a href="#features" class="hover:text-purple-300 transition">Features</a> |
|
|
<a href="#workflows" class="text-purple-300 font-semibold transition">n8n Workflows</a> |
|
|
<a href="#contact" class="hover:text-purple-300 transition">Kontakt</a> |
|
|
</div> |
|
|
<button class="md:hidden text-xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="max-w-6xl mx-auto pt-24 pb-12 px-4"> |
|
|
|
|
|
<section class="text-center mb-16"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"> |
|
|
<i class="fas fa-project-diagram mr-3"></i>n8n Workflows |
|
|
</h1> |
|
|
<p class="text-xl text-purple-200 max-w-3xl mx-auto"> |
|
|
Automatisieren Sie Ihre Geschäftsprozesse mit unseren ausgeklügelten n8n-Workflow-Vorlagen |
|
|
</p> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="workflows" 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"> |
|
|
Unsere Top-Workflows |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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 unserer Workflows |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gradient-to-br from-gray-800 to-gray-700 p-6 rounded-xl"> |
|
|
<div class="text-green-400 text-3xl mb-4"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">100% Automatisiert</h3> |
|
|
<p class="text-gray-300"> |
|
|
Kein manueller Datentransfer mehr zwischen Systemen. Die Workflows erledigen alles automatisch. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-gray-800 to-gray-700 p-6 rounded-xl"> |
|
|
<div class="text-blue-400 text-3xl mb-4"> |
|
|
<i class="fas fa-stopwatch"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Echtzeit-Verarbeitung</h3> |
|
|
<p class="text-gray-300"> |
|
|
Daten werden sofort verarbeitet, ohne Verzögerung für maximale Effizienz. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-gray-800 to-gray-700 p-6 rounded-xl"> |
|
|
<div class="text-purple-400 text-3xl mb-4"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Einfach anpassbar</h3> |
|
|
<p class="text-gray-300"> |
|
|
Fügen Sie mit wenigen Klicks zusätzliche Schritte oder Systeme hinzu. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
<p class="text-lg mb-6 max-w-2xl mx-auto"> |
|
|
Lassen Sie uns Ihren perfekten n8n-Workflow erstellen, der Stunden Ihrer Woche einspart. |
|
|
</p> |
|
|
<button class="bg-white text-indigo-800 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold transition-all transform hover:scale-105"> |
|
|
<i class="fas fa-bolt mr-2"></i>Workflow anfragen |
|
|
</button> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 bg-opacity-50 py-8"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">FlowHero</h3> |
|
|
<p class="text-gray-400"> |
|
|
Automatisierungslösungen für Experten, Coaches und kleine Unternehmen. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Startseite</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">n8n Workflows</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Content-Strategie</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Preise</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Ressourcen</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Dokumentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Kontakt</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> info@flowhero.de</li> |
|
|
<li class="text-gray-400"><i class="fas fa-phone mr-2"></i> +49 123 456789</li> |
|
|
<li class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 FlowHero. Alle Rechte vorbehalten.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
mermaid.initialize({ |
|
|
startOnLoad: true, |
|
|
theme: 'dark', |
|
|
themeVariables: { |
|
|
primaryColor: '#4F46E5', |
|
|
primaryBorderColor: '#7C3AED', |
|
|
primaryTextColor: '#ffffff', |
|
|
lineColor: '#7C3AED', |
|
|
secondaryColor: '#6B7280', |
|
|
tertiaryColor: '#111827' |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
this.classList.add('pulse'); |
|
|
setTimeout(() => this.classList.remove('pulse'), 500); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=a40login/flow-hero" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
