Product website with calculators

agrotop

Website for a manufacturer of spray nozzles and filters for agricultural machinery, including interactive nozzle calculators for farmers.

Visit the live siteThe site may have changed since the project was completed.

Challenges

What was difficult, and how I solved it

Nozzle calculators farmers can actually use
Challenge
Choosing the right nozzle depends on water volume, number of nozzles, row spacing, and driving speed. The reference tables behind it are dense and easy to misread.
Solution
Each calculator turns those four inputs into sliders and number fields and highlights the matching nozzles in a colour-coded overview, using the same ISO colour codes that are printed on the nozzles.
Complex components inside content pages
Challenge
Calculators, sliders, and unusual layouts had to sit inside normal content pages and stay correct on every screen size.
Solution
I built them as self-contained React components that manage their own state, so they can be placed in any page layout without depending on the content around them.
Fast and findable
Challenge
A product website lives on search traffic, and many visitors arrive on a phone.
Solution
The site runs on Next.js with server-side rendering and static generation, so pages arrive as finished HTML that search engines can index and browsers can display quickly.