Skip to content

SCREENSHOT_MANUAL_GUIDE.md

Latest commit

 

History

History
159 lines (126 loc) · 4.04 KB

SCREENSHOT_MANUAL_GUIDE.md

File metadata and controls

159 lines (126 loc) · 4.04 KB
Raw

📸 MoveLink Screenshot Capture Guide

Your app is running at http://localhost:8080 - let's capture the key screens manually!

🎯 Priority Screenshots to Take

1. HERO LANDING PAGE ⭐ MUST HAVE

URL: http://localhost:8080/ What to show:

  • Hero section with moving truck image
  • "Find the Best Moving Services in Kenya" headline
  • Quote form prominently displayed
  • Professional, clean design

📱 How to capture:

  1. Open Chrome DevTools (F12)
  2. Click device toolbar (📱 icon)
  3. Select "iPhone 12 Pro" or "Pixel 5"
  4. Navigate to home page
  5. Ensure hero section is fully visible (should be at top)
  6. Take screenshot

2. QUOTE FORM - EMPTY STATE ⭐ MUST HAVE

URL: http://localhost:8080/ What to show:

  • Clean quote form interface
  • Location autocomplete fields
  • Property type selector
  • Professional form design

📱 How to capture:

  1. Same device setup as above
  2. Scroll down to focus on the quote form
  3. Ensure form is visible and clean
  4. Take screenshot

3. QUOTE FORM - FILLED EXAMPLE ⭐ MUST HAVE

URL: http://localhost:8080/ What to show:

  • Form filled with realistic data
  • Shows ease of use
  • Professional data entry

📱 How to capture:

  1. Fill in the form with:
    • From: "Nairobi CBD, Kenya"
    • To: "Mombasa, Kenya"
    • Property Type: "3 Bedroom House"
    • Date: Pick a future date
  2. Take screenshot before submitting

4. CONTACT FORM STEP ⭐ MUST HAVE

URL: http://localhost:8080/ What to show:

  • Contact information collection
  • Professional form progression
  • User-friendly interface

📱 How to capture:

  1. Fill and submit the moving details form
  2. Wait for contact form to appear
  3. Show the clean contact form interface
  4. Take screenshot

5. AUTHENTICATION PAGE (Optional)

URL: http://localhost:8080/auth What to show:

  • Login/signup interface
  • Professional auth design
  • Brand consistency

6. USER DASHBOARD (Optional - if accessible)

URL: http://localhost:8080/quotes What to show:

  • User's quote history
  • Professional dashboard
  • Feature richness

📱 Quick Setup Instructions

Browser Setup (Recommended)

  1. Open Chrome/Firefox
  2. Navigate to: http://localhost:8080
  3. Press F12 (Developer Tools)
  4. Click device icon (📱) in toolbar
  5. Select device:
    • iPhone 12 Pro (390x844)
    • Pixel 5 (393x851)
    • iPad Air (820x1180) for tablet

Taking Screenshots

  1. Right-click in the viewport
  2. Select "Capture screenshot" OR
  3. Use Chrome extension like "GoFullPage" OR
  4. Use built-in: Ctrl+Shift+I > More tools > Capture screenshot

📐 Optimal Settings

Phone Screenshots

  • Resolution: 1080x1920px (or device natural size)
  • Format: PNG (better quality)
  • Orientation: Portrait

Tablet Screenshots

  • Resolution: 1600x2560px
  • Format: PNG
  • Orientation: Portrait

💡 Pro Tips for Great Screenshots

Content Tips

  • Use realistic data: Kenyan cities, realistic house sizes
  • Show completed states: Avoid loading screens
  • Test with good data: "Nairobi to Mombasa", "3 Bedroom House"

Visual Tips

  • Good lighting: Take screenshots with good screen brightness
  • Clean state: No error messages or loading states
  • Consistent branding: Ensure logo and colors are visible

Technical Tips

  • High resolution: Use 2x or higher device pixel ratio
  • PNG format: Better quality than JPG
  • Descriptive names: "01-hero.png", "02-quote-form.png"

📋 Screenshot Checklist

  • Hero page with clear value proposition
  • Quote form (empty state)
  • Quote form (filled example)
  • Contact form step
  • All text is readable
  • No personal/real data visible
  • Professional appearance
  • Brand colors and logos visible
  • Mobile-friendly layout shown

🚀 Quick Start Commands

# Your app is already running at:
# http://localhost:8080

# Open in browser and follow the guide above!

📁 Save Screenshots To

📁 Save Screenshots To