|
<!DOCTYPE html> |
|
<html lang="pt-BR"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Lorf.ai - Inteligência Artificial para Negócios</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/particles.js@2.0.0/particles.min.js"></script> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: #0F111A; |
|
color: #F8FAFC; |
|
scroll-behavior: smooth; |
|
overflow-x: hidden; |
|
} |
|
|
|
.hero-gradient { |
|
background: linear-gradient(135deg, #1A1F36 0%, #0F111A 100%); |
|
} |
|
|
|
.accent-gradient { |
|
background: linear-gradient(90deg, #0EF6CC 0%, #7B61FF 100%); |
|
} |
|
|
|
.accent-text { |
|
background: linear-gradient(90deg, #0EF6CC 0%, #7B61FF 100%); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.glass-card { |
|
background: rgba(26, 31, 54, 0.6); |
|
backdrop-filter: blur(10px); |
|
-webkit-backdrop-filter: blur(10px); |
|
border: 1px solid rgba(14, 246, 204, 0.2); |
|
} |
|
|
|
.highlight-card { |
|
background: linear-gradient(135deg, rgba(14, 246, 204, 0.1), rgba(123, 97, 255, 0.1)); |
|
border: 1px solid rgba(14, 246, 204, 0.3); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.highlight-card::before { |
|
content: ''; |
|
position: absolute; |
|
top: -50%; |
|
left: -50%; |
|
width: 200%; |
|
height: 200%; |
|
background: linear-gradient( |
|
to bottom right, |
|
rgba(14, 246, 204, 0.1) 0%, |
|
rgba(14, 246, 204, 0) 20%, |
|
rgba(14, 246, 204, 0) 80%, |
|
rgba(123, 97, 255, 0.1) 100% |
|
); |
|
transform: rotate(30deg); |
|
z-index: 0; |
|
} |
|
|
|
.section { |
|
min-height: 100vh; |
|
padding: 100px 0; |
|
position: relative; |
|
} |
|
|
|
.floating { |
|
animation: float 6s ease-in-out infinite; |
|
} |
|
|
|
.floating-2 { |
|
animation: float 8s ease-in-out infinite; |
|
} |
|
|
|
.floating-3 { |
|
animation: float 10s ease-in-out infinite; |
|
} |
|
|
|
@keyframes float { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-20px); } |
|
} |
|
|
|
.glow { |
|
animation: glow 2s ease-in-out infinite alternate; |
|
} |
|
|
|
@keyframes glow { |
|
from { box-shadow: 0 0 5px -5px #0EF6CC; } |
|
to { box-shadow: 0 0 20px 5px #0EF6CC; } |
|
} |
|
|
|
.nav-link { |
|
position: relative; |
|
} |
|
|
|
.nav-link::after { |
|
content: ''; |
|
position: absolute; |
|
width: 0; |
|
height: 2px; |
|
bottom: -2px; |
|
left: 0; |
|
background: linear-gradient(90deg, #0EF6CC, #7B61FF); |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-link:hover::after { |
|
width: 100%; |
|
} |
|
|
|
.nav-link.active::after { |
|
width: 100%; |
|
} |
|
|
|
#particles-js { |
|
position: fixed; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
opacity: 0.3; |
|
} |
|
|
|
.tech-grid-overlay { |
|
position: fixed; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
opacity: 0.05; |
|
background-image: |
|
linear-gradient(rgba(14, 246, 204, 0.3) 1px, transparent 1px), |
|
linear-gradient(90deg, rgba(14, 246, 204, 0.3) 1px, transparent 1px); |
|
background-size: 50px 50px; |
|
} |
|
|
|
.pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { transform: scale(1); } |
|
50% { transform: scale(1.05); } |
|
100% { transform: scale(1); } |
|
} |
|
|
|
.scroll-indicator { |
|
position: absolute; |
|
bottom: 30px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
animation: bounce 2s infinite; |
|
} |
|
|
|
@keyframes bounce { |
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } |
|
40% { transform: translateY(-20px) translateX(-50%); } |
|
60% { transform: translateY(-10px) translateX(-50%); } |
|
} |
|
|
|
.model-card { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.model-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px rgba(14, 246, 204, 0.2); |
|
} |
|
|
|
.popular-badge { |
|
position: absolute; |
|
top: -12px; |
|
right: 20px; |
|
background: linear-gradient(90deg, #0EF6CC, #7B61FF); |
|
color: #0F111A; |
|
padding: 4px 12px; |
|
border-radius: 20px; |
|
font-size: 12px; |
|
font-weight: bold; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-dark text-light"> |
|
|
|
<div id="particles-js"></div> |
|
<div class="tech-grid-overlay"></div> |
|
|
|
|
|
<nav class="fixed top-0 w-full z-50 glass-card shadow-sm"> |
|
<div class="container mx-auto px-6 py-4"> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-robot text-3xl text-accent mr-2"></i> |
|
<span class="text-2xl font-bold">Lorf<span class="accent-text">.ai</span></span> |
|
</div> |
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
<a href="#hero" class="nav-link active font-medium">Início</a> |
|
<a href="#solucoes" class="nav-link font-medium">Soluções</a> |
|
<a href="#diferenciais" class="nav-link font-medium">Diferenciais</a> |
|
<a href="#modelos" class="nav-link font-medium">Modelos</a> |
|
<a href="#contato" class="nav-link font-medium">Contato</a> |
|
</div> |
|
|
|
<div class="flex items-center space-x-4"> |
|
<a href="#modelos" class="px-6 py-2 font-medium accent-gradient text-dark rounded-full hover:opacity-90 transition pulse"> |
|
Comece Agora |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section id="hero" class="section hero-gradient flex items-center"> |
|
<div class="container mx-auto px-6"> |
|
<div class="flex flex-col lg:flex-row items-center"> |
|
<div class="lg:w-1/2 mb-12 lg:mb-0"> |
|
<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> |
|
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> |
|
Potencialize seus resultados com <span class="accent-text">Inteligência Artificial</span> |
|
</h1> |
|
<p class="text-xl text-gray-300 mb-8"> |
|
A Lorf.ai oferece soluções prontas para implementação imediata. Personalize com sua marca e comece a operar em dias, não meses. |
|
</p> |
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
<a href="#solucoes" class="px-8 py-4 accent-gradient text-dark font-bold rounded-lg hover:opacity-90 transition"> |
|
Conheça nossas soluções |
|
</a> |
|
<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"> |
|
Fale com um especialista |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="lg:w-1/2 relative"> |
|
<div class="relative"> |
|
<div class="w-full h-96 bg-gradient-to-br from-primary to-accent2/20 rounded-2xl flex items-center justify-center floating"> |
|
<i class="fas fa-robot text-8xl text-accent"></i> |
|
</div> |
|
<div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-accent/10 filter blur-xl floating-2"></div> |
|
<div class="absolute -bottom-6 -right-6 w-40 h-40 rounded-full bg-accent2/10 filter blur-xl floating-3"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="scroll-indicator"> |
|
<a href="#solucoes" class="text-accent text-2xl"> |
|
<i class="fas fa-chevron-down"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="solucoes" class="section bg-gradient-to-b from-primary/10 to-dark"> |
|
<div class="container mx-auto px-6 py-20"> |
|
<div class="text-center mb-16"> |
|
<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> |
|
<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> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Plataformas completas que você pode personalizar com sua marca e começar a usar imediatamente. |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
<div class="highlight-card p-8 rounded-xl transition duration-300 hover:shadow-lg"> |
|
<div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6"> |
|
<i class="fas fa-chart-line text-2xl text-accent"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Análise Preditiva</h3> |
|
<p class="text-gray-300 mb-4"> |
|
Preveja tendências e comportamentos com algoritmos de IA que aprendem com seus dados. |
|
</p> |
|
<ul class="space-y-2 mb-6"> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Previsão de vendas</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Segmentação de clientes</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Alertas automáticos</span> |
|
</li> |
|
</ul> |
|
<a href="#modelos" class="text-accent hover:text-accent2 transition flex items-center font-medium"> |
|
Ver modelos <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
|
|
<div class="highlight-card p-8 rounded-xl transition duration-300 hover:shadow-lg"> |
|
<div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6"> |
|
<i class="fas fa-robot text-2xl text-accent2"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Atendimento Automatizado</h3> |
|
<p class="text-gray-300 mb-4"> |
|
Chatbots inteligentes que atendem seus clientes 24/7 com respostas naturais e precisas. |
|
</p> |
|
<ul class="space-y-2 mb-6"> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Multiplataforma</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Multi-idiomas</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Integração fácil</span> |
|
</li> |
|
</ul> |
|
<a href="#modelos" class="text-accent hover:text-accent2 transition flex items-center font-medium"> |
|
Ver modelos <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
|
|
<div class="highlight-card p-8 rounded-xl transition duration-300 hover:shadow-lg"> |
|
<div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6"> |
|
<i class="fas fa-cogs text-2xl text-accent"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Automação de Processos</h3> |
|
<p class="text-gray-300 mb-4"> |
|
Reduza custos and aumente eficiência automatizando tarefas repetitivas e complexas. |
|
</p> |
|
<ul class="space-y-2 mb-6"> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Processamento de documentos</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Fluxos de trabalho</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-check text-accent mr-2"></i> |
|
<span>Integração com sistemas</span> |
|
</li> |
|
</ul> |
|
<a href="#modelos" class="text-accent hover:text-accent2 transition flex items-center font-medium"> |
|
Ver modelos <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="diferenciais" class="section bg-primary/10"> |
|
<div class="container mx-auto px-6 py-20"> |
|
<div class="flex flex-col lg:flex-row items-center"> |
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
<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> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight"> |
|
<span class="accent-text">Diferenciais</span> que fazem a diferença |
|
</h2> |
|
<p class="text-xl text-gray-300 mb-8"> |
|
Nossa abordagem única garante resultados rápidos e impacto real no seu negócio. |
|
</p> |
|
|
|
<div class="space-y-6"> |
|
<div class="flex"> |
|
<div class="mr-6"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-bolt text-xl text-accent"></i> |
|
</div> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Implementação Rápida</h3> |
|
<p class="text-gray-300"> |
|
Comece em dias, não meses. Nossas soluções estão prontas para uso com configuração mínima. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex"> |
|
<div class="mr-6"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-shield-alt text-xl text-accent2"></i> |
|
</div> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Segurança de Dados</h3> |
|
<p class="text-gray-300"> |
|
Plataforma desenvolvida com os mais altos padrões de segurança, atualizada constantemente. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex"> |
|
<div class="mr-6"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-headset text-xl text-accent"></i> |
|
</div> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Suporte Prioritário</h3> |
|
<p class="text-gray-300"> |
|
Nossa equipe está sempre disponível para ajudar você a extrair o máximo da plataforma. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="lg:w-1/2"> |
|
<div class="relative"> |
|
<div class="w-full h-96 bg-gradient-to-br from-primary to-accent/20 rounded-2xl flex items-center justify-center floating"> |
|
<i class="fas fa-star text-8xl text-accent2"></i> |
|
</div> |
|
<div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-accent/10 filter blur-xl floating-2"></div> |
|
<div class="absolute -bottom-6 -right-6 w-40 h-40 rounded-full bg-accent2/10 filter blur-xl floating-3"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="modelos" class="section bg-gradient-to-b from-primary/10 to-dark"> |
|
<div class="container mx-auto px-6 py-20"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-3">MODELOS SaaS</span> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Nossos <span class="accent-text">Modelos de IA</span> prontos para uso</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Escolha entre nossos modelos especializados e comece a usar imediatamente. |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-comments text-xl text-accent"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-xs font-semibold">VENDAS</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Assistente de Vendas</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Chatbot especializado em qualificar leads e agendar reuniões automaticamente. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$799<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="popular-badge">POPULAR</div> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-headset text-xl text-accent2"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent2/10 text-accent2 rounded-full text-xs font-semibold">ATENDIMENTO</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Atendente Virtual 24/7</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Resolve 80% das solicitações de clientes sem intervenção humana. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$1.299<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-chart-bar text-xl text-accent"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-xs font-semibold">ANÁLISE</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Analista de Mercado</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Monitora tendências e concorrência com relatórios semanais automáticos. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$1.499<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-file-invoice-dollar text-xl text-accent2"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent2/10 text-accent2 rounded-full text-xs font-semibold">FINANÇAS</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Assistente Financeiro</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Analisa fluxo de caixa e prevê receitas/despesas com 95% de precisão. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$1.899<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-robot text-xl text-accent"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-xs font-semibold">RH</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Recrutador Inteligente</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Triagem automática de currículos e agendamento de entrevistas. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$1.199<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-shopping-cart text-xl text-accent2"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent2/10 text-accent2 rounded-full text-xs font-semibold">E-COMMERCE</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Personalizador de Experiência</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Recomenda produtos e ofertas personalizadas para cada cliente. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$1.599<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-language text-xl text-accent"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-xs font-semibold">TRADUÇÃO</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Tradutor Corporativo</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Tradução automática de documentos e comunicações em 15 idiomas. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$899<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-file-alt text-xl text-accent2"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent2/10 text-accent2 rounded-full text-xs font-semibold">DOCUMENTOS</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Processador de Contratos</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Extrai e analisa cláusulas críticas de contratos automaticamente. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$1.299<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-bullhorn text-xl text-accent"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-xs font-semibold">MARKETING</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Gerador de Conteúdo</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Cria posts, emails e anúncios otimizados para cada público-alvo. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$999<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="highlight-card model-card p-6 rounded-xl relative"> |
|
<div class="flex items-start justify-between mb-4"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-chart-pie text-xl text-accent2"></i> |
|
</div> |
|
<span class="px-3 py-1 bg-accent2/10 text-accent2 rounded-full text-xs font-semibold">BI</span> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">Analista de Dados</h3> |
|
<p class="text-gray-300 mb-4 text-sm"> |
|
Transforma dados brutos em insights acionáveis com relatórios automáticos. |
|
</p> |
|
<div class="flex items-center justify-between mt-6"> |
|
<span class="text-2xl font-bold">R$2.199<span class="text-sm text-gray-400">/mês</span></span> |
|
<a href="#contato" class="px-4 py-2 bg-accent/10 text-accent rounded-lg hover:bg-accent/20 transition"> |
|
Contratar |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="text-center mt-16"> |
|
<p class="text-gray-300 mb-6">Precisa de um modelo personalizado para seu negócio?</p> |
|
<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"> |
|
Fale com nosso time |
|
</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-primary/10 to-dark"> |
|
<div class="container mx-auto px-6"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-3">DEPOIMENTOS</span> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">O que nossos <span class="accent-text">clientes</span> dizem</h2> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
<div class="highlight-card p-8 rounded-xl"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4"> |
|
<i class="fas fa-user text-accent"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Carlos Silva</h4> |
|
<p class="text-sm text-gray-400">CEO, TechSolutions</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
"O Assistente de Vendas da Lorf.ai qualificou 40% mais leads em apenas 2 meses, com muito menos esforço da equipe." |
|
</p> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="highlight-card p-8 rounded-xl"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4"> |
|
<i class="fas fa-user text-accent2"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Ana Oliveira</h4> |
|
<p class="text-sm text-gray-400">Diretora de Marketing, GlobalBrand</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
"Nosso Atendente Virtual reduziu em 65% o tempo de resposta aos clientes, aumentando a satisfação em 30%." |
|
</p> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="highlight-card p-8 rounded-xl"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4"> |
|
<i class="fas fa-user text-accent"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Roberto Santos</h4> |
|
<p class="text-sm text-gray-400">Gerente de Operações, FinCorp</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
"O Analista de Dados nos fornece insights semanais que antes levavam 20 horas de trabalho manual para produzir." |
|
</p> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star-half-alt"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="contato" class="section bg-gradient-to-b from-primary/10 to-dark"> |
|
<div class="container mx-auto px-6 py-20"> |
|
<div class="flex flex-col lg:flex-row items-center"> |
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
<span class="inline-block px-4 py-1 bg-accent/10 text-accent rounded-full text-sm font-semibold mb-4">CONTATO</span> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight"> |
|
Pronto para <span class="accent-text">transformar</span> seu negócio? |
|
</h2> |
|
<p class="text-xl text-gray-300 mb-8"> |
|
Nossa equipe está pronta para ajudar você a encontrar a solução perfeita para suas necessidades. |
|
</p> |
|
|
|
<div class="space-y-6"> |
|
<div class="flex items-center"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-6"> |
|
<i class="fas fa-envelope text-xl text-accent"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-lg font-bold">Email</h3> |
|
<p class="text-gray-300">contato@lorf.ai</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-6"> |
|
<i class="fas fa-phone-alt text-xl text-accent2"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-lg font-bold">Telefone</h3> |
|
<p class="text-gray-300">(11) 98765-4321</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center"> |
|
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-6"> |
|
<i class="fas fa-map-marker-alt text-xl text-accent"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-lg font-bold">Endereço</h3> |
|
<p class="text-gray-300">Av. Paulista, 1000 - São Paulo/SP</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="lg:w-1/2"> |
|
<div class="highlight-card p-8 rounded-xl"> |
|
<h3 class="text-xl font-bold mb-6">Envie uma mensagem</h3> |
|
<form> |
|
<div class="mb-6"> |
|
<label for="name" class="block text-gray-300 mb-2">Nome</label> |
|
<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"> |
|
</div> |
|
<div class="mb-6"> |
|
<label for="email" class="block text-gray-300 mb-2">Email</label> |
|
<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"> |
|
</div> |
|
<div class="mb-6"> |
|
<label for="message" class="block text-gray-300 mb-2">Mensagem</label> |
|
<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> |
|
</div> |
|
<button type="submit" class="w-full py-3 accent-gradient text-dark font-bold rounded-lg hover:opacity-90 transition"> |
|
Enviar Mensagem |
|
</button> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-primary py-12"> |
|
<div class="container mx-auto px-6"> |
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
|
<div> |
|
<div class="flex items-center mb-6"> |
|
<i class="fas fa-robot text-3xl text-accent mr-2"></i> |
|
<span class="text-2xl font-bold">Lorf<span class="accent-text">.ai</span></span> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
Soluções inteligentes em IA para impulsionar seu negócio. |
|
</p> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition"> |
|
<i class="fab fa-facebook-f"></i> |
|
</a> |
|
<a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition"> |
|
<i class="fab fa-twitter"></i> |
|
</a> |
|
<a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition"> |
|
<i class="fab fa-linkedin-in"></i> |
|
</a> |
|
<a href="#" class="w-10 h-10 bg-dark rounded-full flex items-center justify-center hover:bg-accent hover:text-dark transition"> |
|
<i class="fab fa-instagram"></i> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h3 class="text-lg font-bold mb-6 text-accent">Soluções</h3> |
|
<ul class="space-y-3"> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Análise Preditiva</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Chatbots Inteligentes</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Automação de Processos</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Personalização</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div> |
|
<h3 class="text-lg font-bold mb-6 text-accent">Modelos</h3> |
|
<ul class="space-y-3"> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Assistente de Vendas</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Atendente Virtual</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Analista de Dados</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Gerador de Conteúdo</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div> |
|
<h3 class="text-lg font-bold mb-6 text-accent">Empresa</h3> |
|
<ul class="space-y-3"> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Sobre Nós</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Carreiras</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Termos</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-accent transition">Privacidade</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Lorf.ai. Todos os direitos reservados.</p> |
|
<div class="flex space-x-6"> |
|
<a href="#" class="text-gray-400 hover:text-accent transition">Termos</a> |
|
<a href="#" class="text-gray-400 hover:text-accent transition">Privacidade</a> |
|
<a href="#" class="text-gray-400 hover:text-accent transition">Cookies</a> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
particlesJS('particles-js', { |
|
"particles": { |
|
"number": { |
|
"value": 80, |
|
"density": { |
|
"enable": true, |
|
"value_area": 800 |
|
} |
|
}, |
|
"color": { |
|
"value": "#0EF6CC" |
|
}, |
|
"shape": { |
|
"type": "circle", |
|
"stroke": { |
|
"width": 0, |
|
"color": "#000000" |
|
}, |
|
"polygon": { |
|
"nb_sides": 5 |
|
} |
|
}, |
|
"opacity": { |
|
"value": 0.5, |
|
"random": false, |
|
"anim": { |
|
"enable": false, |
|
"speed": 1, |
|
"opacity_min": 0.1, |
|
"sync": false |
|
} |
|
}, |
|
"size": { |
|
"value": 3, |
|
"random": true, |
|
"anim": { |
|
"enable": false, |
|
"speed": 40, |
|
"size_min": 0.1, |
|
"sync": false |
|
} |
|
}, |
|
"line_linked": { |
|
"enable": true, |
|
"distance": 150, |
|
"color": "#0EF6CC", |
|
"opacity": 0.4, |
|
"width": 1 |
|
}, |
|
"move": { |
|
"enable": true, |
|
"speed": 2, |
|
"direction": "none", |
|
"random": false, |
|
"straight": false, |
|
"out_mode": "out", |
|
"bounce": false, |
|
"attract": { |
|
"enable": false, |
|
"rotateX": 600, |
|
"rotateY": 1200 |
|
} |
|
} |
|
}, |
|
"interactivity": { |
|
"detect_on": "canvas", |
|
"events": { |
|
"onhover": { |
|
"enable": true, |
|
"mode": "grab" |
|
}, |
|
"onclick": { |
|
"enable": true, |
|
"mode": "push" |
|
}, |
|
"resize": true |
|
}, |
|
"modes": { |
|
"grab": { |
|
"distance": 140, |
|
"line_linked": { |
|
"opacity": 1 |
|
} |
|
}, |
|
"bubble": { |
|
"distance": 400, |
|
"size": 40, |
|
"duration": 2, |
|
"opacity": 8, |
|
"speed": 3 |
|
}, |
|
"repulse": { |
|
"distance": 200, |
|
"duration": 0.4 |
|
}, |
|
"push": { |
|
"particles_nb": 4 |
|
}, |
|
"remove": { |
|
"particles_nb": 2 |
|
} |
|
} |
|
}, |
|
"retina_detect": true |
|
}); |
|
}); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
const sections = document.querySelectorAll('section'); |
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
let current = ''; |
|
|
|
sections.forEach(section => { |
|
const sectionTop = section.offsetTop; |
|
const sectionHeight = section.clientHeight; |
|
|
|
if (pageYOffset >= (sectionTop - 300)) { |
|
current = section.getAttribute('id'); |
|
} |
|
}); |
|
|
|
navLinks.forEach(link => { |
|
link.classList.remove('active'); |
|
if (link.getAttribute('href') === `#${current}`) { |
|
link.classList.add('active'); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
|
|
const targetId = this.getAttribute('href'); |
|
if (targetId === '#') return; |
|
|
|
const targetElement = document.querySelector(targetId); |
|
if (targetElement) { |
|
window.scrollTo({ |
|
top: targetElement.offsetTop - 100, |
|
behavior: 'smooth' |
|
}); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
setInterval(function() { |
|
const pulseBtn = document.querySelector('.pulse'); |
|
pulseBtn.classList.toggle('glow'); |
|
}, 2000); |
|
</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=xlorfx/lorf-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
