Guardian Smart Homes – Website Design & Development

Project Overview

Guardian Smart Homes is a UK-based smart home technology company focused on helping elderly and vulnerable adults live safely and independently in their own homes. Their systems use environmental sensors (no cameras or microphones) to detect falls, wandering, fire risks, and flooding, with a 72-hour emergency deployment model backed by DBS-verified operatives and ICO registration.

They needed a complete website built from the ground up: one that could communicate a sensitive, trust-critical message to families and healthcare professionals, handle product and pricing information clearly, and give their team full control over content as the business grows.

Client Goals

• A modern, SEO-optimised website: Build a polished, search-friendly site to attract families, carers, and healthcare professionals across the West Midlands and beyond.
• Clear service and product presentation: Present three distinct hardware tiers with monthly subscription options in a way that is approachable, not overwhelming.
• Trust-building design: Communicate credibility through professional design, accreditations, DBS verification, and ICO registration.
• Seamless multi-channel contact: Make it straightforward for potential clients to reach the team via phone, email, contact form, or WhatsApp.
• Easy content management: Give the Guardian team the ability to update pages, publish case studies, and manage site content without developer involvement.
• Analytics and compliance: Track performance with Google Analytics while meeting UK GDPR and cookie consent requirements.

Approach and Solutions

1. Next.js 16 with Sanity CMS v5

The site is built on Next.js 16 (App Router) deployed on Vercel, with Sanity Studio v5 as the headless CMS. This combination was chosen deliberately for speed, developer control, and long-term maintainability.

• Headless CMS with visual editing: Sanity v5 powers all page content through a structured schema system. Singleton page documents (home, philosophy, ecosystem, support, contact) give the team one predictable place to edit each page, while a caseStudy collection handles a growing library of client stories with slugs, rich text, cover images, and embedded reviews.
• Real-time content delivery: The Sanity CDN client serves published content with incremental static regeneration (60-second revalidation), keeping pages fast while remaining up to date.
• AI-assisted content creation: The Sanity Assist plugin is integrated into the studio, helping the team draft and refine content directly inside the CMS.
• Type-safe integration: TypeScript types are generated directly from the Sanity schema, so any content structure change surfaces immediately as a type error before it can reach production.

2. Design System and Brand Identity

The visual design centres on two brand colours: Trust Blue (#003B73) and Warm Orange (#F05A28), chosen to convey professionalism, warmth, and reliability.

• Tailwind CSS v4 powers all styling, with the entire design token system defined in a single @theme block in globals.css rather than a config file. This gives precise control over colour scales, border-radius tokens, shadow layers, and typography.
• Typography pairing: Playfair Display (serif) is used on all major headings to convey authority and care; Inter (sans-serif) handles body text and UI elements for readability.
• Dark mode: Full dark mode support is implemented via next-themes with a class-based strategy, a header toggle, and a comprehensive dark colour palette that remaps every surface and text token.

3. Animation and Interaction

Given the nature of the audience, animations were designed to be purposeful and elegant rather than distracting.

• Scroll-triggered entrance animations (AnimateOnScroll) with directional control and stagger timing
• Word-by-word text reveal (TextReveal) with a blur effect for hero headlines
• 3D tilt cards (TiltCard) with mouse-tracking perspective transforms on feature cards
• Magnetic buttons (MagneticButton) that follow cursor movement with spring physics
• Scroll-based parallax images (ParallaxImage) for depth on hero sections

All animations are built with Framer Motion v12, which supports React 19 and Vercel's streaming architecture.

4. Contact, WhatsApp, and Lead Capture

Multiple contact channels are built in and accessible at every stage of the user journey.

• A dedicated contact page with a structured enquiry form
• A floating WhatsApp widget (fixed position, with a pulse animation) linked to a WhatsApp Business message thread, giving families an immediate, low-friction route to the team
• WhatsApp links also present in the footer and contact sidebar for users who scroll past the widget
• Click-to-call phone links in the header and footer, visible on all devices

5. Cookie Consent and Analytics

A custom cookie consent hook manages consent state with event-driven synchronisation across browser tabs. Google Tag Manager only loads after the user actively accepts cookies, keeping the site compliant with UK GDPR and ICO requirements. The GTM container ID is environment-variable-driven so it can be swapped or disabled without a code change.

Vercel Speed Insights is also integrated for ongoing performance monitoring.

6. SEO and Technical Foundations

• Page metadata generated server-side from Sanity content, including Open Graph images, canonical URLs, and per-page noIndex flags
• Semantic HTML structure with a clear heading hierarchy across all pages
• Next.js Image component with responsive sizes declarations and priority loading on above-the-fold images
• Remote image patterns configured for the Sanity CDN

Results and Impact

• Full client ownership of content: The Guardian team can update every page, publish new case studies (complete with client reviews, cover images, and SEO metadata), and manage the global CTA from within Sanity Studio, with no developer involvement required for routine updates.
• Trust and credibility at the forefront: Professional design, clear accreditation details, DBS and ICO registration callouts, and structured case studies give families and healthcare professionals the confidence to make contact.
• GDPR-compliant analytics: Cookie consent gating ensures analytics data is only collected from users who have explicitly opted in, meeting ICO requirements out of the box.
• Performance and reliability: ISR, CDN caching, and Vercel hosting mean the site remains fast and available even under traffic spikes, with no server infrastructure to manage.

Summary

Guardian Smart Homes now has a production-grade website that reflects the care and professionalism at the heart of their service. Built on Next.js 16, Sanity CMS v5, Tailwind CSS v4, and TypeScript, with advanced animations, full dark mode, GDPR-compliant analytics, WhatsApp integration, and a headless CMS the team can manage independently, the site positions Guardian Smart Homes as a trusted, modern provider in a sector where credibility is everything.