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 Atendimento e Vendas para Parceiros</title>
<meta name="description" content="Tecnologia integrada para organizar processos, melhorar o atendimento ao cliente e dar previsibilidade ao crescimento da sua empresa.">
<!-- 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 {
/* Brand Colors */
--nextcomm-blue: hsl(233, 65%, 54%);
--nextcomm-dark: hsl(30, 4%, 15%);
/* Product Colors */
--phone-green: hsl(162, 68%, 55%);
--chat-orange: hsl(25, 100%, 54%);
--crm-yellow: hsl(53, 97%, 53%);
/* Semantic Colors */
--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 */
--radius: 0.75rem;
/*
IMPORTANTE: Altere esta variável para o domínio onde você vai hospedar as imagens.
Exemplo: --base-url: "https://seudominio.com";
Ou deixe vazio para usar caminhos relativos: --base-url: "";
*/
}
*, *::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;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
accent-color: auto;
}
button::-moz-focus-inner {
border: 0;
}
/* ========================================
Layout Utilities
======================================== */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) {
.container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
.container { padding: 0 2rem; }
}
.section-padding {
padding: 5rem 0;
}
@media (min-width: 768px) {
.section-padding { padding: 7rem 0; }
}
@media (min-width: 1024px) {
.section-padding { padding: 8rem 0; }
}
/* ========================================
Typography
======================================== */
.heading-xl {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
}
@media (min-width: 768px) {
.heading-xl { font-size: 3rem; }
}
@media (min-width: 1024px) {
.heading-xl { font-size: 3.75rem; }
}
.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;
}
@media (min-width: 768px) {
.body-lg { font-size: 1.25rem; }
}
/* ========================================
Buttons
======================================== */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
background-color: var(--primary);
color: var(--primary-foreground);
font-weight: 600;
font-size: 1rem;
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: hsl(233, 65%, 48%);
box-shadow: 0 10px 25px -5px rgba(66, 99, 235, 0.25);
transform: translateY(-2px);
}
.btn-primary svg {
width: 1.25rem;
height: 1.25rem;
transition: transform 0.3s ease;
}
.btn-primary:hover svg {
transform: translateX(4px);
}
/* ========================================
Hero Section
======================================== */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
padding-bottom: 2rem;
background: linear-gradient(135deg, white 0%, hsl(217, 91%, 97%) 50%, hsl(217, 91%, 95%) 100%);
}
@media (min-width: 768px) {
.hero { padding-bottom: 0; }
}
.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: -10rem;
right: -10rem;
width: 24rem;
height: 24rem;
background: rgba(66, 99, 235, 0.05);
}
.hero-decoration-2 {
top: 50%;
left: -10rem;
width: 24rem;
height: 24rem;
background: rgba(52, 211, 153, 0.05);
}
.hero-decoration-3 {
bottom: 5rem;
right: 25%;
width: 16rem;
height: 16rem;
background: rgba(251, 146, 60, 0.05);
}
.hero-header {
padding: 2rem 1rem;
position: relative;
z-index: 10;
}
@media (min-width: 640px) {
.hero-header { padding: 2rem 1.5rem; }
}
@media (min-width: 1024px) {
.hero-header { padding: 2rem; }
}
.hero-header img {
height: 2.5rem;
}
@media (min-width: 768px) {
.hero-header img { height: 3rem; }
}
.hero-content {
text-align: center;
max-width: 56rem;
margin: 0 auto;
padding: 3rem 1rem 0;
position: relative;
z-index: 10;
}
@media (min-width: 768px) {
.hero-content { padding-top: 4rem; }
}
@media (min-width: 1024px) {
.hero-content { padding-top: 5rem; }
}
.hero-badge {
display: inline-block;
padding: 0.375rem 1rem;
background: rgba(66, 99, 235, 0.1);
color: var(--primary);
font-weight: 600;
font-size: 0.875rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
}
.hero-title {
margin-bottom: 1.5rem;
}
.hero-title .highlight {
color: var(--primary);
}
.hero-description {
max-width: 42rem;
margin: 0 auto 2rem;
}
.hero-screenshots {
flex: 1;
position: relative;
margin-top: 2rem;
padding: 0 1rem;
}
@media (min-width: 768px) {
.hero-screenshots { margin-top: 4rem; }
}
@media (min-width: 1024px) {
.hero-screenshots { margin-top: 5rem; }
}
.screenshots-wrapper {
position: relative;
max-width: 72rem;
margin: 0 auto;
height: 280px;
}
@media (min-width: 768px) {
.screenshots-wrapper { height: 500px; }
}
@media (min-width: 1024px) {
.screenshots-wrapper { height: 550px; }
}
.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;
transition: transform 0.5s ease;
}
.screenshot-main {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
width: 85%;
z-index: 20;
}
@media (min-width: 768px) {
.screenshot-main { width: 70%; }
}
@media (min-width: 1024px) {
.screenshot-main { width: 65%; }
}
.screenshot-left {
position: absolute;
left: 0;
top: 15%;
width: 35%;
z-index: 10;
transform: rotate(-6deg);
}
.screenshot-left:hover {
transform: rotate(0deg) scale(1.05);
}
.screenshot-left .screenshot-container {
box-shadow: 0 25px 50px -12px rgba(52, 211, 153, 0.2);
}
@media (min-width: 768px) {
.screenshot-left {
left: 5%;
top: 10%;
width: 28%;
}
}
@media (min-width: 1024px) {
.screenshot-left {
left: 8%;
width: 24%;
}
}
.screenshot-right {
position: absolute;
right: 0;
top: 20%;
width: 35%;
z-index: 10;
transform: rotate(6deg);
}
.screenshot-right:hover {
transform: rotate(0deg) scale(1.05);
}
.screenshot-right .screenshot-container {
box-shadow: 0 25px 50px -12px rgba(251, 146, 60, 0.2);
}
@media (min-width: 768px) {
.screenshot-right {
right: 5%;
top: 15%;
width: 28%;
}
}
@media (min-width: 1024px) {
.screenshot-right {
right: 8%;
width: 24%;
}
}
.scroll-indicator {
display: none;
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 20;
animation: bounce 1s infinite;
}
@media (min-width: 768px) {
.scroll-indicator { display: block; }
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
/* ========================================
Solutions Section
======================================== */
.solutions {
background: white;
}
.solutions-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.solutions-header h2 {
margin-bottom: 1.5rem;
}
.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: 1.5rem;
overflow: hidden;
-webkit-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 ease;
cursor: pointer;
text-align: left;
width: 100%;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.solution-card:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(74, 94, 226, 0.3);
}
.solution-card:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(74, 94, 226, 0.3);
}
.solution-card:active {
outline: none;
}
.solution-card:hover {
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.solution-card-image {
padding: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
border-radius: 1.5rem 1.5rem 0 0;
}
.solution-card-image.phone { background: var(--phone-green); }
.solution-card-image.chat { background: var(--chat-orange); }
.solution-card-image.crm { background: var(--crm-yellow); }
.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 ease;
}
.solution-card:hover .solution-card-image img {
transform: scale(1.02);
}
.solution-card-content {
padding: 1.5rem;
padding-top: 1.25rem;
}
.solution-card-logo {
height: 1.75rem;
margin-bottom: 0.75rem;
}
.solution-card-description {
color: var(--muted-foreground);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.solution-card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
transition: gap 0.3s ease;
}
.solution-card-link.phone { color: var(--phone-green); }
.solution-card-link.chat { color: var(--chat-orange); }
.solution-card-link.crm { color: hsl(40, 80%, 40%); }
.solution-card:hover .solution-card-link {
gap: 0.75rem;
}
.solution-card-link svg {
width: 1rem;
height: 1rem;
}
/* ========================================
Connection Section
======================================== */
.connection {
background: linear-gradient(135deg, rgba(66, 99, 235, 0.05) 0%, white 50%, rgba(52, 211, 153, 0.05) 100%);
}
.connection-content {
max-width: 56rem;
margin: 0 auto;
text-align: center;
}
.connection blockquote {
color: var(--primary);
margin-bottom: 1.5rem;
}
.connection p {
max-width: 42rem;
margin: 0 auto 2.5rem;
}
/* ========================================
Footer
======================================== */
.footer {
background: var(--nextcomm-dark);
color: white;
}
.footer-content {
max-width: 56rem;
margin: 0 auto;
text-align: center;
}
.footer-label {
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.footer-logo {
height: 2.5rem;
margin: 0 auto 2rem;
}
@media (min-width: 768px) {
.footer-logo { height: 3rem; }
}
.footer-description {
color: rgba(255, 255, 255, 0.8);
font-size: 1.125rem;
max-width: 42rem;
margin: 0 auto;
line-height: 1.75;
}
/* ========================================
Modal
======================================== */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
align-items: center;
justify-content: center;
padding: 0;
}
@media (min-width: 768px) {
.modal-overlay {
padding: 2rem;
}
}
.modal-overlay.active {
display: flex;
}
.modal {
background: white;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
@media (min-width: 768px) {
.modal {
max-width: 72rem;
max-height: calc(100vh - 200px);
height: auto;
border-radius: 0.5rem;
flex-direction: row;
}
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: background 0.2s ease;
}
.modal-close:hover {
background: white;
}
.modal-close svg {
width: 1.25rem;
height: 1.25rem;
}
.modal-image {
background: var(--muted);
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
order: 1;
}
@media (min-width: 768px) {
.modal-image {
flex: 3;
order: 2;
padding: 2.5rem;
}
}
.modal-image img {
max-height: 30vh;
width: 100%;
object-fit: contain;
border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
.modal-image img {
max-height: 100%;
}
}
.modal-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
flex: 1;
order: 2;
}
@media (min-width: 768px) {
.modal-content {
flex: 2;
order: 1;
padding: 2.5rem;
}
}
.modal-content.phone { background: var(--phone-green); }
.modal-content.chat { background: var(--chat-orange); }
.modal-content.crm { background: var(--crm-yellow); }
.modal-logo {
display: inline-block;
background: white;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
.modal-logo { margin-bottom: 1rem; }
}
.modal-logo img {
height: 1.5rem;
}
@media (min-width: 768px) {
.modal-logo img { height: 2rem; }
}
.modal-subtitle {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.modal-subtitle {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
}
.modal-description {
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.modal-description { margin-bottom: 2rem; }
}
.modal-description p {
color: rgba(0, 0, 0, 0.8);
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
.modal-description p {
font-size: 1rem;
margin-bottom: 1rem;
}
}
.modal-benefits-title {
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 0.875rem;
}
@media (min-width: 768px) {
.modal-benefits-title {
font-size: 1rem;
margin-bottom: 1rem;
}
}
.modal-benefits {
list-style: none;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.modal-benefits { margin-bottom: 2rem; }
}
.modal-benefits li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.9);
}
@media (min-width: 768px) {
.modal-benefits li {
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 1rem;
}
}
.modal-benefits .icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.modal-benefits .icon {
width: 1.5rem;
height: 1.5rem;
}
}
.modal-benefits .icon.phone { background: var(--phone-green); color: white; }
.modal-benefits .icon.chat { background: var(--chat-orange); color: white; }
.modal-benefits .icon.crm { background: var(--crm-yellow); color: var(--foreground); }
.modal-benefits .icon svg {
width: 0.75rem;
height: 0.75rem;
}
@media (min-width: 768px) {
.modal-benefits .icon svg {
width: 1rem;
height: 1rem;
}
}
.modal-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.2s ease;
}
@media (min-width: 768px) {
.modal-cta {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
}
.modal-cta.phone { background: hsl(160, 50%, 35%); color: white; }
.modal-cta.phone:hover { background: hsl(160, 50%, 28%); }
.modal-cta.chat { background: hsl(20, 70%, 42%); color: white; }
.modal-cta.chat:hover { background: hsl(20, 70%, 35%); }
.modal-cta.crm { background: hsl(45, 90%, 42%); color: white; }
.modal-cta.crm:hover { background: hsl(45, 90%, 35%); }
/* ========================================
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;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.15s; }
.delay-3 { animation-delay: 0.2s; }
.delay-4 { animation-delay: 0.3s; }
.delay-5 { animation-delay: 0.4s; }
.delay-6 { animation-delay: 0.5s; }
</style>
</head>
<body>
<!--
=============================================
IMAGENS CONFIGURADAS PARA CARREGAR AUTOMATICAMENTE
=============================================
As imagens estão usando URLs absolutas do servidor Lovable.
Elas carregarão corretamente de qualquer lugar.
Se você quiser hospedar as imagens em seu próprio servidor,
substitua "https://partner-solution-showcase.lovable.app/assets/"
pela URL do seu servidor.
=============================================
-->
<!-- ========================================
Hero Section
======================================== -->
<section class="hero">
<div class="hero-decorations">
<div class="hero-decoration hero-decoration-1"></div>
<div class="hero-decoration hero-decoration-2"></div>
<div class="hero-decoration hero-decoration-3"></div>
</div>
<header class="hero-header container">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/nextcomm-logo-light.svg"
alt="Nextcomm"
class="fade-in-up delay-1"
>
</header>
<div class="hero-content container">
<span class="hero-badge fade-in-up delay-2">+500 empresas parceiras</span>
<h1 class="heading-xl hero-title fade-in-up delay-3">
Soluções de atendimento e vendas para crescer com mais <span class="highlight">controle</span>
</h1>
<p class="body-lg hero-description fade-in-up delay-4">
Tecnologia integrada para organizar processos, melhorar o atendimento ao cliente
e dar previsibilidade ao crescimento da sua empresa.
</p>
<a href="#solutions" class="btn-primary fade-in-up delay-5">
Conhecer as soluções
<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>
</a>
</div>
<div class="hero-screenshots">
<div class="screenshots-wrapper fade-in-up delay-6">
<!-- Main CRM Screenshot -->
<div class="screenshot-main">
<div class="screenshot-container">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-crm-screenshot.png"
alt="Next_crm - Gestão de relacionamento com cliente"
>
</div>
</div>
<!-- Left Phone Screenshot -->
<div class="screenshot-left">
<div class="screenshot-container">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-phone-screenshot.png"
alt="Next_phone - Telefonia em nuvem"
>
</div>
</div>
<!-- Right Chat Screenshot -->
<div class="screenshot-right">
<div class="screenshot-container">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-chat-screenshot.png"
alt="Next_chat - Atendimento multicanal"
>
</div>
</div>
</div>
</div>
<div class="scroll-indicator">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--muted-foreground)">
<path d="m6 9 6 6 6-6"/>
</svg>
</div>
</section>
<!-- ========================================
Solutions Section
======================================== -->
<section id="solutions" class="solutions section-padding">
<div class="container" style="max-width: 72rem;">
<div class="solutions-header">
<h2 class="heading-lg">Tecnologia que simplifica a operação e melhora resultados</h2>
<p class="body-lg">
As soluções abaixo ajudam empresas a estruturar comunicação, atendimento e vendas
de forma integrada, evitando retrabalho, perda de informações e falta de controle.
</p>
</div>
<div class="solutions-grid">
<!-- Phone Card -->
<button class="solution-card" onclick="openModal('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/phone.svg"
alt="Next_phone"
class="solution-card-logo"
>
<p class="solution-card-description">Central telefônica moderna, flexível e 100% em nuvem</p>
<span class="solution-card-link phone">
Conhecer produto
<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 Card -->
<button class="solution-card" onclick="openModal('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/chat.svg"
alt="Next_chat"
class="solution-card-logo"
>
<p class="solution-card-description">Organize todos os atendimentos em um único lugar</p>
<span class="solution-card-link chat">
Conhecer produto
<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>
<!-- CRM Card -->
<button class="solution-card" onclick="openModal('crm')">
<div class="solution-card-image crm">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-crm-screenshot.png"
alt="Next_crm"
>
</div>
<div class="solution-card-content">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/crm.svg"
alt="Next_crm"
class="solution-card-logo"
>
<p class="solution-card-description">Organize o processo de vendas e tenha previsibilidade</p>
<span class="solution-card-link crm">
Conhecer produto
<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>
<!-- ========================================
Connection Section
======================================== -->
<section class="connection section-padding">
<div class="container connection-content">
<blockquote class="heading-lg">
"Tecnologia integrada, processos inteligentes e resultados consistentes."
</blockquote>
<p class="body-lg">
Soluções em comunicação, atendimento e vendas existem para isso:
simplificar a operação, melhorar a experiência do cliente e impulsionar
o crescimento com mais controle.
</p>
<a href="https://nextcomm.com.br/parceiro/" target="_blank" rel="noopener noreferrer" class="btn-primary">
Seja um parceiro Nextcomm
<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>
</a>
</div>
</section>
<!-- ========================================
Footer
======================================== -->
<footer class="footer section-padding">
<div class="container 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"
>
<p class="footer-description">
A Nextcomm desenvolve soluções de comunicação, atendimento e vendas
pensadas para empresas que desejam crescer com estrutura, eficiência e previsibilidade.
</p>
</div>
</footer>
<!-- ========================================
Product Modals
======================================== -->
<!-- Phone Modal -->
<div id="modal-phone" class="modal-overlay" onclick="closeModalOnOverlay(event)">
<div class="modal">
<button class="modal-close" onclick="closeModal('phone')">
<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="M18 6 6 18M6 6l12 12"/>
</svg>
</button>
<div class="modal-image">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-phone-screenshot.png"
alt="Interface do Next_phone mostrando chamada em andamento"
>
</div>
<div class="modal-content phone">
<div class="modal-logo">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/phone.svg" alt="Next_phone">
</div>
<h2 class="modal-subtitle">Central telefônica moderna, flexível e 100% em nuvem</h2>
<div class="modal-description">
<p>A telefonia em nuvem permite que sua empresa faça e receba chamadas de qualquer lugar, sem depender de uma central física ou de estar no escritório.</p>
<p>Tudo funciona pela internet, com controle total da operação e redução significativa de custos.</p>
<p>Além disso, cada ligação gera dados que ajudam a acompanhar o desempenho da equipe e melhorar a qualidade do atendimento.</p>
</div>
<p class="modal-benefits-title">Indicada para empresas que:</p>
<ul class="modal-benefits">
<li>
<span class="icon phone">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Atender clientes de qualquer lugar, sem perder chamadas
</li>
<li>
<span class="icon phone">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Reduzir custos com centrais físicas e manutenção
</li>
<li>
<span class="icon phone">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Ter controle sobre horários, gravações e desempenho da equipe
</li>
<li>
<span class="icon phone">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Integrar a telefonia ao CRM e ao atendimento
</li>
</ul>
<a href="https://nextcomm.com.br/_phone" target="_blank" rel="noopener noreferrer" class="modal-cta phone">Quero saber mais sobre a telefonia em nuvem</a>
</div>
</div>
</div>
<!-- Chat Modal -->
<div id="modal-chat" class="modal-overlay" onclick="closeModalOnOverlay(event)">
<div class="modal">
<button class="modal-close" onclick="closeModal('chat')">
<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="M18 6 6 18M6 6l12 12"/>
</svg>
</button>
<div class="modal-image">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-chat-screenshot.png"
alt="Interface do Next_chat mostrando conversas de diferentes canais"
>
</div>
<div class="modal-content chat">
<div class="modal-logo">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/chat.svg" alt="Next_chat">
</div>
<h2 class="modal-subtitle">Organize todos os atendimentos em um único lugar</h2>
<div class="modal-description">
<p>Atender clientes por WhatsApp, Instagram, e-mail e outros canais de forma separada gera confusão, atrasos e perda de oportunidades.</p>
<p>A plataforma omnichannel centraliza todos os canais em uma única tela, trazendo mais organização e agilidade para a equipe.</p>
<p>O histórico das conversas fica salvo, o atendimento continua mesmo com troca de atendentes e o cliente não precisa repetir informações.</p>
</div>
<p class="modal-benefits-title">Indicada para empresas que:</p>
<ul class="modal-benefits">
<li>
<span class="icon chat">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Centralizar todos os canais de atendimento
</li>
<li>
<span class="icon chat">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Responder clientes com mais rapidez e organização
</li>
<li>
<span class="icon chat">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Manter histórico completo de conversas
</li>
<li>
<span class="icon chat">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Evitar retrabalho e perda de oportunidades
</li>
</ul>
<a href="https://nextcomm.com.br/_chat" target="_blank" rel="noopener noreferrer" class="modal-cta chat">Quero saber mais sobre a plataforma de atendimento</a>
</div>
</div>
</div>
<!-- CRM Modal -->
<div id="modal-crm" class="modal-overlay" onclick="closeModalOnOverlay(event)">
<div class="modal">
<button class="modal-close" onclick="closeModal('crm')">
<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="M18 6 6 18M6 6l12 12"/>
</svg>
</button>
<div class="modal-image">
<img decoding="async"
src="https://partner-solution-showcase.lovable.app/assets/next-crm-screenshot.png"
alt="Interface do Next_crm mostrando funil de vendas"
>
</div>
<div class="modal-content crm">
<div class="modal-logo">
<img decoding="async" src="https://partner-solution-showcase.lovable.app/assets/crm.svg" alt="Next_crm">
</div>
<h2 class="modal-subtitle">Organize o processo de vendas e tenha previsibilidade</h2>
<div class="modal-description">
<p>O CRM organiza todo o processo comercial, do primeiro contato até o fechamento da venda.</p>
<p>Em vez de planilhas soltas e informações perdidas, a equipe trabalha com um funil claro, tarefas definidas e dados em tempo real.</p>
<p>Isso facilita o acompanhamento das oportunidades, identifica gargalos e permite decisões mais estratégicas.</p>
</div>
<p class="modal-benefits-title">Indicada para empresas que:</p>
<ul class="modal-benefits">
<li>
<span class="icon crm">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Ter controle total sobre leads e negociações
</li>
<li>
<span class="icon crm">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Visualizar o funil de vendas de forma simples
</li>
<li>
<span class="icon crm">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Acompanhar o desempenho do time comercial
</li>
<li>
<span class="icon crm">
<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">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
Tomar decisões mais previsíveis e estratégicas
</li>
</ul>
<a href="https://nextcomm.com.br/_crm" target="_blank" rel="noopener noreferrer" class="modal-cta crm">Quero saber mais sobre a solução de CRM</a>
</div>
</div>
</div>
<!-- ========================================
JavaScript
======================================== -->
<script>
// Open modal
function openModal(product) {
const modal = document.getElementById('modal-' + product);
if (modal) {
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
}
// Close modal
function closeModal(product) {
const modal = document.getElementById('modal-' + product);
if (modal) {
modal.classList.remove('active');
document.body.style.overflow = '';
}
}
// Close modal when clicking overlay
function closeModalOnOverlay(event) {
if (event.target.classList.contains('modal-overlay')) {
event.target.classList.remove('active');
document.body.style.overflow = '';
}
}
// Close modal with ESC key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const activeModals = document.querySelectorAll('.modal-overlay.active');
activeModals.forEach(function(modal) {
modal.classList.remove('active');
});
document.body.style.overflow = '';
}
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.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