Ótica Projeto de demonstração
Ótica Mira — ótica de família com prova virtual de armações
Um one-pager editorial para uma ótica independente de Aveiro, da mesma família desde 1987: papel porcelana, tinta quase-preta e um sistema de acentos âmbar tartaruga, uma prova virtual que sobrepõe seis armações SVG desenhadas à mão a cinco formas de rosto com notas de ajuste por combinação, um configurador de lentes com recibo mono em tempo real e um cabeçalho de secção em tabela de Snellen — sem fotografia, tudo SVG inline.
feitura.pt/demo/mira — Ao vivo
Uma ótica de família na Rua da Costeira, em Aveiro — três gerações desde 1987 — quer um site com a confiança da própria loja. Tem de ajudar as pessoas a encontrar a armação certa para o seu rosto antes de entrarem, explicar opções de lentes e preços sem letras pequenas, apresentar o exame de visão de 45 minutos, listar as seguradoras com acordo e carregar o peso da fachada de azulejo e da bancada original. Perícia com calor humano: a loja onde se confia em quem nos mede os olhos.
O que está lá dentro
- Sistema de design porcelana, tinta e âmbar-tartaruga com filetes finos como marcações de lente
- Prova virtual: cinco formas de rosto SVG desenhadas à mão, neutras, e seis estilos de armação sobrepostos ao vivo
- Trinta notas de ajuste por combinação, com conselhos em voz de oculista e preços das armações em EUR
- Configurador de lentes — uso principal e tratamentos — com recibo mono itemizado em tempo real e marcação de demonstração
- Secção de exames encabeçada por uma escala tipográfica de tabela de Snellen com etiquetas mono de acuidade
- Ilustração de anéis de focagem no hero com 48 marcações calculadas e anotações de dioptrias
- Parede de marcas fictícias composta como oito logótipos distintos, só em CSS
- Cronologia desde 1987 sobre tinta com citação do fundador, mais acordos de seguros e contactos de Aveiro
- Totalmente bilingue PT/EN com toggle nativo, reveals seguros em SSR, contraste AA e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta porcelana/tinta/tartaruga, escala de display Archivo, estudos SVG dos anéis de focagem e círculos concêntricos
- Hero com ilustração de anéis anotada com dioptrias, navegação sticky, faixa de informação e a estrutura bilingue PT/EN
- Conjunto SVG de formas de rosto — cinco rostos desenhados, neutros, com traços partilhados, orelhas e cabelo por forma
- Coleção de armações — seis armações SVG desenhadas com gradiente tartaruga, geometria de lente espelhada, estado da prova, notas de ajuste e preços
- Configurador de lentes — preços por uso principal e tratamentos, recibo mono itemizado com linhas pontilhadas, marcação de consulta de demonstração
- Cabeçalho Snellen dos exames, logótipos da parede de marcas, acordos de seguros, cronologia desde 1987 sobre tinta, contactos e horários de Aveiro
- Passagem do locale EN, auditoria de movimento reduzido e reveals, auditoria de contraste e alvos de toque, recomposição mobile-first a 375 px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
100
Accessibility
100
Best practices
100
SEO