B2B website · demo project, fictional brand

Industrial parts catalogue and quote form

A five-page website for Avenorix, a fictional industrial parts supplier. Buyers search 48 sample parts, read a spec table and build a quote request.

The problem

A buyer of industrial parts usually knows a part number or at least the group. They need the specs before they ask for a price, and they should not have to type the part number again on the quote form. This demo covers that path in three steps: catalogue, product page, quote request.

What I built

• Home page with full-width photos, scroll motion and direct routes to the catalogue and the quote form.
• Catalogue of 48 sample parts in six groups (bearings, valves, couplings, seals, fittings, sensors) with a search box, a group filter and group links that also work as plain URLs.
• Product page for one sample bearing with a spec table and a button that carries its part number into the quote form.
• Quote request (RFQ) form with labels, required-field messages and an on-page preview. Sending is switched off on purpose, so nothing leaves the browser.
• About page for the fictional supplier.

How it was tested

• All 5 pages at 1440 px and 390 px: one H1, no console errors, no failed requests, no sideways scroll on the phone.
• 0 broken internal links across the 5 pages; every image has alt text.
• Catalogue: 48 unique part numbers; searching "6205" leaves 1 row; the Valves filter leaves 8.
• Quote form: an empty preview flags the 5 required fields; valid entries clear the errors and fill the preview; the send button stays disabled.
• Motion turns off for visitors who ask for reduced motion.

Screens

Live demo

• Open the Avenorix demo (5 pages)

Built with: static HTML, CSS and JavaScript; GSAP with ScrollTrigger and Lenis for motion; AI-generated photos for the fictional brand. Product data is illustrative and the quote form sends nothing.