Contabilidade Demonstration project
Conta Certa — certified accounting firm with client portal
A B2B trust piece for an accounting practice in Queluz: paper-white Swiss layout, mono numerals, and a working client-portal panel — document uploads, the real Portuguese fiscal calendar filterable by month, and invoicing status tiles.
We are a firm of certified accountants in Queluz and we lose hours every week to email chaos — lost attachments, deadline panic, clients calling to ask how their accounts stand. We need a site that signals rigour to business owners and, above all, shows the client portal working: document uploads, the Portuguese fiscal calendar, invoicing status. Fixed-fee retainers with clear pricing, and our OCC member numbers visible — that is what earns trust in this profession.
What's inside
- Working client-portal panel with three tabs: documents, tax deadlines and invoicing
- Real Portuguese fiscal calendar (IVA, IRS, IRC, Social Security) filterable by month, recurring plus month-specific obligations
- Document upload simulation with live status transitions (processing → classified)
- Invoicing view with status tiles and a paid/pending/overdue invoice table
- Retainer pricing grid with fixed from-€/month fees per client profile
- Email-vs-portal comparison table arguing the case for going digital
- Team credentials with OCC member numbers styled as mono badges
- Fully bilingual PT/EN with an accessible in-nav language toggle
- Paper-white / ink-navy / single-teal Swiss design system with mono numerals throughout
Build log
- Art direction: paper white, ink navy, one teal; Swiss grid, hairline rules, mono numerals; token system scoped to the root wrapper.
- Hero with a trial-balance card composition in pure HTML/CSS, stats strip, sticky nav with the PT/EN toggle.
- Portal shell on the dark navy panel: accessible tab system, table styling, status chip language.
- Fiscal calendar data model: recurring monthly obligations plus month-specific ones (Modelo 22, IES, IMI, payments on account), month filter wired to Vue state.
- Documents tab with upload simulation and timed status transitions; invoicing tiles and invoice table.
- Retainer pricing grid, email-vs-portal comparison table, team section with OCC badges, contact form demo sink.
- Full PT/EN copy pass, responsive recomposition at 768/1100, touch targets, contrast audit, reduced-motion support.
Stack
- Laravel
- Inertia
- Vue.js
- TypeScript
- SVG
Lighthouse
90
Performance
100
Accessibility
100
Best practices
100
SEO
