Corporate Website for a Construction & Engineering Firm

The Problem

Apexion is a registered contractor with a head office in Abuja and a branch in Osogbo, offering eight services from building design and civil engineering to project management and real estate development. The brief was an online presence that proves credibility fast and turns a visitor into an enquiry.

In construction, clients judge a website the way they judge a site: by whether it looks built to last. A careless page makes people doubt the concrete.

The Approach

The site is a 21-route Next.js application written in TypeScript with Tailwind CSS and shadcn/ui. The brand system comes straight from the logo: deep burgundy and gold, with a blueprint-grid motif running through every page header.

The hero layers hand-drawn blueprint line art (towers, a crane, dimension marks and a title block) over a greyscale photo tinted in burgundy, so the page reads as engineering and the headline stays readable. The headline animates with CSS only; an earlier version stayed invisible until JavaScript loaded, which hurt both speed and SEO, so it was rebuilt.

Visitors can reach the company three ways at any moment: a guided enquiry form with server-side validation and a honeypot against spam, a floating WhatsApp button that opens a pre-filled message, and click-to-call details in the header. There are service pages for all eight services, a filterable project portfolio, a blog built around the questions clients actually search for, and a get-a-quote route for a guided estimate.

Search and accessibility were built in from the start: sitemap and robots files, Open Graph and Twitter cards, structured data marking the company as a general contractor with both offices, a skip-to-content link, one h1 per page, alt text, and respect for reduced-motion settings. Images are resized per device, so a phone downloads about 31 KB instead of the full photo, and every page was checked at 375px for horizontal overflow.

• 21 routes: home, about, eight service pages, projects, blog, contact and quote
• Brand system derived from the logo: burgundy, gold and a blueprint-grid motif
• Hero with SVG blueprint line art over a duotone photo, animated with CSS only for fast first paint
• Three always-available contact paths: validated enquiry form, pre-filled WhatsApp, click-to-call
• SEO built in: sitemap, robots, Open Graph cards and general-contractor structured data
• Accessibility and performance pass: skip link, reduced motion, per-device image sizes, 375px checks

The Outcome

(Images shown with the client's consent.)

Selected pages and the mobile layout.