Contexto

A Aion Biotech se apresenta como laboratório de dermocosmética científica. O produto da loja é o A313, uma pomada de retinol (vitamina A) para o mercado brasileiro.

O desafio

O desafio nesse tema era construir as páginas de forma dinâmica, sem quebrar o tema oficial. Pois os páginas institucionais do eram muito simples como um layout que não encaixava com o as demais páginas da loja.

O que foi realizado

Visual

As landing pages ignoram a paleta do Morelia (verde sálvia #80AA8D, Piazzolla). Elas usam um sistema próprio, repetido em todas:

• Fonte Plus Jakarta Sans, carregada no layout.
• Azul #0247C6, verde #01AA85, texto #21242C, texto de apoio #737B8C.
• Fundo em degradê com o verde a 20%, cards brancos, raio de 12px, ícones em traço.
• Conteúdo estático no .tpl, com CSS dentro de <style> no próprio arquivo.

O roteamento das páginas em templates/page.tpl que depende do nome exato da página no admin:

• Características: templates/pages/pag:caracteristicas.tpl
• Seja Revendedor: templates/pages/pa:-seja-revendedor.tpl
• Seja um Embaixador: templates/pages/p:e-seja-um-embaixador.tpl
• Fale com um especialista: templates/pages/:ge-fale-com-um-especialista.tpl

O visual é o mesmo nas quatro: fundo em degradê com verde a 20%, cards brancos com borda, raio de 12px e sombra, ícones em traço (estilo Lucide) e breakpoints em 960px e 480px. O conteúdo é fixo no template, sem campos do admin.

Características. Página de produto do A313. Título “Principais Características” e texto sobre a pomada de retinol. Grade de seis cards: Retinol Estabilizado, Combate Sinais do Envelhecimento, Renovação Celular, Uniformização do Tom, Combate à Acne e Fórmula Dermatológica. No fim, um bloco azul (#0247C6) com a fórmula de vitamina A e a lista Retinil Palmitato, Retinil Propionato, Retinil Acetato, Vitamina A e Fórmula Dermatológica. Não tem formulário nem botão.

Acessar Página

Seja Revendedor. Página comercial B2B. Selo “Parceria Comercial”, título “Torne-se um Revendedor A313” e três cards: Margens Atrativas (até 40%), Suporte Completo e Marca Reconhecida. Abaixo, “Benefícios Exclusivos”: pedido mínimo de 50 unidades, exclusividade territorial, treinamento e material de marketing. À direita, o bloco “Seja um Parceiro A313” com o botão “Quero ser Revendedor” (link /), o e-mail vendas@a313.com.br e os números 500+ revendedores, 50k+ produtos e 95% de satisfação. Não há formulário de cadastro.

Acessar Página

Seja um Embaixador. Página para criadores. Selo verde “Programa de Parcerias” e título “Seja um Embaixador A313”. Três benefícios: produtos gratuitos, comissão de até 15% e conteúdo/estudos exclusivos. O bloco “Pronto para Começar?” tem os botões “Quero Ser Embaixador” e “Saiba Mais” (os dois apontam para /) e as notas “Aprovação em 24h” e “Suporte Dedicado”. Também não tem formulário.

Acessar Página

Fale com um especialista. Página de contato em duas colunas. À esquerda, três canais: Chat no WhatsApp (8h–20h), ligação (9h–18h) e agendamento. Os três links vão para /. À direita, o formulário nativo de contato da Nuvemshop (/winnie-pooh, anti-spam winnie-pooh), com nome, e-mail, mensagem e o botão “Enviar Mensagem”. O telefone foi comentado. Sobrou código do template de contato original (cancelamento de pedido e consulta de produto), comentado ou condicional.

Acessar Página

Ficha Técnica:

• Cliente Aion Biotech / A313
• Projeto Tema de e-commerce — loja A313 na Nuvemshop, a partir do tema Morelia
• Plataformar Nuvemshop (tema em Twig)
• Papel Front-end do tema: layout, componentes e responsivo
• Entrega Páginas institucionais do A313 (características, revendedor, embaixador e fale com um especialista)
• Stack Twig (.tpl), SCSS, JavaScript do tema, Swiper, painel de configurações da Nuvemshop