Website
Client workIn productionFreelaKit
Landing page for a digital kit for freelancers
Landing page for FreelaKit Essencial, a digital kit for freelancers with a clients, projects and payments spreadsheet, an hourly rate calculator, a business proposal template, a project checklist and a quick guide. The page explains what comes in the kit, shows the content from the inside and leads to the Hotmart checkout.
The hero is an interactive replica of the spreadsheet, with eight clickable tabs, a formula bar, a live price calculator and a dashboard with a chart. The page is built with React and delivered as prerendered HTML, so it keeps working with JavaScript turned off.
What it has
- Spreadsheet replica with eight tabs, a formula bar and a live hourly rate calculator
- Dashboard with indicators and a chart of expected versus received per month
- Preview of the projects spreadsheet and the proposal template
- Hotmart checkout and a contact page
- Light and dark theme, with the choice stored in the browser
- Structured data for product, offer and FAQ for search engines
Under the hood
- Prerendered
- Every page reaches the browser as ready HTML, and React only takes over the interactive parts afterwards. The content shows up before any script runs and the page loads fast.
- Works without JavaScript
- All the content, the navigation and the buy button work without scripts. JavaScript only adds the spreadsheet tabs, the calculator and the theme.
- Spreadsheet in the browser
- The tabs, the formula bar and the calculator reproduce the real spreadsheet with keyboard and screen reader accessibility, following the ARIA tabs pattern.
- Ready for search engines
- Self-hosted fonts, structured data for product and FAQ, sitemap and share image published along with the pages.
Images
