CM Imóveis – Full-Stack & CRM
O Desafio
A Solução
Tecnologia
A Stack Tecnológica
Cada camada foi escolhida por desempenho, escalabilidade e developer experience.
Next.js 14
Framework de alta performance que garante URLs indexáveis pelo Google (SEO), renderização SSR e tempos de carregamento instantâneos.
Google Auth
Auth
Framer Motion
Motor de micro-animações avançado que adiciona fluidez, dinamicidade e um toque premium a cada interação do usuário.
Vercel
Infraestrutura em nuvem global na borda (Edge Network). Garante que o site carregue em milissegundos para o usuário, independente da localização.
React
Arquitetura baseada em componentes reativos, proporcionando uma experiência de usuário (UX) fluida e interativa, sem recarregamentos de página.
TypeScript
Adiciona tipagem estática rigorosa ao código, prevenindo erros em tempo de execução e garantindo estabilidade corporativa à aplicação.
Tailwind CSS
Design system construído sob medida. Garante exclusividade visual, consistência na interface e tamanho de arquivo otimizado para velocidade.
Lucide
UI / CSS
NextAuth
Auth
Neon Postgres
Banco de Dados
Resend
Mídia / Email
Google Cloud
Hosting
Anthropic
IA / ML
Figma
UI / CSS
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