SaaS Projeto de demonstração
Fluxo — SaaS de analítica com privacidade
Uma landing SaaS técnica e escura com o produto a funcionar lá dentro: dashboard interativo com gráfico SVG em tempo real, mosaicos de métricas e tabela filtrável — prova de que construímos aplicações, não só páginas.
feitura.pt/demo/fluxo — Ao vivo
Uma startup de analítica precisa de uma landing que não se limite a descrever o produto — tem de o demonstrar. Os prospetos devem poder mexer no dashboard no próprio site: trocar intervalos de datas, passar o cursor pelo gráfico, filtrar dados realistas. Mais preços com alternância mensal/anual e um fluxo de registo, tudo rápido ao ponto de ser o próprio argumento de credibilidade.
O que está lá dentro
- Gráfico de linhas SVG interativo com tooltip ao passar o cursor e intervalos de 7/30/90 dias
- Mosaicos de métricas recalculados por intervalo selecionado
- Tabela de dados filtrável (chips de origem + pesquisa livre) com estado vazio
- Composição de screenshot do produto construída inteiramente em HTML/CSS — sem imagens
- Secção de preços com alternância funcional entre faturação mensal e anual
- Grelha densa de seis funcionalidades com iconografia SVG inline personalizada
- Tipografia variável autoalojada (Archivo 260–850) com microetiquetas mono
- Sistema de design escuro mobile-first definido em propriedades CSS personalizadas
- Suporte a movimento reduzido e contraste AA em todo o site
Registo de construção
- Direção de arte: paleta quase preta, acento lima, microetiquetas mono; sistema de tokens no wrapper raiz.
- Nav + tipografia do hero — pesos variáveis do Archivo levados de 260 a 850.
- Composição do screenshot do produto em HTML/CSS puro: chrome do browser, sidebar, mosaicos, sparkline.
- Painel do dashboard: geometria do gráfico SVG, gradiente de área, tabs de intervalo ligadas ao estado Vue.
- Hover do gráfico: tracking do ponteiro, linha de cursor com snap, tooltip consciente das margens.
- Tabela de dados com chips de origem + filtro de texto, formatação de números, estado vazio.
- Grelha de funcionalidades com ícones SVG personalizados; faixa de números e ritmo das secções.
- Planos de preços com cálculo da alternância anual; formulário CTA com confirmação de demonstração.
- Recomposição responsiva a 768/1100, alvos de toque, auditoria de contraste, passagem de movimento reduzido.
Stack
- Laravel
- Inertia
- Vue.js
- TypeScript
- SVG
Lighthouse
90
Performance
100
Accessibility
100
Best practices
100
SEO