Lite Web Experience Platform (`/l/*`)

The Lite Web Experience Platform (/l/*) is an edge-optimized, ultra-lightweight parallel web portal engineered specifically for commercial transportation fleets, long-haul truck drivers, owner-operators, and remote field contractors. It delivers 100% of HiTech Insurance's core insurance quoting, coverage directories, claims, and roadside verification workflows with a 98% reduction in network payload and sub-second load times on spotty rural cellular connections.

1. Operational Rationale & Driver Demographics

1.1 The Operational Reality of Commercial Trucking

Commercial truck drivers operate in conditions vastly different from traditional office web users:

Interstate Corridor Cellular Dead Zones: Haulers frequently navigate rural highway transit corridors (e.g., I-10 West Texas, I-80 Wyoming, I-40 panhandles), weigh stations, and remote loading docks where network connectivity drops to congested or 1-bar 3G/LTE signals.
Urgent DOT Roadside Inspections: During a Department of Transportation (DOT) roadside inspection or state highway patrol pullover, drivers must present active insurance certificates, policy numbers, or safety verification within seconds. A 10-second spin cycle on an asset-heavy website directly delays vehicle dispatch and risks regulatory inspection penalties.
Device & Battery Constraints: Commercial drivers rely on cab-mounted mobile devices that suffer thermal throttling or battery drain when loading GPU-heavy WebGL canvasses or high-bitrate video streams in warm vehicle cabs.

1.2 Performance Benchmark: Flagship vs. Lite

Performance Metric	Flagship Full Portal	Lite Platform (`/l/*`)	Operational Gain
Total Page Payload	8.5 MB – 18.2 MB	< 180 KB	98.2% bandwidth reduction
First Contentful Paint (FCP)	1.8s – 3.2s	0.35s – 0.45s	7x faster initial render
Time to Interactive (TTI)	3.5s – 6.0s	< 0.60s	Instant responsiveness
Lighthouse Performance Score	72 – 85	98 – 100	Near-perfect mobile score
3D / WebGL Runtimes	Spline 3D & Canvas	Zero (0 KB WebGL)	Zero GPU or battery drain
Media Assets	High-res background video loops	Optimized vector SVGs only	100% reliability on 3G
Core Insurance Workflows	100% Parity	100% Parity	Identical backend pipelines

2. Technical Architecture & Routing

2.1 Dedicated Parallel Route Tree (`/l/*`)

Rather than relying on client-side responsive CSS hiding (display: none), which still forces the client browser to download heavy underlying JavaScript bundles and video assets, the Lite platform runs on an isolated parallel route tree within Next.js App Router:

src/app/
├── [locale]/
│   ├── (main)/
│   │   ├── page.tsx                     # Full flagship homepage (Spline 3D, video loops)
│   │   ├── insurance/
│   │   │   ├── [slug]/page.tsx          # Full insurance line details
│   │   ├── blog/
│   │   │   ├── [slug]/page.tsx          # Full editorial blog
│   │   └── ...
│   │
│   └── l/                               # Isolated Lite Web Platform Route Tree
│       ├── page.tsx                     # Zero-bundle Lite Homepage (<180 KB)
│       ├── insurance/
│       │   ├── page.tsx                 # 20 categorized insurance cards
│       │   └── [slug]/page.tsx          # High-performance coverage specs
│       ├── blog/
│       │   ├── page.tsx                 # Edge-rendered article feed
│       │   └── [slug]/page.tsx          # Reader-optimized typography
│       ├── contact/page.tsx             # Direct agent dispatch & phone dialers
│       ├── claims/page.tsx              # First Notice of Loss (FNOL) form
│       └── quote/page.tsx               # Instant multi-step quote wizard

By physically partitioning routes into /l/*, Next.js code splitting excludes @splinetool/runtime, heavy framer-motion variants, and Lottie animations from the JavaScript bundle delivered to Lite users.

Every flagship URL maps deterministically to an identical Lite counterpart across both English (en) and Spanish (es) locales:

Full Route: /[locale]/insurance/commercial-trucking
     ↕
Lite Route: /[locale]/l/insurance/commercial-trucking

3. Experience Mode State & Persistence

User experience preference is preserved across page navigations, browser restarts, and middleware redirects using both a persistent cookie and client localStorage:

Cookie Key: hti_experience_mode
Allowed Values: 'full' | 'lite'
Cookie Attributes: path=/; max-age=31536000; SameSite=Lax

3.2 `<ExperienceModeProvider>` & `<ExperienceToggle>`

ExperienceModeProvider (src/context/experience-mode-context.tsx):
- Manages reactive state (mode: 'full' | 'lite').
- Listens for window path changes and keeps cookie and local state in sync.
- Provides helper method setMode(mode: 'full' | 'lite').
ExperienceToggle Floating Widget (src/components/experience-toggle.tsx):
- Positioned fixed on the viewport bottom corner.
- Provides a clean toggle between "Full Experience" (rich 3D visual fidelity) and "Lite Experience" (fast, data-saver mode).
- Shows connection indicator (e.g. ⚡ Fast / Data Saver).

4. Feature Coverage & Parity

The Lite Platform provides 100% functional parity with the full experience:

4.1 All 20 Commercial Insurance Lines Categorized

The Lite directory (/[locale]/l/insurance) categorizes all 20 specialized insurance lines using identical product nomenclature to avoid driver confusion:

Commercial Transportation & Trucking:
- Primary Auto Liability
- Motor Truck Cargo
- Physical Damage Insurance
- Non-Trucking Liability (Bobtail)
- Commercial General Liability
- Trailer Interchange Coverage
- Occupational Accident (Occ/Acc)
- Dump Truck Insurance
- Tow Truck Insurance
Business & Commercial Fleet:
- Commercial Auto Insurance
- Fleet Insurance Solutions
- Workers' Compensation
- Business Owner's Policy (BOP)
- Contractor Equipment (Inland Marine)
- Excess / Umbrella Liability
Personal Lines:
- Personal Auto Coverage
- Classic / Collector Car
- Motorcycle Insurance
- Recreational Vehicle (RV)
- Homeowners & Renters

4.2 Aligned Testimonials Carousel & Dynamic FAQs

Real Policyholder Reviews: The Lite platform mirrors the verified customer reviews and star ratings managed in the Admin Social Management portal without loading heavy third-party review widgets.
Bilingual FAQs: Accordion questions and answers on policy filing, certificates of insurance (COI), and claims process seamlessly without JavaScript hydration delays.
Instant Phone Dispatch: One-tap tel: action triggers directly connect drivers to the commercial underwriting desk (+1 888 915 4847).

1. Operational Rationale & Driver Demographics​

1.1 The Operational Reality of Commercial Trucking​

1.2 Performance Benchmark: Flagship vs. Lite​

2. Technical Architecture & Routing​

2.1 Dedicated Parallel Route Tree (/l/*)​

2.2 Route Synchronization & Bidirectional Navigation​

3. Experience Mode State & Persistence​

3.1 Dual Persistence: Cookie & LocalStorage​

3.2 <ExperienceModeProvider> & <ExperienceToggle>​

4. Feature Coverage & Parity​

4.1 All 20 Commercial Insurance Lines Categorized​

4.2 Aligned Testimonials Carousel & Dynamic FAQs​