CM Imóveis – Plataforma Imobiliária Full-Stack & CRM
O Desafio
A corretora Cassia Marques precisava de mais do que uma vitrine virtual; ela precisava de uma máquina de vendas autônoma. O desafio era criar uma experiência de alto padrão para o cliente final (focada em performance e SEO), enquanto construíamos um sistema robusto e seguro de gestão (CMS/CRM) para a corretora administrar seus imóveis e leads sem depender de terceiros ou mensalidades de plataformas genéricas.
A Solução
Desenvolvi um portal imobiliário completo utilizando as tecnologias mais modernas do mercado. A interface foi projetada com foco em conversão e acessibilidade, enquanto o back-end foi estruturado em uma arquitetura Serverless para garantir velocidade extrema e segurança de dados.
Tecnologia
A Stack Tecnológica
Cada camada foi escolhida por desempenho, escalabilidade e developer experience.
Front-end & UI
Next.js 14+ (App Router), React, Tailwind CSS v4, Shadcn UI, Framer Motion (Animações).
Back-end & Banco de Dados
Neon (Serverless Postgres), Server Actions.
Infraestrutura & Segurança
Vercel (CI/CD), NextAuth (Google OAuth 2.0).
Armazenamento & Automação
Google Cloud Storage (Upload de imagens), Resend (E-mails transacionais).
Engenharia
Destaques Técnicos
Engenharia de Busca Inteligente
Implementação de um Autocomplete dinâmico e interconectado ao banco de dados, garantindo que os usuários filtrem apenas por localizações com estoque real, reduzindo a taxa de rejeição.
Painel Administrativo Privado
Criação de um CMS sob medida protegido por autenticação do Google, permitindo o cadastro de imóveis, upload de fotos (via Google Cloud) e gestão de contatos (CRM) em tempo real.
Performance & SEO Dinâmico
Geração automática de Open Graph Tags (meta tags) baseadas nos dados do servidor. Cada imóvel compartilhado no WhatsApp gera um card visual imersivo e instantâneo.
UI/UX Premium
Suporte nativo a Dark Mode (Next-Themes) com transições fluidas e utilização de Glassmorphism para destacar formulários sem ocultar as imagens de alto padrão das propriedades.
Identidade Visual
Brand Guidelines
Sistema visual completo desenvolvido para a CM Imóveis — logo, paleta, tipografia, tokens e componentes.
01 — Logo & Identidade
Colorida / Fundo ClaroReversa / Fundo EscuroSobre GradienteMonocromáticoCorreto
- ✓Use a versão colorida sobre fundos brancos e claros
- ✓Use a versão branca sobre fundos escuros e fotos
- ✓Mantenha o espaço de proteção ao redor da logo
- ✓Use o gradiente apenas nos elementos definidos
- ✓Respeite o tamanho mínimo de 24px de altura
- ✓Use Playfair Display para títulos e Montserrat para UI
Incorreto
- ✕Não altere as cores originais da logo
- ✕Não distorça, rotacione ou aplique efeitos
- ✕Não use sobre fundos com baixo contraste
- ✕Não use a versão colorida sobre fundos coloridos
- ✕Não adicione sombras ou bordas à logo
02 — Paleta de Cores
Gradiente da Marca
#e9a86b → #dd5289 → #553398
03 — Tipografia
Headings & Display
Playfair
Display
UI & Body Copy
Montserrat
04 — Design Tokens
Border Radius
sm
4px
md
8px
lg
12px
xl
16px
2xl
24px
full
9999px
Sombras
sm
0 1px 3px rgba(85,51,152,0.1…
md
0 4px 12px rgba(85,51,152,0.…
lg
0 8px 32px rgba(85,51,152,0.…
xl
0 16px 48px rgba(85,51,152,0…
glow
0 0 24px rgba(221,82,137,0.3…
Espaçamento
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
05 — Componentes
Botões
Badges / Tags
Inputs
Cartão de Imóvel
Apartamento Premium 3Q
SHIN QI 05, Asa Norte · 115m²
R$ 850.000
06 — Wireframes
Representação estrutural das principais telas — foco em layout, hierarquia de informação e fluxo do usuário.
Wireframe estrutural — Home
A CM Imóveis agora possui uma plataforma proprietária, escalável e otimizada para o Google, proporcionando total autonomia operacional à corretora e uma experiência imersiva aos seus clientes.