# Maison — Loja online editorial

Loja de moda minimalista, estilo revista (Zara / Zara Home / H&M), construída em
**HTML + CSS + JavaScript puro**, sem framework nem build step.

## Como abrir

Basta abrir `index.html` no browser. Para que os `fetch`/módulos e caminhos
funcionem de forma idêntica a produção, recomenda-se servir localmente:

```bash
cd loja
python3 -m http.server 8000
# abrir http://localhost:8000
```

## Estrutura

```
loja/
├── index.html          # Homepage: hero fullscreen + seleção Homem/Mulher/Criança + faixa editorial "negativo"
├── produtos.html       # Listagem (lê ?cat=), grelha editorial desenquadrada, hover troca de imagem
├── produto.html        # Single (lê ?id=), slider de imagens, cores, tamanhos, preço, relacionados
├── css/style.css       # Design system completo + animações
├── js/
│   ├── products.js     # "Base de dados" mock dos produtos (window.STORE)
│   ├── app.js          # Loader de transição, header, reveals ao scroll
│   ├── listing.js      # Render da listagem + SEO dinâmico
│   └── product.js      # Render do single + slider + SEO/JSON-LD
├── robots.txt
└── sitemap.xml
```

## Decisões de design

- **Estética revista**: tipografia serif de grande escala, títulos editoriais,
  numeração (Nº01…), muito espaço branco, paleta off-white "papel".
- **Layouts desenquadrados mas coerentes**: grelha de 12 colunas com cards de
  spans variáveis (`wide`/`tall`/`offset`/`normal`) e desalinhamentos rítmicos —
  sem larguras/grelhas rígidas, mantendo o alinhamento base.
- **"Negativos" fotográficos**: as imagens surgem a preto-e-branco/invertidas e
  revelam cor no hover (`filter: invert / grayscale`). Há uma faixa editorial
  dedicada na homepage.
- **Loading bonito e simples**: cortina animada (palavra + barra de progresso)
  na transição entre a seleção de categoria e a listagem — pura CSS/JS.
- **Listagem**: uma segunda imagem aparece no hover de cada produto.

## SEO & Performance (boas práticas aplicadas)

- HTML semântico (`header`, `main`, `nav`, `article`, headings hierárquicos).
- Meta tags + Open Graph/Twitter; `canonical` por página (dinâmico nas de produto).
- **JSON-LD**: `Store`, `CollectionPage`, `Product` e `BreadcrumbList`.
- `robots.txt` + `sitemap.xml`.
- Imagens com `width`/`height` (evita CLS), `loading="lazy"`/`decoding="async"`,
  `fetchpriority="high"` + `preload` no LCP, `preconnect` ao CDN de imagens.
- Zero dependências externas de JS → carregamento rápido; respeita
  `prefers-reduced-motion`; navegação por teclado e `focus-visible`.

## Notas para produção

- As imagens usam `picsum.photos` como placeholder — substituir por assets reais
  em `assets/` (o hero suporta `<video>`, ver comentário em `index.html`).
- As páginas de listagem/produto renderizam no cliente. Para SEO máximo com muitos
  produtos, gerar HTML estático (pré-render/SSG) por produto no deploy.
