# 🚀 GUIA DE IMPLANTAÇÃO: COMO TESTAR NO PC E PUBLICAR NA VPS

Este guia explica passo a passo como você pode testar o site **Capacitecla** no seu computador local agora mesmo e, em seguida, colocá-lo no ar em um servidor VPS (Hostinger, DigitalOcean, Contabo, Hetzner, AWS, Linode, etc.).

---

## 1. Como Abrir e Testar no seu PC Local

O site foi construído em tecnologia padrão moderna (**HTML5 + CSS3 + JavaScript puro**), o que significa que ele **não precisa de compilador, Node.js ou instalação pesada**.

### Opção A: Direto pelo Navegador
- Basta entrar na pasta `/media/belini/BACKUP_2TB/Capacitecla`
- Dar um duplo clique no arquivo `index.html`
- O site abrirá imediatamente em qualquer navegador (Google Chrome, Edge, Firefox, Brave).

### Opção B: Servidor Local Leve (Recomendado)
Se quiser simular exatamente o comportamento de um servidor web com HTTP local:
Abra o terminal e execute:
```bash
cd /media/belini/BACKUP_2TB/Capacitecla
python3 -m http.server 8080
```
Depois abra o navegador em: `http://localhost:8080`

---

## 2. Como Substituir as Imagens Genéricas pelas Fotos Reais

O site já vem com ilustrações vetoriais (SVG) técnicas de altíssima definição simulando os teclados capacitivos. Quando você fotografar os produtos reais:

1. As imagens ficam na pasta: `/media/belini/BACKUP_2TB/Capacitecla/images/`
2. Você pode salvar suas fotos reais em formato `.jpg` ou `.png` (ex: `produto-mini-12t.jpg`).
3. Abra o arquivo `index.html` e substitua a extensão no código, por exemplo:
   - Onde está: `<img src="images/produto-mini-12t.svg" ...>`
   - Troque para: `<img src="images/produto-mini-12t.jpg" ...>`
4. Dica de Proporção:
   - Fotos dos produtos: `800 x 600 px` (proporção 4:3)
   - Logo: `340 x 70 px` (fundo transparente)

---

## 3. Como Personalizar Seus Contatos (WhatsApp e E-mail)

No arquivo `index.html` e no `js/main.js`, procure por:
- Telefone/WhatsApp: substitua `5511999999999` pelo seu número com DDD (ex: `5519987654321`).
- E-mail: substitua `contato@capacitecla.com.br` pelo seu e-mail real.

---

## 4. Passo a Passo para Publicar na VPS

Quando você contratar sua VPS (ex: Ubuntu 22.04 / 24.04 LTS), siga estas etapas simples:

### Passo 1: Enviar os arquivos do seu PC para a VPS
Do seu terminal no PC local, envie a pasta Capacitecla para a VPS via `rsync` ou `scp`:
```bash
rsync -avz --progress /media/belini/BACKUP_2TB/Capacitecla/ root@SEU_IP_DA_VPS:/var/www/capacitecla/
```
*(Ou, se preferir interface gráfica, conecte pelo programa **FileZilla** usando SFTP na porta 22 e envie para `/var/www/capacitecla/`)*.

---

### Passo 2: Instalar o Nginx na VPS
Conecte via SSH na sua VPS (`ssh root@SEU_IP_DA_VPS`) e rode:
```bash
sudo apt update
sudo apt install -y nginx
```

Ajuste as permissões dos arquivos:
```bash
sudo chown -R www-data:www-data /var/www/capacitecla
sudo chmod -R 755 /var/www/capacitecla
```

---

### Passo 3: Configurar o Nginx
Crie o arquivo de configuração para o domínio do seu site:
```bash
sudo nano /etc/nginx/sites-available/capacitecla.conf
```

Cole a configuração abaixo (substitua `capacitecla.com.br` pelo seu domínio real ou use o IP da VPS):
```nginx
server {
    listen 80;
    server_name capacitecla.com.br www.capacitecla.com.br;

    root /var/www/capacitecla;
    index index.html;

    # Otimização de performance e cache para arquivos estáticos
    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(css|js|svg|jpg|jpeg|png|gif|ico|webp)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    # Compressão Gzip para carregamento ultra rápido
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
    gzip_min_length 256;
}
```

Ative o site e reinicie o Nginx:
```bash
sudo ln -s /etc/nginx/sites-available/capacitecla.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```

---

### Passo 4: Ativar Certificado SSL Grátis (HTTPS) com Let's Encrypt
Para deixar o site seguro com o cadeado verde no navegador:
```bash
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d capacitecla.com.br -d www.capacitecla.com.br
```
O Certbot configurará o HTTPS automaticamente com renovação automática periódica!

---

## 5. Estrutura dos Arquivos Criados

```
/media/belini/BACKUP_2TB/Capacitecla/
├── index.html                       # Página principal completa e responsiva
├── css/
│   └── style.css                    # Estilo moderno tech escuro, responsivo e com efeitos
├── js/
│   └── main.js                      # Simulador de toque, modal, calculadora de preço e validação
├── images/
│   ├── logo.png                     # Logotipo oficial CapaciTecla (alta definição)
│   ├── favicon.png                  # Ícone de aba do navegador (emblema CT)
│   ├── hero-keypad-mockup.svg       # Ilustração do teclado principal no topo
│   ├── camadas-teclado.svg          # Vista explodida da arquitetura de camadas
│   ├── produto-jukebox-karaoke.svg  # Teclado para Jukebox e Karaokê (Beer-Proof USB)
│   ├── produto-mini-12t.svg         # Teclado numérico 3x4
│   ├── produto-pro-16t.svg          # Teclado matricial 4x4
│   ├── produto-qwerty-glass.svg     # Teclado alfanumérico hospitalar
│   ├── produto-touchpad-duo.svg     # Teclado + Touchpad integrado
│   ├── produto-ihm-custom.svg       # Painel com sliders touch e jog dial
│   ├── produto-vandalproof.svg      # Teclado blindado IK10
│   ├── produto-medical-slim.svg     # Teclado clínico ultra-slim
│   ├── produto-oem-circuit.svg      # Placa de circuito e sensores OEM
│   └── README-SUBSTITUIR-IMAGENS.txt# Dicas para quando colocar as fotos reais
├── README.md                        # Visão geral do projeto
└── COMO-PUBLICAR-NA-VPS.md          # Este guia detalhado
```

Pronto! Seu site está 100% autônomo, rápido, bonito e pronto para receber clientes.