Neighborhood Blue-Collar Trust Platform (Frontend)

Summary

The Neighborhood Blue-Collar Trust Platform Frontend is a Progressive Web App (PWA) and responsive desktop portal designed specifically for Philippine mobile networks and budget smartphones.

Built with Next.js (App Router) and UnoCSS, it uses an InsurTech-inspired design language (reminiscent of digital health insurance cards) to give informal workers a legitimate digital credential showcasing their verifiable TrustScore, trade badges, and instant gate clearance passes.

Homepage & Feature Highlights

• Digital Trust ID Card: An interactive hero showcase credential card featuring live TrustScore dials, verified status badges, and gated subdivision clearance QR tokens.
• Zero-JS CSS Icons: Leverages @unocss/preset-icons and @iconify-json/lucide to render all UI icons via pure CSS background masks—introducing 0 bytes of icon JavaScript to client bundles.
• Dual-Mode Ergonomics:
  • Desktop (≥ 768px): Wide multi-column layout, two-column hero with Digital Trust ID, proof metrics ribbon, and comprehensive search filter.
  • Mobile (< 768px): Optimized PWA ergonomics with a sticky bottom 4-tab pill navigation bar and generous ≥ 48px touch targets.
• Subdivision Guard Scanner: Specialized high-contrast scanner screen allowing community security personnel to validate visitor gate passes with instant AUTHORIZED or DENIED feedback.

High-Level Architecture