SaaS Demonstration project
Fluxo — privacy-first analytics SaaS
A dark technical SaaS landing with a fully working product inside it: an interactive dashboard with a live SVG chart, metric tiles and a filterable data table — proof we build apps, not just pages.
feitura.pt/demo/fluxo — Live
An analytics startup needs a landing page that doesn't just describe the product — it has to demo it. Prospects should be able to touch the dashboard on the marketing site itself: switch date ranges, hover the chart, filter real-looking data. Plus pricing with a monthly/yearly toggle and a signup flow, all fast enough to be its own credibility argument.
What's inside
- Interactive SVG line chart with hover tooltip and 7/30/90-day range switching
- Live metric tiles recomputed per selected range
- Filterable data table (source chips + free-text search) with empty state
- Product screenshot composition built entirely in HTML/CSS — no images
- Pricing section with working monthly/yearly billing toggle
- Dense six-item feature grid with custom inline SVG iconography
- Self-hosted variable typography (Archivo 260–850) with mono micro-labels
- Mobile-first dark design system scoped in CSS custom properties
- Reduced-motion support and AA contrast throughout
Build log
- Art direction: near-black palette, lime accent, mono micro-labels; token system on the root wrapper.
- Nav + hero typography pass — pushed Archivo variable weights from 260 to 850.
- Product screenshot composition in pure HTML/CSS: browser chrome, sidebar, tiles, sparkline.
- Dashboard panel: SVG chart geometry, area gradient, range tabs wired to Vue state.
- Chart hover: pointer tracking, snapped cursor line, edge-aware tooltip.
- Data table with source chips + text filter, number formatting, empty state.
- Features grid with custom SVG icons; proof strip and section rhythm.
- Pricing tiers with yearly toggle math; CTA form demo sink.
- Responsive recomposition at 768/1100, touch targets, contrast audit, reduced-motion pass.
Stack
- Laravel
- Inertia
- Vue.js
- TypeScript
- SVG
Lighthouse
90
Performance
100
Accessibility
100
Best practices
100
SEO