Site institucional moderno e responsivo para ABIT Projetos & Engenharia, desenvolvido com Next.js 15 + React 19 + TypeScript seguindo a arquitetura Feature-Sliced Design.
Desktop:
- Header fixo com navegação
- Hero section fullscreen com gradiente
- Grid 3x3 de serviços
- 3 valores circulares dourados
- 3 pilares de missão
- Formulário newsletter funcional
- Footer com 4 colunas
Mobile:
- Menu hambúrguer animado
- Layout responsivo 1 coluna
- Botão WhatsApp flutuante
- Scroll suave entre seções
- Next.js 15.5.3 - App Router, React Server Components
- React 19.1.0 - Última versão estável
- TypeScript 5.x - Strict mode, zero
any - Tailwind CSS 4.1.13 - Utility-first CSS framework
- ESLint 9.x - Linting de código
- Steiger 0.5.11 - FSD architecture linter
- @tailwindcss/postcss - PostCSS plugin
Estrutura baseada em Feature-Sliced Design:
src/
├── shared/ # Componentes e utilitários base
├── entities/ # Entidades de negócio (service, value, mission)
├── features/ # Funcionalidades (newsletter-form, mobile-menu)
└── widgets/ # Widgets compostos (header, hero, footer, etc)
app/
├── layout.tsx # Root layout
├── page.tsx # Home page
└── globals.css # Estilos globais
Regras de Importação:
shared → entities → features → widgets → app
📖 Documentação completa: FSD_STRUCTURE.md
- Node.js 20+ (recomendado: 20.x LTS)
- npm ou pnpm
# 1. Clone o repositório
git clone <repo-url>
cd abit-site
# 2. Instale dependências
npm install
# 3. (Opcional) Limpe arquivos legados
rm -rf src/pages src/app
# 4. Execute em modo desenvolvimento
npm run devAcesse: http://localhost:3000
npm run dev # Inicia servidor de desenvolvimento
npm run build # Build de produção
npm start # Serve build de produção
npm run lint # ESLint + Steiger (FSD)npx tsc --noEmit # Verifica erros de tipo| Seção | ID | Componente |
|---|---|---|
| Header | - | Header |
| Hero | #inicio |
Hero |
| Serviços | #servicos |
ServicesSection |
| Sobre Nós | #sobre |
AboutSection |
| Missão | #missao |
MissionSection |
| Newsletter | - | NewsletterSection |
| Footer | #contato |
Footer |
Primária: #FFD700 /* Amarelo/Dourado */
Fundo: #000000 /* Preto */
Fundo Claro:#1A1A1A /* Cinza Escuro */
Texto: #FFFFFF /* Branco */- Font: Geist Sans (Google Font via next/font)
- Tamanhos: Mobile-first (text-sm → md:text-base → lg:text-lg)
- Pesos: Regular (400), Semibold (600), Bold (700)
mobile: 0px (base)
tablet: 768px (md:)
desktop: 1024px (lg:)
wide: 1280px (xl:)
Button- Botão primary/secondaryInput- Input com validaçãoCard- Card com hover effectContainer- Container responsivo (max-width 1280px)Section- Seção com padding verticalSectionTitle- Título amarelo centralizado
service- Serviços da empresa (6 cards)value- Valores (3 badges circulares)mission- Pilares de missão (3 cards)process-badge- Badges de processo (5 badges)
newsletter-form- Formulário com validaçãomobile-menu- Menu hambúrguer animado
header- Navegação fixahero- Hero sectionservices-section- Grid de serviçosabout-section- Sobre nósmission-section- Missãonewsletter-section- Newsletterfooter- Rodapé
- Menu fixo no topo
- Links com scroll suave
- Menu mobile responsivo
- Overlay animado
- Validação de e-mail
- Feedback visual (sucesso/erro)
- Estado de carregamento
- Botão flutuante
- Link direto para chat
- Mobile First
- Grid adaptativo
- Imagens responsivas
npx tsc --noEmitExpectativa: 0 erros
npm run lintExpectativa: 0 violações
npm run buildExpectativa: Build successful
📖 Guia completo: VALIDATION_GUIDE.md
- ✅ React Server Components
- ✅ Client Components apenas onde necessário
- ✅ Zero CSS-in-JS
- ✅ Fonte otimizada (next/font)
- ✅ Lazy loading automático
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Time to Interactive: < 3.5s
- Bundle size: < 100kb (gzipped)
- ✅ Public API Pattern
- ✅ Hierarquia de Importação
- ✅ Isolamento de Camadas
- ✅ strict: true
- ✅ Zero
anytypes - ✅ Interfaces explícitas
- ✅ Semantic HTML
- ✅ ARIA labels
- ✅ Contraste WCAG AA
- ✅ Focus visible
# 1. Instale Vercel CLI
npm i -g vercel
# 2. Deploy
vercel# 1. Build
npm run build
# 2. Deploy pasta .next
netlify deploy --prod --dir=.nextFROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install && npm run build
CMD ["npm", "start"]abit-site/
├── app/ # Next.js App Router
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
├── src/ # FSD Architecture
│ ├── entities/ # Entidades (24 arquivos)
│ ├── features/ # Features (6 arquivos)
│ ├── shared/ # Shared (13 arquivos)
│ └── widgets/ # Widgets (21 arquivos)
├── .steiger/ # FSD config
├── public/ # Assets estáticos
├── FSD_STRUCTURE.md # Docs arquitetura
├── VALIDATION_GUIDE.md # Guia validação
├── PROJECT_INVENTORY.md # Inventário
└── package.json
Total: 80 arquivos criados
📖 Inventário completo: PROJECT_INVENTORY.md
Nome: ABIT Projetos & Engenharia Endereço: Rua Emílio Castelar N. 70 - Boa Viagem - Recife/PE Telefones: (81) 98175-5099 / (81) 99620-0937 E-mail: contato@abitprojetos.com WhatsApp: https://wa.me/5581981755099
Edite: src/shared/config/site.ts
Edite: src/shared/config/design-tokens.ts + app/globals.css
Edite: src/entities/service/model/services-data.ts
- Crie novo widget em
src/widgets/nova-secao/ - Importe em
app/page.tsx
- Substituir emojis por ícones SVG
- Adicionar imagens reais
- Integrar newsletter com API
- Página de Cursos
- Página de Portfólio
- Testes unitários (Vitest)
- Storybook
- CMS headless
- Área do cliente
- Blog com MDX
- i18n (PT/EN)
README.md- Este arquivoFSD_STRUCTURE.md- Arquitetura detalhadaVALIDATION_GUIDE.md- Guia de validaçãoIMPLEMENTATION_SUMMARY.md- Resumo técnicoPROJECT_INVENTORY.md- Inventário completo
© 2025 ABIT Projetos & Engenharia. Todos os direitos reservados.
Desenvolvido seguindo as melhores práticas de:
- ✅ Feature-Sliced Design
- ✅ TypeScript Strict Mode
- ✅ Mobile First Responsiveness
- ✅ WCAG Accessibility
- ✅ Clean Code Principles
Status: ✅ Production Ready