Hugging Face's logo

Spaces:
xlorfx
/
lorf-ai
Running

App Files Community
xlorfx commited on
Commit
61297eb
·
verified ·
1 Parent(s): 08a4ce1

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +905 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lorf Ai
3
- emoji: 🏃
4
- colorFrom: blue
5
- colorTo: green
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: lorf-ai
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,905 @@
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>Lorf.ai - Inteligência Artificial para Negócios</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 src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #0F111A;
16
+ color: #F8FAFC;
17
+ scroll-behavior: smooth;
18
+ overflow-x: hidden;
19
+ }
20
+
21
+ .hero-gradient {
22
+ background: linear-gradient(135deg, #1A1F36 0%, #0F111A 100%);
23
+ }
24
+
25
+ .accent-gradient {
26
+ background: linear-gradient(90deg, #0EF6CC 0%, #7B61FF 100%);
27
+ }
28
+
29
+ .accent-text {
30
+ background: linear-gradient(90deg, #0EF6CC 0%, #7B61FF 100%);
31
+ -webkit-background-clip: text;
32
+ background-clip: text;
33
+ color: transparent;
34
+ }
35
+
36
+ .glass-card {
37
+ background: rgba(26, 31, 54, 0.6);
38
+ backdrop-filter: blur(10px);
39
+ -webkit-backdrop-filter: blur(10px);
40
+ border: 1px solid rgba(14, 246, 204, 0.2);
41
+ }
42
+
43
+ .highlight-card {
44
+ background: linear-gradient(135deg, rgba(14, 246, 204, 0.1), rgba(123, 97, 255, 0.1));
45
+ border: 1px solid rgba(14, 246, 204, 0.3);
46
+ position: relative;
47
+ overflow: hidden;
48
+ }
49
+
50
+ .highlight-card::before {
51
+ content: '';
52
+ position: absolute;
53
+ top: -50%;
54
+ left: -50%;
55
+ width: 200%;
56
+ height: 200%;
57
+ background: linear-gradient(
58
+ to bottom right,
59
+ rgba(14, 246, 204, 0.1) 0%,
60
+ rgba(14, 246, 204, 0) 20%,
61
+ rgba(14, 246, 204, 0) 80%,
62
+ rgba(123, 97, 255, 0.1) 100%
63
+ );
64
+ transform: rotate(30deg);
65
+ z-index: 0;
66
+ }
67
+
68
+ .section {
69
+ min-height: 100vh;
70
+ padding: 100px 0;
71
+ position: relative;
72
+ }
73
+
74
+ .floating {
75
+ animation: float 6s ease-in-out infinite;
76
+ }
77
+
78
+ .floating-2 {
79
+ animation: float 8s ease-in-out infinite;
80
+ }
81
+
82
+ .floating-3 {
83
+ animation: float 10s ease-in-out infinite;
84
+ }
85
+
86
+ @keyframes float {
87
+ 0%, 100% { transform: translateY(0); }
88
+ 50% { transform: translateY(-20px); }
89
+ }
90
+
91
+ .glow {
92
+ animation: glow 2s ease-in-out infinite alternate;
93
+ }
94
+
95
+ @keyframes glow {
96
+ from { box-shadow: 0 0 5px -5px #0EF6CC; }
97
+ to { box-shadow: 0 0 20px 5px #0EF6CC; }
98
+ }
99
+
100
+ .nav-link {
101
+ position: relative;
102
+ }
103
+
104
+ .nav-link::after {
105
+ content: '';
106
+ position: absolute;
107
+ width: 0;
108
+ height: 2px;
109
+ bottom: -2px;
110
+ left: 0;
111
+ background: linear-gradient(90deg, #0EF6CC, #7B61FF);
112
+ transition: width 0.3s ease;
113
+ }
114
+
115
+ .nav-link:hover::after {
116
+ width: 100%;
117
+ }
118
+
119
+ .nav-link.active::after {
120
+ width: 100%;
121
+ }
122
+
123
+ #particles-js {
124
+ position: fixed;
125
+ width: 100%;
126
+ height: 100%;
127
+ top: 0;
128
+ left: 0;
129
+ z-index: -1;
130
+ opacity: 0.3;
131
+ }
132
+
133
+ .tech-grid-overlay {
134
+ position: fixed;
135
+ width: 100%;
136
+ height: 100%;
137
+ top: 0;
138
+ left: 0;
139
+ z-index: -1;
140
+ opacity: 0.05;
141
+ background-image:
142
+ linear-gradient(rgba(14, 246, 204, 0.3) 1px, transparent 1px),
143
+ linear-gradient(90deg, rgba(14, 246, 204, 0.3) 1px, transparent 1px);
144
+ background-size: 50px 50px;
145
+ }
146
+
147
+ .pulse {
148
+ animation: pulse 2s infinite;
149
+ }
150
+
151
+ @keyframes pulse {
152
+ 0% { transform: scale(1); }
153
+ 50% { transform: scale(1.05); }
154
+ 100% { transform: scale(1); }
155
+ }
156
+
157
+ .scroll-indicator {
158
+ position: absolute;
159
+ bottom: 30px;
160
+ left: 50%;
161
+ transform: translateX(-50%);
162
+ animation: bounce 2s infinite;
163
+ }
164
+
165
+ @keyframes bounce {
166
+ 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
167
+ 40% { transform: translateY(-20px) translateX(-50%); }
168
+ 60% { transform: translateY(-10px) translateX(-50%); }
169
+ }
170
+ </style>
171
+ </head>
172
+ <body class="bg-dark text-light">
173
+ <!-- Background Elements -->
174
+ <div id="particles-js"></div>
175
+ <div class="tech-grid-overlay"></div>
176
+
177
+ <!-- Navigation -->
178
+ <nav class="fixed top-0 w-full z-50 glass-card shadow-sm">
179
+ <div class="container mx-auto px-6 py-4">
180
+ <div class="flex items-center justify-between">
181
+ <div class="flex items-center">
182
+ <i class="fas fa-robot text-3xl text-accent mr-2"></i>
183
+ <span class="text-2xl font-bold">Lorf<span class="accent-text">.ai</span></span>
184
+ </div>
185
+
186
+ <div class="hidden md:flex items-center space-x-8">
187
+ <a href="#hero" class="nav-link active font-medium">Início</a>
188
+ <a href="#solucoes" class="nav-link font-medium">Soluções</a>
189
+ <a href="#diferenciais" class="nav-link font-medium">Diferenciais</a>
190
+ <a href="#precos" class="nav-link font-medium">Planos</a>
191
+ <a href="#contato" class="nav-link font-medium">Contato</a>
192
+ </div>
193
+
194
+ <div class="flex items-center space-x-4">
195
+ <a href="#precos" class="px-6 py-2 font-medium accent-gradient text-dark rounded-full hover:opacity-90 transition pulse">
196
+ Comece Agora
197
+ </a>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </nav>
202
+
203
+ <!-- Hero Section -->
204
+ <section id="hero" class="section hero-gradient flex items-center">
205
+ <div class="container mx-auto px-6">
206
+ <div class="flex flex-col lg:flex-row items-center">
207
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
208
+ <span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-4">REVOLUCIONE SEU NEGÓCIO</span>
209
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
210
+ Potencialize seus resultados com <span class="accent-text">Inteligência Artificial</span>
211
+ </h1>
212
+ <p class="text-xl text-gray-300 mb-8">
213
+ A Lorf.ai oferece soluções prontas para implementação imediata. Personalize com sua marca e comece a operar em dias, não meses.
214
+ </p>
215
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
216
+ <a href="#solucoes" class="px-8 py-4 accent-gradient text-dark font-bold rounded-lg hover:opacity-90 transition">
217
+ Conheça nossas soluções
218
+ </a>
219
+ <a href="#contato" class="px-8 py-4 border-2 border-accent text-accent font-bold rounded-lg hover:bg-accent hover:text-dark transition">
220
+ Fale com um especialista
221
+ </a>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="lg:w-1/2 relative">
226
+ <div class="relative">
227
+ <div class="w-full h-96 bg-gradient-to-br from-primary to-accent2/20 rounded-2xl flex items-center justify-center floating">
228
+ <i class="fas fa-robot text-8xl text-accent"></i>
229
+ </div>
230
+ <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-accent/10 filter blur-xl floating-2"></div>
231
+ <div class="absolute -bottom-6 -right-6 w-40 h-40 rounded-full bg-accent2/10 filter blur-xl floating-3"></div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="scroll-indicator">
237
+ <a href="#solucoes" class="text-accent text-2xl">
238
+ <i class="fas fa-chevron-down"></i>
239
+ </a>
240
+ </div>
241
+ </div>
242
+ </section>
243
+
244
+ <!-- Soluções Section -->
245
+ <section id="solucoes" class="section bg-gradient-to-b from-primary/10 to-dark">
246
+ <div class="container mx-auto px-6 py-20">
247
+ <div class="text-center mb-16">
248
+ <span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-3">NOSSAS SOLUÇÕES</span>
249
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Transforme seu negócio com <span class="accent-text">tecnologia avançada</span></h2>
250
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
251
+ Plataformas completas que você pode personalizar com sua marca e começar a usar imediatamente.
252
+ </p>
253
+ </div>
254
+
255
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
256
+ <div class="highlight-card p-8 rounded-xl transition duration-300 hover:shadow-lg">
257
+ <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
258
+ <i class="fas fa-chart-line text-2xl text-accent"></i>
259
+ </div>
260
+ <h3 class="text-xl font-bold mb-3">Análise Preditiva</h3>
261
+ <p class="text-gray-300 mb-4">
262
+ Preveja tendências e comportamentos com algoritmos de IA que aprendem com seus dados.
263
+ </p>
264
+ <ul class="space-y-2 mb-6">
265
+ <li class="flex items-center">
266
+ <i class="fas fa-check text-accent mr-2"></i>
267
+ <span>Previsão de vendas</span>
268
+ </li>
269
+ <li class="flex items-center">
270
+ <i class="fas fa-check text-accent mr-2"></i>
271
+ <span>Segmentação de clientes</span>
272
+ </li>
273
+ <li class="flex items-center">
274
+ <i class="fas fa-check text-accent mr-2"></i>
275
+ <span>Alertas automáticos</span>
276
+ </li>
277
+ </ul>
278
+ <a href="#precos" class="text-accent hover:text-accent2 transition flex items-center font-medium">
279
+ Ver planos <i class="fas fa-arrow-right ml-2"></i>
280
+ </a>
281
+ </div>
282
+
283
+ <div class="highlight-card p-8 rounded-xl transition duration-300 hover:shadow-lg">
284
+ <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
285
+ <i class="fas fa-robot text-2xl text-accent2"></i>
286
+ </div>
287
+ <h3 class="text-xl font-bold mb-3">Atendimento Automatizado</h3>
288
+ <p class="text-gray-300 mb-4">
289
+ Chatbots inteligentes que atendem seus clientes 24/7 com respostas naturais e precisas.
290
+ </p>
291
+ <ul class="space-y-2 mb-6">
292
+ <li class="flex items-center">
293
+ <i class="fas fa-check text-accent mr-2"></i>
294
+ <span>Multiplataforma</span>
295
+ </li>
296
+ <li class="flex items-center">
297
+ <i class="fas fa-check text-accent mr-2"></i>
298
+ <span>Multi-idiomas</span>
299
+ </li>
300
+ <li class="flex items-center">
301
+ <i class="fas fa-check text-accent mr-2"></i>
302
+ <span>Integração fácil</span>
303
+ </li>
304
+ </ul>
305
+ <a href="#precos" class="text-accent hover:text-accent2 transition flex items-center font-medium">
306
+ Ver planos <i class="fas fa-arrow-right ml-2"></i>
307
+ </a>
308
+ </div>
309
+
310
+ <div class="highlight-card p-8 rounded-xl transition duration-300 hover:shadow-lg">
311
+ <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
312
+ <i class="fas fa-cogs text-2xl text-accent"></i>
313
+ </div>
314
+ <h3 class="text-xl font-bold mb-3">Automação de Processos</h3>
315
+ <p class="text-gray-300 mb-4">
316
+ Reduza custos e aumente eficiência automatizando tarefas repetitivas e complexas.
317
+ </p>
318
+ <ul class="space-y-2 mb-6">
319
+ <li class="flex items-center">
320
+ <i class="fas fa-check text-accent mr-2"></i>
321
+ <span>Processamento de documentos</span>
322
+ </li>
323
+ <li class="flex items-center">
324
+ <i class="fas fa-check text-accent mr-2"></i>
325
+ <span>Fluxos de trabalho</span>
326
+ </li>
327
+ <li class="flex items-center">
328
+ <i class="fas fa-check text-accent mr-2"></i>
329
+ <span>Integração com sistemas</span>
330
+ </li>
331
+ </ul>
332
+ <a href="#precos" class="text-accent hover:text-accent2 transition flex items-center font-medium">
333
+ Ver planos <i class="fas fa-arrow-right ml-2"></i>
334
+ </a>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <!-- Diferenciais Section -->
341
+ <section id="diferenciais" class="section bg-primary/10">
342
+ <div class="container mx-auto px-6 py-20">
343
+ <div class="flex flex-col lg:flex-row items-center">
344
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
345
+ <span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-4">POR QUE ESCOLHER A LORF.AI?</span>
346
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
347
+ <span class="accent-text">Diferenciais</span> que fazem a diferença
348
+ </h2>
349
+ <p class="text-xl text-gray-300 mb-8">
350
+ Nossa abordagem única garante resultados rápidos e impacto real no seu negócio.
351
+ </p>
352
+
353
+ <div class="space-y-6">
354
+ <div class="flex">
355
+ <div class="mr-6">
356
+ <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
357
+ <i class="fas fa-bolt text-xl text-accent"></i>
358
+ </div>
359
+ </div>
360
+ <div>
361
+ <h3 class="text-xl font-bold mb-2">Implementação Rápida</h3>
362
+ <p class="text-gray-300">
363
+ Comece em dias, não meses. Nossas soluções estão prontas para uso com configuração mínima.
364
+ </p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="flex">
369
+ <div class="mr-6">
370
+ <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
371
+ <i class="fas fa-shield-alt text-xl text-accent2"></i>
372
+ </div>
373
+ </div>
374
+ <div>
375
+ <h3 class="text-xl font-bold mb-2">Segurança de Dados</h3>
376
+ <p class="text-gray-300">
377
+ Plataforma desenvolvida com os mais altos padrões de segurança, atualizada constantemente.
378
+ </p>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="flex">
383
+ <div class="mr-6">
384
+ <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
385
+ <i class="fas fa-headset text-xl text-accent"></i>
386
+ </div>
387
+ </div>
388
+ <div>
389
+ <h3 class="text-xl font-bold mb-2">Suporte Prioritário</h3>
390
+ <p class="text-gray-300">
391
+ Nossa equipe está sempre disponível para ajudar você a extrair o máximo da plataforma.
392
+ </p>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="lg:w-1/2">
399
+ <div class="relative">
400
+ <div class="w-full h-96 bg-gradient-to-br from-primary to-accent/20 rounded-2xl flex items-center justify-center floating">
401
+ <i class="fas fa-star text-8xl text-accent2"></i>
402
+ </div>
403
+ <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-accent/10 filter blur-xl floating-2"></div>
404
+ <div class="absolute -bottom-6 -right-6 w-40 h-40 rounded-full bg-accent2/10 filter blur-xl floating-3"></div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </section>
410
+
411
+ <!-- Depoimentos Section -->
412
+ <section class="py-20 bg-gradient-to-b from-primary/10 to-dark">
413
+ <div class="container mx-auto px-6">
414
+ <div class="text-center mb-16">
415
+ <span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-3">DEPOIMENTOS</span>
416
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">O que nossos <span class="accent-text">clientes</span> dizem</h2>
417
+ </div>
418
+
419
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
420
+ <div class="highlight-card p-8 rounded-xl">
421
+ <div class="flex items-center mb-6">
422
+ <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4">
423
+ <i class="fas fa-user text-accent"></i>
424
+ </div>
425
+ <div>
426
+ <h4 class="font-bold">Carlos Silva</h4>
427
+ <p class="text-sm text-gray-400">CEO, TechSolutions</p>
428
+ </div>
429
+ </div>
430
+ <p class="text-gray-300 mb-6">
431
+ "A Lorf.ai revolucionou nossa operação. Em 30 dias já tínhamos resultados impressionantes na redução de custos e aumento de eficiência."
432
+ </p>
433
+ <div class="flex text-yellow-400">
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ <i class="fas fa-star"></i>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="highlight-card p-8 rounded-xl">
443
+ <div class="flex items-center mb-6">
444
+ <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4">
445
+ <i class="fas fa-user text-accent2"></i>
446
+ </div>
447
+ <div>
448
+ <h4 class="font-bold">Ana Oliveira</h4>
449
+ <p class="text-sm text-gray-400">Diretora de Marketing, GlobalBrand</p>
450
+ </div>
451
+ </div>
452
+ <p class="text-gray-300 mb-6">
453
+ "Nossos chatbots agora resolvem 80% das solicitações de clientes sem intervenção humana. A economia foi imediata e a satisfação do cliente aumentou."
454
+ </p>
455
+ <div class="flex text-yellow-400">
456
+ <i class="fas fa-star"></i>
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ <i class="fas fa-star"></i>
460
+ <i class="fas fa-star"></i>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="highlight-card p-8 rounded-xl">
465
+ <div class="flex items-center mb-6">
466
+ <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4">
467
+ <i class="fas fa-user text-accent"></i>
468
+ </div>
469
+ <div>
470
+ <h4 class="font-bold">Roberto Santos</h4>
471
+ <p class="text-sm text-gray-400">Gerente de Operações, FinCorp</p>
472
+ </div>
473
+ </div>
474
+ <p class="text-gray-300 mb-6">
475
+ "As previsões de vendas da Lorf.ai têm uma precisão impressionante. Nos ajudou a otimizar estoques e reduzir desperdícios significativamente."
476
+ </p>
477
+ <div class="flex text-yellow-400">
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ <i class="fas fa-star"></i>
481
+ <i class="fas fa-star"></i>
482
+ <i class="fas fa-star-half-alt"></i>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </section>
488
+
489
+ <!-- Preços Section -->
490
+ <section id="precos" class="section bg-primary/10">
491
+ <div class="container mx-auto px-6 py-20">
492
+ <div class="text-center mb-16">
493
+ <span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-3">PLANOS</span>
494
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Escolha o plano <span class="accent-text">ideal</span> para você</h2>
495
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
496
+ Soluções flexíveis para empresas de todos os tamanhos.
497
+ </p>
498
+ </div>
499
+
500
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
501
+ <div class="highlight-card p-8 rounded-xl">
502
+ <h3 class="text-xl font-bold mb-2">Básico</h3>
503
+ <p class="text-gray-300 mb-6">Ideal para pequenas empresas</p>
504
+ <div class="mb-8">
505
+ <span class="text-4xl font-bold">R$499</span>
506
+ <span class="text-gray-400">/mês</span>
507
+ </div>
508
+ <ul class="space-y-3 mb-8">
509
+ <li class="flex items-center">
510
+ <i class="fas fa-check text-accent mr-2"></i>
511
+ <span>1 Solução de IA</span>
512
+ </li>
513
+ <li class="flex items-center">
514
+ <i class="fas fa-check text-accent mr-2"></i>
515
+ <span>Até 1.000 interações/mês</span>
516
+ </li>
517
+ <li class="flex items-center">
518
+ <i class="fas fa-check text-accent mr-2"></i>
519
+ <span>Suporte por email</span>
520
+ </li>
521
+ <li class="flex items-center text-gray-500">
522
+ <i class="fas fa-times mr-2"></i>
523
+ <span>Treinamento personalizado</span>
524
+ </li>
525
+ </ul>
526
+ <a href="#" class="block w-full py-3 text-center border-2 border-accent text-accent font-bold rounded-lg hover:bg-accent hover:text-dark transition">
527
+ Começar
528
+ </a>
529
+ </div>
530
+
531
+ <div class="highlight-card p-8 rounded-xl border-2 border-accent relative">
532
+ <div class="absolute top-0 right-0 bg-accent text-dark px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
533
+ MAIS POPULAR
534
+ </div>
535
+ <h3 class="text-xl font-bold mb-2">Profissional</h3>
536
+ <p class="text-gray-300 mb-6">Para empresas em crescimento</p>
537
+ <div class="mb-8">
538
+ <span class="text-4xl font-bold">R$1.299</span>
539
+ <span class="text-gray-400">/mês</span>
540
+ </div>
541
+ <ul class="space-y-3 mb-8">
542
+ <li class="flex items-center">
543
+ <i class="fas fa-check text-accent mr-2"></i>
544
+ <span>Até 3 Soluções de IA</span>
545
+ </li>
546
+ <li class="flex items-center">
547
+ <i class="fas fa-check text-accent mr-2"></i>
548
+ <span>Até 10.000 interações/mês</span>
549
+ </li>
550
+ <li class="flex items-center">
551
+ <i class="fas fa-check text-accent mr-2"></i>
552
+ <span>Suporte prioritário</span>
553
+ </li>
554
+ <li class="flex items-center">
555
+ <i class="fas fa-check text-accent mr-2"></i>
556
+ <span>Treinamento básico</span>
557
+ </li>
558
+ </ul>
559
+ <a href="#" class="block w-full py-3 text-center accent-gradient text-dark font-bold rounded-lg hover:opacity-90 transition">
560
+ Começar
561
+ </a>
562
+ </div>
563
+
564
+ <div class="highlight-card p-8 rounded-xl">
565
+ <h3 class="text-xl font-bold mb-2">Empresarial</h3>
566
+ <p class="text-gray-300 mb-6">Para grandes organizações</p>
567
+ <div class="mb-8">
568
+ <span class="text-4xl font-bold">R$2.999</span>
569
+ <span class="text-gray-400">/mês</span>
570
+ </div>
571
+ <ul class="space-y-3 mb-8">
572
+ <li class="flex items-center">
573
+ <i class="fas fa-check text-accent mr-2"></i>
574
+ <span>Soluções ilimitadas</span>
575
+ </li>
576
+ <li class="flex items-center">
577
+ <i class="fas fa-check text-accent mr-2"></i>
578
+ <span>Interações ilimitadas</span>
579
+ </li>
580
+ <li class="flex items-center">
581
+ <i class="fas fa-check text-accent mr-2"></i>
582
+ <span>Suporte 24/7</span>
583
+ </li>
584
+ <li class="flex items-center">
585
+ <i class="fas fa-check text-accent mr-2"></i>
586
+ <span>Treinamento personalizado</span>
587
+ </li>
588
+ </ul>
589
+ <a href="#" class="block w-full py-3 text-center border-2 border-accent text-accent font-bold rounded-lg hover:bg-accent hover:text-dark transition">
590
+ Começar
591
+ </a>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="text-center mt-12">
596
+ <p class="text-gray-300 mb-6">Precisa de um plano personalizado?</p>
597
+ <a href="#contato" class="inline-block px-8 py-3 border-2 border-accent text-accent font-bold rounded-lg hover:bg-accent hover:text-dark transition">
598
+ Fale com nosso time
599
+ </a>
600
+ </div>
601
+ </div>
602
+ </section>
603
+
604
+ <!-- Contato Section -->
605
+ <section id="contato" class="section bg-gradient-to-b from-primary/10 to-dark">
606
+ <div class="container mx-auto px-6 py-20">
607
+ <div class="flex flex-col lg:flex-row items-center">
608
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
609
+ <span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-4">CONTATO</span>
610
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
611
+ Pronto para <span class="accent-text">transformar</span> seu negócio?
612
+ </h2>
613
+ <p class="text-xl text-gray-300 mb-8">
614
+ Nossa equipe está pronta para ajudar você a encontrar a solução perfeita para suas necessidades.
615
+ </p>
616
+
617
+ <div class="space-y-6">
618
+ <div class="flex items-center">
619
+ <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-6">
620
+ <i class="fas fa-envelope text-xl text-accent"></i>
621
+ </div>
622
+ <div>
623
+ <h3 class="text-lg font-bold">Email</h3>
624
+ <p class="text-gray-300">[email protected]</p>
625
+ </div>
626
+ </div>
627
+
628
+ <div class="flex items-center">
629
+ <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-6">
630
+ <i class="fas fa-phone-alt text-xl text-accent2"></i>
631
+ </div>
632
+ <div>
633
+ <h3 class="text-lg font-bold">Telefone</h3>
634
+ <p class="text-gray-300">(11) 98765-4321</p>
635
+ </div>
636
+ </div>
637
+
638
+ <div class="flex items-center">
639
+ <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-6">
640
+ <i class="fas fa-map-marker-alt text-xl text-accent"></i>
641
+ </div>
642
+ <div>
643
+ <h3 class="text-lg font-bold">Endereço</h3>
644
+ <p class="text-gray-300">Av. Paulista, 1000 - São Paulo/SP</p>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <div class="lg:w-1/2">
651
+ <div class="highlight-card p-8 rounded-xl">
652
+ <h3 class="text-xl font-bold mb-6">Envie uma mensagem</h3>
653
+ <form>
654
+ <div class="mb-6">
655
+ <label for="name" class="block text-gray-300 mb-2">Nome</label>
656
+ <input type="text" id="name" class="w-full px-4 py-3 bg-primary/50 border border-accent/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
657
+ </div>
658
+ <div class="mb-6">
659
+ <label for="email" class="block text-gray-300 mb-2">Email</label>
660
+ <input type="email" id="email" class="w-full px-4 py-3 bg-primary/50 border border-accent/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
661
+ </div>
662
+ <div class="mb-6">
663
+ <label for="message" class="block text-gray-300 mb-2">Mensagem</label>
664
+ <textarea id="message" rows="4" class="w-full px-4 py-3 bg-primary/50 border border-accent/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"></textarea>
665
+ </div>
666
+ <button type="submit" class="w-full py-3 accent-gradient text-dark font-bold rounded-lg hover:opacity-90 transition">
667
+ Enviar Mensagem
668
+ </button>
669
+ </form>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </section>
675
+
676
+ <!-- Footer -->
677
+ <footer class="bg-primary py-12">
678
+ <div class="container mx-auto px-6">
679
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
680
+ <div>
681
+ <div class="flex items-center mb-6">
682
+ <i class="fas fa-robot text-3xl text-accent mr-2"></i>
683
+ <span class="text-2xl font-bold">Lorf<span class="accent-text">.ai</span></span>
684
+ </div>
685
+ <p class="text-gray-300 mb-6">
686
+ Soluções inteligentes em IA para impulsionar seu negócio.
687
+ </p>
688
+ <div class="flex space-x-4">
689
+ <a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition">
690
+ <i class="fab fa-facebook-f"></i>
691
+ </a>
692
+ <a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition">
693
+ <i class="fab fa-twitter"></i>
694
+ </a>
695
+ <a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition">
696
+ <i class="fab fa-linkedin-in"></i>
697
+ </a>
698
+ <a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition">
699
+ <i class="fab fa-instagram"></i>
700
+ </a>
701
+ </div>
702
+ </div>
703
+
704
+ <div>
705
+ <h3 class="text-lg font-bold mb-6 text-accent">Soluções</h3>
706
+ <ul class="space-y-3">
707
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Análise Preditiva</a></li>
708
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Chatbots Inteligentes</a></li>
709
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Automação de Processos</a></li>
710
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Personalização</a></li>
711
+ </ul>
712
+ </div>
713
+
714
+ <div>
715
+ <h3 class="text-lg font-bold mb-6 text-accent">Recursos</h3>
716
+ <ul class="space-y-3">
717
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Documentação</a></li>
718
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Tutoriais</a></li>
719
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Blog</a></li>
720
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Webinars</a></li>
721
+ </ul>
722
+ </div>
723
+
724
+ <div>
725
+ <h3 class="text-lg font-bold mb-6 text-accent">Empresa</h3>
726
+ <ul class="space-y-3">
727
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Sobre Nós</a></li>
728
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Carreiras</a></li>
729
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Termos</a></li>
730
+ <li><a href="#" class="text-gray-300 hover:text-accent transition">Privacidade</a></li>
731
+ </ul>
732
+ </div>
733
+ </div>
734
+
735
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
736
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Lorf.ai. Todos os direitos reservados.</p>
737
+ <div class="flex space-x-6">
738
+ <a href="#" class="text-gray-400 hover:text-accent transition">Termos</a>
739
+ <a href="#" class="text-gray-400 hover:text-accent transition">Privacidade</a>
740
+ <a href="#" class="text-gray-400 hover:text-accent transition">Cookies</a>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </footer>
745
+
746
+ <script>
747
+ // Inicializa o particles.js
748
+ document.addEventListener('DOMContentLoaded', function() {
749
+ particlesJS('particles-js', {
750
+ "particles": {
751
+ "number": {
752
+ "value": 80,
753
+ "density": {
754
+ "enable": true,
755
+ "value_area": 800
756
+ }
757
+ },
758
+ "color": {
759
+ "value": "#0EF6CC"
760
+ },
761
+ "shape": {
762
+ "type": "circle",
763
+ "stroke": {
764
+ "width": 0,
765
+ "color": "#000000"
766
+ },
767
+ "polygon": {
768
+ "nb_sides": 5
769
+ }
770
+ },
771
+ "opacity": {
772
+ "value": 0.5,
773
+ "random": false,
774
+ "anim": {
775
+ "enable": false,
776
+ "speed": 1,
777
+ "opacity_min": 0.1,
778
+ "sync": false
779
+ }
780
+ },
781
+ "size": {
782
+ "value": 3,
783
+ "random": true,
784
+ "anim": {
785
+ "enable": false,
786
+ "speed": 40,
787
+ "size_min": 0.1,
788
+ "sync": false
789
+ }
790
+ },
791
+ "line_linked": {
792
+ "enable": true,
793
+ "distance": 150,
794
+ "color": "#0EF6CC",
795
+ "opacity": 0.4,
796
+ "width": 1
797
+ },
798
+ "move": {
799
+ "enable": true,
800
+ "speed": 2,
801
+ "direction": "none",
802
+ "random": false,
803
+ "straight": false,
804
+ "out_mode": "out",
805
+ "bounce": false,
806
+ "attract": {
807
+ "enable": false,
808
+ "rotateX": 600,
809
+ "rotateY": 1200
810
+ }
811
+ }
812
+ },
813
+ "interactivity": {
814
+ "detect_on": "canvas",
815
+ "events": {
816
+ "onhover": {
817
+ "enable": true,
818
+ "mode": "grab"
819
+ },
820
+ "onclick": {
821
+ "enable": true,
822
+ "mode": "push"
823
+ },
824
+ "resize": true
825
+ },
826
+ "modes": {
827
+ "grab": {
828
+ "distance": 140,
829
+ "line_linked": {
830
+ "opacity": 1
831
+ }
832
+ },
833
+ "bubble": {
834
+ "distance": 400,
835
+ "size": 40,
836
+ "duration": 2,
837
+ "opacity": 8,
838
+ "speed": 3
839
+ },
840
+ "repulse": {
841
+ "distance": 200,
842
+ "duration": 0.4
843
+ },
844
+ "push": {
845
+ "particles_nb": 4
846
+ },
847
+ "remove": {
848
+ "particles_nb": 2
849
+ }
850
+ }
851
+ },
852
+ "retina_detect": true
853
+ });
854
+ });
855
+
856
+ // Ativa links de navegação conforme rolagem
857
+ window.addEventListener('scroll', function() {
858
+ const sections = document.querySelectorAll('section');
859
+ const navLinks = document.querySelectorAll('.nav-link');
860
+
861
+ let current = '';
862
+
863
+ sections.forEach(section => {
864
+ const sectionTop = section.offsetTop;
865
+ const sectionHeight = section.clientHeight;
866
+
867
+ if (pageYOffset >= (sectionTop - 300)) {
868
+ current = section.getAttribute('id');
869
+ }
870
+ });
871
+
872
+ navLinks.forEach(link => {
873
+ link.classList.remove('active');
874
+ if (link.getAttribute('href') === `#${current}`) {
875
+ link.classList.add('active');
876
+ }
877
+ });
878
+ });
879
+
880
+ // Smooth scrolling para links de navegação
881
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
882
+ anchor.addEventListener('click', function(e) {
883
+ e.preventDefault();
884
+
885
+ const targetId = this.getAttribute('href');
886
+ if (targetId === '#') return;
887
+
888
+ const targetElement = document.querySelector(targetId);
889
+ if (targetElement) {
890
+ window.scrollTo({
891
+ top: targetElement.offsetTop - 100,
892
+ behavior: 'smooth'
893
+ });
894
+ }
895
+ });
896
+ });
897
+
898
+ // Animação para o botão "Comece Agora"
899
+ setInterval(function() {
900
+ const pulseBtn = document.querySelector('.pulse');
901
+ pulseBtn.classList.toggle('glow');
902
+ }, 2000);
903
+ </script>
904
+ <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=xlorfx/lorf-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
905
+ </html>