Website

APKI Technologies

A Next.js site for a UK-made, ruggedised portable power unit — repositioning a product proven in UK power-network and home-medical contexts as field-deployable technology for humanitarian aid.

Next.jsTailwind CSS

At a glance

A Next.js marketing site for a UK-made, ruggedised portable power unit, rebuilt to speak to humanitarian and defence buyers first while keeping the UK power-network and home-medical proof front and centre.

Technology

Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4 — mobile-first breakpoints throughout, no external UI library.

Animation & diagrams

A custom IntersectionObserver + CSS-transition reveal component drives scroll-triggered fade/slide-ins, alongside an animated stat counter, a hand-built SVG company timeline, a generative pixel world map, and interactive power-flow/feature diagrams and a livery gallery.

Content & data

No CMS or database — copy, specs and partner logos live in typed TypeScript content files, kept in version control alongside the code rather than behind an admin panel.

Hosting

Vercel, deployed straight from the Next.js build with no custom server.

Contact

A mailto-based enquiry form — no backend to maintain. It's deep-linkable, so a "Request data sheets" button elsewhere on the site can open the form with the enquiry type and message already filled in.

SEO & compliance

Generated sitemap and robots.txt, plus dedicated privacy, terms, cookies, accessibility and modern slavery statement pages — the paper trail a defence or NGO procurement buyer expects to find.

Homepage → Product walkthrough

The humanitarian-first hero, the scroll-revealed proof sections (DNO deployments, ISO certification, any-source charging), and the transition into the Product page's spec sheet and remote-monitoring story.

Home page hero

The hero leads with the humanitarian and field-deployment story first, using APKI's real palette (Green #28730A, Yellow #ACAB0F) and Oswald headings pulled straight from the brand handbook.

Proof section — medical equipment tested

A dark, high-contrast section breaks the rhythm of the page to slow the reader down on the evidence — the exact medical equipment tested, plus ISO 9001/14001 certificate numbers, not vague claims.

Quality & Compliance → Contact walkthrough

The certification and compliance evidence a procurement or DNO buyer checks first, through to the enquiry path — kept short and low-friction rather than a generic contact form.

Product page — real photography and spec sheet

The Product page pairs real photography with a clean spec table and the remote-monitoring/Wi-Fi story — built to answer a procurement buyer's questions in order.

Company page walkthrough

The 1994-to-today origin story and vision, echoing the brand handbook's own timeline graphic — the credibility context behind the product, not just a spec sheet.

Need a site that speaks to a technical, high-stakes buyer?

The APKI site gives them a credible front door for the market they're actively expanding into — NGOs, aid agencies and defence procurement — while keeping the DNO and home-medical evidence front and centre as proof rather than an afterthought.

Start a project →

Yardley Hastings Garage →