Copie e cole o código HTML em seu site para ativar.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nextcomm | Soluções de Comunicação, Atendimento e IA</title>
<meta name="description" content="Tecnologia para organizar processos, automatizar tarefas e melhorar a experiência do seu cliente.">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ========================================
CSS Variables & Reset
======================================== */
:root {
--nextcomm-blue: hsl(233, 65%, 54%);
--nextcomm-dark: hsl(30, 4%, 15%);
--phone-green: hsl(162, 68%, 55%);
--chat-orange: hsl(25, 100%, 54%);
--ai-purple: hsl(348, 80%, 57%);
--background: hsl(210, 20%, 98%);
--foreground: hsl(30, 4%, 15%);
--card: hsl(0, 0%, 100%);
--primary: hsl(233, 65%, 54%);
--primary-foreground: hsl(0, 0%, 100%);
--muted: hsl(210, 15%, 94%);
--muted-foreground: hsl(210, 10%, 45%);
--border: hsl(210, 20%, 90%);
--radius: 0.75rem;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: var(--background);
color: var(--foreground);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
outline: none;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
button:focus, button:focus-visible, button:active { outline: none; }
/* ========================================
Layout
======================================== */
.container {
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
/* ========================================
Typography
======================================== */
.heading-xl { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
@media (min-width: 768px) { .heading-xl { font-size: 2.25rem; } }
@media (min-width: 1024px) { .heading-xl { font-size: 3rem; } }
.heading-lg { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 768px) { .heading-lg { font-size: 2.25rem; } }
.body-lg { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.75; }
.body-md { font-size: 1rem; color: var(--muted-foreground); line-height: 1.75; }
@media (min-width: 768px) { .body-md { font-size: 1.125rem; } }
/* ========================================
Animations
======================================== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { opacity: 0; animation: fadeInUp 0.6s ease-out forwards; }
/* ========================================
Hero
======================================== */
.hero {
min-height: 35vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, white 0%, hsl(217, 91%, 97%) 50%, hsl(217, 91%, 95%) 100%);
}
.hero-decorations { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-decoration { position: absolute; border-radius: 50%; filter: blur(60px); }
.hero-decoration-1 { top: -5rem; right: -5rem; width: 16rem; height: 16rem; background: rgba(66, 99, 235, 0.05); }
.hero-decoration-2 { bottom: 0; left: -5rem; width: 16rem; height: 16rem; background: rgba(52, 211, 153, 0.05); }
.hero-content { text-align: center; max-width: 48rem; margin: 0 auto; padding: 2.5rem 1rem; position: relative; z-index: 10; }
@media (min-width: 768px) { .hero-content { padding: 3.5rem 1.5rem; } }
.hero-title { margin-bottom: 1rem; }
.hero-title .highlight { color: var(--primary); }
.hero-description { max-width: 36rem; margin: 0 auto 1.5rem; }
.hero-link { color: var(--primary); font-weight: 600; transition: all 0.2s; }
.hero-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ========================================
Solutions Overview
======================================== */
.solutions { background: white; padding: 2vh 0; }
@media (min-width: 768px) { .solutions { padding: 5vh 0; } }
.solutions-header { text-align: center; max-width: 48rem; margin: 0 auto 3rem; }
.solutions-header h2 { margin-bottom: 1rem; }
.solutions-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .solutions-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.solution-card {
display: flex; flex-direction: column; background: var(--card);
border-radius: 1rem; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s; cursor: pointer; text-align: left; width: 100%;
}
.solution-card:hover { box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); }
.solution-card-image { padding: 1.25rem; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.solution-card-image.phone { background: var(--phone-green); }
.solution-card-image.chat { background: var(--chat-orange); }
.solution-card-image.ai { background: var(--ai-purple); }
.solution-card-image img { width: 100%; border-radius: 0.5rem; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15); transition: transform 0.5s; }
.solution-card:hover .solution-card-image img { transform: scale(1.02); }
.solution-card-content { padding: 1.5rem; padding-top: 1.25rem; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.solution-card-logo { height: 1.5rem; width: auto; object-fit: contain; margin-bottom: 0.25rem; }
.solution-card-title { font-size: 0.875rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.5rem; }
.solution-card-description { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 1rem; flex: 1; }
.solution-card-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: gap 0.3s; }
.solution-card-link.phone { color: var(--phone-green); }
.solution-card-link.chat { color: var(--chat-orange); }
.solution-card-link.ai { color: var(--ai-purple); }
.solution-card:hover .solution-card-link { gap: 0.75rem; }
.solution-card-link svg { width: 1rem; height: 1rem; }
/* ========================================
Product Details Layout (with Sidebar)
======================================== */
.products-layout { display: flex; gap: 2.5rem; }
.products-sidebar { display: none; }
@media (min-width: 1024px) {
.products-sidebar { display: block; width: 13rem; flex-shrink: 0; }
}
.products-sidebar-inner { position: sticky; top: 1rem; }
.sidebar-cards { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 0; }
.sidebar-card {
display: flex; flex-direction: column; background: var(--card);
border-radius: 0.75rem; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s; cursor: pointer; text-align: left; width: 100%;
}
.sidebar-card:hover { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
.sidebar-card-image { padding: 0.75rem; display: flex; align-items: center; justify-content: center; min-height: 70px; }
.sidebar-card-image.phone { background: var(--phone-green); }
.sidebar-card-image.chat { background: var(--chat-orange); }
.sidebar-card-image.ai { background: var(--ai-purple); }
.sidebar-card-image img { width: 100%; border-radius: 0.5rem; box-shadow: 0 10px 20px -5px rgba(0,0,0,0.15); transition: transform 0.5s; }
.sidebar-card:hover .sidebar-card-image img { transform: scale(1.02); }
.sidebar-card-content { padding: 0.75rem; display: flex; flex-direction: column; align-items: flex-start; }
.sidebar-card-logo { height: 1rem; width: auto; object-fit: contain; margin-bottom: 0.125rem; }
.sidebar-card-title { font-size: 11px; font-weight: 500; color: var(--foreground); margin-bottom: 0.375rem; }
.sidebar-card-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 11px; transition: gap 0.3s; }
.sidebar-card-link.phone { color: var(--phone-green); }
.sidebar-card-link.chat { color: var(--chat-orange); }
.sidebar-card-link.ai { color: var(--ai-purple); }
.sidebar-card:hover .sidebar-card-link { gap: 0.625rem; }
.sidebar-card-link svg { width: 0.75rem; height: 0.75rem; }
.products-main { flex: 1; min-width: 0; }
/* ========================================
Product Detail Card
======================================== */
.product-section { padding: 2vh 0; }
@media (min-width: 768px) { .product-section { padding: 3vh 0; } }
.product-card {
border-radius: 1.5rem; border: 2px solid;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
background: var(--card); padding: 2rem;
}
@media (min-width: 768px) { .product-card { padding: 2.5rem; } }
@media (min-width: 1024px) { .product-card { padding: 3.5rem; } }
.product-card.phone { border-color: hsla(162, 68%, 55%, 0.4); }
.product-card.chat { border-color: hsla(25, 100%, 54%, 0.4); }
.product-card.ai { border-color: hsla(348, 80%, 57%, 0.4); }
.product-badge {
display: inline-block; padding: 0.5rem 1.25rem; border-radius: 9999px;
font-size: 0.875rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; margin-bottom: 1.25rem;
}
.product-badge.phone { background: hsla(162, 68%, 55%, 0.15); color: var(--phone-green); }
.product-badge.chat { background: hsla(25, 100%, 54%, 0.15); color: var(--chat-orange); }
.product-badge.ai { background: hsla(348, 80%, 57%, 0.15); color: var(--ai-purple); }
.product-logo { height: 1rem; width: auto; object-fit: contain; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .product-logo { height: 1.25rem; } }
@media (min-width: 1024px) { .product-logo { height: 1.5rem; } }
.product-headline { font-size: 1.5rem; font-weight: 700; color: var(--foreground); line-height: 1.2; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .product-headline { font-size: 1.875rem; } }
@media (min-width: 1024px) { .product-headline { font-size: 2.25rem; } }
.product-name.phone { color: var(--phone-green); }
.product-name.chat { color: var(--chat-orange); }
.product-name.ai { color: var(--ai-purple); }
.product-description { font-size: 1rem; color: var(--muted-foreground); max-width: 42rem; margin-bottom: 2rem; }
.product-screenshot { margin-bottom: 2rem; max-width: 42rem; }
.product-screenshot .screenshot-container {
border-radius: 1rem; overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.05); background: white;
}
.product-features { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .product-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-features { grid-template-columns: repeat(3, 1fr); } }
.feature-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.feature-icon { flex-shrink: 0; margin-top: 0.125rem; width: 1.5rem; height: 1.5rem; }
.feature-icon.phone { color: var(--phone-green); }
.feature-icon.chat { color: var(--chat-orange); }
.feature-icon.ai { color: var(--ai-purple); }
.feature-title { font-weight: 600; font-size: 0.875rem; color: var(--foreground); }
.feature-desc { font-size: 0.875rem; color: var(--muted-foreground); }
/* ========================================
Contact
======================================== */
.contact { padding: 2vh 0; }
@media (min-width: 768px) { .contact { padding: 5vh 0; } }
.contact-card {
border-radius: 1.5rem; border: 2px solid hsla(233, 65%, 54%, 0.2);
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
background: var(--card); padding: 2.5rem; text-align: center;
}
@media (min-width: 768px) { .contact-card { padding: 3.5rem; } }
@media (min-width: 1024px) { .contact-card { padding: 5rem; } }
.contact-card h2 { font-size: 1.875rem; font-weight: 700; color: var(--foreground); line-height: 1.2; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .contact-card h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .contact-card h2 { font-size: 3rem; } }
.contact-card .highlight { color: var(--primary); }
/* ========================================
Footer
======================================== */
.footer { background: var(--nextcomm-dark); color: white; margin-top: 2vh; min-height: 12vh; }
@media (min-width: 768px) { .footer { margin-top: 5vh; } }
.footer-content { max-width: 56rem; margin: 0 auto; text-align: center; padding: 2rem 1rem; }
@media (min-width: 768px) { .footer-content { padding: 2.5rem 1.5rem; } }
.footer-label { color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; margin-bottom: 1rem; }
.footer-logo { height: 2rem; margin: 0 auto; }
@media (min-width: 768px) { .footer-logo { height: 2.25rem; } }
</style>
</head>
<body>
<!-- ========================================
Solutions Overview
======================================== -->
<section id="solutions" class="solutions">
<div class="container">
<div class="solutions-header">
<h2 class="heading-lg">Conheça nossas soluções</h2>
<p class="body-lg">Ferramentas que ajudam a estruturar comunicação, atendimento e vendas de forma integrada.</p>
</div>
<div class="solutions-grid">
<!-- Phone -->
<button class="solution-card" onclick="scrollToSection('next-phone')">
<div class="solution-card-image phone">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-phone-screenshot.png" alt="Next_phone">
</div>
<div class="solution-card-content">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-phone-logo.png" alt="Next_phone" class="solution-card-logo">
<p class="solution-card-title">Telefonia em nuvem</p>
<p class="solution-card-description">Central telefônica moderna, flexível e 100% em nuvem para fazer e receber chamadas de qualquer lugar.</p>
<span class="solution-card-link phone">
Saiba mais
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</div>
</button>
<!-- Chat -->
<button class="solution-card" onclick="scrollToSection('next-chat')">
<div class="solution-card-image chat">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-chat-screenshot.png" alt="Next_chat">
</div>
<div class="solution-card-content">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-chat-logo.png" alt="Next_chat" class="solution-card-logo">
<p class="solution-card-title">Plataforma Omnichannel</p>
<p class="solution-card-description">Todos os canais de atendimento centralizados em uma única tela, com CRM integrado e histórico completo.</p>
<span class="solution-card-link chat">
Saiba mais
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</div>
</button>
<!-- AI -->
<button class="solution-card" onclick="scrollToSection('next-ai')">
<div class="solution-card-image ai">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-ai-screenshot.png" alt="Next_AI">
</div>
<div class="solution-card-content">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-ai-logo.png" alt="Next_AI" class="solution-card-logo">
<p class="solution-card-title">Inteligência Artificial para Atendimento</p>
<p class="solution-card-description">Automatize o atendimento com IA que entende, responde e aprende sobre seu negócio com agilidade e eficiência.</p>
<span class="solution-card-link ai">
Saiba mais
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</div>
</button>
</div>
</div>
</section>
<!-- ========================================
Product Details with Sidebar
======================================== -->
<div class="container">
<div class="products-layout">
<!-- Sticky Sidebar -->
<aside class="products-sidebar">
<div class="products-sidebar-inner">
<div class="sidebar-cards">
<button class="sidebar-card" onclick="scrollToSection('next-phone')">
<div class="sidebar-card-image phone">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-phone-screenshot.png" alt="Next_phone">
</div>
<div class="sidebar-card-content">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-phone-logo.png" alt="Next_phone" class="sidebar-card-logo">
<p class="sidebar-card-title">Telefonia em nuvem</p>
<span class="sidebar-card-link phone">
Saiba mais
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</div>
</button>
<button class="sidebar-card" onclick="scrollToSection('next-chat')">
<div class="sidebar-card-image chat">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-chat-screenshot.png" alt="Next_chat">
</div>
<div class="sidebar-card-content">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-chat-logo.png" alt="Next_chat" class="sidebar-card-logo">
<p class="sidebar-card-title">Plataforma Omnichannel</p>
<span class="sidebar-card-link chat">
Saiba mais
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</div>
</button>
<button class="sidebar-card" onclick="scrollToSection('next-ai')">
<div class="sidebar-card-image ai">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-ai-screenshot.png" alt="Next_AI">
</div>
<div class="sidebar-card-content">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-ai-logo.png" alt="Next_AI" class="sidebar-card-logo">
<p class="sidebar-card-title">Inteligência Artificial</p>
<span class="sidebar-card-link ai">
Saiba mais
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</div>
</button>
</div>
</div>
</aside>
<!-- Product Details -->
<div class="products-main">
<!-- Next_phone -->
<section id="next-phone" class="product-section">
<div class="product-card phone">
<span class="product-badge phone">Central Telefônica</span>
<div><img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-phone-logo.png" alt="Next_phone" class="product-logo"></div>
<h2 class="product-headline">Central telefônica moderna, flexível e 100% em nuvem</h2>
<p class="product-description">Substitui infraestrutura física, permitindo atender de qualquer lugar, gravar chamadas, gerar relatórios detalhados e fazer integrações nativas com ferramentas como CRM, atendimento digital e IA.</p>
<div class="product-screenshot">
<div class="screenshot-container">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-phone-screenshot.png" alt="Interface do Next_phone — Telefonia em nuvem" loading="lazy">
</div>
</div>
<div class="product-features">
<div class="feature-item">
<svg class="feature-icon phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<div><p class="feature-title">Ramais Virtuais</p><p class="feature-desc">Equipes remotas ou híbridas conectadas de qualquer lugar.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
<div><p class="feature-title">Gravação Automática</p><p class="feature-desc">Todas as chamadas gravadas para controle e qualidade.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
<div><p class="feature-title">Relatórios em Tempo Real</p><p class="feature-desc">Monitore desempenho, tempos de espera e volume de chamadas.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg>
<div><p class="feature-title">URA e Filas Inteligentes</p><p class="feature-desc">Direcionamento automático para o atendente certo.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
<div><p class="feature-title">Integração Nativa</p><p class="feature-desc">Conecte com CRM e canais digitais sem esforço.</p></div>
</div>
</div>
</div>
</section>
<!-- Next_chat -->
<section id="next-chat" class="product-section">
<div class="product-card chat">
<span class="product-badge chat">Plataforma Omnichannel</span>
<div><img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-chat-logo.png" alt="Next_chat" class="product-logo"></div>
<h2 class="product-headline">Atendimento Inteligente</h2>
<p class="product-description">Tenha vários atendentes em um único número de WhatsApp e centralize todos os outros canais da sua empresa tais como Messenger (Facebook) e Direct (Instagram).</p>
<div class="product-screenshot">
<div class="screenshot-container">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-chat-screenshot.png" alt="Interface do Next_chat — Plataforma Omnichannel" loading="lazy">
</div>
</div>
<div class="product-features">
<div class="feature-item">
<svg class="feature-icon chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
<div><p class="feature-title">Chatbot com IA</p><p class="feature-desc">Respostas inteligentes e personalizadas 24 horas por dia.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
<div><p class="feature-title">Multicanal Unificado</p><p class="feature-desc">WhatsApp, Instagram, Messenger e chat do site em um único painel.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
<div><p class="feature-title">Respostas Automáticas</p><p class="feature-desc">Reduza o tempo de espera com automações configuráveis.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><p class="feature-title">Atendimento 24/7</p><p class="feature-desc">Nunca perca uma oportunidade, mesmo fora do horário comercial.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
<div><p class="feature-title">Relatórios Detalhados</p><p class="feature-desc">Monitore tempos de resposta, satisfação e volume de atendimentos.</p></div>
</div>
</div>
</div>
</section>
<!-- Next_AI -->
<section id="next-ai" class="product-section">
<div class="product-card ai">
<span class="product-badge ai">Inteligência Artificial</span>
<div><img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-ai-logo.png" alt="Next_AI" class="product-logo"></div>
<h2 class="product-headline">Atendimento Inteligente</h2>
<p class="product-description">Automatize o atendimento da sua empresa com Inteligência Artificial.</p>
<div class="product-screenshot">
<div class="screenshot-container">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/next-ai-screenshot.png" alt="Interface do Next_AI — Inteligência Artificial" loading="lazy">
</div>
</div>
<div class="product-features">
<div class="feature-item">
<svg class="feature-icon ai" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>
<div><p class="feature-title">IA Especializada</p><p class="feature-desc">Entende, responde e aprende sobre o seu negócio continuamente.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon ai" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
<div><p class="feature-title">Agendamento Automático</p><p class="feature-desc">Agenda compromissos sem intervenção humana.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon ai" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/></svg>
<div><p class="feature-title">Triagem Inteligente</p><p class="feature-desc">Direciona para o especialista certo quando necessário.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon ai" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"/><circle cx="10" cy="13" r="8"/></svg>
<div><p class="feature-title">Voz Humanizada</p><p class="feature-desc">Atendimento por voz profissional e natural via telefone.</p></div>
</div>
<div class="feature-item">
<svg class="feature-icon ai" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg>
<div><p class="feature-title">Integração Total</p><p class="feature-desc">Conecte com CRM, ERP e plataformas existentes.</p></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- ========================================
Contact
======================================== -->
<section id="contato" class="contact">
<div class="container" style="max-width: 90rem;">
<div class="contact-card">
<h2>Quer saber mais?<br><span class="highlight">Entre em contato</span></h2>
<p class="body-lg" style="max-width: 42rem; margin: 0 auto;">
Fale com nosso time para conhecer as soluções ideais para o seu negócio.
Estamos prontos para ajudar você a transformar seu atendimento.
</p>
</div>
</div>
</section>
<!-- ========================================
Footer
======================================== -->
<footer class="footer">
<div class="footer-content">
<p class="footer-label">Tecnologias desenvolvidas por</p>
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/nextcomm-logo-dark.svg" alt="Nextcomm" class="footer-logo">
</div>
</footer>
<script>
function scrollToSection(id) {
var el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth' });
}
</script>
</body>
</html>
Ao preencher as informações, você será redirecionado para o WhatsApp. Ao clicar para conversar você está de acordo com nossas Políticas de Privacidade e Termos de Uso.
Automatize seus atendimentos com o Next_ai
Para relacionamento com o cliente utilize o Next_crm
Unifique todos os canais de atendimento Next_chat
Moderno, flexível e 100% em nuvem com Next_phone
Proteja a sua empresa contra ameaças Next_security
Audios do WhatsApp em texto Next_convert