File size: 17,829 Bytes
2784a20 0ba8322 2784a20 56f9182 2784a20 56f9182 2784a20 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 59174d9 56f9182 59174d9 2784a20 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 56f9182 59174d9 2784a20 56f9182 2784a20 56f9182 59174d9 2784a20 56f9182 2784a20 56f9182 59174d9 56f9182 2784a20 56f9182 2784a20 56f9182 59174d9 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 56f9182 2784a20 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 |
<!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">
<!-- Navigation -->
<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>
<!-- Main Content -->
<div class="max-w-6xl mx-auto pt-24 pb-12 px-4">
<!-- Hero Section -->
<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>
<!-- Workflow Cards 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">
<!-- 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>
<!-- 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>
<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 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>
<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>
<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>
</section>
<!-- Workflow Benefits -->
<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>
<!-- 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>
<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 -->
<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>
// Initialize Mermaid
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
themeVariables: {
primaryColor: '#4F46E5',
primaryBorderColor: '#7C3AED',
primaryTextColor: '#ffffff',
lineColor: '#7C3AED',
secondaryColor: '#6B7280',
tertiaryColor: '#111827'
}
});
// Simple animation for demo purposes
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function() {
this.classList.add('pulse');
setTimeout(() => this.classList.remove('pulse'), 500);
});
});
// Mobile menu toggle would go here
</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> |