Maroten — HVAC, Fire Safety & MEP Contractor UAE

Technology Stack

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.

Build Process

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

Notable Features

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.

Built with the essentials

From brief to live URL

Brief & competitor scan

Content & copy extraction

Design tokens & system

Component build & mobile-first responsive

Deploy & analytics

What makes this site work

See it live