@php // Skyline geometry for the city scene + finale backdrop — hand-placed rather // than randomized so the composition reads intentionally, not noisy. $buildings = [ ['x' => 20, 'w' => 60, 'h' => 130], ['x' => 90, 'w' => 46, 'h' => 185], ['x' => 146, 'w' => 68, 'h' => 105], ['x' => 224, 'w' => 54, 'h' => 215], ['x' => 288, 'w' => 64, 'h' => 145], ['x' => 362, 'w' => 50, 'h' => 195], ['x' => 422, 'w' => 74, 'h' => 125], ['x' => 508, 'w' => 58, 'h' => 175], ['x' => 578, 'w' => 50, 'h' => 145], ['x' => 638, 'w' => 68, 'h' => 205], ['x' => 718, 'w' => 54, 'h' => 135], ]; $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('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('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 ============ --}}
{{-- Swap this file (or the src below) for a real bus photo — the arrival bounce, ground shadow, and speed lines above are an animated overlay that works with any image here. --}}

Route 12 · Ratnapark → Koteshwor

{{-- ============ SCENE 4 — TAP / APPROVE ============ --}}
{{-- Swap this file (or the src below) for a real validator/kiosk photo — the NFC waves, checkmark, ripple, and screen-flash below are an animated overlay positioned on top, unaffected by whatever image sits behind them. --}}

NPR 45 deducted

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

Yatra Card now

NPR 45 deducted · Balance NPR 2,405

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

Hi, Sunita

Yatra Card •••• 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 ============ --}}
@for ($i = 0; $i < 4; $i++) ₨ @endfor

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