Hugging Face's logo

Spaces:
xlorfx
/
lorf-ai
Running

App Files Community
lorf-ai / index.html
xlorfx's picture
xlorfx
Add 1 files
419fc0d verified
raw
history blame contribute delete
52.6 kB
 <!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">
<!-- Background Elements -->
<div id="particles-js"></div>
<div class="tech-grid-overlay"></div>
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- Soluções 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>
<!-- Diferenciais 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>
<!-- Modelos SaaS 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">
<!-- Modelo 1 -->
<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>
<!-- Modelo 2 -->
<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>
<!-- Modelo 3 -->
<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>
<!-- Modelo 4 -->
<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>
<!-- Modelo 5 -->
<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>
<!-- Modelo 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-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>
<!-- Modelo 7 -->
<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>
<!-- Modelo 8 -->
<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>
<!-- Modelo 9 -->
<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>
<!-- Modelo 10 -->
<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>
<!-- Depoimentos 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>
<!-- Contato 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 -->
<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>
// Inicializa o particles.js
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
});
});
// Ativa links de navegação conforme rolagem
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');
}
});
});
// Smooth scrolling para links de navegação
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'
});
}
});
});
// Animação para o botão "Comece Agora"
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>