Mattur
Ground-up rebuild of a B2B energy tech company's website: from 4 WordPress pages to a 30+ page production site with interactive data visualizations, a HubSpot lead pipeline, and an automated content engine.
Mattur Holdings Sr. Design Engineer Design + Development
B2B Data Visualization Lead Generation
View The Site
Problem
Mattur Holdings designs and manufactures modular energy systems: portable, backup, and utility-scale power solutions. Their legacy WordPress site had 4 pages and did not reflect the technical depth or scale of the product line.
What the rebuild had to do
- Establish credibility with B2B buyers across three distinct verticals (mobile, backup, utility-scale wind)
- Generate qualified leads with clean attribution by vertical and landing page
- Support ongoing content publishing without sacrificing technical accuracy
What I Built
Site architecture
- 30+ page site spanning 3 product verticals: Mobile, Backup, and Utility-Scale Wind
- Industry sub-pages per vertical (construction, defense, healthcare, data centers, and others)
- Blog and Newsroom with Astro content collections (12 published articles, dynamic routing)
- 301 redirects from all legacy WordPress URLs with zero link equity loss
Interactive product storytelling
- Fuel Savings Calculator with live cost comparison vs. legacy generators
- Custom SVG data charts: LCOE comparison, wind power curves, fuel burn analysis, animated with GSAP
- 3D turbine viewer via Spline (self-orienting, zoom/pan via CSS transforms, no Spline scene edits required)
Lead pipeline
- Custom API routes (
/api/contact,/api/order) posting directly to HubSpot Forms API - Google reCAPTCHA Enterprise bot protection
- Lead-source attribution stack: URL params, session storage, and form context feed vertical-segmented leads into HubSpot
Content automation
- Automated pipeline: brief generation, Claude API article generation, keyword scoring, SEO validation, cross-link injection, scheduled publish
- Deployed on Railway (Node SSR, auto-deploy from main)
What Made It Interesting
Energy buyers are technical and skeptical. Every claim on the site (LCOE figures, cost comparisons, efficiency gains) needed to be defensible.
Fact-checked content at scale
- Five domain-specific Claude Code skills: energy content, SEO, Astro/Starwind implementation, customer intelligence, renewable energy validation
- Generated content validated against real competitive data before publish
Custom HubSpot integration
- No embed bloat: full control over styling and attribution
- Every form submission arrives with source, vertical, and landing page context already attached
Stack
Astro 6 Tailwind CSS v4 Starwind Pro React GSAP Three.js / Spline HubSpot API reCAPTCHA Enterprise Claude API Firecrawl Railway GitHub Actions