Interlocução Imobiliária

Curadoria de imóveis de alto padrão em Brasília-DF. Uma operação do Grupo Interlocução.

---

Sobre o projeto

Plataforma institucional da Interlocução Imobiliária, imobiliária de alto padrão sediada em Brasília-DF e parte do Grupo Interlocução. Inspirada no DNA Sotheby's (Bossa Nova Sotheby's, Sotheby's International Realty global) com identidade contemporânea-monumental ancorada no modernismo brasiliense.

Estrutura institucional

• Grupo Interlocução — marca-mãe (brasão CIG, uso institucional)
• Interlocução Imobiliária — marca pública e operação principal (corretagem de imóveis de alto padrão)
• Operações futuras do grupo a serem incorporadas ao site em fases posteriores

Stack técnica

• Next.js 16 (App Router) com Turbopack
• React 19
• TypeScript modo strict
• Tailwind CSS 4 (CSS-first via @theme em globals.css)
• Motion (motion.dev) para animações futuras
• Bodoni Moda + Manrope (next/font/google)
• Supabase (backend, será integrado na Fase 1)
• pnpm como package manager

Como rodar localmente

pnpm install
pnpm dev

Acesse http://localhost:3000

Design System

Tokens definidos em src/app/globals.css via @theme (Tailwind 4 CSS-first).

Paleta oficial

Token	Hex	Uso
bg-bg	#FAFAF7	Fundo principal (off-white quente)
bg-bg-elevated	#F5F1EA	Cards, hover, fundos sutis
text-ink	#0A0A0A	Texto principal, headings
text-ink-soft	#2D2D2D	Texto secundário
text-ink-muted	#6B6B6B	Labels, captions, metadados
text-champagne	#8B7355	Acento institucional
bg-champagne-dark	#6B5740	Hover de CTAs em champagne
bg-champagne-soft	#D4C4A8	Backgrounds sutis raríssimos
border-line	#E5E0D8	Divisórias horizontais e cards

Tipografia oficial

Família	Fonte	Uso
font-display	Bodoni Moda (Google Fonts)	Headings, frases de impacto editorial
font-sans	Manrope (Google Fonts)	Corpo, UI, labels small caps, metadados

Pesos importados (otimizados para performance):

• Bodoni Moda: 400, 700
• Manrope: 400, 600

Calibração: Bodoni Moda usado com restrição imobiliária (headlines firmes, optical sizing automático), não exuberância de galeria. Manrope em todo o resto.

Espaçamento

• py-section-y → 8rem (desktop)
• py-section-y-mobile → 4rem (mobile)

Easing

• ease-luxe → cubic-bezier(0.16, 1, 0.3, 1)

Agente Hallmark

Diretor de Arte do projeto. Autoridade total sobre toda decisão visual — tipografia, hierarquia, espaçamento, copy, microinterações.

Definido em .claude/agents/hallmark.md. Toda decisão visual passa por ele antes de virar código de produção.

Estrutura de pastas

src/
├── app/
│   ├── (marketing)/         (rotas públicas — preenchido na Fase 1+)
│   ├── api/                 (endpoints — preenchido na Fase 5+)
│   ├── layout.tsx           (root layout com fontes)
│   ├── page.tsx             (home placeholder — substituída na Fase 2)
│   └── globals.css          (design system via @theme)
├── components/
│   ├── ui/                  (primitivos)
│   ├── layout/              (header, footer, navigation)
│   ├── sections/            (seções de página)
│   └── shared/              (componentes reutilizáveis)
├── lib/
│   ├── utils.ts             (helper cn())
│   ├── constants.ts         (constantes globais)
│   └── types.ts             (tipos compartilhados)
├── hooks/                   (custom React hooks)
├── data/                    (dados mockados em JSON até Fase 5)
└── styles/                  (estilos extras)

Identidade da operação

• Atuação: Brasília-DF
• CRECI: 34005-DF (corretor responsável)
• WhatsApp: (61) 99158-0815
• Email: contato em definição (placeholder operacional)

Status do projeto

• ✅ Fase 0 — Fundação (design system, agente Hallmark, tipografia oficial, home placeholder) — CONCLUÍDA
• ⏳ Fase 1 — Layout global (Header + Footer + Supabase + auth básica) — próxima
• ⏳ Fase 2 — Home institucional completa
• ⏳ Fase 3 — Sistema de imóveis (venda + aluguel + permuta + página individual)
• ⏳ Fase 4 — Sistema de regiões (Plano Piloto, Lagos, Mansões, Apartamentos Novos, Condomínios)
• ⏳ Fase 5 — Páginas de serviços + Anunciar
• ⏳ Fase 6 — Páginas institucionais (Sobre, Equipe, Contato, FAQ, Grupo Interlocução)
• ⏳ Fase 7 — Painel admin: gestão de imóveis
• ⏳ Fase 8 — Painel admin: gestão de leads, consultores, blog
• ⏳ Fase 9 — Blog público
• ⏳ Fase 10 — Autenticação de cliente + conta + favoritos + alertas
• ⏳ Fase 11 — Legal + SEO + Schema.org + Performance + Deploy

Histórico de commits da Fase 0

1. feat: fase 0 — fundação do projeto
2. feat: design system + Hallmark v3 + identidade Interlocução
3. feat: tipografia oficial — Bodoni Moda + Manrope
4. feat: home placeholder — primeira manifestação visual da marca
5. docs: README definitivo da Fase 0

---

© Grupo Interlocução — Brasília / DF