prompt_mestre_de_implementa_o_damenny.md

# Prompt Mestre de Implementação: Damenny Redesign Premium (Desktop, Mobile & SEO)

Este prompt foi estruturado para que um desenvolvedor ou uma IA de código (Codex) consiga implementar a visão completa do novo catálogo Damenny.

---

## 1. Fundamentos Visuais (Design Tokens)
"Implemente estas variáveis de estilo CSS para garantir a identidade visual premium e técnica:"

```css
:root {
    /* Cores Portomontt/Blumenau Style */
    --clr-bg: #F8FAFC;           /* Fundo da página */
    --clr-surface: #FFFFFF;      /* Cards e Containers */
    --clr-primary-dark: #0F172A;  /* Azul Profundo (Headers, Títulos) */
    --clr-primary: #1E293B;       /* Azul Slate (Ícones, Navegação) */
    --clr-accent: #84CC16;        /* Verde Limão (CTAs Críticos - Otimizado para Conversão) */
    --clr-text-main: #334155;     /* Texto de corpo */
    --clr-text-light: #64748B;    /* Labels e dados técnicos secundários */
    --clr-border: #E2E8F0;       /* Divisores sutis */
    
    /* Geometria e Feedback */
    --radius-md: 8px;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
```

---

## 2. Refatoração Desktop (Listagem & Produto)
"Refatore os componentes principais focando em **Autoridade Técnica**:"

- **Card de Produto:** 
    - Elevação no hover (`transform: translateY(-4px)`) com sombra acentuada.
    - O SKU deve ser exibido em uma 'tag' de alta visibilidade (fundo `#EEF2FF`, texto azul).
    - **Grade de Atributos:** Insira 3 dados técnicos chave (ex: Largura, Tensão, Material) em uma mini-grid dentro do card. Isso evita que o comprador precise clicar para saber o básico.
    - **Botão CTA:** O botão 'Adicionar ao Orçamento' ou 'Solicitar Cotação' deve usar obrigatoriamente `--clr-accent` (Verde Limão) com texto em negrito.
- **Página de Detalhes:** 
    - Trate o elástico como um **Componente de Engenharia**. Use uma seção de 'Especificações Técnicas' organizada em grid com ícones minimalistas.
    - Adicione uma seção de 'Desempenho Sob Estresse' com números grandes (ex: 98% de memória retida) para prova social técnica.

---

## 3. Adaptação Mobile (UX Responsiva)
"Ajuste a experiência mobile para que seja tão eficiente quanto a desktop:"

- **Bottom Navigation Bar:** Implemente uma barra fixa na parte inferior (Home, Produtos, Dúvidas, Carrinho) para facilitar o uso com o polegar.
- **Cards Mobile:** Transforme os atributos técnicos em badges horizontais ou uma lista compacta. O CTA 'Cotar' deve ocupar a largura total da base do card ou ser um botão flutuante proeminente.
- **Filtros:** Use um menu lateral 'Drawer' ou um modal de tela cheia para os filtros técnicos, garantindo que o usuário não se perca em listas longas.

---

## 4. Estratégia de SEO Técnico
"Otimize o código para dominar as buscas de elásticos industriais:"

- **Semântica HTML:** 
    - `H1` único por página com a keyword principal (ex: 'Componentes Elásticos para Indústria Têxtil').
    - Nomes de produtos nos cards em `H3`.
- **Atributos de Imagem:** Use `alt="[Nome do Produto] - Elástico Técnico Damenny"` em todas as imagens.
- **Breadcrumbs:** Implemente `nav aria-label="Breadcrumb"` seguindo a hierarquia de categorias.
- **JSON-LD (Rich Snippets):** Implemente o Schema.org tipo `Product` com `brand: Damenny` e `offers: InStock` (mesmo com preço sob consulta) para que o Google exiba os dados técnicos nos resultados de busca.

---

## 5. Tom de Voz e Copy
"Mantenha o tom profissional e direto. Substitua termos genéricos por especificações. Use 'Engenharia de Precisão' e 'Mais de 38 anos de excelência' em banners e footers para elevar a autoridade da marca."