# Mobile App Feature Page - Asset Requirements

**Last Updated:** 2026-02-02

## Overview

This document lists all visual assets needed for the Ordio mobile app feature page (`product_mobile_app.php`). Assets are organized by priority and include placeholders where assets are not yet available.

## Required Assets

### 1. Hero Image

**Status:** ✅ Available (using dashboard screenshot)

**File:** `/v2/img/mobile-app/screens/webp/dashboard/dashboard-009-IMG_2664.webp`

**Specifications:**

- Format: WebP
- Dimensions: 800x600px (current)
- Usage: Hero section, right column
- Alt text: "Ordio Mitarbeiter-App Dashboard - Schichten, Zeiten und Übersicht auf einen Blick"
- Optimization: Preloaded with `fetchpriority="high"`

**Placeholder:** None needed (using existing screenshot)

### 2. Feature Screenshots

**Status:** ✅ Available (using existing screenshots)

**Files:**

- Schichtplanung: `/v2/img/mobile-app/screens/webp/schichtplanung/schichtplanung-015-IMG_2670.webp`
- Zeiterfassung: `/v2/img/mobile-app/screens/webp/zeiterfassung/zeiterfassung-046-IMG_2701.webp`
- Abwesenheiten: `/v2/img/mobile-app/screens/webp/abwesenheiten/abwesenheiten-018-IMG_2673.webp`

**Specifications:**

- Format: WebP
- Dimensions: 800x600px each
- Usage: Feature showcase sections
- Optimization: Lazy loaded with `loading="lazy"` and `decoding="async"`

**Placeholder:** None needed (using existing screenshots)

**Additional Feature Screenshots Needed:**

- Checklists: `[SCREENSHOT_CHECKLISTS]` - Use from `/v2/img/mobile-app/screens/webp/checklists/`
- Dokumentenmanagement: `[SCREENSHOT_DOCUMENTS]` - Use from `/v2/img/mobile-app/screens/webp/documents/`
- Dashboard Detail: `[SCREENSHOT_DASHBOARD_DETAIL]` - Use from `/v2/img/mobile-app/screens/webp/dashboard/`

### 3. App Store Badges

**Status:** ⚠️ Placeholder needed

**Files Needed:**

- iOS App Store Badge: `[APP_STORE_BADGE_IOS]`
- Android Google Play Badge: `[APP_STORE_BADGE_ANDROID]`

**Specifications:**

- Format: PNG or SVG (preferred)
- Dimensions: 180x60px each
- Usage: Hero section, below CTA buttons
- Languages: German versions preferred

**Placeholder:**

- Create placeholder divs with text "App Store" and "Google Play" until badges are available
- Or use generic app store badge images from Apple/Google

**Action Required:**

- Download official badges from:
  - iOS: https://developer.apple.com/app-store/marketing/guidelines/
  - Android: https://play.google.com/intl/en_us/badges/

### 4. Icons

**Status:** ✅ Using SVG icons inline

**Icons Used:**

- Calendar icon (Schichtplanung)
- Clock icon (Zeiterfassung)
- Arrow icon (Urlaub)
- Checklist icon (Checklists)
- Document icon (Dokumente)
- Notification icon (Benachrichtigungen)
- User icon (Mitarbeiter)
- Shield icon (Führungskräfte)
- File icon (HR)
- Sync icon (Synchronisation)
- Lock icon (Sicherheit)
- Device icon (Plattformübergreifend)

**Specifications:**

- Format: SVG (inline)
- Dimensions: 24x24px to 64x64px (varies by usage)
- Color: `#4D8EF3` (Ordio Blue) or `currentColor`
- Usage: Benefit cards, feature sections, user type sections

**Placeholder:** None needed (using inline SVG)

### 5. Mobile Mockup Frame

**Status:** ⚠️ Optional enhancement

**File:** `[MOBILE_MOCKUP_FRAME]`

**Specifications:**

- Format: SVG or PNG
- Dimensions: Variable (should accommodate 800x600px screenshots)
- Usage: Optional enhancement to display screenshots in phone frame
- Style: Modern iPhone or Android frame

**Placeholder:** Not critical - screenshots work well without frames

**Action Required:**

- Optional: Create or source mobile mockup frame for enhanced visual presentation
- Can be added later as enhancement

## Optional Assets

### 1. App Demo Video

**Status:** ⚠️ Placeholder

**File:** `[APP_DEMO_VIDEO]`

**Specifications:**

- Format: MP4 (WebM fallback)
- Duration: 30-60 seconds
- Content: App walkthrough showing key features
- Usage: Hero section or dedicated video section
- Optimization: Lazy load, provide poster image

**Placeholder:** Not included in current implementation

**Action Required:**

- Create app demo video showing:
  - Dashboard overview
  - Time tracking flow
  - Shift viewing
  - Vacation request flow
- Or use animated GIF as alternative

### 2. Animated GIF

**Status:** ⚠️ Placeholder

**File:** `[FEATURE_DEMO_GIF]`

**Specifications:**

- Format: GIF or WebP animation
- Dimensions: 800x600px
- Content: Feature demonstration (e.g., time tracking flow)
- Usage: Feature showcase sections
- Optimization: Lazy load

**Placeholder:** Not included in current implementation

**Action Required:**

- Create animated GIF showing key user flows
- Or use static screenshots (current approach)

### 3. Social Proof Assets

**Status:** ⚠️ Placeholder

**Assets Needed:**

- Customer testimonials (if available)
- Customer logos (if available)
- App store ratings display (if available)

**Specifications:**

- Format: PNG, SVG, or text
- Usage: Social proof section (not yet implemented)

**Placeholder:** Not included in current implementation

**Action Required:**

- Gather customer testimonials for mobile app
- Collect app store ratings/reviews
- Add social proof section if assets available

## Asset Optimization Checklist

- [x] Hero image preloaded with `fetchpriority="high"`
- [x] Below-fold images lazy loaded with `loading="lazy"`
- [x] All images have explicit `width` and `height` attributes
- [x] All images have descriptive `alt` text
- [x] Images use WebP format
- [x] Images have `decoding="async"` for performance
- [ ] App store badges added (when available)
- [ ] Video poster image (if video added)
- [ ] Responsive image srcset (if multiple sizes needed)

## Current Implementation Status

**Implemented:**

- ✅ Hero image (dashboard screenshot)
- ✅ Feature screenshots (Schichtplanung, Zeiterfassung, Abwesenheiten)
- ✅ Inline SVG icons for all sections
- ✅ Image optimization (preload, lazy load, async decoding)

**Pending:**

- ⚠️ App store badges (iOS and Android)
- ⚠️ Additional feature screenshots (Checklists, Documents) - can use existing screenshots
- ⚠️ Optional: Mobile mockup frame
- ⚠️ Optional: Demo video or animated GIF
- ⚠️ Optional: Social proof assets

## Interactive Components

**Status:** ✅ Implemented

**Components Created:**

- **Calendar Component** (`v2/components/mobile-app/calendar-component.php`) - Interactive calendar with date selection and availability timeline
- **Timer Component** (`v2/components/mobile-app/timer-component.php`) - Time tracking timer with circular progress
- **Absence Form Component** (`v2/components/mobile-app/absence-form-component.php`) - Absence request form with date pickers and toggles
- **Task List Component** (`v2/components/mobile-app/task-list-component.php`) - Checklist/task list with completion status
- **Dashboard Cards Component** (`v2/components/mobile-app/dashboard-cards-component.php`) - Dashboard cards for hero section

**CSS File:**

- `v2/css/mobile-app-components.css` - Component-specific styles, animations, and responsive breakpoints

**Features:**

- Alpine.js integration for interactivity
- CSS animations and transitions
- GPU-accelerated transforms
- Accessibility support (ARIA labels, keyboard navigation)
- Responsive design (mobile-first)
- Lazy loading for below-fold components
- Reduced motion support

## Recommendations

1. **Priority 1:** Add app store badges to hero section
2. **Priority 2:** Add Checklists and Documents feature screenshots (use existing screenshots from webp folders)
3. **Priority 3:** ✅ Interactive components implemented - replaces static screenshots
4. **Priority 4:** Create demo video or animated GIF for key user flows (optional enhancement)
5. **Priority 5:** Add social proof section with testimonials and ratings

## File Locations

**Screenshots:**

- `/v2/img/mobile-app/screens/webp/dashboard/` - Dashboard screenshots
- `/v2/img/mobile-app/screens/webp/schichtplanung/` - Shift planning screenshots
- `/v2/img/mobile-app/screens/webp/zeiterfassung/` - Time tracking screenshots
- `/v2/img/mobile-app/screens/webp/abwesenheiten/` - Absence screenshots
- `/v2/img/mobile-app/screens/webp/checklists/` - Checklist screenshots
- `/v2/img/mobile-app/screens/webp/documents/` - Document screenshots

**Icons:**

- Inline SVG in page file (no separate files needed)

**Badges:**

- To be added: `/v2/img/mobile-app/app-store-badge-ios.png`
- To be added: `/v2/img/mobile-app/app-store-badge-android.png`