# Site Fit Food Ultracongelados — proposta de layout HTML, CSS e JavaScript puros. Sem build, sem dependência, sem framework. Abra `index.html` no navegador para ver funcionando. --- ## Arquivos ``` site/ ├─ index.html Home ├─ cardapio.html Cardápio completo, com busca e filtros ├─ planos.html Planos, calculadora de preço e linha Fit Pro+ ├─ sobre.html Como funciona, ultracongelamento, entrega e pagamento └─ assets/ ├─ css/style.css Todo o visual, em um arquivo só ├─ js/data.js Cardápio, preços, lojas e horários (dados) ├─ js/app.js Comportamento (filtros, calculadora, seletor de cidade) └─ img/ ├─ marca/ Logo e banners └─ produtos/ 88 fotos dos pratos ``` --- ## Para quem for integrar **Os dados estão separados do layout.** Nada de cardápio está escrito no HTML: tudo é renderizado por `app.js` a partir do objeto `window.FITFOOD`, em `assets/js/data.js`. Esse arquivo foi gerado a partir do catálogo real do sistema de pedidos (`GET /menu/{loja}`), então o formato já espelha o que a API devolve. Para plugar no sistema de vocês, basta substituir o `data.js` por um endpoint que devolva a mesma estrutura: ```js window.FITFOOD = { sede: { rua, numero, complemento, bairro, cidade, uf, cep }, fretes: [ { km, preco } ], pagamentos: [ "PIX (online)", ... ], stores: [{ slug, nome, cidade, uf, whatsapp, horarios: [ { dia: "Segunda", abre: "09:00", fecha: "19:00" } ], endereco: { … }, retirada: true, // delivery_types inclui "pickup" agendamento: true, // order_timings inclui "scheduled" fretes: [ { km, preco } ], catalogo: "completo", // "completo" (tem marmita avulsa) | "planos" itens: 88, pedidoUrl: "https://fitfoodultracongelados.com.br/dourados" }], categories: [{ id, nome, produtos: [{ id, nome, desc, preco, tipo: "single" | "kit", refeicoes, // qtd de refeições quando tipo = "kit" kcal, peso, // extraídos da descrição disponivel, img }] }] }; ``` Pontos de contato com o sistema atual: - **Botões de pedido** — todo elemento com `data-pedido` recebe, via JS, o `pedidoUrl` da cidade selecionada. Um lugar só para redirecionar. - **Botões de WhatsApp** — todo elemento com `data-zap` recebe o link `wa.me` com a mensagem que estiver no valor do atributo. O número vem de `stores[].whatsapp`. - **Cidade escolhida** — guardada em `localStorage` na chave `fitfood:cidade`. - **Selo "Aberto agora"** — calculado no cliente a partir de `stores[].horarios`. Se preferirem manter estático, dá para editar `data.js` na mão: preço em `preco` (com ponto), esgotado em `"disponivel": false`, foto em `assets/img/produtos/`. --- ## Mudanças da última rodada **1. O hero agora mostra planos, não pratos.** O lado direito da capa era um mural de fotos de marmita que não levava a lugar nenhum. Virou uma vitrine com seis planos (5, 10, 15, 20, 30 e 60 refeições), cada card usando a arte que vocês já têm e levando para `planos.html?plano=N#calculadora` — a calculadora abre já no tamanho escolhido. O selo "Melhor preço" acompanha o plano de menor valor por refeição e sai do dado, não do HTML. Se os preços mudarem no `data.js`, o selo se move sozinho; as artes dos planos, porém, têm o valor impresso na imagem — vale trocá-las junto quando houver reajuste. **2. "Compre também" na tela do produto.** Ao abrir qualquer prato, aparece um trilho de sugestões com bebidas e lanchinhos. Clicar marca o item, o resumo mostra a soma (`R$ 38,90 + R$ 6,00 = R$ 44,90`), o botão passa a exibir o total e a mensagem de WhatsApp já sai com os extras listados. A escolha das sugestões está em `sugestoes()`, no `app.js`: intercala as categorias `bebidas` e `lanchinhos`, exclui o próprio item e usa o id do prato como semente — cada prato mostra um conjunto próprio, sempre o mesmo, sem sorteio a cada abertura. Para trocar as categorias oferecidas, mexa em `CATS_EXTRA`. Quando o carrinho do sistema estiver plugado, o botão de adicionar deve empurrar o item para o carrinho de verdade em vez de só marcar na tela. --- ## Segunda rodada de ajustes **Menu "Minha conta" no cabeçalho.** Faltava uma saída para quem já escolheu a cidade: agora há trocar de cidade, meus pedidos, entrar ou criar conta e falar no WhatsApp — nas quatro páginas. **Cardápio respeita o catálogo da cidade.** Itaporã, Maracaju e Ponta Porã só vendem planos, bebidas e lanchinhos: as categorias de marmita avulsa somem e um aviso explica o porquê, com atalho para trocar de cidade. A regra sai de `stores[].catalogo`, no `data.js`; a lista de categorias liberadas está em `CATS_PLANOS`, no `app.js`. **Montagem do plano com foto.** Ao abrir um plano, o botão "Escolher os N sabores" abre uma tela onde o cliente monta refeição por refeição, vendo a foto e as calorias de cada prato. O contador fica fixo no rodapé ("Faltam 3 de 20") e o botão de concluir vive ali — sem precisar rolar até o fim da lista. O resumo entra no modal do plano e segue junto na mensagem de WhatsApp. A lista de sabores é montada em `marmitasDisponiveis()`: entram só itens avulsos, disponíveis e **com foto** — item sem imagem não aparece na montagem. --- ## Decisões de layout que valem explicar - **Largura total no desktop.** As seções vão de borda a borda, os carrosséis de prato sangram para fora do container e a grade do cardápio chega a 5 colunas em telas grandes. Nada de coluna estreita centralizada. - **Seletor de cidade no cabeçalho.** As 4 praças eram a primeira barreira do site antigo (uma tela só para escolher unidade). Agora o visitante entra direto no conteúdo e escolhe a cidade quando vai pedir. - **Calculadora de plano.** É o argumento comercial mais forte de vocês — a marmita cai de R$ 28,90 avulsa para R$ 19,83 no plano de 60 — e não estava visível em lugar nenhum. Virou seção própria na home e na página de planos. - **Peso e calorias em fonte monoespaçada.** Os números de cada prato usam um estilo próprio, de rótulo nutricional, para separar dado de texto de venda. - **Cardápio por cidade.** Itaporã, Maracaju e Ponta Porã só vendem planos e lanchinhos; Dourados tem o catálogo completo. Isso aparece no seletor de cidade e nos cards da seção "Onde entregamos". --- ## Notas técnicas - **Fontes**: Bricolage Grotesque, Instrument Sans e JetBrains Mono, via Google Fonts (`` no ``). Trocar por fontes auto-hospedadas é só substituir o link. - **Pixels**: GA4 (`G-NNJC5P2SQ9`), Google Ads (`AW-18204000766`) e Meta Pixel (`2099941643360249`) do site atual **não** foram incluídos. Se forem manter, colem no `` das quatro páginas. - **Acessibilidade**: navegação por teclado, foco visível, `alt` nas imagens, landmarks e `prefers-reduced-motion` respeitado. - **Responsivo**: testado de 390 px a 1680 px, sem rolagem horizontal. - **Peso**: ~7,5 MB, quase tudo em foto de prato (já em `.webp`). --- ## Textos para a equipe conferir antes de aprovar Foram escritos a partir do site atual, das embalagens e do material do Instagram: - A explicação de ultracongelamento em `sobre.html` — descreve o processo de forma geral; confiram se bate com o processo real da cozinha. - "Preparo e congelamento no mesmo dia, na cozinha própria em Dourados" (`index.html` e `sobre.html`). - Os valores de frete citados nos textos (a partir de R$ 8,00 em Dourados). - O perfil do Instagram usado no rodapé: `instagram.com/fitfoodultracongelados`. --- Catálogo capturado do sistema de pedidos em 06/08/2026: 12 categorias, 88 itens.