TechHelp Solutions - Website Institucional

Este projeto consiste em um website multi-page desenvolvido como conclusão de nivelamento em HTML e CSS. Ele serve como modelo para técnicos em informática autônomos, apresentando serviços, informações sobre a empresa e meios de contato de forma profissional e moderna.

📋 Sobre o Projeto

O site representa a TechHelp Solutions, uma empresa fictícia (ou modelo) focada em:

• Manutenção de computadores e notebooks.
• Desenvolvimento Web e Sistemas.
• Gestão de Social Media.
• Apoio Acadêmico (TCC, normas ABNT).

O design é responsivo e otimizado para SEO, com foco em uma experiência de usuário limpa e direta.

🚀 Funcionalidades e Diferenciais

• Design Responsivo: Adaptável a desktops, tablets e smartphones.
• Video Background: Seções "Hero" com vídeo de fundo (YouTube) para maior impacto visual na página inicial, Sobre e Contato.
• SEO Otimizado: Uso correto de tags semânticas, meta descriptions e tags canônicas.
• Social Media Ready: Meta tags Open Graph e Twitter Cards configuradas para exibir uma prévia atraente (com thumbnail do vídeo) ao compartilhar links nas redes sociais.
• Favicon Personalizado: Identidade visual consistente na aba do navegador.
• Tabela de Preços: Área dedicada para listagem de serviços e estimativas de valores.
• Formulário de Contato: Interface limpa para envio de mensagens (front-end).
• Mapa Integrado: Embed do Google Maps na página de contato.

📂 Estrutura do Site

O projeto é composto pelas seguintes páginas:

1. index.html (Início):

   • Visão geral dos serviços.
   • Destaques e diferenciais.
   • Chamadas para ação (CTAs).

2. sobre.html (Sobre Nós):

   • História da empresa.
   • Missão, Visão e Valores.
   • Apresentação da equipe e certificações.

3. servicos.html (Serviços):

   • Catálogo detalhado de todos os serviços oferecidos.
   • Categorias: Hardware, Infraestrutura, Software, Web, Dados, Design, Acadêmico e Gestão.
   • Estimativa de preços e prazos.

4. contato.html (Contato):

   • Formulário para solicitação de orçamento.
   • Informações de e-mail, telefone e endereço.
   • Mapa de localização.

🛠️ Tecnologias Utilizadas

• HTML5: Estrutura semântica.
• CSS3: Variáveis CSS, Flexbox, Grid Layout, Media Queries e animações.
• Google Fonts: Tipografia moderna.
• YouTube Embed API: Integração de vídeo de fundo.

🔧 Como Executar

1. Clone este repositório ou baixe os arquivos (ZIP).
2. Abra a pasta do projeto.
3. Dê um duplo clique no arquivo index.html para abrir no seu navegador padrão.

---

Desenvolvido por Yan Menephyl Analista de TI e Desenvolvedor Full Stack LinkedIn | GitHub | Instagram