Manual de Utilização — Recompara Compressores

1. Introdução

Bem-vindo ao manual de utilização do website da Recompara Compressores. Este documento descreve todas as funcionalidades implementadas, orienta sobre o uso do painel administrativo, explica a importância estratégica de cada recurso — especialmente as práticas de SEO — e detalha a arquitetura tecnológica empregada.

O site foi desenvolvido no âmbito do programa Jornada de Transformação Digital — SEBRAETEC, seguindo rigorosamente as diretrizes da Etapa 02 (Desenvolvimento de Website) do protocolo de serviço.

USP (Proposta de Valor Única): "Remanufaturar é Transformar" — unindo engenharia de precisão, sustentabilidade industrial e economia circular.

2. Acesso ao Site

O site é composto por duas interfaces principais:

Público

index.html

Página principal do site, acessível a todos os visitantes. Contém todas as seções institucionais, vitrine de produtos, artigos técnicos, contato e newsletter.

Acesso: Requer servidor PHP rodando em http://localhost:8080. Execute php -S localhost:8080 na raiz do projeto.

Restrito

admin.html

Painel administrativo para gerenciar todo o conteúdo do site: textos, SEO, produtos, artigos, depoimentos, mensagens, newsletter e usuários.

Acesso: Navegue para http://localhost:8080/admin.html e faça login.

Pré-requisito: Para funcionamento completo, o servidor PHP deve estar rodando (php -S localhost:8080 na raiz do projeto). O servidor roda na porta 8080 e serve tanto o frontend quanto a API de dados. Consulte a seção 9. Tecnologias e Arquitetura para mais detalhes.

3. Página Inicial (Home)

O site é uma página única (single page) com navegação por âncoras. Abaixo, a descrição de cada seção.

3.1 Hero Section

Primeira seção que o visitante vê ao acessar o site. Contém:

Título principal (H1) — Editável via admin, com suporte a HTML para destacar palavras em ciano
Subtítulo — Frase de impacto sobre a proposta de valor da empresa
CTA "Solicitar Orçamento" — Botão que leva à seção de contato
Imagem de fundo — Overlay com gradiente azul marinho

Impacto: A primeira impressão determina se o usuário permanece no site. Um hero bem estruturado com o H1 contendo palavras-chave relevantes ("remanufatura de compressores") melhora o rankeamento nos buscadores e reduz a taxa de rejeição.

3.2 Seção de Diferenciais

Três cards que destacam os pilares da empresa:

Garantia de 12 Meses — Tranquilidade e segurança para o cliente
Performance Garantida — Equipamento com desempenho de fábrica
Sustentabilidade — Redução de resíduos e economia circular

3.3 Vitrine de Produtos

Catálogo visual dos principais serviços/produtos. Cada card exibe:

Imagem do equipamento
Título e especificações técnicas (tags)
Descrição resumida
Ao clicar, abre um modal com detalhes completos
Produto em destaque aparece com badge

Os produtos são gerenciáveis pelo admin (CRUD completo).

3.4 Seção de Serviços

Apresenta as especialidades técnicas da Recompara:

Remanufatura de Compressores
Recuperação de Superfícies
Rebobinamento de Motores
Compra de Equipamentos
Manutenção Especializada

3.5 Nossa História

Seção institucional que conta a trajetória da empresa desde 2018. Totalmente editável via admin:

Imagem — URL configurável no admin
Texto — Conteúdo com suporte a múltiplos parágrafos
Abordagem sustentável e técnica

3.6 Artigos Técnicos

Blog técnico com artigos sobre remanufatura, eficiência energética e sustentabilidade. Funcionalidades:

Cards com imagem, data, título e resumo
Modal de leitura completa ao clicar em "Ler Artigo Completo"
Gerenciamento completo via admin (CRUD + agendamento + expiração)
Artigos podem ser agendados para publicação futura
Artigos podem expirar automaticamente

Impacto SEO: Um blog ativo com conteúdo técnico relevante é um dos fatores mais importantes para o rankeamento orgânico. Cada artigo é uma nova página indexável, aumentando a autoridade do domínio e gerando tráfego qualificado.

3.7 Depoimentos

Slider de depoimentos de clientes. Características:

Rotação automática a cada 5 segundos
Pausa ao passar o mouse
Navegação manual por setas e dots
CRUD completo via admin
Suporte a imagem do cliente (upload, URL ou preset)

Impacto: Prova social aumenta a credibilidade e a taxa de conversão. Depoimentos reais geram confiança e ajudam na decisão de compra.

3.8 Seção de Contato

Formulário completo para solicitação de orçamentos. Campos:

Nome Completo
E-mail
Celular / WhatsApp
Serviço de Interesse (dropdown)
Mensagem

As mensagens são armazenadas no navegador e podem ser visualizadas no painel admin, na aba "Mensagens", com gerenciamento de status (Não Lido / Em Atendimento / Resolvido / Cancelado).

Impacto: Um formulário funcional com captura de WhatsApp permite que a empresa responda rapidamente aos leads, aumentando a taxa de conversão. O gerenciamento de status evita que solicitações se percam.

3.9 Rodapé

Contém:

Logo e descrição da empresa
Redes sociais — Facebook e Instagram (links reais)
Navegação completa (mapa do site) com links para todas as seções
Informações de contato (endereço, telefone, e-mail)
Newsletter — campo de e-mail para inscrição
Créditos: "CRIADO POR: Jornada de Transformação Digital — SEBRAETEC"

4. Busca Interna

Ícone de lupa no cabeçalho do site. Ao clicar:

Abre um modal com campo de pesquisa
Filtra em tempo real produtos e artigos do site
Exibe resultados com foto, título, descrição e tipo (Produto/Artigo)
Ao clicar em um resultado, abre o modal correspondente e fecha a busca
Atalho Esc para fechar

Impacto UX: A busca interna melhora a experiência do usuário, permitindo encontrar rapidamente o que procura. Reduz a taxa de rejeição e aumenta o tempo de permanência no site.

5. WhatsApp Flutuante

Botão flutuante do WhatsApp no canto inferior direito. Características:

Ícone verde com logo do WhatsApp
Posição fixa na tela (fixed bottom-6 right-6)
Animado com efeito hover de escala
Abre wa.me com o número configurado e mensagem padrão
Configurável via admin (número + mensagem)
Só aparece se um número for configurado no admin

Impacto: O WhatsApp é o canal de comunicação preferido do público brasileiro. Um botão flutuante reduz o atrito do contato, aumentando significativamente as taxas de conversão de leads.

6. Painel Administrativo

O painel administrativo (admin.html) permite gerenciar todo o conteúdo do site sem conhecimento técnico.

6.1 Login

Tela de autenticação com dois campos:

Usuário — Nome de usuário cadastrado
Senha — Senha de acesso

Usuário padrão: admin / Senha: admin123

O sistema de usuários é gerenciável pela aba "Usuários" no painel. As senhas são armazenadas com hash bcrypt e a sessão utiliza JWT (JSON Web Token) com expiração de 8 horas.

Segurança: A autenticação é feita no servidor PHP via POST /api/login. As senhas são hasheadas com bcrypt e os tokens JWT são verificados em cada requisição às rotas protegidas da API.

6.2 Textos do Site

Aba principal do admin. Permite editar:

Título da Aba (Navegador) — Texto exibido na aba do navegador
Logo do Site — URL da imagem do logo
Título do Hero (H1) — Com suporte a HTML para destaque em ciano
Subtítulo do Hero — Descrição principal
Imagem da Nossa História — URL da imagem institucional
Texto da Nossa História — Conteúdo com suporte a múltiplos parágrafos

As alterações são enviadas ao servidor via API REST (POST /api/data) e persistem no arquivo dados.json. As mudanças refletem imediatamente no site público. Compatível com hospedagem compartilhada (PHP CGI).

6.3 SEO

Seção dentro da aba "Textos do Site". Configurações:

Meta Description — Descrição exibida nos resultados de busca
Meta Keywords — Palavras-chave separadas por vírgula
Open Graph — Título — Título ao compartilhar em redes sociais
Open Graph — Descrição — Descrição ao compartilhar
Open Graph — Imagem — URL da imagem de compartilhamento (1200x630px)
URL Canônica — URL principal para evitar conteúdo duplicado

Impacto: Cada campo SEO preenchido corretamente aumenta as chances de rankeamento nos mecanismos de busca. O Open Graph controla como o link aparece no Facebook, WhatsApp, LinkedIn e Twitter.

6.4 Integrações

Seção dentro da aba "Textos do Site". Configurações:

WhatsApp — Número — Nº no formato internacional
WhatsApp — Mensagem Padrão — Texto pré-preenchido ao clicar no botão
Google Analytics — ID — Código de medição GA4 (G-XXXXXXXXXX)

O script do Google Analytics só é carregado se um ID for preenchido.

6.5 Gerenciamento de Produtos

Aba "Produtos" no admin. Funcionalidades:

Lista em grid com imagem, título, especificações e badge de destaque
Adicionar — Modal com campos: título, especificações, descrição, imagem e destaque
Editar — Modal preenchido com dados atuais
Excluir — Com confirmação
Um único produto pode ser marcado como "Destaque"

6.6 Gerenciamento de Artigos

Aba "Artigos" no admin. Funcionalidades:

Tabela com imagem, título, status, datas de publicação e expiração
Adicionar/Editar — Modal com: título, resumo, conteúdo completo, imagem, visibilidade
Agendamento — Publicação imediata ou programada para data futura
Expiração — Tempo indefinido ou data de retirada do ar
Status — Publicado / Agendado / Expirado / Oculto
Excluir — Com confirmação

6.7 Gerenciamento de Depoimentos

Aba "Depoimentos" no admin. Funcionalidades:

Tabela com nome, empresa, depoimento e ações
Adicionar/Editar — Modal com: nome, empresa, depoimento, imagem
Excluir — Com confirmação

IMAGEM 19 — Gerenciamento de Depoimentos

6.8 Mensagens de Contato

Aba "Mensagens" no admin. Funcionalidades:

Tabela com data, nome, e-mail, WhatsApp, serviço, status e ações
Status — Não Lido / Lido (alternável por botão ou ao visualizar)
Visualizar — Modal com todos os dados formatados (marca como Lido)
Excluir — Com confirmação

6.10 Gerenciamento de Usuários

Aba "Usuários" no admin. Funcionalidades:

Tabela com usuário, função, data de criação
Badge "Atual" indica qual usuário está logado
Adicionar — Modal com: nome de usuário, senha (mín. 6 caracteres), função
Editar — Permite alterar username, função e senha
Excluir — Com confirmação; não permite excluir o último usuário

7. SEO — Otimização para Mecanismos de Busca

O SEO (Search Engine Optimization) é o conjunto de práticas que melhoram o posicionamento do site nos resultados orgânicos do Google, Bing e outros buscadores.

7.1 Meta Tags

Meta tags são informações inseridas no código HTML que comunicam aos buscadores do que se trata a página.

Tag	Função	Impacto
`<title>`	Título da página na aba do navegador	Crítico — Principal fator de rankeamento
`meta description`	Descrição exibida nos resultados de busca	Importante — Influencia a taxa de clique (CTR)
`meta keywords`	Palavras-chave relevantes	Complementar

7.2 Open Graph

Controla como o link é exibido quando compartilhado em redes sociais.

Tag	Função
`og:title`	Título exibido no card de compartilhamento
`og:description`	Descrição exibida no card
`og:image`	Imagem exibida no card (1200x630px)
`og:url`	URL canônica para o conteúdo

Impacto: Um card bem estruturado com imagem atraente aumenta significativamente a taxa de clique em compartilhamentos.

7.3 Dados Estruturados (JSON-LD)

Ajudam o Google a entender o conteúdo da página e exibir rich snippets.

O site possui dados estruturados da empresa (Organization) com: nome, logo, endereço, telefone, URL e redes sociais.

7.4 Sitemap.xml e Robots.txt

sitemap.xml — Lista todas as URLs do site para os mecanismos de busca
robots.txt — Instrui os robôs de busca sobre quais páginas indexar

Ação necessária:

Acesse o Google Search Console
Adicione e verifique a propriedade do domínio
Envie o sitemap.xml na seção "Sitemaps"

7.5 Google Analytics

Para configurar:

Crie uma conta no Google Analytics
Obtenha o ID de medição (formato G-XXXXXXXXXX)
Insira o ID no admin (Textos do Site > Integrações > Google Analytics)

Impacto: Acompanhe visitantes, páginas mais acessadas, taxa de rejeição, origem do tráfego e conversões.

7.6 Impacto Geral do SEO

73%

Dos cliques vão para resultados orgânicos

~60%

Economia vs. mídia paga

3-6x

Mais tráfego com SEO bem feito

8. Newsletter

A newsletter permite manter contato periódico com clientes e leads por e-mail.

8.3 Formatação Inteligente

Estilo	Tom	Indicado para
Profissional	Formal, institucional	Comunicados oficiais
Promocional	Marketing, urgência	Ofertas e campanhas
Técnico	Conteúdo técnico	Artigos e dicas de engenharia

9. Tecnologias e Arquitetura

9.1 Visão Geral

O website foi desenvolvido como uma aplicação full-stack com frontend em HTML/CSS/JS puro e backend em PHP. Os dados são persistidos em um arquivo dados.json no servidor, com fallback para localStorage no navegador quando o servidor está indisponível.

O servidor PHP (api/index.php) expõe uma API REST que centraliza a leitura e escrita de dados. O frontend consome essa API através do módulo js/api.js, eliminando a necessidade de acesso direto ao armazenamento do navegador.

9.2 Tecnologias Utilizadas

Tecnologia	Função
HTML5	Estrutura semântica do site
CSS3 / Tailwind 3.x	Estilização utility-first (via CDN)
JavaScript (Vanilla ES6+)	Lógica do site, interatividade, CRUDs
PHP 8.x	Runtime do servidor backend
Apache (.htaccess)	Reescrita de URL para API REST
PHP password_hash / password_verify	Hash de senhas (bcrypt nativo)
firebase/php-jwt	Tokens JWT para sessão autenticada
PHP move_uploaded_file	Upload de imagens para a pasta uploads/
dados.json	Banco de dados persistente em arquivo
localStorage	Fallback quando servidor está offline
sessionStorage	Armazenamento do token JWT (sessão)
Material Symbols	Biblioteca de ícones do Google
Google Fonts	Fontes Space Grotesk, Manrope, Inter

9.3 Estrutura de Arquivos

Recompara/

├── api/index.php (backend PHP + API REST)

├── .htaccess (regras Apache para roteamento)

├── composer.json (dependências PHP)

├── dados.json (banco de dados JSON)

├── index.html (site público)

├── admin.html (painel administrativo)

├── manual.html (este arquivo)

├── js/api.js (módulo de comunicação com a API)

├── sitemap.xml

├── robots.txt

├── vendor/ (bibliotecas PHP — firebase/php-jwt)

├── Imagens/ (logo + 12 imagens de produtos)

├── uploads/ (imagens enviadas via admin)

└── manual/ (22 screenshots)

9.4 Fluxo de Dados

Fluxo de Conteúdo

1. Usuário acessa http://localhost:8080/admin.html e faz login
2. Edita textos, SEO, produtos, artigos etc.
3. api.js envia dados via POST /api/data
4. PHP salva no arquivo dados.json
5. Ao acessar index.html, o JS carrega os dados via GET /api/data
6. Conteúdo é renderizado dinamicamente na página

Fluxo de Contato

1. Visitante preenche o formulário de contato
2. Dados são enviados ao servidor via POST /api/data
3. Admin visualiza na aba "Mensagens"
4. Admin altera o status conforme o atendimento

Vantagem: Com o backend PHP, os dados são centralizados no servidor e compartilhados entre todos os dispositivos. O PHP é compatível com qualquer hospedagem compartilhada (KingHost, Locaweb, etc.) sem necessidade de configuração especial. Em caso de falha do servidor, o frontend opera em modo degradado usando o localStorage como fallback.

9.5 Manutenção e Evolução

Iniciar o Servidor (Local)

# Iniciar servidor PHP embutido
php -S localhost:8080

# Servidor disponível em http://localhost:8080

Publicar no KingHost (FTP)

Conecte via FTP ao servidor KingHost
Envie todos os arquivos do projeto para a pasta public_html/
O Apache do KingHost usa o .htaccess para rotear as requisições /api/*
Não é necessário configurar nada — o PHP já está disponível na hospedagem

Manutenção do Dia a Dia

Todo o conteúdo é gerenciável pelo admin — sem precisar editar HTML
Produtos, artigos e depoimentos são CRUD completos
SEO e integrações são configuráveis via formulários
Backup: copie o arquivo dados.json periodicamente
Reset: delete dados.json e recarregue o admin

Possíveis Evoluções

Banco de dados real — Substituir dados.json por PostgreSQL/MySQL
E-commerce — Carrinho de compras e checkout
Blog com categorias — Tags, categorias e comentários
Newsletter automática — Mailchimp, SendGrid ou EmailJS
PWA — Service worker e instalação no celular

10. Considerações Finais

Este website foi desenvolvido como parte do programa Jornada de Transformação Digital — SEBRAETEC, seguindo todas as diretrizes da Etapa 02 (Desenvolvimento de Website) do protocolo de serviço.

Funcionalidades implementadas conforme especificado:

OK Programação visual

Layout com a marca e paleta de cores oficial

OK Layout Responsivo

Adaptável a dispositivos móveis, tablets e desktops

OK Plataforma Open Source

HTML/CSS/JS + PHP, sem licenças proprietárias

OK Redes Sociais

Facebook e Instagram no rodapé

OK Mapa do Site

Navegação completa no footer + sitemap.xml

OK Formulário de Contato

Com captura de WhatsApp e status

OK Rodapé com dados

Endereço, telefone, e-mail e créditos SEBRAE

OK Newsletter

Cadastro + disparo com compositor no admin

OK Backend PHP + API REST

API PHP com JWT, bcrypt nativo e dados em JSON

OK Seções Institucionais

Quem Somos, Serviços, Diferenciais, Depoimentos

OK Catálogo de Produtos

Vitrine com CRUD completo

OK CMS (Gerenciamento)

Textos, SEO, produtos, artigos, depoimentos

OK Gerenciamento de Usuários

Login com múltiplos usuários, funções Admin/Editor

OK SEO On-Page

Meta tags, Open Graph, dados estruturados

OK Blog (Artigos)

Artigos técnicos com agendamento e expiração

OK Google Analytics

Configurável via admin (GA4)

OK WhatsApp Integração

Botão flutuante configurável

Suporte e Contato

Para dúvidas sobre a operação do site:

Jornada de Transformação Digital — SEBRAETEC

E-mail: recompara@recompara.com.br

Telefone: (16) 3397-4800