A porta de entrada dos sistemas e projetos da PazConcept.
Sistemas em produção, projetos em desenvolvimento e o design que dá vida às marcas —
tudo num só lugar, dentro de um universo interativo de estrelas.

pazconcept.com.br

---

Telas

Início — universo de estrelas interativo que reage ao mouse	Sistemas — vitrine de lançamento do DietSpace com telas reais
Design — artes reais do feed @pazconcept	Contato — formulário que abre a conversa pronta no WhatsApp

Recursos

• Universo interativo — céu de estrelas desenhado em canvas puro: constelações, paralaxe 3D, repulsão ao mouse, estrelas cadentes e explosões de faíscas ao clicar. Pausa sozinho fora da tela e respeita prefers-reduced-motion.
• Vitrine de sistemas — DietSpace, ElaraSpace e PitSpace em cards horizontais da mesma família: cada um com a própria cor e uma mini-cena animada do produto (framer-motion, pausa fora da tela e respeita prefers-reduced-motion), com página de apresentação em /dietspace, /elaraspace e /pitspace.
• Em construção — os próximos sistemas num "canteiro de obras": card horizontal com fita de obra fina, guindaste com a carga subindo devagar e barra de progresso, sem link quebrado.
• Projetos automáticos — a contagem de projetos vem da API do GitHub (públicos e privados via token), revalidada a cada 10 minutos (ISR).
• Design & comunicação — seção dedicada ao braço de design da marca, com galeria real do feed do Instagram.
• Contato sem atrito — formulário sem backend: valida, monta a mensagem e abre direto no WhatsApp.
• Performance de verdade — 60 fps comprovados em testes automatizados (Puppeteer com CPU 4× mais lenta e "usuário chato" simulado), zero erros de console e Lighthouse 99.
• SEO completo — Open Graph, sitemap, robots, JSON-LD, favicon multi-tamanho, headers de segurança e Web Analytics.

Arquitetura

flowchart TD
    V["Visitante"] --> SITE

    subgraph SITE["Next.js 16 · App Router"]
        direction LR
        HERO["Hero<br/>universo de estrelas (canvas)"]
        SECOES["Seções<br/>serviços · sistemas · design · sobre"]
        SEO["SEO<br/>OG · sitemap · JSON-LD"]
    end

    SITE --> GH["API do GitHub<br/>repos públicos e privados · ISR 10 min"]
    SITE --> WA["WhatsApp<br/>formulário → wa.me"]

    PUSH["git push na main"] --> VERCEL["Vercel<br/>build + deploy automático"]
    VERCEL --> DOM["pazconcept.com.br"]

    classDef brand fill:#7C22CE,stroke:#5B189E,color:#fff;
    classDef ink fill:#1D1233,stroke:#1D1233,color:#fff;
    class SITE brand;
    class VERCEL ink;

Loading

Stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS v4 com os tokens da marca em @theme
• Framer Motion 12 — reveals, parallax e barra de progresso de rolagem
• Canvas 2D puro para o universo de estrelas (zero dependências)
• Vercel — deploy automático a cada push + Web Analytics
• Fontes via next/font: Space Grotesk · Sora · Inter · JetBrains Mono · Caveat

Rodando localmente

Requisitos: Node.js 22+, npm.

# 1. Clone e instale
git clone https://github.com/Danpazexe/PazConcept-web.git
cd PazConcept-web
npm install

# 2. (Opcional) Token do GitHub — inclui os repositórios privados na contagem
cp .env.example .env.local
#   GITHUB_TOKEN — crie em github.com/settings/tokens (leitura de repositórios)

# 3. Suba o dev server
npm run dev

Acesse localhost:3000. Sem o token o site funciona normalmente, contando apenas os repositórios públicos.

Personalização

Quase tudo se ajusta em um único arquivo: data/config.ts

O quê	Onde
Marca, WhatsApp, e-mail e redes	SITE
Sistemas em destaque (cards; o primeiro é o principal)	DESTAQUES + tema em components/cartoes/CartaoSistema.tsx
Sistemas em construção	FUTUROS
Repositórios ocultos e forks	reposOcultos · mostrarForks

Outros pontos editáveis estão marcados com EDITE AQUI no código. A logo original fica em public/logo-pc.png, com variações (P&B e cores) em public/variacoes/.

Scripts

Script	Descrição
npm run dev	Servidor de desenvolvimento
npm run build	Build de produção
npm start	Servidor de produção

Estrutura (resumo)

app/               Rotas, layout, tema (globals.css) e SEO (og, sitemap, robots, 404)
components/        Seções do site (Hero, Sistemas, Design…) e Estrelas.tsx (canvas)
data/config.ts     Config central — marca, contato, sistemas e projetos (EDITE AQUI)
lib/github.ts      Integração com a API do GitHub (ISR de 10 min)
public/            Logo e variações, artes do feed, screenshots e OG card

Deploy

Conectado à Vercel: todo push na main gera build e publica automaticamente em pazconcept.com.br.

Licença

Proprietário — todos os direitos reservados. A logo, as artes e a identidade visual pertencem à PazConcept. Veja o arquivo LICENSE.