PRODUTO EM PRODUÇÃO

VendaMais

VendaMais — Loja virtual completa em HTML estático

Usar agora Arquitetura

vendamais.expostacker.com.br

live preview

Stack tecnológica: HTML5 CSS3 JavaScript Cloudflare Pages

24
Produtos no catálogo: 6
Avaliações de clientes: 95%
Acessibilidade (estimado)

Cliente

VendaMais

Setor

E-commerce B2C

Linha do tempo

2 dias de implementação · 2024-08

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

24 Produtos no catálogo com specs e variações

Baseline: Catálogo vazio

Fonte: (entregue)

90+ Performance Lighthouse

Baseline: Sem otimização

Fonte: (estimado)

95% Conformidade WCAG acessibilidade

Baseline: Sem ARIA

Fonte: (estimado)

Dados reportados pelo cliente

O desafio

VendaMais é uma demonstração profissional de e-commerce B2C. A experiência inclui catálogo com filtros e busca, modal de produto com especificações e variações, carrinho com cupom e frete simulado, checkout em 3 etapas com PIX e cartão, depoimentos no formato de avaliações de produto e páginas legais.

Lojas virtuais de pequeno porte precisam de uma experiência de compra completa — catálogo, filtros, busca, carrinho, checkout e prova social — mas muitas não conseguem validar o design e o fluxo de conversão sem investir em backend e gateway de pagamento antes de saber o que funciona.

A abordagem

Pesquisamos melhores práticas de e-commerce B2C, hero design, UX de conversão, acessibilidade e performance. Aplicamos um hero com composição visual CSS (gradient mesh animado e glass cards flutuantes), depoimentos no formato de avaliações de produto com texto específico e badge de compra verificada, e modal de produto com especificações técnicas, garantias e produtos relacionados.

A solução

Catálogo de 24 produtos com filtros por categoria, busca, ordenação e paginação
Modal de produto com imagem, especificações técnicas, variações, garantias e produtos relacionados
Carrinho persistente em localStorage com cupom de desconto e cálculo de frete simulado
Checkout em 3 etapas (dados, entrega, pagamento) com validações de CPF, CEP e cartão
Simulação de pagamento PIX com QR Code e cartão com máscaras de input
Hero com gradient mesh animado e glass cards flutuantes mostrando categorias
Depoimentos no formato de avaliações de produto com estrelas, nome, cidade e compra verificada
Fonte Inter self-hosted com preload para performance
Imagens com srcset responsivo e lazy loading
Acessibilidade com skip link, ARIA, focus trap nos modais e navegação por teclado

Linha do tempo

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

4 horas

Discovery

Pesquisa de melhores práticas de e-commerce B2C com 10 agentes
Análise de hero design, UX, conversão, performance e acessibilidade
Benchmark contra Magalu, Casas Bahia e Americanas

6 horas

Design

Design tokens dark/teal com variáveis CSS
Hero com gradient mesh animado e glass cards flutuantes
Sistema de cards compactos para depoimentos
Modal de produto com specs, garantias e relacionados

8 horas

Dev

Catálogo de 24 produtos com filtros, busca e paginação
Carrinho com localStorage, cupom e frete simulado
Checkout em 3 etapas com PIX e cartão
Acessibilidade com ARIA, focus trap e skip link
Self-host da fonte Inter e srcset nas imagens

Metodologia

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Pesquisa com múltiplos agentes especializados

Design centrado no usuário

Mobile-first

Acessibilidade primeiro

Performance primeiro

Iteração focada e incremental

Arquitetura

→ Site estático servido via CDN com cache de assets imutáveis
→ Catálogo de 24 produtos hardcoded em JavaScript
→ Carrinho e estado persistidos em localStorage
→ Checkout simulado com validações client-side completas
→ Fonte self-hosted com preload e imagens com srcset
→ Pronto para evolução com backend, banco e gateway de pagamento

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

Frontend

HTML5

Por quê: Semântica e SEO nativos.

Alternativa rejeitada: JSX no Next.js

CSS3

Por quê: Design tokens, glassmorphism, gradient mesh e responsividade sem build.

Alternativa rejeitada: Tailwind CSS

JavaScript

Por quê: Catálogo, carrinho, checkout e modais sem frameworks.

Alternativa rejeitada: React + TypeScript

Assets

Inter (self-hosted)

Por quê: Fonte local com preload para eliminar conexão externa.

Alternativa rejeitada: Google Fonts CDN

Unsplash + srcset

Por quê: Imagens com srcset responsivo e lazy loading.

Alternativa rejeitada: Imagens locais WebP

Deploy

Cloudflare Pages

Por quê: Hospedagem estática com SSL e cache global.

Alternativa rejeitada: Vercel

Decision log

O que escolhi, o que rejeitei e por quê.

Hero com composição visual CSS em vez de imagem stock

Por que: Imagens stock de e-commerce genéricas destroem credibilidade. Composição CSS com gradient mesh e glass cards mostra as categorias sem parecer fabricado.

Alternativas rejeitadas: Imagem do Unsplash de pessoa comprando online — rejeitada por parecer genérica e prejudicar o LCP.

Depoimentos como avaliações de produto, não cards de marketing

Por que: Avaliações curtas e específicas (problema + experiência + resultado) convertem mais que cards grandes com texto vago e avatares genéricos.

Alternativas rejeitadas: Cards grandes com avatar de iniciais e texto italico — rejeitados por parecerem amadores e fabricados.

Fonte self-hosted em vez de Google Fonts

Por que: Eliminar a conexão externa com fonts.googleapis.com reduz latency e melhora o LCP.

Alternativas rejeitadas: Google Fonts via link preconnect — funciona, mas adiciona uma conexão externa desnecessária.

Checkout simulado sem backend

Por que: O objetivo é demonstrar o fluxo de conversão, não processar pagamentos reais. Simular PIX e cartão com validações completas mostra competência sem risco.

Alternativas rejeitadas: Integrar Stripe ou Mercado Pago — exigiria backend, secrets e aumentaria complexidade sem agregar ao portfólio.

Gamificação

Pontos de experiência (XP)

Cada ação comercial gera XP, tornando o progresso visível e mensurável.

Ligas e temporadas

Divisão em ligas por desempenho, com rebaixamento e promoção a cada ciclo.

Badges e conquistas

Reconhecimento por metas específicas, ritmo e consistência de vendas.

Ranking ao vivo

Classificação atualizada em tempo real para estimular competição saudável.

Recompensas e desbloqueios

Benefícios tangíveis desbloqueados por patamar de pontuação.

Desafios e missões

Objetivos de curto prazo para manter o engajamento e testar novas táticas.

Segurança e acesso

Segurança e privacidade

Carrinho persiste apenas no localStorage do navegador
Nenhum dado pessoal é coletado ou enviado a servidor
Checkout é totalmente simulado — nenhum pagamento é processado
Formulários usam autocomplete metadata para acessibilidade
Pronto para evolução com backend, gateway e LGPD

Lições aprendidas

Nem tudo saiu como planejado.

— Um e-commerce de demonstração precisa de detalhes específicos — especificações técnicas, garantias, produtos relacionados e avaliações concretas — para parecer real. Texto vago e imagens stock destroem a credibilidade mais do que qualquer falha técnica.