tema-alinhavo — Astro 电商模板

SHA-256: e2d25dcfd1ce9eb80f1d376e70cdce4deb0d998b80b81faf4e9ac2ed73f3fde3

2026-10-13T01:28:25.516Z

# Alinhavo — loja demo do nicho de moda feminina

Cópia do starter [`ecomplus/store`](https://github.com/ecomplus/store)
tematizada para **moda feminina**. Moda lidera o e-commerce brasileiro em
volume de pedidos, e é a vertical com mais lojas na base atual da plataforma.

> **Diferente das três primeiras variantes, este nicho ainda não existe no site
> institucional.** Não há marca em `src/config/brands.ts` nem página em
> `/segmentos/`. O posicionamento abaixo foi **proposto**, não portado — a base
> foram as lojas de moda que já rodam na plataforma e a auditoria de recursos.
> Nome, logo e domínio são placeholders.

## De onde vem o posicionamento

Lojas de moda feminina já na base: **Don't Quest** (18 anos), **Lado Fit**
(fitness), **Lua Cheia** (homewear), **Todoverde** (atacado, Brás),
**Vestizze**. Todas vendem peça com grade — e grade é onde a conversão vaza.

O eixo escolhido é **tamanho, não tendência**: errar o número é a maior causa
de devolução em moda online e o maior motivo de abandono em peça de grade.
Toda a seção de nicho gira em torno disso.

Vale notar: **Lado Rosa + Lado Fit já é o case de duas marcas no mesmo
backend** que o material de beleza usa como prova emprestada. Em moda ele deixa
de ser emprestado e vira prova do próprio nicho.

## O que foi customizado em relação ao starter

| Arquivo | O que mudou |
|---|---|
| `functions/ssr/content/settings.json` | Nome, descrição, domínio, logo/ícone, `primaryColor` quase-preto quente + `secondaryColor` camel, 5% no Pix, 6x sem juros, frete grátis a partir de R$ 299 |
| `functions/ssr/tailwind.config.js` | Escala neutra greige, canto reto (`borderRadius: 0`) |
| `functions/ssr/content/layout.json` | Pitch bar (troca de tamanho, frete, Pix), listas do rodapé, `ogImage` |
| `functions/ssr/content/pages/home.json` | Hero de 2 slides, 3 vitrines, grade de 3 banners e a seção de nicho |
| `functions/ssr/src/sections/NichoModaFemininaSection.astro` | **Novo.** Navegação por ocasião, tabela de grade em centímetros, garantias de medida e chamada de troca grátis |
| `functions/ssr/src/sections/_Sections.astro` | Registro da seção `c:nicho-moda-feminina` |
| `functions/ssr/content/extra-pages/` | Contato, trocas (troca de tamanho, lacre de higiene) e termos em PT-BR |
| `functions/ssr/public/img/uploads/` | Banners do Unsplash; imagens do starter removidas. Créditos em `CREDITOS.md` |

## Por que a cor primária é quase-preta

Nas outras variantes a primária é uma cor viva. Aqui não: **em moda a foto é o
produto**, e vitrine colorida disputa atenção com ela. O camel entra como
`secondary`, para preço e destaque. É uma decisão de nicho, não preguiça de
paleta.

## Por que a seção de nicho é um componente, e não HTML no CMS

O UnoCSS/Tailwind desta stack varre apenas `./src/**` — classe utilitária
escrita dentro de `content/pages/*.json` (seção `custom-html`) não gera CSS. Por
isso a vitrine do nicho é um `.astro` em `src/sections/`, registrado pela
convenção `c:` que o `_Sections.astro` já previa.

## Rodando

```bash
npm i
npm run dev     # http://localhost:3000
npm run build
```

O catálogo é remoto: sem uma loja E-Com Plus configurada (`npm run setup`), as
vitrines de produto vêm vazias — o hero, os banners e a seção de nicho
renderizam normalmente.

## Pendências conhecidas

- **A tabela de grade é maquete estática.** Não vem do cadastro de produto.
  Ligar de verdade depende de as medidas estarem cadastradas como especificação.
- **"Avise-me quando voltar" não existe.** Depende de fila de reposição por
  variação — é copy de produto proposto, e está marcado no componente.
- Logo e ícone são wordmarks placeholder rasterizados (texto em `<text>`,
  fonte do ambiente que rasteriza). Ao fechar a identidade, vetorizar.
- As rotas (`/s/trabalho`, `/p/medidas`…) só respondem depois que o catálogo
  tiver as categorias correspondentes.
- Sem página `/segmentos/moda` no site institucional para linkar — se a
  hipótese avançar, vale criar a marca em `brands.ts` e a rota `/demo/alinhavo`,
  como já existe para as três primeiras.

## Como atualizar a base da plataforma

Este repositório é uma **casca fina**. O storefront, os componentes e a lógica
de loja moram nos pacotes `@cloudcommerce/*`, não aqui. Atualizar o tema para
uma versão nova da plataforma **não** é fazer merge com o starter
[`ecomplus/store`](https://github.com/ecomplus/store) — é subir a versão das
dependências, exatamente como as lojas em produção fazem: a
[tiasonia](https://www.tiasonia.com.br) tem mais de 260 commits `Update to v`
no próprio repositório e nenhum merge com o starter.

Todos os pacotes `@cloudcommerce/*` andam na mesma versão, na raiz e em cada
grupo de functions (`ssr`, `many`, `with-apps`):

```bash
# 1. ver a versão mais recente e o changelog
npm view @cloudcommerce/cli version
# https://github.com/ecomplus/cloud-commerce/releases

V=2.61.4   # troque pela versão alvo

# 2. raiz
npm i -D @cloudcommerce/cli@$V @cloudcommerce/eslint@$V

# 3. cada grupo de functions
(cd functions/ssr && npm i \
  @cloudcommerce/api@$V @cloudcommerce/firebase@$V @cloudcommerce/ssr@$V \
  @cloudcommerce/i18n@$V @cloudcommerce/storefront@$V @cloudcommerce/types@$V)
(cd functions/many && npm i \
  @cloudcommerce/feeds@$V @cloudcommerce/firebase@$V @cloudcommerce/passport@$V)
(cd functions/with-apps && npm i \
  @cloudcommerce/events@$V @cloudcommerce/firebase@$V @cloudcommerce/modules@$V)

# 4. validar antes de commitar
npm run build

# 5. commitar no padrão das lojas em produção
git commit -am "Update to v$V"
```

Se o build quebrar depois de atualizar, a correção pertence ao
[`cloud-commerce`](https://github.com/ecomplus/cloud-commerce), não a este
repositório. Aqui só entra o que é **do tema**: `functions/ssr/src/`,
`functions/ssr/content/` e `functions/ssr/public/`.

## Este repositório é um template

Use **"Use this template"** no GitHub para começar uma loja a partir deste tema.
O repositório gerado é independente: não existe upstream para puxar, e a
manutenção segue o fluxo de versão acima.

Antes de ir ao ar, troque o que é placeholder:

- `functions/ssr/content/settings.json` — nome, domínio, logo, cores, contato
- `functions/ssr/public/img/uploads/` — logo, ícone e banners (as fotos atuais
  vêm do Unsplash; créditos em `CREDITOS.md`)
- `functions/ssr/content/extra-pages/` — contato, trocas e termos
- `functions/ssr/public/robots.txt` — hoje bloqueia tudo, porque a demo é
  `noindex`
- `functions/*/config.json` — `storeId` e projeto Firebase (`npm run setup`)

> **Demo publicada:** [tema-alinhavo.web.app](https://tema-alinhavo.web.app) — `noindex`, com
> catálogo compartilhado de demonstração.

---

Documentação do starter: [SETUP.pt-BR.md](./SETUP.pt-BR.md) ·
[Cloud Commerce](https://github.com/ecomplus/cloud-commerce)