Hugging Face's logo

Spaces:
ThinkFlux
/
thinkflux
Running

App Files
ThinkFlux commited on
Commit
cacf342
·
verified ·
1 Parent(s): 74e9620

ajuste a área do como funciona. coloque as informações dos números pares do lado direito da linha e os números 2 e 4 do lado esquerdo colados com a linha. faça os depoimentos dos clienntes serem em forma de carrossel. remova o widget da seta que leva ao topo da página. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +691 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Thinkflux
3
- emoji: 🌖
4
- colorFrom: blue
5
- colorTo: indigo
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: thinkflux
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,691 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ThinkFlux - Automação de Negócios Inteligente</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#d26f2a',
15
+ secondary: '#1e394a',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <style>
22
+ .hero-gradient {
23
+ background: linear-gradient(135deg, #1e394a 0%, #d26f2a 100%);
24
+ }
25
+ .feature-card:hover {
26
+ transform: translateY(-10px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+ .testimonial-carousel {
30
+ width: 100%;
31
+ }
32
+ .testimonial-carousel .flex {
33
+ display: flex;
34
+ width: 100%;
35
+ }
36
+ .floating {
37
+ animation: floating 3s ease-in-out infinite;
38
+ }
39
+ @keyframes floating {
40
+ 0% { transform: translateY(0px); }
41
+ 50% { transform: translateY(-15px); }
42
+ 100% { transform: translateY(0px); }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="font-sans antialiased text-gray-800">
47
+ <!-- Header/Navigation -->
48
+ <header class="bg-white shadow-sm sticky top-0 z-50">
49
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
50
+ <div class="flex items-center">
51
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
52
+ <i class="fas fa-bolt text-white text-xl"></i>
53
+ </div>
54
+ <span class="text-2xl font-bold text-secondary">Think<span class="text-primary">Flux</span></span>
55
+ </div>
56
+ <nav class="hidden md:flex space-x-8">
57
+ <a href="#servicos" class="font-medium hover:text-primary transition">Serviços</a>
58
+ <a href="#sobre" class="font-medium hover:text-primary transition">Sobre</a>
59
+ <a href="#contato" class="font-medium hover:text-primary transition">Contato</a>
60
+ </nav>
61
+ <button class="md:hidden text-secondary">
62
+ <i class="fas fa-bars text-2xl"></i>
63
+ </button>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Hero Section -->
68
+ <section class="hero-gradient text-white py-20">
69
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
70
+ <div class="md:w-1/2 mb-10 md:mb-0">
71
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
72
+ Conectamos WhatsApp, calendários e emails com agentes de atendimento automatizado para transformar sua operação comercial
73
+ </h1>
74
+ <p class="text-xl mb-8 opacity-90">
75
+ Automação inteligente que aumenta suas vendas e reduz custos operacionais.
76
+ </p>
77
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
78
+ <a href="#contato" class="bg-white text-secondary font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition text-center">
79
+ Fale conosco
80
+ </a>
81
+ <a href="#servicos" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:bg-opacity-10 transition text-center">
82
+ Nossos serviços
83
+ </a>
84
+ </div>
85
+ </div>
86
+ <div class="md:w-1/2 flex justify-center">
87
+ <img src="https://cdn-icons-png.flaticon.com/512/3271/3271597.png" alt="Automação de Negócios" class="w-3/4 floating">
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Services Section -->
93
+ <section id="servicos" class="py-20 bg-gray-50">
94
+ <div class="container mx-auto px-4">
95
+ <div class="text-center mb-16">
96
+ <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">Nossas Soluções de Automação</h2>
97
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
98
+ Integrações poderosas que simplificam seu fluxo de trabalho e melhoram a experiência do cliente.
99
+ </p>
100
+ </div>
101
+
102
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
103
+ <!-- Service 1 -->
104
+ <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
105
+ <div class="p-6">
106
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
107
+ <i class="fab fa-whatsapp text-primary text-2xl"></i>
108
+ </div>
109
+ <h3 class="text-xl font-bold text-secondary mb-3">Automação WhatsApp</h3>
110
+ <p class="text-gray-600">
111
+ Chatbots inteligentes para WhatsApp que atendem clientes 24/7, agendam compromissos e qualificam leads automaticamente.
112
+ </p>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Service 2 -->
117
+ <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
118
+ <div class="p-6">
119
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
120
+ <i class="fas fa-calendar-alt text-primary text-2xl"></i>
121
+ </div>
122
+ <h3 class="text-xl font-bold text-secondary mb-3">Agendamentos Automáticos</h3>
123
+ <p class="text-gray-600">
124
+ Sistema de agendamento que sincroniza com Google Calendar, Outlook e conecta diretamente com seus clientes.
125
+ </p>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Service 3 -->
130
+ <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
131
+ <div class="p-6">
132
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
133
+ <i class="fas fa-envelope text-primary text-2xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-bold text-secondary mb-3">Email Marketing Avançado</h3>
136
+ <p class="text-gray-600">
137
+ Campanhas personalizadas com segmentação inteligente e automação baseada no comportamento do cliente.
138
+ </p>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Service 4 -->
143
+ <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
144
+ <div class="p-6">
145
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
146
+ <i class="fas fa-robot text-primary text-2xl"></i>
147
+ </div>
148
+ <h3 class="text-xl font-bold text-secondary mb-3">Agentes de IA</h3>
149
+ <p class="text-gray-600">
150
+ Assistentes virtuais que aprendem com seus processos para oferecer respostas precisas e personalizadas.
151
+ </p>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Service 5 -->
156
+ <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
157
+ <div class="p-6">
158
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
159
+ <i class="fab fa-facebook-messenger text-primary text-2xl"></i>
160
+ </div>
161
+ <h3 class="text-xl font-bold text-secondary mb-3">Integração com Redes Sociais</h3>
162
+ <p class="text-gray-600">
163
+ Automação para Instagram e Facebook Messenger que engaja clientes e converte conversas em vendas.
164
+ </p>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Service 6 -->
169
+ <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
170
+ <div class="p-6">
171
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
172
+ <i class="fas fa-chart-line text-primary text-2xl"></i>
173
+ </div>
174
+ <h3 class="text-xl font-bold text-secondary mb-3">Análise de Dados</h3>
175
+ <p class="text-gray-600">
176
+ Dashboard completo com métricas de performance e insights para melhorar seus resultados.
177
+ </p>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- About Section -->
185
+ <section id="sobre" class="py-20 bg-secondary text-white">
186
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
187
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
188
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Transformando Negócios com Tecnologia</h2>
189
+ <p class="text-lg mb-6 opacity-90">
190
+ Na ThinkFlux, acreditamos que a automação inteligente é a chave para escalar operações comerciais sem perder o toque humano.
191
+ </p>
192
+ <p class="text-lg mb-8 opacity-90">
193
+ Nossas soluções são desenvolvidas para empresas que querem se destacar através da eficiência operacional e excelência no atendimento ao cliente.
194
+ </p>
195
+ <div class="flex space-x-4">
196
+ <div class="bg-primary bg-opacity-20 p-4 rounded-lg">
197
+ <h3 class="font-bold text-xl mb-2">+500</h3>
198
+ <p class="opacity-90">Processos automatizados</p>
199
+ </div>
200
+ <div class="bg-primary bg-opacity-20 p-4 rounded-lg">
201
+ <h3 class="font-bold text-xl mb-2">+200</h3>
202
+ <p class="opacity-90">Clientes satisfeitos</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <div class="md:w-1/2">
207
+ <img src="https://cdn-icons-png.flaticon.com/512/4052/4052984.png" alt="Sobre a ThinkFlux" class="w-full rounded-lg shadow-xl">
208
+ </div>
209
+ </div>
210
+ </section>
211
+
212
+ <!-- How It Works -->
213
+ <section class="py-20 bg-white">
214
+ <div class="container mx-auto px-4">
215
+ <div class="text-center mb-16">
216
+ <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">Como Funciona</h2>
217
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
218
+ Implementamos sua automação em 4 etapas simples
219
+ </p>
220
+ </div>
221
+
222
+ <div class="relative">
223
+ <!-- Timeline -->
224
+ <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary transform -translate-x-1/2"></div>
225
+
226
+ <!-- Step 1 -->
227
+ <div class="flex flex-col md:flex-row items-center mb-16">
228
+ <div class="md:w-1/2 md:pr-10 mb-6 md:mb-0 md:text-right">
229
+ <h3 class="text-2xl font-bold text-secondary mb-3">1. Diagnóstico</h3>
230
+ <p class="text-gray-600">
231
+ Analisamos seus processos atuais para identificar oportunidades de automação que trarão maior impacto.
232
+ </p>
233
+ </div>
234
+ <div class="md:w-1/2 flex justify-center md:justify-start">
235
+ <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
236
+ 1
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Step 2 -->
242
+ <div class="flex flex-col md:flex-row items-center mb-16">
243
+ <div class="md:w-1/2 order-2 md:pl-10">
244
+ <h3 class="text-2xl font-bold text-secondary mb-3">2. Personalização</h3>
245
+ <p class="text-gray-600">
246
+ Desenvolvemos fluxos personalizados que se adaptam ao seu negócio e à sua forma de atender clientes.
247
+ </p>
248
+ </div>
249
+ <div class="md:w-1/2 flex justify-center md:justify-end order-1 md:order-3 mb-6 md:mb-0">
250
+ <div class="w-16 h-16 rounded-full bg-secondary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
251
+ 2
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Step 3 -->
257
+ <div class="flex flex-col md:flex-row items-center mb-16">
258
+ <div class="md:w-1/2 md:pr-10 mb-6 md:mb-0 md:text-right">
259
+ <h3 class="text-2xl font-bold text-secondary mb-3">3. Implementação</h3>
260
+ <p class="text-gray-600">
261
+ Configuramos todas as integrações necessárias e treinamos sua equipe para usar as novas ferramentas.
262
+ </p>
263
+ </div>
264
+ <div class="md:w-1/2 flex justify-center md:justify-start">
265
+ <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
266
+ 3
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Step 4 -->
272
+ <div class="flex flex-col md:flex-row items-center">
273
+ <div class="md:w-1/2 order-2 md:pl-10">
274
+ <h3 class="text-2xl font-bold text-secondary mb-3">4. Otimização</h3>
275
+ <p class="text-gray-600">
276
+ Monitoramos os resultados e ajustamos continuamente para melhorar performance e satisfação dos clientes.
277
+ </p>
278
+ </div>
279
+ <div class="md:w-1/2 flex justify-center md:justify-end order-1 md:order-3 mb-6 md:mb-0">
280
+ <div class="w-16 h-16 rounded-full bg-secondary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
281
+ 4
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Testimonials -->
290
+ <section class="py-20 bg-gray-50">
291
+ <div class="container mx-auto px-4">
292
+ <div class="text-center mb-16">
293
+ <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">O que nossos clientes dizem</h2>
294
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
295
+ Empresas que transformaram seus negócios com nossas soluções
296
+ </p>
297
+ </div>
298
+
299
+ <div class="relative">
300
+ <div class="testimonial-carousel overflow-hidden">
301
+ <div class="flex transition-transform duration-300">
302
+ <!-- Testimonial 1 -->
303
+ <div class="bg-white p-8 rounded-xl shadow-md flex-shrink-0 w-full md:w-1/3 px-4">
304
+ <div class="flex items-center mb-4">
305
+ <div class="text-yellow-400 mr-2">
306
+ <i class="fas fa-star"></i>
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ </div>
312
+ </div>
313
+ <p class="text-gray-600 mb-6">
314
+ "A automação do WhatsApp reduziu nosso tempo de resposta de horas para segundos. Os clientes adoram a agilidade e nossa equipe pode focar em vendas mais complexas."
315
+ </p>
316
+ <div class="flex items-center">
317
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden">
318
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-full h-full object-cover">
319
+ </div>
320
+ <div>
321
+ <h4 class="font-bold text-secondary">Ana Carolina</h4>
322
+ <p class="text-sm text-gray-500">CEO - ModaFit</p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Testimonial 2 -->
328
+ <div class="bg-white p-8 rounded-xl shadow-md flex-shrink-0 w-full md:w-1/3 px-4">
329
+ <div class="flex items-center mb-4">
330
+ <div class="text-yellow-400 mr-2">
331
+ <i class="fas fa-star"></i>
332
+ <i class="fas fa-star"></i>
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ </div>
337
+ </div>
338
+ <p class="text-gray-600 mb-6">
339
+ "O sistema de agendamento eliminou completamente os conflitos na agenda e reduziu faltas em 70%. Uma revolução para nosso consultório médico."
340
+ </p>
341
+ <div class="flex items-center">
342
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden">
343
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-full h-full object-cover">
344
+ </div>
345
+ <div>
346
+ <h4 class="font-bold text-secondary">Dr. Marcelo Silva</h4>
347
+ <p class="text-sm text-gray-500">Clínica Saúde Total</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Testimonial 3 -->
353
+ <div class="bg-white p-8 rounded-xl shadow-md">
354
+ <div class="flex items-center mb-4">
355
+ <div class="text-yellow-400 mr-2">
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ <i class="fas fa-star-half-alt"></i>
361
+ </div>
362
+ </div>
363
+ <p class="text-gray-600 mb-6">
364
+ "Os agentes de IA estão respondendo 80% das perguntas frequentes, liberando nosso time para questões estratégicas. O ROI foi impressionante."
365
+ </p>
366
+ <div class="flex items-center">
367
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden">
368
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-full h-full object-cover">
369
+ </div>
370
+ <div>
371
+ <h4 class="font-bold text-secondary">Juliana Mendes</h4>
372
+ <p class="text-sm text-gray-500">Diretora - Imobiliária Prime</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- CTA Section -->
381
+ <section class="py-16 bg-primary text-white">
382
+ <div class="container mx-auto px-4 text-center">
383
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para automatizar seu negócio?</h2>
384
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
385
+ Agende uma demonstração gratuita e descubra como podemos transformar sua operação comercial.
386
+ </p>
387
+ <a href="#contato" class="bg-white text-primary font-bold py-3 px-8 rounded-lg hover:bg-opacity-90 transition inline-block">
388
+ Começar agora
389
+ </a>
390
+ </div>
391
+ </section>
392
+
393
+ <!-- Contact Section -->
394
+ <section id="contato" class="py-20 bg-white">
395
+ <div class="container mx-auto px-4">
396
+ <div class="flex flex-col md:flex-row">
397
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
398
+ <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-6">Entre em contato</h2>
399
+ <p class="text-lg text-gray-600 mb-8">
400
+ Tem dúvidas sobre nossas soluções? Quer saber como a automação pode ajudar seu negócio? Fale com nosso time.
401
+ </p>
402
+
403
+ <div class="space-y-6">
404
+ <div class="flex items-start">
405
+ <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4">
406
+ <i class="fas fa-envelope text-primary text-xl"></i>
407
+ </div>
408
+ <div>
409
+ <h4 class="font-bold text-secondary">Email</h4>
410
+ <a href="mailto:contato@thinkflux.com.br" class="text-gray-600 hover:text-primary transition">contato@thinkflux.com.br</a>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="flex items-start">
415
+ <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4">
416
+ <i class="fas fa-phone-alt text-primary text-xl"></i>
417
+ </div>
418
+ <div>
419
+ <h4 class="font-bold text-secondary">Telefone</h4>
420
+ <a href="tel:71986813544" class="text-gray-600 hover:text-primary transition">(71) 98681-3544</a>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="flex items-start">
425
+ <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4">
426
+ <i class="fas fa-map-marker-alt text-primary text-xl"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-bold text-secondary">Endereço</h4>
430
+ <p class="text-gray-600">Salvador, BA - Brasil</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="mt-10">
436
+ <h4 class="font-bold text-secondary mb-4">Siga-nos</h4>
437
+ <div class="flex space-x-4">
438
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition">
439
+ <i class="fab fa-facebook-f"></i>
440
+ </a>
441
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition">
442
+ <i class="fab fa-instagram"></i>
443
+ </a>
444
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition">
445
+ <i class="fab fa-linkedin-in"></i>
446
+ </a>
447
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition">
448
+ <i class="fab fa-whatsapp"></i>
449
+ </a>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="md:w-1/2">
455
+ <form class="bg-gray-50 p-8 rounded-xl shadow-sm">
456
+ <div class="mb-6">
457
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
458
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
459
+ </div>
460
+
461
+ <div class="mb-6">
462
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
463
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
464
+ </div>
465
+
466
+ <div class="mb-6">
467
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label>
468
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
469
+ </div>
470
+
471
+ <div class="mb-6">
472
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
473
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
474
+ </div>
475
+
476
+ <button type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition">
477
+ Enviar mensagem
478
+ </button>
479
+ </form>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Footer -->
486
+ <footer class="bg-secondary text-white py-12">
487
+ <div class="container mx-auto px-4">
488
+ <div class="flex flex-col md:flex-row justify-between items-center">
489
+ <div class="mb-6 md:mb-0">
490
+ <div class="flex items-center">
491
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
492
+ <i class="fas fa-bolt text-white text-xl"></i>
493
+ </div>
494
+ <span class="text-2xl font-bold">Think<span class="text-primary">Flux</span></span>
495
+ </div>
496
+ <p class="mt-4 text-gray-300 max-w-md">
497
+ Conectamos WhatsApp, calendários e emails com agentes de atendimento automatizado para transformar sua operação comercial.
498
+ </p>
499
+ </div>
500
+
501
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
502
+ <div>
503
+ <h4 class="font-bold text-lg mb-4">Links</h4>
504
+ <ul class="space-y-2">
505
+ <li><a href="#servicos" class="text-gray-300 hover:text-white transition">Serviços</a></li>
506
+ <li><a href="#sobre" class="text-gray-300 hover:text-white transition">Sobre</a></li>
507
+ <li><a href="#contato" class="text-gray-300 hover:text-white transition">Contato</a></li>
508
+ </ul>
509
+ </div>
510
+
511
+ <div>
512
+ <h4 class="font-bold text-lg mb-4">Serviços</h4>
513
+ <ul class="space-y-2">
514
+ <li><a href="#" class="text-gray-300 hover:text-white transition">WhatsApp</a></li>
515
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Agendamentos</a></li>
516
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Email Marketing</a></li>
517
+ </ul>
518
+ </div>
519
+
520
+ <div>
521
+ <h4 class="font-bold text-lg mb-4">Legal</h4>
522
+ <ul class="space-y-2">
523
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Termos</a></li>
524
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Privacidade</a></li>
525
+ </ul>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
531
+ <p>&copy; 2023 ThinkFlux. Todos os direitos reservados.</p>
532
+ </div>
533
+ </div>
534
+ </footer>
535
+
536
+ <!-- Floating Buttons -->
537
+ <div class="fixed bottom-6 right-6 space-y-4 z-50">
538
+ <a href="https://wa.me/71986813544" target="_blank" class="w-14 h-14 rounded-full bg-[#25D366] text-white flex items-center justify-center shadow-lg hover:bg-opacity-90 transition">
539
+ <i class="fab fa-whatsapp text-2xl"></i>
540
+ </a>
541
+
542
+ <button id="aiAssistant" class="w-14 h-14 rounded-full bg-secondary text-white flex items-center justify-center shadow-lg hover:bg-opacity-90 transition">
543
+ <i class="fas fa-robot text-2xl"></i>
544
+ </button>
545
+ </div>
546
+
547
+ <script>
548
+ // Back to Top Button
549
+ const backToTopButton = document.getElementById('backToTop');
550
+
551
+ window.addEventListener('scroll', () => {
552
+ if (window.pageYOffset > 300) {
553
+ backToTopButton.classList.remove('hidden');
554
+ } else {
555
+ backToTopButton.classList.add('hidden');
556
+ }
557
+ });
558
+
559
+ backToTopButton.addEventListener('click', () => {
560
+ window.scrollTo({
561
+ top: 0,
562
+ behavior: 'smooth'
563
+ });
564
+ });
565
+
566
+ // Mobile Menu Toggle
567
+ const mobileMenuButton = document.querySelector('header button.md\\:hidden');
568
+ const mobileMenu = document.createElement('div');
569
+ mobileMenu.className = 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center hidden';
570
+ mobileMenu.innerHTML = `
571
+ <button class="absolute top-4 right-4 text-2xl text-secondary">
572
+ <i class="fas fa-times"></i>
573
+ </button>
574
+ <nav class="flex flex-col items-center space-y-8">
575
+ <a href="#servicos" class="text-2xl font-medium hover:text-primary transition">Serviços</a>
576
+ <a href="#sobre" class="text-2xl font-medium hover:text-primary transition">Sobre</a>
577
+ <a href="#contato" class="text-2xl font-medium hover:text-primary transition">Contato</a>
578
+ </nav>
579
+ `;
580
+ document.body.appendChild(mobileMenu);
581
+
582
+ mobileMenuButton.addEventListener('click', () => {
583
+ mobileMenu.classList.remove('hidden');
584
+ document.body.style.overflow = 'hidden';
585
+ });
586
+
587
+ mobileMenu.querySelector('button').addEventListener('click', () => {
588
+ mobileMenu.classList.add('hidden');
589
+ document.body.style.overflow = '';
590
+ });
591
+
592
+ // AI Assistant Chat Interface
593
+ const aiAssistant = document.getElementById('aiAssistant');
594
+ const chatModal = document.createElement('div');
595
+ chatModal.className = 'fixed bottom-24 right-6 w-80 bg-white rounded-t-xl shadow-xl z-50 hidden flex flex-col';
596
+ chatModal.innerHTML = `
597
+ <div class="bg-secondary text-white p-4 rounded-t-xl flex justify-between items-center">
598
+ <h3 class="font-bold">Assistente de IA</h3>
599
+ <button id="closeChat" class="text-white">
600
+ <i class="fas fa-times"></i>
601
+ </button>
602
+ </div>
603
+ <div class="p-4 h-64 overflow-y-auto bg-gray-50" id="chatMessages">
604
+ <div class="text-sm text-gray-500 mb-4">Olá! Sou o assistente virtual da ThinkFlux. Como posso te ajudar hoje?</div>
605
+ </div>
606
+ <div class="p-4 border-t flex">
607
+ <input type="text" id="chatInput" placeholder="Digite sua mensagem..." class="flex-1 border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary">
608
+ <button id="sendMessage" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-opacity-90">
609
+ <i class="fas fa-paper-plane"></i>
610
+ </button>
611
+ </div>
612
+ `;
613
+ document.body.appendChild(chatModal);
614
+
615
+ aiAssistant.addEventListener('click', () => {
616
+ chatModal.classList.toggle('hidden');
617
+ });
618
+
619
+ document.getElementById('closeChat').addEventListener('click', () => {
620
+ chatModal.classList.add('hidden');
621
+ });
622
+
623
+ document.getElementById('sendMessage').addEventListener('click', () => {
624
+ const input = document.getElementById('chatInput');
625
+ const message = input.value.trim();
626
+ if (message) {
627
+ const chatMessages = document.getElementById('chatMessages');
628
+ chatMessages.innerHTML += `
629
+ <div class="text-right mb-4">
630
+ <div class="inline-block bg-primary text-white rounded-lg px-4 py-2 max-w-xs">
631
+ ${message}
632
+ </div>
633
+ </div>
634
+ <div class="text-left mb-4">
635
+ <div class="inline-block bg-gray-200 text-gray-800 rounded-lg px-4 py-2 max-w-xs">
636
+ Entendi sua pergunta sobre "${message}". Para mais informações, entre em contato pelo WhatsApp ou email.
637
+ </div>
638
+ </div>
639
+ `;
640
+ input.value = '';
641
+ chatMessages.scrollTop = chatMessages.scrollHeight;
642
+ }
643
+ });
644
+
645
+ // Testimonial Carousel
646
+ const carousel = document.querySelector('.testimonial-carousel .flex');
647
+ const items = document.querySelectorAll('.testimonial-carousel .flex > div');
648
+ const prevBtn = document.querySelector('.testimonial-carousel ~ button:first-child');
649
+ const nextBtn = document.querySelector('.testimonial-carousel ~ button:last-child');
650
+ let currentIndex = 0;
651
+ const itemWidth = items[0].offsetWidth;
652
+
653
+ function updateCarousel() {
654
+ carousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
655
+ }
656
+
657
+ nextBtn.addEventListener('click', () => {
658
+ currentIndex = (currentIndex + 1) % items.length;
659
+ updateCarousel();
660
+ });
661
+
662
+ prevBtn.addEventListener('click', () => {
663
+ currentIndex = (currentIndex - 1 + items.length) % items.length;
664
+ updateCarousel();
665
+ });
666
+
667
+ // Smooth scrolling for anchor links
668
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
669
+ anchor.addEventListener('click', function (e) {
670
+ e.preventDefault();
671
+
672
+ const targetId = this.getAttribute('href');
673
+ if (targetId === '#') return;
674
+
675
+ const targetElement = document.querySelector(targetId);
676
+ if (targetElement) {
677
+ targetElement.scrollIntoView({
678
+ behavior: 'smooth'
679
+ });
680
+
681
+ // Close mobile menu if open
682
+ if (!mobileMenu.classList.contains('hidden')) {
683
+ mobileMenu.classList.add('hidden');
684
+ document.body.style.overflow = '';
685
+ }
686
+ }
687
+ });
688
+ });
689
+ </script>
690
+ <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=ThinkFlux/thinkflux" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
691
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ajuste a área do como funciona. coloque as informações dos números pares do lado direito da linha e os números 2 e 4 do lado esquerdo colados com a linha. faça os depoimentos dos clienntes serem em forma de carrossel. remova o widget da seta que leva ao topo da página.