TED SIMWA.
VIEW
Case Study

Simca Agencies

Professional Cleaning & Hygiene Solutions Platform

SCROLL
Next.js 15 TypeScript Tailwind CSS Framer Motion R Radix UI Resend Leaflet Next.js 15 TypeScript Tailwind CSS Framer Motion R Radix UI Resend Leaflet
01 // The Challenge

A service business invisible online

Simca Agencies ran a thriving cleaning company across Kenya with no digital presence — relying entirely on phone calls and word-of-mouth to reach customers.

Zero digital footprint

No website, no online service catalog, and no way for potential customers to discover the company’s 15+ professional cleaning services or 5 locations across Kenya.

Manual lead capture

Every inquiry came through phone calls with no structured way to qualify leads, capture customer information, or follow up systematically.

Disconnected presence

Service catalog, pricing, locations, and company credentials were scattered across disconnected WhatsApp messages, print brochures, and email threads.

02 // The Solution

Modern Next.js platform built for growth

A comprehensive 20+ page corporate website built with Next.js 15 App Router, featuring interactive maps with Leaflet, a booking form powered by Resend email integration, dark mode, a photo gallery with lightbox, a GEO-optimized blog, and extensive JSON-LD structured data for AI search visibility. The platform transforms phone-based inquiries into a streamlined digital experience where customers browse services, view locations, and book directly.

Scroll horizontally →
User Visit
Landing on the homepage or any service/location/blog page across the site
Service Discovery
Browsing 5 core service lines across 20+ dedicated pages with detailed descriptions and icons
Engagement
Filling the booking form, clicking WhatsApp, viewing the gallery, or exploring locations on the interactive map
Lead Capture
Form submission triggers Resend API → email notification to owner + confirmation to customer
Conversion
Follow-up call or WhatsApp message from the Simca team converting leads into customers
03 // Key Features

Full-service digital platform

Every component designed to showcase services, capture leads, and build trust with potential clients.

Interactive Service Catalog

20+ individual service pages covering 5 core service lines from contract cleaning to landscaping, each with detailed descriptions, icons, and prominent call-to-action buttons.

Smart Booking System

Full booking form with service selection dropdown (with icons), location picker across 5 Kenyan cities, preferred date picker, and email notification via Resend API to both the owner and customer.

WhatsApp Integration

Floating WhatsApp widget with pulse animation linking directly to the sales line, sticky mobile CTA bar with call and quote buttons appearing after scroll, and WhatsApp webhook for booking notifications.

Dark Mode & Accessibility

Full dark mode via next-themes with CSS variable theming, ARIA labels throughout, prefers-reduced-motion support, semantic HTML structure, and keyboard-navigable interactive elements.

Interactive Maps

Dual map system: Leaflet with OpenStreetMap and Nominatim geocoding for all 5 locations with custom markers, plus a Google Maps embed for the Mombasa headquarters with branded styling.

SEO & GEO Optimization

Extensive JSON-LD structured data for Organization, LocalBusiness, Service, FAQ, Breadcrumb, and Article schemas. Dynamic sitemap, robots.txt, Open Graph tags, and meta keywords for maximum search visibility.

04 // Technical Deep-Dive

Component architecture with modern tooling

Next.js 15 App RouterServer-side rendering, file-based routing, API routes, and image optimization
TypeScriptFull type safety across all components, pages, and utility functions
Framer MotionScroll-triggered animations, page transitions, hover effects, and stagger children patterns
RRadix UI PrimitivesAccessible accordion, dialog, dropdown, tabs, toast, and tooltip components
React Hook Form + ZodType-safe form validation with schema-based field rules and error handling
Embla CarouselTouch-optimized carousels for services overview, TikTok feed, and stats counters
Tailwind CSS 3.4Utility-first framework with custom brand palette mapped to CSS variables
next-themesSystem-aware dark mode with CSS variable theming and smooth transitions
Custom FontsInter (body), Playfair Display (headings), Nunito via next/font/google with variable CSS
shadcn/ui PatternComponent composition with class-variance-authority, clsx, and tailwind-merge
Responsive DesignMobile-first with dedicated mobile carousels, sticky CTAs, and hamburger navigation
Lucide React IconsConsistent iconography across services, features, and UI elements
Leaflet + OpenStreetMapDynamic import with SSR disabled, Nominatim geocoding, custom markers for 5 locations
Google Maps EmbedMombasa HQ location with branded styling and interactive controls
Photo GalleryTabbed gallery with categories, lightbox for full-size viewing, and lazy-loaded images
Image OptimizationNext.js Image component with WebP/AVIF formats, device breakpoints, lazy loading
TikTok Social FeedEmbedded @simcacleaningcompany carousel with 5 videos and navigation controls
Embla CarouselTouch-optimized carousels for services overview, stats counters, and TikTok feed
Resend APITransactional emails for booking confirmations and owner notifications with React email templates
WhatsApp WebhookFloating widget with pulse animation, sticky mobile CTA bar, and webhook notifications
Company Profile PDFDownloadable company profile document linked from header and footer navigation
Social Media LinksFacebook, Twitter, Instagram, LinkedIn, YouTube, TikTok with branded icons in header and footer
Newsletter SignupEmail subscription component for marketing communications and updates
Language ToggleEnglish / Swahili language switcher in the header menu for broader accessibility
JSON-LD Structured DataOrganization, LocalBusiness, WebSite, Service, FAQ, Breadcrumb, and Article schemas
Dynamic SitemapAuto-generated sitemap.xml covering all service pages, blog articles, and location pages
Open Graph + Twitter CardsRich social previews with og:image, description, and Twitter card meta tags for every page
robots.txtAllow all crawlers with sitemap reference for search engine indexing
Meta Keywords & DescriptionIndustry-specific keywords, location-based meta tags, and compelling descriptions
GEO OptimizationStructured data designed for AI search engine visibility and generative answer surfaces
05 // The Outcome

Digital transformation with measurable reach

0 +
Pages across services, locations & content
0
Kenyan locations mapped interactively
0
Core service lines with individual pages
0 %
Digital presence transformation from zero

Simca Agencies now has a professional, modern digital platform that showcases every service, maps every location, and captures leads automatically. The booking system with Resend API integration ensures no inquiry gets missed, while the extensive structured data makes the company discoverable through both traditional search and AI-powered search engines. The WhatsApp integration and sticky mobile CTAs provide instant communication channels for mobile users, converting browsers into customers.

Have a similar project?

Let's build something professional together.

Email WhatsApp