@php // Skyline geometry for the bus scene's background decoration — bolder, // fewer buildings (roughly double the old width each) rather than a // scattered row of thin strips. Matches public/images/journey/city-skyline.svg. $buildings = [ ['x' => 10, 'w' => 120, 'h' => 150], ['x' => 145, 'w' => 110, 'h' => 210], ['x' => 270, 'w' => 130, 'h' => 170], ['x' => 415, 'w' => 115, 'h' => 225], ['x' => 545, 'w' => 125, 'h' => 180], ['x' => 685, 'w' => 115, 'h' => 200], ]; $skylineBaseline = 300; @endphp

One tap. One story.

Follow a Single Tap Across the City

Scroll to ride along — from a doorstep in Kathmandu to a validator, a notification, and a dashboard that keeps up with every rupee.

{{-- Everything below shares this bounded box instead of the raw viewport. Without it, percentage-positioned decoration (the bus shelter, the skyline, the progress rail…) drifts wildly apart on ultra-wide monitors and cramps together on narrow ones, because a "left: 82%" means something different on a 390px phone than a 2560px monitor. Capping the coordinate space keeps every scene's composition proportionate at any size. --}}
@include('frontend.partials.home.journey-card-inner')

{{-- Static/mobile fallback only: one proper card moment up front, instead of repeating a tiny placeholder block in every stacked scene. --}}
@include('frontend.partials.home.journey-card-inner')
{{-- ============ SCENE 1 — CITY ============ --}}
{{-- Swap this file (or the src below) for a real photo/illustration — the moon glow + beacon stay as an animated overlay on top of whatever image sits here. --}}
{{-- ============ SCENE 2 — WALK ============ --}}
{{-- Swap this file (or the src below) for a real commuter photo — the bob and footstep-ping rings are an animated overlay. --}}

Bus Stop · Ratnapark

{{-- ============ SCENE 3 — BUS ============ --}}
{{-- The road/skyline silhouette decoration was for the old SVG illustration; the real bus photo already has its own background, so drawing another one behind it just floats disconnected boxes next to the photo. --}}

Route 12 · Ratnapark → Koteshwor

{{-- ============ SCENE 4 — TAP / APPROVE ============ --}}

NPR 45 deducted

{{-- ============ SCENE 5 — NOTIFY ============ --}}
9:41

Fintech now

NPR 45 deducted · Balance NPR 2,405

{{-- ============ SCENE 6 — DASHBOARD ============ --}}
9:42

Hi, Sunita

Fintech •••• 8821

Available Balance

NPR 2,405

Recharge History Support

Ratnapark → Koteshwor

Today, 9:14 AM
-NPR 45

Baneshwor → Airport

Yesterday, 6:02 PM
-NPR 60
{{-- ============ SCENE 7 — RECHARGE ============ --}}
9:43
@for ($i = 0; $i < 4; $i++) ₨ @endfor
{{-- Docked to a corner of the phone, not the recharge pad itself — at the card's normal scale this widget is small enough that a centered dock would sit right on top of both the pad and the amount label below it. --}}

NPR 450

{{-- ============ SCENE 8 — MAP ============ --}}

Kathmandu · Lalitpur · Bhaktapur

Route 12 Route 7
{{-- ============ SCENE 9 — ECOSYSTEM ============ --}}
@for ($i = 0; $i < 5; $i++) @endfor

Bus · Wallet · Parking · Retail · What's next

{{-- ============ SCENE 10 — FINALE ============ --}}

Your Journey. One Card.
Infinite Possibilities.

Get Your Card See How It Works