Hugging Face's logo

Spaces:
a40login
/
flow-hero
Running

App Files Community
a40login commited on
Commit
2784a20
·
verified ·
1 Parent(s): 692dc3b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +206 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flow Hero
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: flow-hero
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,206 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FlowHero - Communication That Converts</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Original styles maintained but renamed for FlowHero */
11
+ @keyframes pulse {
12
+ 0% { transform: scale(1); }
13
+ 50% { transform: scale(1.05); }
14
+ 100% { transform: scale(1); }
15
+ }
16
+ .pulse {
17
+ animation: pulse 0.5s ease-in-out;
18
+ }
19
+ .bg-glass {
20
+ background: rgba(255, 255, 255, 0.05);
21
+ backdrop-filter: blur(10px);
22
+ -webkit-backdrop-filter: blur(10px);
23
+ border: 1px solid rgba(255, 255, 255, 0.1);
24
+ }
25
+ .bg-gradient-brand {
26
+ background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white p-4 md:p-8 font-sans">
31
+ <div class="max-w-6xl mx-auto">
32
+ <header class="text-center mb-12 relative">
33
+ <div class="absolute -top-10 -left-10 w-20 h-20 bg-indigo-500 rounded-full filter blur-xl opacity-30"></div>
34
+ <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-purple-500 rounded-full filter blur-xl opacity-30"></div>
35
+
36
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
37
+ <i class="fas fa-comments mr-3"></i>FlowHero
38
+ </h1>
39
+ <p class="text-xl text-purple-200 font-medium">Communication that converts</p>
40
+ <p class="text-lg text-gray-300 mt-4 max-w-2xl mx-auto">
41
+ Transform your expertise into compelling content that attracts ideal clients<br>
42
+ <span class="text-sm opacity-70">No more generic ChatGPT output - just your unique voice, amplified</span>
43
+ </p>
44
+
45
+ <div class="mt-8 flex justify-center space-x-4">
46
+ <button class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 px-6 py-3 rounded-lg transition flex items-center pulse">
47
+ <i class="fas fa-play mr-2"></i>See How It Works
48
+ </button>
49
+ <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-lg transition flex items-center">
50
+ <i class="fas fa-user-tie mr-2"></i>For Experts & Coaches
51
+ </button>
52
+ </div>
53
+ </header>
54
+
55
+ <div class="bg-glass rounded-2xl p-6 shadow-2xl border border-purple-500 border-opacity-30 mb-8">
56
+ <!-- Features Section -->
57
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
58
+ <div class="bg-glass p-6 rounded-xl">
59
+ <div class="text-indigo-400 text-3xl mb-4">
60
+ <i class="fas fa-brain"></i>
61
+ </div>
62
+ <h3 class="text-xl font-semibold mb-3">Expertise Extraction</h3>
63
+ <p class="text-gray-300">
64
+ FlowHero digs deep to uncover your unique knowledge gold, structuring it along the customer journey for maximum impact.
65
+ </p>
66
+ </div>
67
+
68
+ <div class="bg-glass p-6 rounded-xl">
69
+ <div class="text-purple-400 text-3xl mb-4">
70
+ <i class="fas fa-project-diagram"></i>
71
+ </div>
72
+ <h3 class="text-xl font-semibold mb-3">Story Architecture</h3>
73
+ <p class="text-gray-300">
74
+ We transform your insights into psychologically-structured narratives that resonate with your ideal clients.
75
+ </p>
76
+ </div>
77
+
78
+ <div class="bg-glass p-6 rounded-xl">
79
+ <div class="text-pink-400 text-3xl mb-4">
80
+ <i class="fas fa-rocket"></i>
81
+ </div>
82
+ <h3 class="text-xl font-semibold mb-3">Conversion Content</h3>
83
+ <p class="text-gray-300">
84
+ From emails to landing pages - get ready-to-publish content in your authentic voice, optimized for each channel.
85
+ </p>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- How It Works -->
90
+ <div class="bg-glass p-8 rounded-xl mb-12">
91
+ <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">
92
+ Your Knowledge → Our System → Client-Attracting Content
93
+ </h2>
94
+
95
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
96
+ <div class="text-center p-4">
97
+ <div class="bg-indigo-900 bg-opacity-50 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
98
+ <span class="text-xl">1</span>
99
+ </div>
100
+ <h4 class="font-semibold mb-2">Share Your Insights</h4>
101
+ <p class="text-sm text-gray-300">Record voice notes, upload documents, or just talk to FlowHero</p>
102
+ </div>
103
+
104
+ <div class="text-center p-4">
105
+ <div class="bg-purple-900 bg-opacity-50 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
106
+ <span class="text-xl">2</span>
107
+ </div>
108
+ <h4 class="font-semibold mb-2">Structure & Enhance</h4>
109
+ <p class="text-sm text-gray-300">We analyze and organize your expertise into compelling frameworks</p>
110
+ </div>
111
+
112
+ <div class="text-center p-4">
113
+ <div class="bg-pink-900 bg-opacity-50 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
114
+ <span class="text-xl">3</span>
115
+ </div>
116
+ <h4 class="font-semibold mb-2">Content Creation</h4>
117
+ <p class="text-sm text-gray-300">Get tailored content for each stage of the customer journey</p>
118
+ </div>
119
+
120
+ <div class="text-center p-4">
121
+ <div class="bg-indigo-900 bg-opacity-50 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
122
+ <span class="text-xl">4</span>
123
+ </div>
124
+ <h4 class="font-semibold mb-2">Publish & Convert</h4>
125
+ <p class="text-sm text-gray-300">Authentic content that builds trust and drives action</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Content Types -->
131
+ <div class="bg-glass p-6 rounded-xl mb-8">
132
+ <h3 class="text-xl font-semibold mb-6 text-center text-purple-300">
133
+ <i class="fas fa-shapes mr-2"></i>Content We Transform For You
134
+ </h3>
135
+
136
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
137
+ <div class="bg-gradient-to-br from-indigo-900 to-purple-900 rounded-xl p-4 flex flex-col items-center justify-center h-32">
138
+ <i class="fas fa-envelope-open-text text-3xl mb-2"></i>
139
+ <span class="font-bold">Email Sequences</span>
140
+ </div>
141
+ <div class="bg-gradient-to-br from-purple-900 to-blue-900 rounded-xl p-4 flex flex-col items-center justify-center h-32">
142
+ <i class="fas fa-file-alt text-3xl mb-2"></i>
143
+ <span class="font-bold">Landing Pages</span>
144
+ </div>
145
+ <div class="bg-gradient-to-br from-blue-900 to-indigo-900 rounded-xl p-4 flex flex-col items-center justify-center h-32">
146
+ <i class="fas fa-comment-dots text-3xl mb-2"></i>
147
+ <span class="font-bold">Social Posts</span>
148
+ </div>
149
+ <div class="bg-gradient-to-br from-indigo-900 to-pink-900 rounded-xl p-4 flex flex-col items-center justify-center h-32">
150
+ <i class="fas fa-funnel-dollar text-3xl mb-2"></i>
151
+ <span class="font-bold">Sales Funnels</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Testimonial -->
157
+ <div class="bg-glass p-6 rounded-xl mb-8">
158
+ <div class="max-w-3xl mx-auto text-center">
159
+ <i class="fas fa-quote-left text-3xl text-purple-400 opacity-30 mb-4"></i>
160
+ <p class="text-xl italic mb-6">
161
+ "FlowHero helped me structure 15 years of coaching experience into content that actually converts.
162
+ I went from random posts to a strategic content engine that brings me 3-5 qualified leads per week."
163
+ </p>
164
+ <div class="flex items-center justify-center">
165
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah K." class="w-12 h-12 rounded-full mr-4">
166
+ <div>
167
+ <p class="font-semibold">Sarah K.</p>
168
+ <p class="text-sm text-gray-400">Executive Coach</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- CTA -->
175
+ <div class="bg-gradient-brand p-8 rounded-xl text-center">
176
+ <h2 class="text-2xl font-bold mb-4">Ready to Transform Your Communication?</h2>
177
+ <p class="text-lg mb-6 max-w-2xl mx-auto">
178
+ Stop leaving your expertise unstructured. Let FlowHero help you communicate in ways that attract ideal clients.
179
+ </p>
180
+ <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">
181
+ <i class="fas fa-bolt mr-2"></i>Get Started Now
182
+ </button>
183
+ </div>
184
+ </div>
185
+
186
+ <footer class="text-center mt-8 text-gray-400 text-sm">
187
+ <p>© 2023 FlowHero | Communication that converts for experts, coaches & consultants</p>
188
+ <div class="flex justify-center space-x-4 mt-4">
189
+ <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
190
+ <a href="#" class="hover:text-white"><i class="fab fa-linkedin"></i></a>
191
+ <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
192
+ </div>
193
+ </footer>
194
+ </div>
195
+
196
+ <script>
197
+ // Simple animation for demo purposes
198
+ document.querySelectorAll('button').forEach(button => {
199
+ button.addEventListener('click', function() {
200
+ this.classList.add('pulse');
201
+ setTimeout(() => this.classList.remove('pulse'), 500);
202
+ });
203
+ });
204
+ </script>
205
+ <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>
206
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ 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?
2
+ 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?