Paragon — Insurance
Broker Site

A marketing website for a licensed NBFIRA insurance broker in Botswana. Multi-page site with a WhatsApp-integrated quote flow, provider showcase, and scroll animations — built and deployed for a real paying client.

Client Project
NBFIRA Licensed
Mobile Responsive

Core Features

Quote Flow

WhatsApp-integrated quote request form. Submissions are formatted and sent directly to the broker via WhatsApp.

Provider Showcase

Clean comparison section for Metropolitan Life, Botswana Life, Hollard, and Bona Life with provider logos.

Fully Responsive

Mobile-first layout with a collapsible nav, touch-friendly interactions, and optimised hero carousel.

Pages & Sections

Homepage

Hero carousel with four lifestyle slides, floating WhatsApp CTA, sticky top contact bar, provider logos, and a testimonials section. Quote modal opens inline without page navigation.

Hero CarouselQuote ModalProvider Logos

About & Contact

About page with scroll-triggered animations, mission/vision cards, values grid, and "Why Paragon" checklist. Contact page with full details and WhatsApp link.

Scroll AnimationsMulti-pageContact Page

Technical Architecture

Key Decisions

No backend needed — the quote form submits directly to WhatsApp via deep link, keeping the site fully static and fast. Scroll animations use native Intersection Observer instead of a library to keep the bundle lean.

WhatsApp Integration
Form data encoded and sent via wa.me deep link
Static Deployment
No server — deployed as static site on Vercel
Scroll Animations
Native Intersection Observer, no animation library

Tech Stack

  • Next.js 15 with App Router
  • Tailwind CSS for styling
  • WhatsApp deep link for quote submissions
  • Intersection Observer for scroll animations
  • CSS keyframe animations (no Framer Motion)
  • Deployed on Vercel

Technical Challenges

WhatsApp Quote Integration

The client wanted enquiries to come straight to their phone without a backend or email. I encoded the form fields into a formatted WhatsApp message string and used the wa.me deep link API to open it pre-filled — zero server cost, instant delivery.

Scroll Animations Without a Library

To keep the bundle small, I implemented scroll-triggered animations using the native Intersection Observer API with CSS keyframes. Elements animate in once on scroll and the observer disconnects after firing to avoid unnecessary overhead.

Hero Image Carousel Performance

Four large hero images needed to load fast on mobile. I used Next.js Image optimisation with priority loading for the first slide and lazy loading for the rest, keeping LCP fast on slower connections.

Client Collaboration

Working to a real client brief meant managing feedback rounds and making design decisions that served their brand and audience — not just what looked good technically. First paid project shipped and live.

Complete Tech Stack

  • Next.js 15
  • React
  • Tailwind CSS
  • WhatsApp API
  • Lucide Icons
  • Vercel
  • Intersection Observer
  • CSS Animations

See It Live

The site is live and in use by the client. Browse the provider listings, try the quote request flow, and see it on mobile.

View Live Site