Skip to content
Aziz Saif · Tech Notes
Home Websites Built Maroten
HVAC · Fire Safety · MEP · UAE

Maroten

maroten.com

An authorised UAE distributor for HVAC, Fire Safety & MEP solutions — representing world-leading brands like Bosch-Hitachi, SKM, Grundfos, SFFECO & Tyco. The site positions Maroten Trading Company LLC FZ as the technical sourcing partner for projects across the UAE & beyond.

IndustryTrading · HVAC / Fire Safety / MEP
Build Time5 days
Status● Live
Maroten  screenshot

Built with the essentials

React 19 + TypeScript on Vite 7, styled with Tailwind 4 and Radix/shadcn primitives. Deep red + dark steel palette to match the industrial product set, with framer-motion for the partner carousel and section reveals. Static build deployed to GitHub Pages on the maroten.com custom domain.

Frontend
React 19 + TypeScript
Component-driven SPA — routed with wouter, type-safe end-to-end.
Build
Vite 7
Sub-second HMR in dev, ~225 KB gzipped JS bundle in prod.
Styling
Tailwind 4 + shadcn/Radix
Industrial dark palette (#111113 + #C41E2A) on accessible Radix primitives.
Motion
framer-motion
Partner-logo carousel, scroll-reveal sections, WhatsApp button micro-interactions.
Typography
Google Fonts
Playfair Display for headlines, DM Sans for body, JetBrains Mono for spec callouts.
Hosting
GitHub Pages
Auto-deploy via GitHub Actions on every push. Fastly edge (185.199.x.x), free Let’s Encrypt SSL.
Forms / Conversion
WhatsApp + Digital Card
Sticky WhatsApp deep-link, plus a /card route with tap-to-call, email and .vcf save-to-contacts.
SEO
Schema.org + OG
Organization schema + Open Graph for Google & LinkedIn previews.

From brief to live URL

A repeatable process that ships sites in days, not months.

Brief & competitor scan

Capture the company story, target customer, services & competitive landscape.

Content & copy extraction

Convert existing brand assets, brochures & messaging into web-ready copy & imagery.

Design tokens & system

Establish colour palette, typography scale & spacing rhythm before writing HTML.

Component build & mobile-first responsive

Section components in React + Tailwind with mobile-first breakpoints. Tested on real devices.

Deploy & analytics

Push to GitHub — Actions builds & publishes to Pages on the maroten.com custom domain with auto-renewing SSL.

5 days
Build Time
React 19
Frontend
~225KB
JS gzipped
A+
Lighthouse

What makes this site work

Specific design decisions that make the experience memorable & conversion-focused.

Feature
Brand-Partner Showcase
Authorised distributor logos (Bosch-Hitachi, SKM, Grundfos, SFFECO, Tyco) front and centre — the trust signal that closes specifier deals.
Feature
Solutions-First IA
Three primary product silos: HVAC, Fire Safety, MEP — each with its own deep page so engineers can find the exact catalogue fast.
Feature
WhatsApp Lead Capture
Sticky WhatsApp button & phone number in the header — matches how UAE contractors actually request quotes.
Feature
Industrial Editorial Style
Hero photography of real plant rooms, large-format brand typography, restrained palette — conveys technical seriousness, not consumer flash.

See it live

Open the production site to experience the design, content & interactions firsthand.

Visit maroten.com →