Complete Platform Prototype

Every screen. Every interaction. Every role. Built for handoff to Antigravity production deployment.

Landing Page

11-section conversion-optimized page. Dark hero, trust strip, how it works, portals, features, benefits, testimonials, pricing (ZAR), FAQ, CTA. 5-tap hidden admin access.

ResponsiveScroll Animations5-Tap AccessDual CTA

Customer Portal

Mobile-first app. Service booking (3-step), vehicle management, live job tracking with status bar, emergency SOS with full-screen overlay, history, notifications, profile.

Mobile-FirstBottom NavSOS ButtonLive Tracking

Service Advisor Dashboard

Glassmorphism command center. Job queue with approve/reject, mechanic assignment, emergency dispatch, live map, status tracking, sparkline metrics, active jobs table.

GlassmorphismReal-time QueueMechanic MapAssign Modal

Mechanic Dashboard

Mobile-field interface. Accept/decline jobs, 5-step workflow (On Way → Arrived → Diagnose → Repair → Complete), photo upload, notes, customer contact, availability toggle.

Mobile-FirstWorkflow StepsPhoto UploadAvailability

Super Admin

Platform management. Team members table with role invites, dealership onboarding, system health monitoring, activity log, revenue by dealership, user management.

Multi-TenancyRole InvitesSystem HealthActivity Log

Operations Suite

4-tab interface: Invoicing (line items, tax, PDF export), GPS Tracking (live map with movement), Notifications (templates + triggers), Payments (checkout, saved methods, history).

InvoicingGPS MapNotificationsPayments

🔐 Demo Credentials (5-tap logo on Landing Page)

Super Admin
admin@trp.co.za
admin123
→ /admin (Super Admin dashboard)
Service Advisor
advisor@trp.co.za
advisor123
→ /advisor (Service Advisor dashboard)
Mechanic
mechanic@trp.co.za
mech123
→ /mechanic (Mechanic dashboard)

Data Flow Architecture

Customer Request
Service Advisor Review
Job Card Created
Mechanic Assigned
Mechanic Completes
Invoice Generated
Payment Collected
🚨 Emergency SOS
Priority Queue (bypasses approval)
Immediate Dispatch

PWA & Mobile Readiness

All interfaces are built for progressive web app deployment. Add-to-homescreen delivers native app experience without App Store.

Installable (Add to Home Screen)
Full-screen mode
44×44px touch targets
Bottom nav (thumb zone)
Safe area insets (notch)
No hover-dependent interactions
Responsive 375px → 1440px+
Component-based (→ React Native)