RLD Interiors — Full-Stack Website Design & Development

Project Overview

RLD Interiors & Home Renovations is a Durban-based home renovation company owned by Dinesh. With over twenty years of hands-on experience transforming homes across KwaZulu-Natal, their reputation was built entirely on word of mouth and personal referrals. Their service portfolio spans kitchen installations, bathroom renovations, built-in cupboards, bar installations, complete home renovations, tiling, painting, plumbing, and electrical work.

The problem was simple: despite two decades of quality work, RLD Interiors had zero digital presence. No website, no search visibility, no way for potential customers to find them online. In a market where homeowners increasingly search for “kitchen renovations Durban” or “bathroom fitter near me” before making a call, being invisible online meant losing business to less experienced competitors who happened to have a website.

The Challenge

Building a website for a home renovation business in Durban presented specific challenges:

• No existing digital assets — No website, no professional photos, no brand guidelines to work from. Everything had to be created from scratch
• WhatsApp-centric market — In KwaZulu-Natal, WhatsApp is the primary business communication tool. The site needed to funnel every interaction toward WhatsApp rather than traditional contact forms
• Local SEO from zero — With no existing search presence, the site needed comprehensive structured data and local SEO signals to compete against established competitors across eight service areas
• Showcasing craftsmanship — Home renovation is a visual business. The portfolio needed to showcase quality work in a way that builds trust and drives enquiries
• Mobile-first audience — The majority of RLD’s potential customers browse on mobile. The site had to load fast and work flawlessly on phones, even on slower South African networks

Our Approach

We took full ownership of design and development, building everything from concept to deployment. The design system was crafted to reflect the quality of RLD’s work — an elegant charcoal and brass colour palette paired with DM Serif Display headings and Plus Jakarta Sans body text, creating a premium feel that sets them apart from competitors using generic templates.

Design Decisions

The colour palette — deep charcoal (#1a1a2e) with brass (#c9a84c) accents on warm white (#fafaf9) backgrounds — was chosen to communicate craftsmanship and quality. The brass tones evoke the premium fixtures and fittings that RLD installs, while the charcoal provides a sophisticated backdrop that lets portfolio images shine.

Typography plays a key role: DM Serif Display for headings gives an elegant, established feel appropriate for a company with twenty years of experience, while Plus Jakarta Sans keeps body text modern and readable on any screen.

WhatsApp-First Strategy

Every section of the site drives users toward WhatsApp. The floating WhatsApp bubble persists across the entire experience with a smart tooltip (shown once per session via localStorage). The hero section leads with WhatsApp and phone call CTAs. Every service card includes a direct WhatsApp link with a pre-populated message. Even the contact form submits data to WhatsApp rather than a traditional email backend — removing friction and meeting customers where they already communicate.

Technical Implementation

React 19 with Server-Side Rendering

We chose React Router 7 as the full-stack framework for its excellent server-side rendering capabilities on Cloudflare Workers. Unlike a static site, SSR ensures every page request returns fully rendered HTML from the edge — critical for SEO and for users on slow connections who would otherwise stare at a blank screen while JavaScript loads.

The component architecture uses React 19’s latest patterns with Radix UI as the headless component foundation. Radix provides accessible, unstyled primitives for dialogs, menus, forms, and tooltips — which we then styled with Tailwind CSS to match the custom design system. This approach gives us WCAG-compliant interactive components without the overhead of a traditional UI framework.

Cloudflare Workers Deployment

The entire application runs on Cloudflare Workers, providing server-side rendering at the edge. The Worker handles:

• React Router SSR — Full server rendering of React components on every request
• Security headers — HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy injected on every response
• Custom robots.txt — Dynamically served with sitemap directive and AI crawler controls
• Error handling — Graceful error boundaries that never show raw stack traces to users

This means every visitor, regardless of location in South Africa, receives a fully rendered page from the nearest Cloudflare Point of Presence — no waiting for client-side JavaScript to boot up.

Accessibility Built In

Accessibility was not an afterthought. The site includes:

• Skip-to-content link for keyboard users
• Semantic HTML throughout — proper heading hierarchy, landmark regions, ARIA labels
• Keyboard navigation — Tab through all interactive elements, Escape to close modals, Arrow keys in the portfolio gallery
• Reduced motion support — All animations (Ken Burns effect, scroll-fade, pulse) are disabled when the user has prefers-reduced-motion enabled
• Touch targets — All buttons and links sized for comfortable thumb interaction on mobile

Key Features Delivered

Portfolio Gallery with Filtering

The portfolio section showcases six completed projects with location tags, category filtering (Kitchens, Bathrooms, Bars, Cupboards, Complete Renovations), featured project badges, and a modal lightbox viewer. Images lazy-load as users scroll, with explicit width and height attributes to prevent layout shift.

Nine Service Pages

Each of RLD’s nine services — kitchen installations, bathroom renovations, built-in cupboards, bar installations, complete home renovations, tiling, painting, plumbing, and electrical — is presented in a dedicated card with a description, a “Popular” badge where applicable, and a direct WhatsApp CTA with a service-specific pre-populated message.

Lead Generation System

The contact section combines multiple lead capture methods:

• Quote request form with validation (name, phone, message required) that submits directly to WhatsApp
• WhatsApp fast track for instant connection
• Phone call button with tel: links
• Email link as a fallback
• FAQ section answering five common questions to reduce friction
• Business hours and quote response time (within 24 hours) displayed prominently

Custom Animations

The hero section features a Ken Burns zoom effect on the background image — a subtle twenty-second animation that adds visual interest without overwhelming the content. Scroll-triggered fade-in animations reveal sections as users navigate down the page. The WhatsApp bubble has a pulse animation to draw attention. All animations use transform and opacity only for GPU-accelerated performance, and all respect the user’s motion preferences.

SEO & Structured Data

We implemented comprehensive SEO optimisation with eleven JSON-LD structured data schemas:

• HomeAndConstructionBusiness — Core business schema with geo coordinates, service areas (eight Durban suburbs), opening hours, pricing range, and accepted payment methods
• WebSite and WebPage schemas for search engine context
• Nine individual Service schemas — One for each service offered, with descriptions, provider details, and area served
• BreadcrumbList for navigation context

The meta tag suite includes targeted title tags, meta descriptions, Open Graph tags for social sharing, Twitter Cards, a canonical tag, and the en-ZA language attribute for South African English targeting.

Local SEO Targeting

The site targets eight specific service areas across Durban and KwaZulu-Natal: Durban North, Umhlanga, Westville, Pinetown, Chatsworth, Durban Central, Phoenix, and Hillcrest. Each area is referenced in the structured data and content to build local search relevance.

Security

The Cloudflare Worker injects production-grade security headers on every response:

• Strict-Transport-Security — Enforces HTTPS for one year with subdomain inclusion
• X-Frame-Options — Prevents clickjacking
• X-Content-Type-Options — Prevents MIME type sniffing
• Referrer-Policy — Controls information leakage
• Permissions-Policy — Blocks camera, microphone, and geolocation access by default

Results

The project delivered RLD Interiors their first professional digital presence — a modern, accessible, security-hardened website that positions them as the premium choice for home renovations in Durban.

What was delivered:

• Full-stack React 19 application with server-side rendering on Cloudflare Workers
• 9 services showcased with individual structured data schemas
• 8 service areas targeted for local SEO across KwaZulu-Natal
• 11 JSON-LD schema markups for comprehensive search engine understanding
• 6-project portfolio with category filtering and lightbox viewing
• WhatsApp-first contact strategy with multiple lead capture touchpoints
• WCAG-accessible design with keyboard navigation and motion preferences
• Security-hardened deployment with production-grade headers
• Complete SEO audit with a 12-month roadmap for ongoing improvement

For a business that previously relied entirely on word of mouth, RLD Interiors now has a digital presence that matches the quality of their craftsmanship — fast, professional, and built to be found by homeowners searching for renovation services across Durban.