# Screenshots

Drop product screenshots here, then reference them from `lib/constants.ts`.

| Where on the site            | Constant / field                     | Suggested file            | Ratio |
| ---------------------------- | ------------------------------------ | ------------------------- | ----- |
| Hero (big dashboard mockup)  | `SCREENSHOTS.hero`                   | `dashboard.png`           | 16:9  |
| Solution tab → Workforce     | `SCREENSHOTS.workforce`              | `attendance.png`          | 4:3   |
| Solution tab → Field Force   | `SCREENSHOTS.field`                  | `visit.png`               | 4:3   |
| Features → Attendance        | `FEATURES[0].image`                  | `attendance.png`          | 4:3   |
| Features → Field Visits      | `FEATURES[1].image`                  | `visit.png`               | 4:3   |
| Features → Route Planning    | `FEATURES[2].image`                  | `beat-plan.png`           | 4:3   |
| Features → Orders            | `FEATURES[3].image`                  | `orders.png`              | 4:3   |
| Features → Leads             | `FEATURES[4].image`                  | `leads.png`               | 4:3   |
| Features → Expenses          | `FEATURES[5].image`                  | `expenses.png`            | 4:3   |

Example: after adding `public/screenshots/dashboard.png`, set in `lib/constants.ts`:

```ts
export const SCREENSHOTS = {
  hero: "/screenshots/dashboard.png",
  ...
};
```

Tips:
- ~1600px wide, PNG or WebP. WebP is smaller.
- Any empty path keeps the gradient placeholder, so you can add screenshots one at a time.
- Phone screens look best on a dark/neutral background or inside a device frame.