feat: Add desktop screenshots

frontend/src/pages/GuidePage/sections/DashboardSection.tsx

@@ -40,7 +40,7 @@ export const DashboardSection = () => {
         </ul>
 
         <GuideScreenshot
-          src="/guide/dashboard-desktop.webp"
+          src="/guide/dashboard-desktop.png"
           alt="Dashboard showing vehicle fleet overview with health status cards"
           caption="The Dashboard displays your vehicle fleet with health status and quick actions"
         />
@@ -141,7 +141,7 @@ export const DashboardSection = () => {
         </ul>
 
         <GuideScreenshot
-          src="/guide/dashboard-mobile.webp"
+          src="/guide/dashboard-mobile.png"
           alt="Dashboard on mobile device showing responsive layout"
           caption="The Dashboard adapts to mobile screens with a responsive grid layout"
           mobile

frontend/src/pages/GuidePage/sections/DocumentsSection.tsx

@@ -30,7 +30,7 @@ export const DocumentsSection = () => {
       </ul>
 
       <GuideScreenshot
-        src="/guide/documents-desktop.webp"
+        src="/guide/documents-desktop.png"
         alt="Documents page showing document storage"
         caption="The Documents page for managing vehicle-related paperwork"
       />

frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx

@@ -31,7 +31,7 @@ export const FuelLogsSection = () => {
         </p>
 
         <GuideScreenshot
-          src="/guide/fuel-logs-desktop.webp"
+          src="/guide/fuel-logs-desktop.png"
           alt="Fuel Logs page showing summary statistics and fuel log entries table"
           caption="The Fuel Logs page displays summary statistics and all fuel entries"
         />
@@ -81,7 +81,7 @@ export const FuelLogsSection = () => {
         />
 
         <GuideScreenshot
-          src="/guide/log-fuel-modal-desktop.webp"
+          src="/guide/log-fuel-modal-desktop.png"
           alt="Log Fuel modal with form fields for fuel entry"
           caption="The Log Fuel modal with all fields for recording a fill-up"
         />
@@ -114,7 +114,7 @@ export const FuelLogsSection = () => {
         </ol>
 
         <GuideScreenshot
-          src="/guide/receipt-scan-mobile.webp"
+          src="/guide/receipt-scan-mobile.png"
           alt="Mobile device showing receipt scanning with camera"
           caption="Receipt scanning uses your device camera to extract fuel data"
           mobile

frontend/src/pages/GuidePage/sections/GasStationsSection.tsx

@@ -41,7 +41,7 @@ export const GasStationsSection = () => {
       />
 
       <GuideScreenshot
-        src="/guide/gas-stations-desktop.webp"
+        src="/guide/gas-stations-desktop.png"
         alt="Gas Stations page showing map and search controls"
         caption="The Gas Stations page with interactive map and search options"
       />

frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx

@@ -32,7 +32,7 @@ export const GettingStartedSection = () => {
         />
 
         <GuideScreenshot
-          src="/guide/signup-desktop.webp"
+          src="/guide/signup-desktop.png"
           alt="Sign Up page with registration form"
           caption="The Sign Up form with email, password, and terms & conditions fields"
         />
@@ -66,7 +66,7 @@ export const GettingStartedSection = () => {
         </p>
 
         <GuideScreenshot
-          src="/guide/login-desktop.webp"
+          src="/guide/login-desktop.png"
           alt="Login page showing email and password entry"
           caption="The secure Auth0 login page"
         />
@@ -96,7 +96,7 @@ export const GettingStartedSection = () => {
         </ol>
 
         <GuideScreenshot
-          src="/guide/onboarding-desktop.webp"
+          src="/guide/onboarding-desktop.png"
           alt="Onboarding flow showing preferences step"
           caption="The onboarding flow guides new users through initial setup"
         />
@@ -116,7 +116,7 @@ export const GettingStartedSection = () => {
         </p>
 
         <GuideScreenshot
-          src="/guide/onboarding-mobile.webp"
+          src="/guide/onboarding-mobile.png"
           alt="Mobile onboarding showing vehicle setup step"
           caption="The onboarding flow is fully responsive and works on mobile devices"
           mobile

frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx

@@ -22,7 +22,7 @@ export const MaintenanceSection = () => {
         </p>
 
         <GuideScreenshot
-          src="/guide/maintenance-records-desktop.webp"
+          src="/guide/maintenance-records-desktop.png"
           alt="Maintenance Records tab showing history and add form"
           caption="The Maintenance Records tab displays service history and an add form"
         />
@@ -81,7 +81,7 @@ export const MaintenanceSection = () => {
         />
 
         <GuideScreenshot
-          src="/guide/add-maintenance-mobile.webp"
+          src="/guide/add-maintenance-mobile.png"
           alt="Mobile view of Add Maintenance Record form"
           caption="The Add Maintenance Record form on mobile with category selection"
           mobile
@@ -96,7 +96,7 @@ export const MaintenanceSection = () => {
         </p>
 
         <GuideScreenshot
-          src="/guide/maintenance-schedules-desktop.webp"
+          src="/guide/maintenance-schedules-desktop.png"
           alt="Maintenance Schedules tab showing schedule creation form and active schedules"
           caption="The Maintenance Schedules tab for setting up recurring reminders"
         />

frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx

@@ -36,14 +36,14 @@ export const MobileExperienceSection = () => {
       </ul>
 
       <GuideScreenshot
-        src="/guide/mobile-bottom-nav.webp"
+        src="/guide/mobile-bottom-nav.png"
         alt="Mobile bottom navigation bar with FAB quick actions"
         caption="The mobile bottom navigation bar and floating action button"
         mobile
       />
 
       <GuideScreenshot
-        src="/guide/mobile-hamburger.webp"
+        src="/guide/mobile-hamburger.png"
         alt="Mobile hamburger drawer menu"
         caption="The mobile hamburger menu provides access to all sections"
         mobile

frontend/src/pages/GuidePage/sections/SettingsSection.tsx

@@ -31,7 +31,7 @@ export const SettingsSection = () => {
       />
 
       <GuideScreenshot
-        src="/guide/settings-desktop.webp"
+        src="/guide/settings-desktop.png"
         alt="Settings page showing profile and account options"
         caption="The Settings page with profile, security, subscription, and preferences"
       />

frontend/src/pages/GuidePage/sections/VehiclesSection.tsx

@@ -34,7 +34,7 @@ export const VehiclesSection = () => {
         </ul>
 
         <GuideScreenshot
-          src="/guide/vehicles-list-desktop.webp"
+          src="/guide/vehicles-list-desktop.png"
           alt="Vehicles page showing grid of vehicle cards with details"
           caption="The Vehicles page displays all your vehicles in a searchable grid"
         />
@@ -87,7 +87,7 @@ export const VehiclesSection = () => {
         />
 
         <GuideScreenshot
-          src="/guide/add-vehicle-form-desktop.webp"
+          src="/guide/add-vehicle-form-desktop.png"
           alt="Add Vehicle form showing cascading dropdowns for specifications"
           caption="The Add Vehicle form with cascading dropdowns for easy data entry"
         />
@@ -139,7 +139,7 @@ export const VehiclesSection = () => {
         </ol>
 
         <GuideScreenshot
-          src="/guide/vin-decode-desktop.webp"
+          src="/guide/vin-decode-desktop.png"
           alt="VIN Decode feature showing auto-populated vehicle specifications"
           caption="The VIN Decode feature automatically fills in vehicle details from the NHTSA database"
         />
@@ -173,7 +173,7 @@ export const VehiclesSection = () => {
         </ul>
 
         <GuideScreenshot
-          src="/guide/vehicle-detail-desktop.webp"
+          src="/guide/vehicle-detail-desktop.png"
           alt="Vehicle Detail page showing complete vehicle information and records"
           caption="The Vehicle Detail page displays all information and records for a single vehicle"
         />