# 🚀 Guia de Instalação - Studio Vitória Dornelas (React + Vite)

## Versão: Build de Produção para cPanel

Este é o build otimizado do site React para hospedagem compartilhada em cPanel. **Não requer Node.js no servidor!**

---

## 📋 Pré-requisitos

- Hospedagem compartilhada com cPanel
- Acesso ao File Manager do cPanel
- Domínio apontado para a hospedagem
- Suporte a Apache com mod_rewrite ativado

---

## 🔧 Passo a Passo de Instalação

### **Passo 1: Aceder ao cPanel**

1. Abra seu navegador
2. Aceda a `https://seu-dominio.com:2083` ou `https://seu-ip:2083`
3. Faça login com suas credenciais de cPanel
4. Procure por **"File Manager"** e clique

### **Passo 2: Navegar até à Pasta public_html**

1. No File Manager, você verá uma lista de pastas
2. Clique na pasta **`public_html`** (esta é a raiz do seu website)
3. Se a pasta estiver vazia, é o local correto

### **Passo 3: Fazer Upload dos Ficheiros**

**Opção A: Upload via Drag & Drop (Recomendado)**

1. Abra o ficheiro ZIP `studio-vitoria-react-build.zip` no seu computador
2. Extraia todos os ficheiros para uma pasta
3. No File Manager do cPanel, clique no botão **"Upload"**
4. Arraste todos os ficheiros para a área de upload
5. Aguarde até que o upload esteja 100% completo

**Opção B: Upload via Ficheiro ZIP**

1. Faça upload do ficheiro `studio-vitoria-react-build.zip` para `public_html`
2. Clique com botão direito no ZIP
3. Selecione **"Extract"** ou **"Descompactar"**
4. Confirme a extração

### **Passo 4: Verificar a Estrutura**

Após o upload, você deve ter esta estrutura em `public_html`:

```
public_html/
├── index.html          (Ficheiro principal)
├── .htaccess           (Configuração Apache)
├── assets/             (Pasta com JS e CSS)
│   ├── index-*.css
│   ├── index-*.js
│   └── vendor-*.js
├── images/             (Pasta com imagens)
│   ├── logoparabanner.png
│   ├── logoparanavbar.png
│   ├── Vitoriafotoprincipal.png
│   └── gallery/
├── robots.txt
├── sitemap.xml
├── schema.json
└── INSTALACAO_CPANEL.md
```

### **Passo 5: Testar o Website**

1. Abra seu navegador
2. Digite seu domínio: `https://www.vitoriadornelas.pt`
3. O website deve carregar corretamente
4. Teste a navegação entre páginas (Home, Sobre, Serviços, etc.)

---

## ✅ Verificação de Funcionamento

### **O site deve:**
- ✅ Carregar completamente em 2-3 segundos
- ✅ Mostrar o banner com animação de partículas
- ✅ Ter navbar com logo horizontal
- ✅ Exibir ícones sociais na lateral direita
- ✅ Permitir navegação entre páginas sem recarregar
- ✅ Funcionar em telemóvel, tablet e desktop
- ✅ Mostrar formulário de contacto funcional

### **Se algo não funcionar:**

1. **Página em branco ou erro 404:**
   - Verifique se o ficheiro `.htaccess` foi enviado
   - Verifique se o `index.html` está em `public_html`
   - Contacte o suporte da hospedagem para ativar `mod_rewrite`

2. **Imagens não aparecem:**
   - Verifique se a pasta `images/` foi enviada
   - Confirme que os nomes dos ficheiros estão corretos

3. **Estilos ou JavaScript não funcionam:**
   - Limpe o cache do navegador (Ctrl+Shift+Delete)
   - Aguarde 5 minutos para o cache do servidor atualizar

---

## 🔐 Configurações de Segurança

O ficheiro `.htaccess` já inclui:

- ✅ Redirecionamento de URLs (SPA routing)
- ✅ Compressão GZIP
- ✅ Cache inteligente para assets
- ✅ Headers de segurança
- ✅ Proteção contra ataques XSS

---

## 📊 Otimizações de Performance

O build de produção inclui:

- ✅ Minificação de JavaScript e CSS
- ✅ Code splitting (vendor separado)
- ✅ Compressão de imagens
- ✅ Cache busting com hash de ficheiros
- ✅ Lazy loading de componentes

**Tamanho do build:** ~13 MB (com imagens)
**Tamanho comprimido:** ~1.1 MB

---

## 🛠️ Modificações Futuras

### **Alterar Texto ou Cores:**

Infelizmente, com o build de produção, você não pode alterar facilmente o código. Para futuras modificações:

1. Contacte a Squad Digital
2. Eles farão as alterações no código-fonte React
3. Gerarão um novo build
4. Você fará upload do novo build

### **Adicionar Novas Imagens:**

1. Aceda ao File Manager
2. Navegue até `public_html/images/`
3. Faça upload das novas imagens
4. Atualize o código-fonte React (contacte Squad Digital)

---

## 📞 Suporte

**Se tiver dúvidas:**

- **Squad Digital:** @squad_digital (Instagram)
- **Studio Vitória Dornelas:** +351 914 219 559
- **Email:** geral@vitoriadornelas.pt

---

## 🎉 Parabéns!

Seu website React está agora online! 

**Próximos passos:**
1. Teste todas as funcionalidades
2. Compartilhe o link com amigos
3. Monitore o desempenho via Google Analytics
4. Solicite feedback dos clientes

---

## 📝 Notas Importantes

- Este é um build de **produção otimizado**
- Não inclui código-fonte (está minificado)
- Funciona em qualquer hospedagem compartilhada
- Não requer Node.js, Python ou qualquer runtime
- Compatível com cPanel, Plesk e outros painéis

**Desenvolvido por:** Squad Digital
**Data:** Novembro 2025
**Versão:** 1.0.0
