Moda Projeto de demonstração
Atelier Norte — loja online de moda em lã
Uma loja de estética galeria para uma marca de slow fashion do Porto: carrinho funcional com gaveta deslizante, totais em EUR e lógica de portes grátis, filtros de coleção, lookbook editorial e guia de tamanhos completo.
feitura.pt/demo/atelier-norte — Ao vivo
Um atelier do Porto que produz uma coleção de lã por ano precisa de uma loja tão contida como as peças: branco absoluto, tipografia sobredimensionada, sem ruído de marketplace. Tem de vender seis peças com carrinho e checkout sem fricção, contar a história das fábricas e apresentar os tamanhos com precisão suficiente para reduzir devoluções.
O que está lá dentro
- Carrinho funcional: adicionar, remover e ajustar quantidades numa gaveta deslizante
- Totais em EUR em tempo real com limiar de portes grátis e indicação de progresso
- Checkout em dois passos que termina numa confirmação de encomenda (demo)
- Grelha de coleção filtrável por outerwear, malhas e alfaiataria
- Direção de arte têxtil abstrata — cada 'fotografia' de produto é CSS puro
- Lookbook editorial com três looks em separadores
- Acordeão de guia de tamanhos com tabelas de medidas por categoria
- Layout mobile-first que se recompõe em tablet e desktop
- Suporte a movimento reduzido e foco por teclado em toda a página
Registo de construção
- Direção de arte: sistema branco-galeria, escala display Archivo 900, grelha de linhas finas
- Composição do hero, faixa marquee e header fixo com entrada para o carrinho
- Amostras de tecido em CSS — seis composições de gradientes, uma paleta por peça
- Grelha de coleção com filtros por categoria e cartões de produto
- Estado do carrinho, gaveta deslizante, controlo de quantidades e totais em EUR
- Passos de checkout, lógica de portes grátis e confirmação de encomenda (demo)
- Separadores do lookbook, manifesto do atelier e acordeão do guia de tamanhos
- Passagem responsive a 768/1100, auditoria de contraste, movimento reduzido e estados de foco
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript
- Tailwind CSS
Lighthouse
95
Performance
97
Accessibility
100
Best practices
100
SEO