How we took the complexity out of understanding steel components

JNL Steel Components sells across dozens of product lines — beams, purlins, tubing, rebar, custom sheet metal, laser-cut trim, storage buildings. We built the site as a React app with dynamic sidebars, so a contractor can fly between categories, sizes, and specs without a single page reload. Browsing the catalog feels instant.

Metal profiles you can actually see and spin in 3D

Every sheet metal profile on the site — R-Panel, PBR-Panel, U-Panel, PBU-Panel, Pro-Rib, Ag-Panel, Corrugated — renders in an interactive 3D canvas. Buyers click and drag to rotate the panel, inspect the rib depth and pitch from any angle, and read the dimensions the way a contractor reads a spec sheet — no PDF download, no zoomed-in catalog image, no phone call required.

A single toggle flips the purlin bearing leg on and off, so a customer can see exactly what a PBR leg adds to the profile. That one question used to eat ten minutes on the phone with the sales desk; now buyers answer it themselves in two clicks. Color swatches re-paint the panel live, so the same model previews in Rustic Red, Galvalume, or any standard SMP color before they commit.

Drone footage of the facility

Drone footage of JNL's facility is embedded across their site. Exterior passes cover the inventory yard — steel beams, rebar, tubing, and storage buildings — and the dirt-work equipment lot. Interior shots cover the sheet metal fabrication shop, the laser and plasma cutting stations, and the purlin and tubing manufacturing line.

From a static PDF brochure to a browsable product catalog

JNL's Color Chart & Fabrication Profiles brochure used to live as a PDF — twenty-eight named colors, four profile families, and the coating performance data buried somewhere past the cover page. Contractors had to download it, scroll for the color they wanted, and cross-reference the profile on a different sheet. We rebuilt the brochure as a live section of the site at /metal-fabrication-profiles/, where a single color picker drives the whole page. Pick Rustic Red, Polar White, Hawaiian Blue, or Galvalume from the dropdown and every profile on screen re-renders in that color instantly. No reload, no second tab, no PDF download.

The product catalog at /products/ got the same treatment. The full inventory — Red Iron tubing and purlins, structural steel, rebar, cold-roll, wide-flange beams, sheet metal, and the accessory line — is organized into categorized sections with expandable spec readouts under each one, so a contractor can scan the whole shop without leaving the page.

Putting the catalog in HTML instead of a PDF made it indexable. Every category is a real h2, every product variant — "1″ x 2″ Tubing," "26-gauge PBR-Panel" — is a real h3 with its own spec block. Breadcrumbs give Google the hierarchy, structured data describes each product, and the coating-performance copy on the profiles page (Solar Reflectivity, SRI for LEED, 10-, 25-, and 40-year paint warranties) is crawlable text rather than a flattened image inside a PDF. Long-tail searches for a specific gauge, color, or profile now land on the relevant section of the live page instead of the brochure's download link.