Do VS Code ao Ar

O Visual Studio Code (VS Code) é o editor de código mais usado no mundo. Gratuito, leve e cheio de extensões. Vamos instalá-lo e configurá-lo para ser seu ambiente completo de desenvolvimento e deploy.

S1.1 Instalando o VS Code

Acesse code.visualstudio.com e baixe a versão para o seu sistema (Windows, Mac ou Linux). A instalação é "next, next, finish".

S1.2 Extensões Essenciais

Abra o VS Code e instale estas extensões (ícone de quadrado na barra lateral ou Ctrl+Shift+X):

Extensão	Para que serve
Remote - SSH (Microsoft)	Conectar ao servidor e editar arquivos remotos
ES7+ React/Redux Snippets	Atalhos para criar componentes React rapidamente
Tailwind CSS IntelliSense	Autocomplete de classes Tailwind
Prettier	Formata código automaticamente ao salvar
ESLint	Mostra erros de JavaScript/TypeScript em tempo real
Thunder Client	Testar APIs sem sair do VS Code (alternativa ao Postman)

S1.3 Terminal Integrado

O VS Code tem um terminal embutido. Você não precisa abrir o Prompt de Comando separadamente.

S1.4 Atalhos Essenciais

Atalho	O que faz
Ctrl+S	Salvar arquivo
Ctrl+'	Abrir/fechar terminal
Ctrl+Shift+P	Paleta de comandos (busca qualquer ação)
Ctrl+P	Buscar arquivo pelo nome
Ctrl+Shift+X	Abrir extensões
Ctrl+B	Abrir/fechar barra lateral
Ctrl+D	Selecionar próxima ocorrência da palavra
Alt+↑/↓	Mover linha para cima/baixo
Ctrl+/	Comentar/descomentar linha

Uma VPS (Virtual Private Server) é um computador na nuvem que fica ligado 24/7. É onde seu site vai morar. A Hostinger oferece VPS baratas e com bom desempenho.

S2.1 Comprando a VPS na Hostinger

Passo a passo:

S2.2 Primeiro Acesso — SSH pelo Terminal

SSH é como um "controle remoto" para o servidor. Você digita comandos no seu computador, e eles executam na VPS.

ssh root@SEU_IP

Exemplo real:

ssh root@154.62.109.73

Na primeira vez, ele pergunta "Are you sure you want to continue connecting?" — digite yes e aperte Enter. Depois digite a senha que você definiu na Hostinger.

S2.3 Remote SSH — VS Code Conectado na VPS

Aqui está a mágica: em vez de usar o terminal puro, vamos conectar o VS Code direto na VPS. Você edita arquivos, navega pastas e usa o terminal, tudo dentro do VS Code — como se o servidor fosse seu computador local.

Passo a passo — Configurando o Remote SSH

Abrindo uma pasta do servidor

Depois de conectar, vá em File → Open Folder e escolha /root. Agora o VS Code mostra todas as pastas do servidor na barra lateral, exatamente como faria com um projeto local.

Salvando a conexão (para não digitar toda vez)

Host minha-vps
    HostName 154.62.109.73
    User root

Recurso	Terminal SSH puro	VS Code + Remote SSH
Editar arquivos	nano (difícil, sem cores)	Clica no arquivo, edita com syntax highlighting
Navegar pastas	ls, cd (cego)	Barra lateral visual com árvore de pastas
Buscar no projeto	grep (complexo)	Ctrl+Shift+F — busca global
Terminal	Janela separada	Embutido no VS Code (Ctrl+')
Autocomplete	Nenhum	IntelliSense completo
Arrastar arquivos	scp (comando)	Drag and drop na barra lateral

Agora que estamos conectados na VPS pelo VS Code, vamos instalar tudo que o servidor precisa. Abra o terminal do VS Code (Ctrl+') — ele já está executando na VPS.

S3.1 Atualizando o Sistema

# Atualiza a lista de pacotes e instala atualizações
apt update && apt upgrade -y

S3.2 Instalando o Node.js

# Adiciona o repositório oficial do Node.js 20
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -

# Instala o Node.js (npm vem junto)
apt install -y nodejs

# Verifica as versões
node -v    # v20.x.x
npm -v     # 10.x.x

Comando	O que faz
curl -fsSL ... | bash -	Baixa o script de instalação e executa direto
apt install -y nodejs	Instala o Node.js e o npm
node -v	Mostra a versão do Node.js instalada

S3.3 Instalando o MySQL

# Instala o servidor MySQL
apt install -y mysql-server

# Verifica se está rodando
systemctl status mysql

Se aparecer active (running) em verde, o MySQL está funcionando.

# Entra no MySQL
mysql

Configurando senha para o MySQL

Dentro do MySQL, execute:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'SuaSenhaForte123!';
FLUSH PRIVILEGES;
exit;

S3.4 Instalando o Nginx

apt install -y nginx
systemctl status nginx

Teste acessando http://SEU_IP no navegador. Se aparecer "Welcome to nginx!", está funcionando.

S3.5 Instalando o PM2

npm install -g pm2

S3.6 Configurando o Firewall

# Permite SSH (para não perder o acesso!)
ufw allow 22

# Permite HTTP e HTTPS (para o site funcionar)
ufw allow 80
ufw allow 443

# Ativa o firewall
ufw enable

# Verifica
ufw status

Porta	Protocolo	Para que
22	SSH	Seu acesso remoto ao servidor
80	HTTP	Site sem HTTPS (redireciona para 443)
443	HTTPS	Site com certificado SSL (seguro)

Vamos criar o banco de dados da cafeteria. Precisamos de duas tabelas: uma para o cardápio e outra para as mensagens de contato do formulário.

S4.1 Criando o Banco

mysql -u root -p

Digite a senha que você configurou no S3.3. Dentro do MySQL:

CREATE DATABASE cafeteria;
USE cafeteria;

S4.2 Tabela do Cardápio

Vamos criar a tabela que guarda os itens do cardápio. Analise cada coluna:

CREATE TABLE menu_items (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nome VARCHAR(100) NOT NULL,
  descricao VARCHAR(255),
  preco DECIMAL(10,2) NOT NULL,
  categoria ENUM('cafes', 'doces', 'salgados', 'bebidas') NOT NULL,
  imagem_url VARCHAR(500),
  destaque TINYINT(1) DEFAULT 0,
  ativo TINYINT(1) DEFAULT 1,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

S4.3 Tabela de Contatos

Quando alguém preencher o formulário de contato no site, a mensagem será salva nesta tabela:

CREATE TABLE contatos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nome VARCHAR(100) NOT NULL,
  email VARCHAR(150) NOT NULL,
  telefone VARCHAR(20),
  mensagem TEXT NOT NULL,
  lido TINYINT(1) DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

S4.4 Inserindo Dados do Cardápio

Vamos popular o cardápio com 10 itens de exemplo. O INSERT usa a sintaxe VALUES (...), (...), (...) para inserir vários registros de uma vez:

-- Formato: (nome, descrição, preço, categoria, URL da imagem, destaque?)
INSERT INTO menu_items (nome, descricao, preco, categoria, imagem_url, destaque) VALUES
('Espresso', 'Café puro e encorpado, extraído na hora', 8.90, 'cafes', 'https://images.unsplash.com/photo-1510707577719-ae7c14805e3a?w=400', 1),
('Cappuccino', 'Espresso com leite vaporizado e espuma cremosa', 12.90, 'cafes', 'https://images.unsplash.com/photo-1572442388796-11668a67e53d?w=400', 1),
('Latte', 'Café com leite cremoso e toque de baunilha', 14.90, 'cafes', 'https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=400', 1),
('Mocha', 'Espresso com chocolate e chantilly', 16.90, 'cafes', 'https://images.unsplash.com/photo-1578314675249-a6910f80cc4e?w=400', 0),
('Pão de Queijo', 'Quentinho, direto do forno mineiro', 6.90, 'salgados', 'https://images.unsplash.com/photo-1598142982901-df6cec890505?w=400', 1),
('Croissant', 'Folhado amanteigado crocante por fora, macio por dentro', 9.90, 'salgados', 'https://images.unsplash.com/photo-1555507036-ab1f4038024a?w=400', 0),
('Bolo de Cenoura', 'Com cobertura generosa de chocolate', 11.90, 'doces', 'https://images.unsplash.com/photo-1621303837174-89787a7d4729?w=400', 1),
('Brownie', 'Chocolate intenso com nozes crocantes', 13.90, 'doces', 'https://images.unsplash.com/photo-1606313564200-e75d5e30476c?w=400', 0),
('Suco Natural', 'Laranja, limão ou maracujá — feito na hora', 10.90, 'bebidas', 'https://images.unsplash.com/photo-1621506289937-a8e4df240d0b?w=400', 0),
('Chá Gelado', 'Pêssego ou frutas vermelhas, refrescante', 9.90, 'bebidas', 'https://images.unsplash.com/photo-1556679343-c7306c1976bc?w=400', 0);

Verifique se os dados foram inseridos:

SELECT nome, preco, categoria, destaque FROM menu_items;

O backend é o "garçom" entre o site e o banco de dados. O React (frontend) pede os dados do cardápio, o Express (backend) busca no MySQL e devolve.

S5.1 Criando o Projeto

No terminal do VS Code (conectado na VPS):

mkdir -p /root/cafeteria/backend
cd /root/cafeteria/backend
npm init -y
npm install express mysql2 cors dotenv

Pacote	Para que serve
express	Framework web — cria rotas (GET, POST) e gerencia requisições
mysql2	Driver para conectar ao MySQL com suporte a Promises
cors	Permite que o frontend (porta 5173) fale com o backend (porta 3737)
dotenv	Carrega variáveis do arquivo .env (senhas, configs)

S5.2 Arquivo .env

Crie o arquivo /root/cafeteria/backend/.env:

PORT=3737
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=SuaSenhaForte123!
DB_NAME=cafeteria

S5.3 server.js — O Coração do Backend

Crie /root/cafeteria/backend/server.js. Vamos construir trecho por trecho, explicando cada parte.

Passo 1 — Imports e configuração inicial

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const mysql = require('mysql2/promise');

Passo 2 — Criando o app e ativando middlewares

const app = express();
app.use(cors());
app.use(express.json());

Passo 3 — Conectando ao MySQL (Pool)

const pool = mysql.createPool({
  host: process.env.DB_HOST,         // localhost
  user: process.env.DB_USER,         // root
  password: process.env.DB_PASSWORD, // do .env
  database: process.env.DB_NAME,     // cafeteria
  waitForConnections: true,
  connectionLimit: 10,
});

Passo 4 — Rota de Health Check

app.get('/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date() });
});

Passo 5 — Rota GET /api/menu (listar cardápio)

app.get('/api/menu', async (req, res) => {
  try {
    const [rows] = await pool.query(
      'SELECT id, nome, descricao, preco, categoria, imagem_url, destaque FROM menu_items WHERE ativo = 1 ORDER BY categoria, nome'
    );
    res.json({ success: true, data: rows });
  } catch (error) {
    res.status(500).json({ success: false, error: 'Erro ao buscar cardápio' });
  }
});

Passo 6 — Rota GET /api/menu/destaques

app.get('/api/menu/destaques', async (req, res) => {
  try {
    const [rows] = await pool.query(
      'SELECT id, nome, descricao, preco, categoria, imagem_url FROM menu_items WHERE ativo = 1 AND destaque = 1'
    );
    res.json({ success: true, data: rows });
  } catch (error) {
    res.status(500).json({ success: false, error: 'Erro ao buscar destaques' });
  }
});

Passo 7 — Rota POST /api/contato (formulário)

app.post('/api/contato', async (req, res) => {
  try {
    const { nome, email, telefone, mensagem } = req.body;

    // Validação — campos obrigatórios
    if (!nome || !email || !mensagem) {
      return res.status(400).json({
        success: false,
        error: 'Nome, email e mensagem são obrigatórios',
      });
    }

    // Insere no banco com placeholders (?) contra SQL injection
    await pool.query(
      'INSERT INTO contatos (nome, email, telefone, mensagem) VALUES (?, ?, ?, ?)',
      [nome, email, telefone || null, mensagem]
    );

    res.status(201).json({ success: true, message: 'Mensagem enviada com sucesso!' });
  } catch (error) {
    res.status(500).json({ success: false, error: 'Erro ao enviar mensagem' });
  }
});

Passo 8 — Iniciando o servidor

const PORT = process.env.PORT || 3737;
app.listen(PORT, () => {
  console.log(`Servidor rodando na porta ${PORT}`);
});

S5.4 Testando o Backend

cd /root/cafeteria/backend
node server.js

# Em outro terminal (Ctrl+Shift+' no VS Code)
curl http://localhost:3737/health
curl http://localhost:3737/api/menu
curl http://localhost:3737/api/menu/destaques

Teste o formulário de contato:

curl -X POST http://localhost:3737/api/contato \
  -H "Content-Type: application/json" \
  -d '{"nome":"João","email":"joao@teste.com","mensagem":"Adorei o café!"}'

Agora vamos criar a parte visual — uma landing page profissional e bonita para a cafeteria. Vamos construir seção por seção, explicando cada componente, cada biblioteca e cada técnica usada.

S6.1 Criando o Projeto React

cd /root/cafeteria
npm create vite@latest frontend -- --template react-ts
cd frontend
npm install

Instalando as Bibliotecas

# Tailwind CSS — estilização por classes utilitárias
npm install -D tailwindcss @tailwindcss/vite

# Lucide React — biblioteca de ícones SVG
npm install lucide-react

Configurando o Vite

Edite vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    proxy: {
      '/api': 'http://localhost:3737',  // redireciona /api para o backend
    },
  },
})

Substitua o conteúdo de src/index.css:

@import "tailwindcss";

S6.2 Design — Paleta de Cores, Tipografia e Estrutura

Antes de escrever código, vamos entender os princípios de design que fazem uma landing page ser bonita e profissional.

Paleta de Cores

Toda landing page profissional usa uma paleta de cores consistente. Escolhemos cores que transmitam a identidade do negócio:

Tipografia — Hierarquia Visual

O tamanho e peso da fonte criam uma hierarquia que guia o olho do visitante:

Classe Tailwind	Tamanho	Peso	Onde usamos
text-5xl md:text-7xl font-bold	72px	Bold (700)	Título principal do Hero — maior texto da página
text-3xl font-bold	30px	Bold (700)	Títulos de seção (Destaques, Cardápio, Sobre, Contato)
text-xl font-bold	20px	Bold (700)	Logo "Café Aroma" na navbar
text-lg font-bold	18px	Bold (700)	Nomes dos produtos nos cards
text-sm	14px	Normal (400)	Links, descrições, subtítulos
text-xs uppercase tracking-[3px]	12px	Normal	Labels de seção ("Favoritos da Casa", "Explore")

Entendendo as Classes do Tailwind

No Tailwind, cada classe faz uma coisa só. Vamos aprender a ler uma combinação complexa:

// Exemplo: botão CTA do Hero
className="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 text-white px-8 py-3.5 rounded-full text-sm font-semibold transition shadow-lg"

Responsividade — Mobile First

O Tailwind usa a abordagem mobile first: as classes sem prefixo valem para celular, e os prefixos (md:, lg:) adicionam regras para telas maiores:

Prefixo	Largura mínima	Equivale a	Dispositivo
(nenhum)	0px	Padrão	Celular
sm:	640px	@media (min-width: 640px)	Celular grande
md:	768px	@media (min-width: 768px)	Tablet
lg:	1024px	@media (min-width: 1024px)	Desktop
xl:	1280px	@media (min-width: 1280px)	Desktop grande

Exemplo prático dos nossos cards de destaque:

// Grid que se adapta ao tamanho da tela
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"

// Leitura:
// Celular (< 768px):  1 coluna   → cards empilhados
// Tablet  (≥ 768px):  2 colunas  → cards lado a lado
// Desktop (≥ 1024px): 4 colunas  → todos visíveis

// Texto que muda de tamanho
className="text-5xl md:text-7xl font-bold"

// Celular: text-5xl (48px) — cabe na tela pequena
// Desktop: text-7xl (72px) — aproveita o espaço maior

Hover, Transições e Animações

Efeitos visuais dão feedback ao usuário e tornam a página viva. O Tailwind facilita com prefixos:

Classe	O que faz	Onde usamos
hover:bg-amber-700	Muda a cor ao passar o mouse	Botões
hover:shadow-xl	Aumenta a sombra — sensação de "levantar"	Cards
hover:text-amber-400	Muda cor do texto no hover	Links da navbar
group-hover:scale-110	Zoom de 110% quando o card pai recebe hover	Imagens dos destaques
transition	Anima a mudança suavemente (150ms padrão)	Tudo que tem hover
transition-all duration-300	Anima tudo com duração de 300ms	Cards com múltiplos efeitos
transition-transform duration-500	Anima só o transform (zoom) em 500ms	Zoom lento da imagem

Anatomia de uma Landing Page Profissional

Uma LP eficiente segue uma estrutura psicológica que guia o visitante do interesse até a ação:

Imagens — Unsplash e Otimização

S6.3 Estrutura do App.tsx — Imports e Estado

Apague todo o conteúdo de src/App.tsx. Vamos construir a landing page parte por parte. Comece com os imports e o estado:

// src/App.tsx — Parte 1: Imports e Estado
import { useState, useEffect } from 'react';
import { Coffee, Phone, Mail, MapPin, Clock, Send, ChevronDown, Instagram, Facebook } from 'lucide-react';

// Interface TypeScript — define o formato de um item do cardápio
interface MenuItem {
  id: number;
  nome: string;
  descricao: string;
  preco: number;
  categoria: string;
  imagem_url: string;
  destaque: number;
}

export default function App() {
  // Estado — dados que mudam e fazem a tela atualizar
  const [menu, setMenu] = useState<MenuItem[]>([]);        // todos os itens
  const [destaques, setDestaques] = useState<MenuItem[]>([]); // itens em destaque
  const [nome, setNome] = useState('');        // campos do formulário
  const [email, setEmail] = useState('');
  const [telefone, setTelefone] = useState('');
  const [mensagem, setMensagem] = useState('');
  const [enviado, setEnviado] = useState(false);       // feedback de envio
  const [filtro, setFiltro] = useState('todos');     // filtro de categoria

  // useEffect — executa quando o componente carrega (1 vez)
  useEffect(() => {
    fetch('/api/menu').then(r => r.json()).then(d => setMenu(d.data));
    fetch('/api/menu/destaques').then(r => r.json()).then(d => setDestaques(d.data));
  }, []);

  // Função para enviar o formulário de contato
  const handleContato = async (e: React.FormEvent) => {
    e.preventDefault();
    await fetch('/api/contato', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ nome, email, telefone, mensagem }),
    });
    setEnviado(true);
    setNome(''); setEmail(''); setTelefone(''); setMensagem('');
    setTimeout(() => setEnviado(false), 4000);
  };

  // Filtro de categorias — se 'todos', mostra tudo
  const menuFiltrado = filtro === 'todos' ? menu : menu.filter(i => i.categoria === filtro);

  return (
    <div className="min-h-screen bg-stone-50">

S6.4 Navbar — Barra de Navegação Fixa

A navbar fica fixa no topo com backdrop blur (efeito de vidro fosco). Os links são âncoras que rolam suavemente até cada seção:

      {/* ===== NAVBAR — fixa no topo com efeito glassmorphism ===== */}
      <nav className="fixed top-0 w-full bg-stone-900/95 backdrop-blur-sm z-50 border-b border-stone-800">
        <div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Coffee className="text-amber-400" size={28} />
            <span className="text-xl font-bold text-white">Café Aroma</span>
          </div>
          <div className="hidden md:flex gap-8 text-stone-300 text-sm">
            <a href="#inicio" className="hover:text-amber-400 transition">Início</a>
            <a href="#cardapio" className="hover:text-amber-400 transition">Cardápio</a>
            <a href="#sobre" className="hover:text-amber-400 transition">Sobre</a>
            <a href="#contato" className="hover:text-amber-400 transition">Contato</a>
          </div>
        </div>
      </nav>

S6.5 Hero — Seção de Abertura Impactante

O hero ocupa a tela inteira com uma foto de fundo escurecida (overlay) e um CTA (Call to Action):

      {/* ===== HERO — tela inteira com imagem de fundo e overlay escuro ===== */}
      <section id="inicio" className="relative h-screen flex items-center justify-center text-center text-white">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=1920')] bg-cover bg-center">
          <div className="absolute inset-0 bg-stone-900/70" />
        </div>
        <div className="relative z-10 max-w-3xl px-6">
          <p className="text-amber-400 text-sm tracking-[4px] uppercase mb-4">Bem-vindo ao</p>
          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">Café Aroma</h1>
          <p className="text-lg md:text-xl text-stone-300 mb-10 max-w-xl mx-auto">
            Cada xícara conta uma história. Grãos selecionados, torrados com carinho, servidos com paixão desde 2020.
          </p>
          <a href="#cardapio" className="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 text-white px-8 py-3.5 rounded-full text-sm font-semibold transition shadow-lg">
            Ver Cardápio <ChevronDown size={18} />
          </a>
        </div>
      </section>

S6.6 Destaques — Cards com Hover Animado

Mostra os 4 produtos marcados como destaque no banco de dados. Cada card tem imagem com zoom no hover:

      {/* ===== DESTAQUES — cards com imagem, zoom hover e sombra ===== */}
      <section className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <p className="text-amber-600 text-sm tracking-[3px] uppercase text-center mb-2">Favoritos da Casa</p>
          <h2 className="text-3xl font-bold text-stone-800 text-center mb-12">Nossos Destaques</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {destaques.map(item => (
              <div key={item.id} className="group bg-stone-50 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300">
                <div className="h-48 overflow-hidden">
                  <img src={item.imagem_url} alt={item.nome}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                </div>
                <div className="p-5">
                  <h3 className="font-bold text-stone-800 text-lg">{item.nome}</h3>
                  <p className="text-stone-500 text-sm mt-1 mb-3">{item.descricao}</p>
                  <p className="text-amber-600 font-bold text-lg">R$ {item.preco.toFixed(2)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

S6.7 Cardápio Completo — Filtro por Categoria

Seção com botões de filtro (todos, cafés, doces, salgados, bebidas) e cards horizontais com imagem lateral:

      {/* ===== CARDÁPIO — filtro por categoria + cards horizontais ===== */}
      <section id="cardapio" className="py-20 bg-stone-100">
        <div className="max-w-6xl mx-auto px-6">
          <p className="text-amber-600 text-sm tracking-[3px] uppercase text-center mb-2">Explore</p>
          <h2 className="text-3xl font-bold text-stone-800 text-center mb-8">Cardápio Completo</h2>

          {/* Botões de filtro */}
          <div className="flex justify-center gap-3 mb-10 flex-wrap">
            {['todos', 'cafes', 'doces', 'salgados', 'bebidas'].map(cat => (
              <button key={cat} onClick={() => setFiltro(cat)}
                className={`px-5 py-2 rounded-full text-sm font-medium transition ${
                  filtro === cat
                    ? 'bg-amber-600 text-white'
                    : 'bg-white text-stone-600 hover:bg-stone-200'
                }`}>
                {cat === 'todos' ? 'Todos' : cat.charAt(0).toUpperCase() + cat.slice(1)}
              </button>
            ))}
          </div>

          {/* Grid de cards do cardápio */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {menuFiltrado.map(item => (
              <div key={item.id} className="flex gap-4 bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition">
                <img src={item.imagem_url} alt={item.nome}
                  className="w-24 h-24 rounded-lg object-cover flex-shrink-0" />
                <div>
                  <h3 className="font-bold text-stone-800">{item.nome}</h3>
                  <p className="text-stone-500 text-sm mt-0.5">{item.descricao}</p>
                  <p className="text-amber-600 font-bold mt-2">R$ {item.preco.toFixed(2)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

S6.8 Sobre — Layout Dois Colunas com Estatísticas

Seção com foto à esquerda e texto + números à direita. Layout de duas colunas usando grid:

      {/* ===== SOBRE — imagem + texto lado a lado com estatísticas ===== */}
      <section id="sobre" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div>
            <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600" alt="Interior"
              className="rounded-2xl shadow-lg w-full h-80 object-cover" />
          </div>
          <div>
            <p className="text-amber-600 text-sm tracking-[3px] uppercase mb-2">Nossa História</p>
            <h2 className="text-3xl font-bold text-stone-800 mb-6">Paixão em cada grão</h2>
            <p className="text-stone-600 mb-4 leading-relaxed">
              O Café Aroma nasceu em 2020, no coração da cidade, com um sonho simples: servir o melhor café
              que você já provou. Selecionamos grãos de pequenos produtores brasileiros, torramos artesanalmente
              e preparamos cada xícara com o cuidado que ela merece.
            </p>
            <p className="text-stone-600 mb-6 leading-relaxed">
              Nosso espaço foi pensado para ser seu refúgio — venha trabalhar, estudar, encontrar amigos ou
              simplesmente apreciar um bom café em paz.
            </p>
            <div className="flex gap-8">
              <div>
                <p className="text-3xl font-bold text-amber-600">5+</p>
                <p className="text-stone-500 text-sm">Anos de história</p>
              </div>
              <div>
                <p className="text-3xl font-bold text-amber-600">10k+</p>
                <p className="text-stone-500 text-sm">Clientes felizes</p>
              </div>
              <div>
                <p className="text-3xl font-bold text-amber-600">50k+</p>
                <p className="text-stone-500 text-sm">Cafés servidos</p>
              </div>
            </div>
          </div>
        </div>
      </section>

S6.9 Contato — Formulário Funcional + Cards de Info

Esta seção é dividida em duas colunas: informações de contato à esquerda e formulário à direita. Vamos construir cada parte:

Parte 1 — Abertura da seção e layout em grid

      {/* ===== CONTATO — fundo escuro, 2 colunas ===== */}
      <section id="contato" className="py-20 bg-stone-900 text-white">
        <div className="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12">

Parte 2 — Cards de informações de contato (coluna esquerda)

          {/* Lado esquerdo — informações de contato */}
          <div>
            <p className="text-amber-400 text-sm tracking-[3px] uppercase mb-2">Fale Conosco</p>
            <h2 className="text-3xl font-bold mb-8">Entre em Contato</h2>
            <div className="space-y-6">

              {/* Card de informação — cada um segue o mesmo padrão */}
              <div className="flex items-center gap-4">
                <div className="bg-amber-600/20 p-3 rounded-full">
                  <MapPin className="text-amber-400" size={22} />
                </div>
                <div>
                  <p className="font-medium">Endereço</p>
                  <p className="text-stone-400 text-sm">Rua do Café, 123 — Centro</p>
                </div>
              </div>

              {/* Repita o mesmo padrão para os outros 3: */}
              <div className="flex items-center gap-4">
                <div className="bg-amber-600/20 p-3 rounded-full"><Phone className="text-amber-400" size={22} /></div>
                <div><p className="font-medium">Telefone</p><p className="text-stone-400 text-sm">(22) 99999-0000</p></div>
              </div>
              <div className="flex items-center gap-4">
                <div className="bg-amber-600/20 p-3 rounded-full"><Clock className="text-amber-400" size={22} /></div>
                <div><p className="font-medium">Horário</p><p className="text-stone-400 text-sm">Seg-Sáb: 7h–20h | Dom: 8h–14h</p></div>
              </div>
              <div className="flex items-center gap-4">
                <div className="bg-amber-600/20 p-3 rounded-full"><Mail className="text-amber-400" size={22} /></div>
                <div><p className="font-medium">Email</p><p className="text-stone-400 text-sm">contato@cafearoma.com.br</p></div>
              </div>

            </div>
          </div>

Parte 3 — Formulário funcional (coluna direita)

          {/* Lado direito — formulário */}
          <div>
            {enviado ? (
              {/* Mensagem de sucesso (aparece por 4 segundos) */}
              <div className="bg-green-600/20 border border-green-500/30 rounded-2xl p-8 text-center">
                <p className="text-green-400 text-xl font-bold mb-2">Mensagem enviada!</p>
                <p className="text-stone-400">Retornaremos em breve.</p>
              </div>
            ) : (
              {/* Formulário — cada input é um controlled component */}
              <form onSubmit={handleContato} className="space-y-4">
                <input value={nome} onChange={e => setNome(e.target.value)} required
                  placeholder="Seu nome"
                  className="w-full bg-stone-800 border border-stone-700 rounded-xl px-5 py-3 text-white placeholder-stone-500 focus:border-amber-500 focus:outline-none" />
                <input value={email} onChange={e => setEmail(e.target.value)} required type="email"
                  placeholder="Seu email"
                  className="w-full bg-stone-800 border border-stone-700 rounded-xl px-5 py-3 text-white placeholder-stone-500 focus:border-amber-500 focus:outline-none" />
                <input value={telefone} onChange={e => setTelefone(e.target.value)}
                  placeholder="Telefone (opcional)"
                  className="w-full bg-stone-800 border border-stone-700 rounded-xl px-5 py-3 text-white placeholder-stone-500 focus:border-amber-500 focus:outline-none" />
                <textarea value={mensagem} onChange={e => setMensagem(e.target.value)} required rows={4}
                  placeholder="Sua mensagem..."
                  className="w-full bg-stone-800 border border-stone-700 rounded-xl px-5 py-3 text-white placeholder-stone-500 focus:border-amber-500 focus:outline-none resize-none" />
                <button type="submit"
                  className="w-full bg-amber-600 hover:bg-amber-700 text-white py-3.5 rounded-xl font-semibold flex items-center justify-center gap-2 transition">
                  Enviar Mensagem <Send size={18} />
                </button>
              </form>
            )}
          </div>
        </div>
      </section>

S6.10 Footer — Rodapé com Redes Sociais

Rodapé simples e elegante com logo, copyright e ícones de redes sociais:

      {/* ===== FOOTER — logo, copyright e redes sociais ===== */}
      <footer className="bg-stone-950 text-stone-500 py-10">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-2">
            <Coffee className="text-amber-400" size={20} />
            <span className="text-white font-bold">Café Aroma</span>
          </div>
          <p className="text-sm">&copy; 2026 Café Aroma. Todos os direitos reservados.</p>
          <div className="flex gap-4">
            <a href="#" className="hover:text-amber-400 transition"><Instagram size={20} /></a>
            <a href="#" className="hover:text-amber-400 transition"><Facebook size={20} /></a>
          </div>
        </div>
      </footer>

    </div>  {/* fecha min-h-screen */}
  );
}

S6.11 Testando Localmente

# Terminal 1 — Backend
cd /root/cafeteria/backend
node server.js

# Terminal 2 — Frontend
cd /root/cafeteria/frontend
npm run dev -- --host 0.0.0.0

Acesse http://SEU_IP:5173 no navegador. Você deve ver a landing page com o cardápio carregado do banco.

S6.12 Personalizando para Seu Negócio

Essa landing page foi construída para uma cafeteria, mas a mesma estrutura serve para qualquer negócio. Aqui está como adaptar:

Trocando as Cores (2 minutos)

Basta trocar amber e stone por outras paletas do Tailwind em todo o App.tsx:

Negócio	Cor principal	Cor de fundo	Visual
Clínica / Dentista	blue	slate	Profissional, confiança
Loja de Plantas	green	stone	Natural, orgânico
Barbearia	orange	zinc	Masculino, urbano
Tech / SaaS	violet	zinc	Moderno, inovador
Restaurante	red	neutral	Apetitoso, quente
Pet Shop	teal	slate	Carinhoso, limpo
Academia	lime	zinc	Energia, saúde

Adaptando o Conteúdo

Seção	O que mudar
Navbar	Troque o ícone <Coffee /> por outro do Lucide (ex: <Scissors /> para barbearia, <Heart /> para clínica)
Hero	Troque a imagem de fundo (Unsplash), o título e o texto. Mude o CTA para sua ação principal
Destaques	Seus 3-4 produtos/serviços mais vendidos. Troque nomes, descrições e imagens
Cardápio	Renomeie para "Serviços", "Produtos" ou "Planos". Mude as categorias no ENUM do banco
Sobre	Sua história real. Troque números e a foto do interior do negócio
Contato	Seu endereço, telefone, email e horário reais

Adaptando o Banco de Dados

Para outro tipo de negócio, renomeie a tabela e mude as categorias:

-- Exemplo: Barbearia
CREATE TABLE servicos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nome VARCHAR(100) NOT NULL,
  descricao VARCHAR(255),
  preco DECIMAL(10,2) NOT NULL,
  categoria ENUM('cortes', 'barba', 'combos', 'tratamentos') NOT NULL,
  imagem_url VARCHAR(500),
  destaque TINYINT(1) DEFAULT 0,
  ativo TINYINT(1) DEFAULT 1,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

O site está funcionando com npm run dev, mas isso é só para desenvolvimento. Para produção, precisamos fazer o build (gerar arquivos estáticos) e configurar o Nginx para servir o site.

S7.1 Build do Frontend

cd /root/cafeteria/frontend
npm run build

Isso cria a pasta dist/ com arquivos HTML, CSS e JS minificados — prontos para servir.

S7.2 Subindo o Backend com PM2

cd /root/cafeteria/backend
pm2 start server.js --name cafeteria-api
pm2 save
pm2 startup

Comando	O que faz
pm2 start server.js --name cafeteria-api	Inicia o backend com o nome "cafeteria-api"
pm2 save	Salva a lista de processos — será restaurada após reboot
pm2 startup	Configura o PM2 para iniciar automaticamente quando o servidor ligar

S7.3 Configurando o Nginx

Agora vamos dizer ao Nginx: "sirva os arquivos do React e redirecione as chamadas /api para o Node.js".

Crie o arquivo de configuração:

nano /etc/nginx/sites-available/cafeteria

Vamos construir o arquivo bloco por bloco, explicando cada diretiva:

Bloco 1 — Abertura do server e configuração básica

server {
    listen 80;
    server_name SEU_IP;   # Depois troque pelo domínio

    root /root/cafeteria/frontend/dist;
    index index.html;
}

Bloco 2 — Proxy reverso para a API (Node.js)

    # Quando acessar /api/* → redireciona para o Node.js
    location /api/ {
        proxy_pass http://127.0.0.1:3737/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

Bloco 3 — SPA fallback (obrigatório para React)

    # Qualquer outra URL → devolve o index.html do React
    location / {
        try_files $uri $uri/ /index.html;
    }

Bloco 4 — Cache para arquivos estáticos

    # Imagens, CSS e JS ficam em cache por 30 dias
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

Ativando o site

# Cria o link simbólico (ativa o site)
ln -s /etc/nginx/sites-available/cafeteria /etc/nginx/sites-enabled/

# Remove o site padrão do Nginx (aquele "Welcome to nginx")
rm /etc/nginx/sites-enabled/default

# Testa a configuração (deve mostrar "syntax is ok")
nginx -t

# Recarrega o Nginx
systemctl reload nginx

Agora acesse http://SEU_IP no navegador. O site da cafeteria deve aparecer!

O site está no ar, mas só com IP. Vamos colocar um domínio bonito e HTTPS (cadeado verde).

S8.1 Registrando um Domínio

S8.2 Configurando o DNS

No painel do provedor de domínio, crie um registro tipo A:

Campo	Valor
Tipo	A
Nome/Host	@ (ou vazio — significa o domínio principal)
Valor/Aponta para	154.62.109.73 (o IP da sua VPS)
TTL	300 (ou o menor disponível)

Atualizando o Nginx com o domínio

Edite o arquivo /etc/nginx/sites-available/cafeteria e troque server_name:

server_name cafearoma.com.br;

nginx -t && systemctl reload nginx

S8.3 Instalando SSL (HTTPS) com Let's Encrypt

# Instala o Certbot
apt install -y certbot python3-certbot-nginx

# Gera o certificado SSL (gratuito!)
certbot --nginx -d cafearoma.com.br

O Certbot vai:

1. Verificar que o domínio aponta para seu IP
2. Gerar o certificado SSL
3. Configurar o Nginx automaticamente para usar HTTPS
4. Redirecionar HTTP → HTTPS

Teste acessando https://cafearoma.com.br — deve aparecer o cadeado verde e o site completo.