<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!-- Google tag (gtag.js) -->
<script async src=src="https://www.googletagmanager.com/gtag/js?id=G-WKLVRV5HY8"></script>
<script nonce="gd2025">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WKLVRV5HY8');
</script>
<link rel="icon" type="image/png" href="assets/favicon.png">
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preload" as="image" href="assets/capa-gdonline.webp" fetchpriority="high">
<title>GD.Online | Mais que marketing. Um mergulho na alma da sua marca.</title>
<meta name="description" content="A GD.Online é uma agência digital criativa que entrega branding, marketing e soluções sob medida para empresas com alma.">
<meta name="keywords" content="marketing digital, branding, criação de sites, identidade visual, GD.Online, agência criativa, soluções personalizadas, SEO, design estratégico, midias sociais, trafego pago">
<meta name="author" content="GD.Online">
<!-- Favicon -->
<link rel="icon" type="image/png" href="assets/favicon.png" />
<!-- Canonical -->
<link rel="canonical" href="https://www.gdonline.com.br/" />
<!-- Open Graph (Facebook, WhatsApp, LinkedIn) -->
<meta property="og:title" content="GD.Online | Marketing com Alma">
<meta property="og:description" content="Mais que marketing. Um mergulho na alma da sua marca.">
<meta property="og:image" content="https://www.gdonline.com.br/assets/og-gdonline.jpg">
<meta property="og:url" content="https://www.gdonline.com.br">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="GD.Online | Marketing com Alma">
<meta name="twitter:description" content="Mais que marketing. Um mergulho na alma da sua marca.">
<meta name="twitter:image" content="https://www.gdonline.com.br/assets/og-gdonline.jpg">
<meta http-equiv="Cache-control" content="public">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "GD.Online",
"url": "https://www.gdonline.com.br",
"logo": "https://www.gdonline.com.br/assets/logo-gd-trasparente.webp",
"sameAs": [
"https://www.instagram.com/gd.online",
"https://www.linkedin.com/company/gdonline"
],
"areaServed": ["BR-SP", "Santo André", "Região do ABC Paulista"],
"serviceType": [
"Marketing digital", "Branding", "Criação de sites", "Marketing imobiliário"
]
}
</script>
</head>
<body id="topo">
<header class="navbar">
<div class="container navbar-container">
<a href="#topo" class="logo-navbar">GD.Online</a>
<button class="hamburger" onclick="toggleMenu()">☰</button>
<nav class="menu" id="navMenu">
<a href="#sobre" onclick="toggleMenu()">Sobre</a>
<a href="#servicos" onclick="toggleMenu()">Serviços</a>
<a href="#portfolio" onclick="toggleMenu()">Portfólio</a>
<a href="#contato" onclick="toggleMenu()">Contato</a>
</nav>
</div>
</header>
<section id="hero" style="min-height:100vh;">
<div class="hero-overlay">
<img src="assets/logo-gd-trasparente.webp" alt="Logo GD.Online" width="120" height="120" decoding="async" fetchpriority="high" class="logo" />
<h1>Mais que marketing.</h1>
<p class="slogan">Um mergulho na alma da sua marca.</p>
<a href="#sobre" class="botao">Conheça a GD.Online</a>
</div>
</section>
<section id="sobre" class="sobre">
<div class="container">
<h2>Sobre a GD.Online</h2>
<p>
A GD.Online nasceu com um propósito claro: ir além do marketing. Somos movidos pelo invisível — pelas ideias, intenções e emoções que constroem marcas com verdade. Acreditamos que cada projeto tem uma alma, e nosso trabalho é mergulhar nela e traduzir em presença, estratégia e identidade.
</p>
<p>
Aqui, o digital é ferramenta. Mas o que nos guia é o humano. Criamos com empatia, posicionamos com inteligência e desenvolvemos com significado. Do branding ao design, da campanha ao sistema, não entregamos apenas entregáveis — entregamos propósito em pixels.
</p>
<p>
Mais que likes ou leads, buscamos gerar impacto. Conexões reais. Marcas que se posicionam com coragem e são lembradas com respeito.
</p>
<p>
GD.Online. Mais que marketing. Um mergulho na alma da sua marca.
</p>
</div>
</section>
<section id="servicos" class="servicos">
<div class="container">
<h2>Transformamos ideias em resultados reais</h2>
<div class="cards-servicos">
<div class="card-servico">
<div class="icone-svg">💡</div>
<h3>Branding com Propósito</h3>
<p>Criamos marcas que comunicam valor real.</p>
<button class="botao-modal" data-modal="branding">+ Detalhes</button>
</div>
<div class="card-servico">
<div class="icone-svg">📢</div>
<h3>Marketing Estratégico</h3>
<p>Impacto com conteúdo, campanhas e performance.</p>
<button class="botao-modal" data-modal="marketing">+ Detalhes</button>
</div>
<div class="card-servico">
<div class="icone-svg">🛠️</div>
<h3>Soluções Digitais</h3>
<p>Sistemas sob medida como o Dinâmica ONE.</p>
<button class="botao-modal" data-modal="solucoes">+ Detalhes</button>
</div>
<div class="card-servico">
<div class="icone-svg">🖥️</div>
<h3>Web Design</h3>
<p>Sites, landing pages e portais sob demanda.</p>
<button class="botao-modal" data-modal="web">+ Detalhes</button>
</div>
<div class="card-servico">
<div class="icone-svg">✍️</div>
<h3>Conteúdo Criativo</h3>
<p>Textos, vídeos, posts e ideias que conectam.</p>
<button class="botao-modal" data-modal="conteudo">+ Detalhes</button>
</div>
<div class="card-servico">
<div class="icone-svg">🖨️</div>
<h3>Design Gráfico & Impressos</h3>
<p>Criação de panfletos, folders, apresentações e materiais físicos com alto padrão estético e alinhamento à sua marca.</p>
<button class="botao-modal" data-modal="design">+ Detalhes</button>
</div>
</div>
</div>
</section>
<section id="portfolio" class="portfolio">
<div class="container">
<h2>Portfólio</h2>
<p class="portfolio-sub">Alguns projetos que mostram nosso mergulho na alma de cada marca.</p>
<div class="portfolio-grid">
<div class="portfolio-item" role="button" tabindex="0" aria-label="Rei Davi Residencial" data-case="reidavi">
<img src="assets/portfolio/Rei Davi Site.webp" alt="Rei Davi Residencial" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>Rei Davi Residencial</h3>
<p>Campanha imobiliária com branding e site de alta conversão.</p>
</div>
</div>
<!-- Dinâmica ONE -->
<div class="portfolio-item" role="button" tabindex="0" aria-label="CRM Dinâmica ONE" data-case="dinamicaone" >
<img src="assets/portfolio/dinamicaone.webp" alt="CRM Dinâmica ONE" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>CRM Dinâmica ONE</h3>
<p>Gestão de leads, propostas e operações de venda.</p>
</div>
</div>
<!-- Sgarbi -->
<div class="portfolio-item" role="button" tabindex="0" aria-label="Sgarbi Negócios" data-case="sgarbi" >
<img src="assets/portfolio/Sgarbi empreendimentos.webp" alt="Sgarbi Negócios" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>Sgarbi Negócios</h3>
<p>Site institucional com foco em credibilidade.</p>
</div>
</div>
<!-- Hotsite MCMV -->
<div class="portfolio-item" role="button" tabindex="0" aria-label="Hotsite de Lançamento" data-case="mcmv" >
<img src="assets/portfolio/MCMV Site.webp" alt="Hotsite Lançamento de Empreendimento" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>Hotsite Lançamento de Empreendimento</h3>
<p>Layout, copywriting, SEO e integração com Firebase.</p>
</div>
</div>
<!-- Impressos -->
<div class="portfolio-item" role="button" tabindex="0" aria-label="Materiais Impressos" data-case="impressos" >
<img src="assets/portfolio/panfleto 2.webp" alt="Materiais impressos" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>Materiais impressos</h3>
<p>Folders, cartazes e panfletos com identidade visual.</p>
</div>
</div>
<!-- Logos -->
<div class="portfolio-item" role="button" tabindex="0" aria-label="Criação de Logos" data-case="logos" >
<img src="assets/portfolio/bem aventurados.webp" alt="Criação de logo" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>Criação de Logos</h3>
<p>Do briefing ao branding: essência e diferenciação.</p>
</div>
</div>
<!-- NOVO: Personalize Essencial (Plataforma) -->
<div class="portfolio-item" role="button" tabindex="0" aria-label="Personalize Essencial — Plataforma de Personalização" data-case="personalize" >
<img src="assets/portfolio/personalize.webp" alt="Personalize Essencial — Plataforma" width="400" height="225" loading="lazy">
<div class="overlay">
<h3>Personalize Essencial (Plataforma)</h3>
<p>Escolhas do cliente → relatório do arquiteto com preços.</p>
</div>
</div>
</div>
</div>
</section>
<section id="clientes" class="clientes">
<div class="container">
<h2>Marcas que confiam na GD.Online</h2>
<p class="texto-clientes">Clientes e parceiros que já mergulharam com a gente.</p>
<!-- Swiper -->
<div class="clientes-wrapper">
<div class="swiper clientes-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/clientes/dinamica.webp" class="logo logo-dinamica" alt="Dinâmica ABC"></div>
<div class="swiper-slide"><img src="assets/clientes/grotta.webp" class="logo logo-grotta" alt="Grotta Engenharia"></div>
<div class="swiper-slide"><img src="assets/clientes/sgarbi.webp" class="logo logo-sgarbi" alt="Sgarbi Negócios"></div>
<div class="swiper-slide"><img src="assets/clientes/tamara.webp" class="logo logo-tamara" alt="Tamara Geriatra"></div>
<div class="swiper-slide"><img src="assets/clientes/mika.webp" class="logo logo-mika" alt="Dr. Mikael Esteban"></div>
</div>
</div>
</div>
</section>
<div id="modal-branding" class="modal">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal('branding')">×</span>
<h3>Branding com Propósito</h3>
<p>Na GD.Online, branding é mais que identidade visual — é estratégia, essência, e conexão. Criamos nomes, posicionamentos, tom de voz e tudo o que transforma uma marca em uma presença memorável.</p>
</div>
</div>
<div id="modal-marketing" class="modal">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal('marketing')">×</span>
<h3>Marketing Estratégico</h3>
<p>Da criação de conteúdo à performance em mídia paga, oferecemos campanhas que geram resultado, fortalecem reputação e constroem autoridade. Planejamento + execução com propósito.</p>
</div>
</div>
<div id="modal-solucoes" class="modal">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal('solucoes')">×</span>
<h3>Soluções Digitais</h3>
<p>Criamos plataformas e sistemas que resolvem problemas reais. Como o CRM Dinâmica ONE, desenvolvemos produtos digitais inteligentes, intuitivos e eficazes — feitos sob medida para o seu negócio.</p>
</div>
</div>
<div id="modal-web" class="modal">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal('web')">×</span>
<h3>Web Design</h3>
<p>Desenvolvemos sites institucionais, landing pages e portais com foco em experiência do usuário, velocidade, design impactante e conversão. Tudo com SEO e performance na veia.</p>
</div>
</div>
<div id="modal-conteudo" class="modal">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal('conteudo')">×</span>
<h3>Conteúdo Criativo</h3>
<p>Conteúdo estratégico e autêntico: posts, roteiros, carrosséis, textos, vídeos e campanhas que conectam com pessoas e são bem entregues pelos algoritmos. Criatividade com direção.</p>
</div>
</div>
<div id="modal-design" class="modal">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal('design')">×</span>
<h3>Design Gráfico & Impressos</h3>
<p>Desenvolvemos materiais impressos que complementam sua presença digital com elegância e impacto. Panfletos, folders, cartazes, apresentações e artes promocionais com identidade visual forte, pronta para imprimir ou divulgar.</p>
</div>
</div>
<!-- Modal genérico de Portfólio -->
<div id="modal-portfolio" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-portfolio-titulo">
<div class="modal-conteudo modal-case">
<span class="fechar" onclick="fecharCase()" aria-label="Fechar modal">×</span>
<h3 id="modal-portfolio-titulo"></h3>
<p id="modal-portfolio-sub" class="case-sub"></p>
<div id="modal-portfolio-tags" class="tags"></div>
<div class="case-cols">
<div>
<h4>O que criamos</h4>
<ul id="modal-portfolio-bullets" class="bullets"></ul>
</div>
<div>
<h4>Stack & Integrações</h4>
<ul id="modal-portfolio-tech" class="tech"></ul>
</div>
</div>
<div id="modal-portfolio-ctas" class="ctas"></div>
</div>
</div>
<section id="contato" class="contato">
<div class="container">
<h2>Vamos conversar?</h2>
<p>Preencha o formulário abaixo e em breve responderemos.</p>
<form id="form-contato">
<input type="text" id="nome" name="nome" placeholder="Seu nome" required>
<input type="email" id="email" name="email" placeholder="Seu e-mail" required>
<input type="tel" id="telefone" name="telefone" placeholder="WhatsApp ou telefone" required>
<textarea id="mensagem" name="mensagem" rows="5" placeholder="Sua mensagem" required></textarea>
<label style="display: block; margin-top: 1rem;">
<input type="checkbox" required>
Li e concordo com a <a href="politica-privacidade.html" target="_blank">Política de Privacidade</a> e os <a href="termos-de-uso.html" target="_blank">Termos de Uso</a>.
</label>
<button type="submit">Enviar</button>
<p id="feedback" class="feedback"></p>
</form>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 GD.Online - Todos os direitos reservados</p>
<p><a href="/politica-privacidade.html">Política de Privacidade</a> | <a href="termos-de-uso.html">Termos de Uso</a></p>
<p>
<a href="https://www.instagram.com/gd._online/" target="_blank" style="color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 24 24">
<path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 2 .2 2.5.4.6.2 1 .4 1.4.8.4.4.6.8.8 1.4.2.5.3 1.3.4 2.5.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 2-.4 2.5-.2.6-.4 1-.8 1.4-.4.4-.8.6-1.4.8-.5.2-1.3.3-2.5.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-2-.2-2.5-.4-.6-.2-1-.4-1.4-.8-.4-.4-.6-.8-.8-1.4-.2-.5-.3-1.3-.4-2.5C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-2 .4-2.5.2-.6.4-1 .8-1.4.4-.4.8-.6 1.4-.8.5-.2 1.3-.3 2.5-.4C8.4 2.2 8.8 2.2 12 2.2m0-2.2C8.7 0 8.2 0 6.8.1 5.4.2 4.3.5 3.5.9 2.7 1.3 2 2 1.4 2.9c-.4.8-.7 1.9-.8 3.3C.5 8.2.5 8.7.5 12s0 3.8.1 5.2c.1 1.4.4 2.5.8 3.3.4.9 1.1 1.6 2 2.2.8.4 1.9.7 3.3.8 1.4.1 1.9.1 5.2.1s3.8 0 5.2-.1c1.4-.1 2.5-.4 3.3-.8.9-.4 1.6-1.1 2.2-2 .4-.8.7-1.9.8-3.3.1-1.4.1-1.9.1-5.2s0-3.8-.1-5.2c-.1-1.4-.4-2.5-.8-3.3-.4-.9-1.1-1.6-2-2.2-.8-.4-1.9-.7-3.3-.8C15.8.5 15.3.5 12 .5zm0 5.8a5.7 5.7 0 1 0 0 11.4 5.7 5.7 0 0 0 0-11.4zm0 9.3a3.6 3.6 0 1 1 0-7.1 3.6 3.6 0 0 1 0 7.1zm5.7-10.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6z"/>
</svg>
<span>@gd._online</span>
</a>
</p>
</div>
</footer>
<script nonce="gd2025">
function toggleMenu() {
const navMenu = document.getElementById("navMenu");
navMenu.classList.toggle("show");
}
document.querySelectorAll('#navMenu a')
.forEach(a=>a.addEventListener('click',()=>
document.getElementById('navMenu').classList.remove('show')));
</script>
<a href="https://wa.me/5511996386767?text=Olá!%20Gostaria%20de%20falar%20com%20a%20GD.Online%20sobre%20meu%20projeto."
class="whatsapp-fixo" target="_blank" title="Fale com a GD.Online no WhatsApp">
<svg width="28" height="28" viewBox="0 0 32 32" fill="white" xmlns="http://www.w3.org/2000/svg">
<path d="M16.003 3C9.373 3 3.99 8.382 3.99 15.008a12.11 12.11 0 0 0 1.713 6.199l-1.82 6.622 6.798-1.784A12.007 12.007 0 0 0 16 27.012c6.63 0 12.012-5.384 12.012-12.004C28.012 8.382 22.63 3 16.003 3zm0 21.804a9.791 9.791 0 0 1-5.003-1.38l-.359-.21-4.038 1.06 1.078-3.947-.234-.406a9.785 9.785 0 0 1-1.5-5.19c0-5.398 4.392-9.793 9.794-9.793 5.406 0 9.8 4.395 9.8 9.793s-4.394 9.793-9.8 9.793zm5.393-7.372c-.295-.148-1.747-.859-2.02-.957-.27-.098-.466-.148-.662.149-.197.295-.758.957-.93 1.153-.172.197-.343.222-.637.074-.295-.149-1.248-.46-2.376-1.468-.88-.782-1.474-1.745-1.647-2.04-.172-.296-.019-.456.13-.604.134-.133.296-.343.445-.515.148-.173.197-.296.296-.49.098-.197.05-.37-.025-.515-.075-.148-.662-1.598-.91-2.19-.238-.574-.481-.497-.662-.506l-.564-.01c-.196 0-.515.074-.784.37-.27.296-1.03 1.005-1.03 2.452s1.053 2.843 1.199 3.04c.148.197 2.07 3.16 5.023 4.43.703.303 1.25.483 1.678.617.705.225 1.345.193 1.85.117.564-.084 1.747-.715 1.996-1.406.246-.69.246-1.281.172-1.406-.074-.123-.27-.198-.565-.346z"/>
</svg>
</a>
<script type="module" nonce="gd2025">
// carrega Firebase sob demanda
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
import { getFirestore, collection, addDoc } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-lite.js';
const app = initializeApp({
apiKey: 'AIzaSyDB3crB2AaGNyFnuAMVqWrl_XNvgKq-tiY',
authDomain: 'gd-online-87610.firebaseapp.com',
projectId: 'gd-online-87610'
});
const db = getFirestore(app);
async function enviarContato(e){
e.preventDefault();
const form = e.target;
const datos = Object.fromEntries(new FormData(form));
const fbText = document.getElementById('feedback');
if(Object.values(datos).some(v=>!v.trim())){
fbText.textContent = 'Por favor, preencha todos os campos.'; return;
}
try{
await addDoc(collection(db,'mensagensContato'), {...datos, data: new Date()});
fbText.textContent = 'Mensagem enviada com sucesso! Obrigado :)';
form.reset();
}catch(err){
console.error(err);
fbText.textContent = 'Erro ao enviar. Tente novamente.';
}
}
document.getElementById('form-contato').addEventListener('submit', enviarContato);
</script>
<script nonce="gd2025">
function fecharModal(id){
const m = document.getElementById('modal-'+id);
if(m) m.style.display='none';
document.documentElement.style.overflow='';
document.body.style.overflow='';
}
// Abrir modais de Serviços via data-attributes (sem onclick inline)
document.querySelectorAll('.botao-modal[data-modal]').forEach(btn=>{
btn.addEventListener('click', ()=>{
const id = btn.getAttribute('data-modal');
const modal = document.getElementById('modal-'+id);
if(!modal) return;
modal.style.display = 'flex';
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
});
});
// Fechar modais (X, clique fora e ESC)
document.querySelectorAll('.modal .fechar').forEach(x=>{
x.addEventListener('click', ()=>{
const m = x.closest('.modal');
if(m) m.style.display = 'none';
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
});
});
document.querySelectorAll('.modal').forEach(m=>{
m.addEventListener('click', e=>{
if(e.target === m){
m.style.display = 'none';
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
}
});
});
window.addEventListener('keyup', e=>{
if(e.key === 'Escape'){
document.querySelectorAll('.modal').forEach(m=> m.style.display='none');
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
}
});
// Portfólio: abrir modal genérico sem onclick inline
document.querySelectorAll('.portfolio-item[data-case]').forEach(card=>{
card.addEventListener('click', ()=>{
const key = card.getAttribute('data-case');
if(typeof abrirCase === 'function') abrirCase(key);
});
});
</script>
<!-- SwiperJS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script nonce="gd2025">
const swiperClientes = new Swiper(".clientes-swiper", {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
slidesPerView: 2,
spaceBetween: 30,
speed: 700,
grabCursor: true,
breakpoints: {
640: { slidesPerView: 2 },
768: { slidesPerView: 3 },
1024: { slidesPerView: 4 }
}
});
</script>
<script nonce="gd2025">
// Dicionário com o conteúdo dos cases
const CASES = {
personalize: {
titulo: "Personalize Essencial — Plataforma de Personalização",
sub: "Do clique do cliente ao relatório do arquiteto com preços e contrato anexável.",
tags: ["Produto digital", "MVP em produção", "Imobiliário"],
bullets: [
"Interface cliente para escolher ambientes/opções.",
"Geração automática de relatório para o arquiteto com valores.",
"Exportação de PDF (contrato/anexo) e numeração de páginas.",
"Opção de tour 360° (Theasys) e integrações futuras."
],
tech: ["HTML/CSS/JS", "Firebase Auth", "Firestore", "Storage", "Cloud Functions", "html2pdf", "Theasys (opcional)"],
ctas: [
// { label: "Ver demo", href: "https://essencialpersonalize.web.app", target: "_blank" },
// { label: "Solicitar apresentação", href: "#contato" }
]
},
dinamicaone: {
titulo: "CRM Dinâmica ONE",
sub: "Gestão completa de leads, propostas, notificações e relatórios.",
tags: ["Sistema", "Operação de Vendas", "Imobiliário"],
bullets: [
"Cadastro de leads, checagem de duplicidade e distribuição por roleta para o uso em stands de venda.",
"Propostas com fluxo de pagamento e upload de documentos.",
"Exportações, dashboards e permissões por perfil.",
],
tech: ["HTML/CSS/JS", "Firebase Auth", "Firestore", "Storage", "Functions"],
ctas: [{ label: "Falar com a GD.Online", href: "#contato" }]
},
reidavi: {
titulo: "Rei Davi Residencial",
sub: "Campanha imobiliária com site de alta conversão.",
tags: ["Site", "Campanha", "SEO"],
bullets: [
"Estratégia de branding e copy orientada a conversão.",
"Landing otimizada (velocidade/SEO) com captação de leads.",
"Integração com CRM para fluxo comercial."
],
tech: ["HTML/CSS", "SEO Técnico", "Firebase Hosting"],
ctas: [{ label: "Ver mais projetos", href: "#portfolio" }]
},
sgarbi: {
titulo: "Sgarbi Negócios",
sub: "Site institucional com foco em credibilidade e experiência.",
tags: ["Site", "Institucional"],
bullets: [
"Arquitetura da informação clara e responsiva.",
"Páginas leves, com boa legibilidade e escaneabilidade.",
"Base SEO e configurações de compartilhamento (OG/Twitter)."
],
tech: ["HTML/CSS", "SEO On-page", "Boas práticas de performance"],
ctas: [{ label: "Fale com a GD.Online", href: "#contato" }]
},
mcmv: {
titulo: "Hotsite de Lançamento (MCMV)",
sub: "Landing enxuta, rápida e focada em conversão",
tags: ["Hotsite", "SEO", "Leads"],
bullets: [
"Hero com proposta de valor clara",
"Formulário integrado para time comercial.",
"Estratégia de conteúdo e metatags para SERP/WhatsApp."
],
tech: ["HTML/CSS/JS", "Firebase Firestore", "Hosting"],
ctas: [{ label: "Ver mais projetos", href: "#portfolio" }]
},
impressos: {
titulo: "Materiais Impressos",
sub: "Folders, cartazes e panfletos alinhados ao branding.",
tags: ["Design Gráfico", "Impressos"],
bullets: [
"Sistemas visuais que conversam com a presença digital.",
"Arquivos prontos para gráfica com padronização de cores.",
"Versões otimizadas para social e mídia paga."
],
tech: ["Suite Adobe", "Pré-impressão", "Padronização CMYK/RGB"],
ctas: [{ label: "Solicitar orçamento", href: "#contato" }]
},
logos: {
titulo: "Criação de Logos",
sub: "Do diagnóstico à marca que carrega propósito e diferenciação.",
tags: ["Branding", "Identidade"],
bullets: [
"Naming, posicionamento e construção de território visual.",
"Guia de uso com aplicações e boas práticas.",
"Entrega de pacotes otimizados (SVG/PNG/PDF)."
],
tech: ["Brand Sprint", "Grid tipográfico", "Adobe Illustrator"],
ctas: [{ label: "Ver identidade visual", href: "#contato" }]
}
};
// Abre o modal e injeta o conteúdo do case
function abrirCase(key){
const d = CASES[key];
if(!d) return;
// Título e subtítulo
document.getElementById('modal-portfolio-titulo').textContent = d.titulo || '';
document.getElementById('modal-portfolio-sub').textContent = d.sub || '';
// Tags
const tagsEl = document.getElementById('modal-portfolio-tags');
tagsEl.innerHTML = '';
(d.tags||[]).forEach(t=>{
const span=document.createElement('span');
span.className='tag';
span.textContent=t;
tagsEl.appendChild(span);
});
// Bullets (o que criamos)
const bulletsEl = document.getElementById('modal-portfolio-bullets');
bulletsEl.innerHTML='';
(d.bullets||[]).forEach(txt=>{
const li=document.createElement('li'); li.textContent=txt; bulletsEl.appendChild(li);
});
// Tech (stack)
const techEl = document.getElementById('modal-portfolio-tech');
techEl.innerHTML='';
(d.tech||[]).forEach(txt=>{
const li=document.createElement('li'); li.textContent=txt; techEl.appendChild(li);
});
// CTAs
const ctasEl = document.getElementById('modal-portfolio-ctas');
ctasEl.innerHTML='';
(d.ctas||[]).forEach(c=>{
const a=document.createElement('a');
a.textContent=c.label||'Saiba mais';
a.href=c.href||'#contato';
if(c.target) a.target=c.target;
ctasEl.appendChild(a);
});
// Exibe
const modal = document.getElementById('modal-portfolio');
modal.style.display='flex';
// BLOQUEIA SCROLL DO FUNDO
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
// Acessibilidade: fechar com ESC e clique fora
const onKey = (e)=>{ if(e.key==='Escape') fecharCase(); };
modal.addEventListener('click', (e)=>{ if(e.target===modal) fecharCase(); }, { once:true });
window.addEventListener('keyup', onKey, { once:true });
}
function fecharCase(){
const modal = document.getElementById('modal-portfolio');
if(modal) modal.style.display='none';
// LIBERA SCROLL DO FUNDO
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
}
// Abertura por teclado nos cards
document.querySelectorAll('.portfolio-item[tabindex]')
.forEach(card=>{
card.addEventListener('keydown', (e)=>{
if(e.key==='Enter' || e.key===' '){
e.preventDefault();
const key = card.getAttribute('data-case');
if(key) abrirCase(key);
}
});
});
</script>
</body>
</html>