Wealth Armor for Filipinos — A brutalist, data-driven insurance intelligence portal built with Next.js, GSAP, and Chart.js.
- Overview
- Features
- Tech Stack
- Architecture
- Project Structure
- Design System
- Getting Started
- Scripts
- Deployment
- Product Plans
- Risk Engine
- Accessibility
- License
InsuranceHUB is Pacific Cross's flagship digital insurance platform, purpose-built for the Filipino market. It combines real Philippine mortality data, actuarial risk modeling, and immersive brutalist design to educate and protect Filipinos across every stage of life.
The platform serves two distinct audiences:
- Client Mode — An educational, self-service portal for individuals exploring life and health insurance options with interactive calculators, risk profiling, and product recommendations.
- Advisor Mode — A professional dashboard for Pacific Cross advisors with lead capture, plan comparison tools, and market intelligence.
| Metric | Value | Source |
|---|---|---|
| Insurance Penetration | 1.79% | Insurance Commission |
| No Health Coverage | 70% | PhilHealth |
| Medical Bankruptcy | 40% | WHO Philippines |
| Years of Trust | 75+ | Pacific Cross Heritage |
- Hero Section — Cinematic full-screen landing with GSAP wipe animation, rotating shield rings, floating bio-statistics, and adaptive copy for client/advisor modes.
- Philippine Data Dashboard — Four animated stat cells with SVG ring progress indicators and GSAP-powered scroll counter animations.
- Interactive Risk Calculator — Real-time risk profiling with age, sex, income, dependents, and lifestyle risk factor inputs. Outputs include risk score, Human Economic Value (HEV), coverage recommendations, and a 5-axis radar chart.
- Data Visualization Suite — Horizontal bar chart (top causes of death in PH) and area chart (age-specific mortality rate curve) powered by Chart.js with responsive, theme-aware styling.
- Life Stage Timeline — Six pinned life stages (Childhood through Elder) with IntersectionObserver-driven transitions, scroll-scrubbed progress bar, and per-stage radar charts showing risk category distribution.
- Smart Quiz — Four-question interactive flow that maps responses to five product tiers (Essential through Ultimate) with detailed feature breakdowns.
- Advisor Dashboard — Professional view with quick stats, lead capture form, 5-plan comparison table, and market intelligence card.
- Dual Theme Engine — Dark (default) and light themes with CSS custom properties, localStorage persistence, and 500ms cross-fade transition.
- GSAP Animation Suite — Page wipe, scroll-triggered reveals, magnetic buttons, custom cursor with follow ring, stat counter tweens, and vision section scrub gradients.
- Canvas Texture Generator — Procedural grain texture (512x512 canvas) + SVG cell pattern overlay for photography-grade depth.
- PWA Support — Web App Manifest, Apple mobile web app meta tags, standalone display mode, and portrait orientation lock.
- Global Scroll Progress — Fixed 3px yellow progress indicator tracking page scroll position.
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.1.1 | React framework (App Router, Turbopack) |
| React | 19.0 | UI library |
| TypeScript | 5.x | Type safety |
| GSAP | 3.12.5 | Animation engine (ScrollTrigger) |
| Chart.js | 4.4.1 | Data visualization |
| Tailwind CSS | 4.x | Utility-first CSS |
| next/font | — | Google Fonts optimization |
| Font | Weight | Role |
|---|---|---|
| Anton | 400 | Display headings |
| Manrope | 400, 600 | Body text |
| DM Mono | 400 | Code, labels, data |
| Playfair Display | 700 | Surreal/vision headings |
┌──────────────────────────────────────┐
│ Next.js App Router │
│ (src/app/layout.tsx) │
├──────────────────────────────────────┤
│ │
│ ┌─────────────────────────────┐ │
│ │ page.tsx (Client Component) │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Risk Engine │ │ │
│ │ │ Theme Engine │ │ │
│ │ │ Texture Generator │ │ │
│ │ │ Chart Orchestrator│ │ │
│ │ │ Quiz System │ │ │
│ │ │ GSAP Animations │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
│ │
│ globals.css (Design Token System) │
└──────────────────────────────────────┘
│
┌──────────────┴──────────────┐
│ External CDN │
│ GSAP 3.12.5 + ScrollTrigger │
│ Chart.js 4.4.1 │
└──────────────────────────────┘
All client-side state is managed via React hooks (useState, useRef, useCallback, useEffect). Theme preference is persisted to localStorage under the key insurancehub_theme.
- CDN Scripts load via
next/scriptwithafterInteractivestrategy - GSAP + ScrollTrigger are registered in a
useEffectwith 500ms delay (CDN load safety) - Wipe overlay plays on mount, then hero elements stagger in
- ScrollTrigger instances handle: stat counters, section reveals, timeline scrub, vision gradient
- Magnetic buttons and custom cursor are bound to all interactive elements
insurancehub/
├── public/
│ ├── manifest.json # PWA manifest
│ ├── insurancehub-favicon.svg # App favicon (shield + IH)
│ ├── logo.svg # Brand logo
│ └── robots.txt # Search engine directives
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout (fonts, metadata, PWA)
│ │ ├── page.tsx # Main application (~1,366 lines)
│ │ └── globals.css # Design token system (~1,345 lines)
│ ├── components/ui/ # shadcn/ui components
│ ├── hooks/ # React hooks
│ └── lib/ # Utilities
├── package.json # Dependencies & scripts
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── postcss.config.mjs # PostCSS configuration
├── eslint.config.mjs # ESLint configuration
└── README.md # This file
| Token | Dark | Light | Usage |
|---|---|---|---|
--bg |
#080808 |
#f2eed8 |
Primary background |
--bg2 |
#0f0f0f |
#e8e4ce |
Secondary background |
--surface |
#111111 |
#f0ecd6 |
Card/panel background |
--border |
#2a2a2a |
#d4d0b8 |
Borders, dividers |
--text |
#f0ede6 |
#0d0d0d |
Primary text |
--text-dim |
#888888 |
#555555 |
Secondary text |
--yellow |
#f5c400 |
#d4a800 |
Accent (primary) |
--cyan |
#00d4ff |
#0099cc |
Accent (secondary) |
--blood |
#cc1a1a |
#a81010 |
Danger/high risk |
--moss |
#2d7a3a |
#1e6030 |
Success/positive |
--purple |
#8b5cf6 |
#6d3fc0 |
Creative/emphasis |
- Brutalist Grid — Sharp corners (
border-radius: 0), heavy borders, exposed structure - 4px Baseline — Consistent spacing and sizing increments
- Monospace Data — All labels, stats, and data rendered in DM Mono
- High Contrast — Yellow on black, bold type hierarchy (Anton 9rem → DM Mono 0.65rem)
- Motion with Purpose — Every animation serves user comprehension (reveals data on scroll, guides attention)
| Breakpoint | Behavior |
|---|---|
> 1024px |
Full desktop layout |
769px - 1024px |
Compact nav pills |
≤ 768px |
Single column, hidden nav center, no hero visual |
- Node.js 18+ or Bun
- npm, yarn, or bun
# Clone the repository
git clone https://github.com/pacificcross/insurancehub.git
cd insurancehub
# Install dependencies
npm install
# or: bun install
# Start development server
npm run dev
# or: bun devThe development server runs on http://localhost:3000.
No environment variables are required for the client-facing application. The app loads GSAP and Chart.js from CDN via next/script.
For production deployment with the AI gateway, set:
AI_GATEWAY_API_KEY=vck_your_key_here| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack (port 3000) |
npm run build |
Production build with standalone output |
npm run start |
Start production server |
npm run lint |
Run ESLint checks |
- Push the repository to GitHub
- Connect the repo to Vercel
- Set the
AI_GATEWAY_API_KEYenvironment variable in Project Settings - Deploy — Vercel auto-detects Next.js configuration
The app uses output: "standalone" in next.config.ts for optimal serverless deployment.
The repository includes GitHub Actions configuration for automatic deployment. The gh-pages branch serves the static export.
# Build the production bundle
npm run build
# The standalone output is in .next/standalone/
# Start the server
node .next/standalone/server.jsInsuranceHUB presents five Pacific Cross insurance tiers, each mapped from the risk calculator and quiz engine:
| Plan | Annual Price | Coverage | Critical Illness | Worldwide | Deductible |
|---|---|---|---|---|---|
| FLEXISHIELD BASIC | ₱3,200 | ₱500,000 | — | — | Yes |
| FLEXISHIELD PLUS | ₱6,510 | ₱1,000,000 | Yes | — | Yes |
| PC PREMIUM | ₱12,800 | ₱2,500,000 | Yes | Yes | Yes |
| PC EXECUTIVE | ₱25,500 | ₱5,000,000 | Yes | Yes | No |
| PC ULTIMATE | ₱45,000 | ₱10,000,000 | Yes | Yes | No |
The risk engine uses Philippine mortality data with age-based interpolation and risk factor multipliers:
| Age Range | Base Rate (per 1,000) |
|---|---|
| 0-29 | 0.17 |
| 30-49 | 0.50 |
| 50-69 | 2.00 |
| 70+ | 6.00 |
| Factor | Multiplier |
|---|---|
| Male sex | ×1.20 |
| Smoker | ×1.50 |
| Diabetes history | ×1.40 |
| Sedentary lifestyle | ×1.20 |
| OFW / frequent travel | ×1.30 |
| Score Range | Label | Color |
|---|---|---|
| < 0.50 | LOW | #2d7a3a (Moss) |
| 0.50 - 1.49 | MODERATE | #f5c400 (Yellow) |
| 1.50 - 3.99 | HIGH | #cc1a1a (Blood) |
| ≥ 4.00 | VERY HIGH | #8b0000 (Dark Red) |
HEV = Monthly Income × 12 × (72 - Age)
This formula estimates the remaining lifetime economic output, providing a baseline for recommended coverage amounts.
InsuranceHUB implements the following accessibility features:
- Skip Navigation — Hidden skip link that appears on keyboard focus, jumping to the calculator section
- ARIA Labels — Descriptive labels on navigation (
role="navigation"), stat cells (role="group"), and theme toggle - Focus Management — Custom
:focus-visiblestyles with yellow outline and 2px offset - Reduced Motion —
@media (prefers-reduced-motion: reduce)disables all animations, transitions, and hides decorative overlays (texture, cursor, wipe) - Semantic HTML — Proper use of
<nav>,<section>,<h1>-<h3>hierarchy - Keyboard Navigation — All interactive elements are button-based with native keyboard support
- Color Contrast — High contrast color tokens across both themes
MIT License — Pacific Cross. Built with purpose for the Filipino people.
InsuranceHUB by Pacific Cross
Wealth Armor for Filipinos
