Enhance PWA Install Page with Step-by-Step Images (Android, iOS, Desktop)

[shadil-rayyan]

The Install App (PWA) page currently explains the installation process using text-only paragraphs.
While informative, this is difficult for first-time users to follow—especially on mobile.

We should embed step-by-step screenshots/images alongside the instructions to make the PWA install process clearer and more beginner-friendly.

---

Current State

• Page: app/pwa-install/page.tsx

• Installation steps are explained using text only

• Users must imagine browser icons, menus, and buttons

• Common confusion points:

  • Where the “Install App” icon appears
  • Safari vs Chrome differences
  • Mobile vs Desktop steps

---

Proposed Change

1. Add Visual Step Sections

For each platform, include illustrated steps:

• Android (Chrome / Edge / Brave)
• iOS (Safari only)
• Windows / macOS / Linux (Desktop browsers)

Each step should have:

• Short text
• Corresponding screenshot or icon image

Example layout:

Step 1: Open the menu (⋮)
[ image ]

Step 2: Tap “Install App”
[ image ]

---

2. Image Handling

• Store images in a folder like:

  /public/pwa-install/
  

• Use descriptive filenames:

  • android-menu.png
  • ios-share-button.png
  • desktop-install-icon.png

• Render using Next.js <Image /> for optimization

---

3. UI Expectations

• Images should be:

  • Responsive
  • Not too large
  • Clearly labeled

• Keep the existing text (do not remove it)

• Images should support, not replace, instructions

---

Acceptance Criteria

• Images added for Android install steps
• Images added for iOS (Safari) install steps
• Images added for Desktop browser install steps
• Images stored under /public
• Existing text remains readable and intact
• Page remains responsive on mobile and desktop

---

Why This Change Is Needed

• Reduces user confusion
• Improves first-time install success
• Makes the guide more beginner-friendly
• Aligns with PWA best practices