# Buenas-New

Recriação em **React (Vite)** do site Buenas Carnes & Pasta, começando pela **Home** com fidelidade pixel-a-pixel ao original WordPress/Elementor.

## Rodar

```bash
npm install
npm run dev      # http://localhost:8091
```

## Como foi feito (Home)

Abordagem **fidelidade-primeiro**: o HTML renderizado + todo o CSS, fontes e imagens
foram capturados do site WordPress rodando localmente (`localhost:8090`) e localizados
em `public/assets/`. A Home é renderizada em `src/App.jsx` a partir de `src/home-body.html`.

Detalhes que precisaram de tratamento (Elementor):
- **CSS inline externalizado** para `public/assets/css/_inline_captured.css` (`<style>` dentro
  de `dangerouslySetInnerHTML` não é aplicado pelo browser).
- **`elementor-invisible`** removido (senão elementos com animação ficam `opacity:0` sem o JS).
- **`e-lazyloaded`** adicionado nos containers `.e-con` (senão o lazy-load do Elementor força
  `background-image:none !important` — era o que deixava as fotos do blog cinzas).

### Recapturar / capturar outras páginas
```bash
python3 tools/capture-home.py   # requer o WP local no ar em localhost:8090
```

## Pendências conhecidas
- **"Nossa clientela aprova"** (avaliações Google) e **"Nos visite"** (mapa) são widgets
  dinâmicos que carregam via API/JS — aparecem vazios no clone estático (igual no original
  sem interação). Reimplementar em React quando for a vez.
- Próximo passo sugerido: **componentizar** seção por seção (hero, cards, blog, footer) em
  JSX/Tailwind limpo, mantendo idêntico, e depois as demais páginas (Sobre, Blog, Contato).

## Estrutura
```
index.html                     # <head> com CSS capturado
src/App.jsx                    # injeta a Home
src/home-body.html             # markup da Home (capturado)
public/assets/{css,img,fonts}  # assets localizados
tools/capture-home.py          # script de captura/recaptura
```
