LIVE PRODUCT

VendaMais

VendaMais — Complete online store in static HTML

Use now Architecture

vendamais.expostacker.com.br

live preview

Tech stack: HTML5 CSS3 JavaScript Cloudflare Pages

24
Products in catalog: 6
Customer reviews: 95%
Accessibility (estimated)

Client

VendaMais

Sector

B2C E-commerce

Timeline

2 dias de implementação · 2024-08

Live product

Use now

Results

Client-reported results during rollout

24 Products in catalog with specs and variations

Baseline: Empty catalog

Fonte: (delivered)

90+ Lighthouse Performance

Baseline: No optimization

Fonte: (estimated)

95% WCAG accessibility compliance

Baseline: No ARIA

Fonte: (estimated)

Client-reported data

The challenge

VendaMais is a professional B2C e-commerce demonstration. The experience includes a catalog with filters and search, product modal with specifications and variations, cart with coupon and simulated shipping, 3-step checkout with PIX and card, product review-style testimonials and legal pages.

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.

The approach

We researched B2C e-commerce best practices, hero design, conversion UX, accessibility and performance. We applied a hero with CSS visual composition (animated gradient mesh and floating glass cards), product review-style testimonials with specific copy and verified purchase badge, and a product modal with technical specifications, warranties and related products.

The solution

Catalog of 24 products with category filters, search, sorting and pagination
Product modal with image, technical specifications, variations, warranties and related products
Persistent cart in localStorage with discount coupon and simulated shipping calculation
3-step checkout (data, delivery, payment) with CPF, ZIP and card validations
PIX payment simulation with QR Code and card with input masks
Hero with animated gradient mesh and floating glass cards showing categories
Product review-style testimonials with stars, name, city and verified purchase
Self-hosted Inter font with preload for performance
Images with responsive srcset and lazy loading
Accessibility with skip link, ARIA, focus trap in modals and keyboard navigation

Timeline

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

4 horas

Discovery

B2C e-commerce best practices research with 10 agents
Hero design, UX, conversion, performance and accessibility analysis
Benchmark against Magalu, Casas Bahia and Americanas

6 horas

Design

Dark/teal design tokens with CSS variables
Hero with animated gradient mesh and floating glass cards
Compact card system for testimonials
Product modal with specs, warranties and related items

8 horas

Dev

24-product catalog with filters, search and pagination
Cart with localStorage, coupon and simulated shipping
3-step checkout with PIX and card
Accessibility with ARIA, focus trap and skip link
Self-hosted Inter font and srcset on images

Methodology

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

Research with multiple specialized agents

User-centered design

Mobile-first

Accessibility first

Performance first

Focused incremental iteration

Architecture

→ Static site served via CDN with immutable asset caching
→ 24-product catalog hardcoded in JavaScript
→ Cart and state persisted in localStorage
→ Simulated checkout with complete client-side validations
→ Self-hosted font with preload and images with srcset
→ Ready for evolution with backend, database and payment gateway

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

Frontend

HTML5

Why: Native semantics and SEO.

Rejected alternative: JSX in Next.js

CSS3

Why: Design tokens, glassmorphism, gradient mesh and responsiveness without build.

Rejected alternative: Tailwind CSS

JavaScript

Why: Catalog, cart, checkout and modals without frameworks.

Rejected alternative: React + TypeScript

Assets

Inter (self-hosted)

Why: Local font with preload to eliminate external connection.

Rejected alternative: Google Fonts CDN

Unsplash + srcset

Why: Images with responsive srcset and lazy loading.

Rejected alternative: Local WebP images

Deploy

Cloudflare Pages

Why: Static hosting with SSL and global cache.

Rejected alternative: Vercel

Decision log

What I chose, what I rejected, and why.

Hero with CSS visual composition instead of stock image

Why: Generic e-commerce stock images destroy credibility. CSS composition with gradient mesh and glass cards shows categories without looking fabricated.

Rejected alternatives: Unsplash image of person shopping online — rejected for looking generic and hurting LCP.

Testimonials as product reviews, not marketing cards

Why: Short, specific reviews (problem + experience + result) convert more than large cards with vague text and generic avatars.

Rejected alternatives: Large cards with initial avatars and italic text — rejected for looking amateur and fabricated.

Self-hosted font instead of Google Fonts

Why: Eliminating the external connection to fonts.googleapis.com reduces latency and improves LCP.

Rejected alternatives: Google Fonts via link preconnect — works, but adds an unnecessary external connection.

Simulated checkout without backend

Why: The goal is to demonstrate the conversion flow, not process real payments. Simulating PIX and card with full validations shows competence without risk.

Rejected alternatives: Integrating Stripe or Mercado Pago — would require backend, secrets and increase complexity without adding to the portfolio.

Gamification

Experience points (XP)

Every sales action earns XP, making progress visible and measurable.

Leagues and seasons

Performance-based leagues with promotion and relegation each cycle.

Badges and achievements

Recognition for specific goals, cadence, and sales consistency.

Live ranking

Real-time leaderboard to stimulate healthy competition.

Rewards and unlocks

Tangible benefits unlocked at each score threshold.

Challenges and missions

Short-term objectives to keep engagement and test new tactics.

Security and access

Security and privacy

Cart persists only in browser localStorage
No personal data is collected or sent to a server
Checkout is fully simulated — no payment is processed
Forms use autocomplete metadata for accessibility
Ready for evolution with backend, gateway and GDPR

Lessons learned

Not everything went as planned.

— A demonstration e-commerce needs specific details — technical specifications, warranties, related products and concrete reviews — to look real. Vague text and stock images destroy credibility more than any technical flaw.