docs: Add screenshots to README and introduction for better visualization

README.md

@@ -5,6 +5,10 @@
 
 Tracktor is an open-source web application for comprehensive vehicle management. Easily track fuel consumption, maintenance, insurance, and regulatory documents for all your vehicles in one place.
 
+<p align="center">
+  <img src="app/docs/public/screenshots/dashboard.png" alt="Dashboard" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+
 ## Features
 
 - **Vehicle Management:** Add, edit, and manage multiple vehicles.
@@ -14,6 +18,33 @@ Tracktor is an open-source web application for comprehensive vehicle management.
 - **Dashboard:** Visualize key metrics and upcoming renewals.
 - **User Authentication:** Secure access to your data.
 
+## Screenshots
+
+<p align="center">
+  <h3>Login Page</h3><br>
+  <img src="app/docs/public/screenshots/login.png" alt="Login Page" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Charts</h3><br>
+  <img src="app/docs/public/screenshots/charts.png" alt="Charts" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Fuel Log</h3><br>
+  <img src="app/docs/public/screenshots/fuel.png" alt="Fuel Log" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Maintenance Log</h3><br>
+  <img src="app/docs/public/screenshots/maintenance.png" alt="Maintenance Log" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Insurance Details</h3><br>
+  <img src="app/docs/public/screenshots/insurance.png" alt="Insurance Details" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>PUCC Details</h3><br>
+  <img src="app/docs/public/screenshots/pucc.png" alt="PUCC Details" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+
 ## Tech Stack
 
 - **Frontend:** SvelteKit, Tailwind CSS

app/docs/index.md

@@ -38,4 +38,6 @@ features:
   - icon: 🔑
     title: User Authentication
     details: Secure access to your data.
----
+---
+
+<img src="/screenshots/dashboard.png" alt="Dashboard" style="margin-top: 24px; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">

app/docs/introduction.md

@@ -30,6 +30,36 @@ At its core, Tracktor is a centralized dashboard for all your vehicle-related in
 * **Maintenance Tracking:** Record service history, schedule upcoming maintenance, and receive reminders (future enhancement).
 * **Insurance & Pollution Certificate Management:** Store policy details, upload documents, and get renewal/expiration alerts (future enhancement).
 
+## Screenshots
+
+### Login Page
+
+<img src="/screenshots/login.png" alt="Login Page" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Dashboard
+
+<img src="/screenshots/dashboard.png" alt="Dashboard" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Charts
+
+<img src="/screenshots/charts.png" alt="Charts" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Fuel Log
+
+<img src="/screenshots/fuel.png" alt="Fuel Log" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Maintenance Log
+
+<img src="/screenshots/maintenance.png" alt="Maintenance Log" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Insurance Details
+
+<img src="/screenshots/insurance.png" alt="Insurance Details" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### PUCC Details
+
+<img src="/screenshots/pucc.png" alt="PUCC Details" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
 ## Non-Functional Strengths
 
 Tracktor is designed for: