Is your feature request related to a problem?

RaspAP's existing dashboard, while clean and functional, has been essentially unchanged for many years. It could be improved by displaying relevant information more intuitively while also being more visually appealing.

Describe the solution you'd like

Mockups have been developed that overhaul the dashboard to give it an "at-a-glance" summary of the router's current configuration. Active routes and services are indicated in color; inactive ones are greyed-out. The inactive routes use a dashed rather than solid line.

Specific requirements are summarized below:

1. A minimum of three (3) different Bootstrap 5.x media sizes should be implemented. These are provided in the following mockups: 1) full width desktop, 2) medium width, and 3) mobile.
2. The device in .svg format using the default theme color is available here.
3. Icons are limited to Font Awesome Free v6.6. It should be obvious from the mockups which ones are used; if clarity is needed just reply in the issue.
4. Font Awesome stacking should be used to indicate disabled / unavailable items (the firewall in the mockup, for example).
5. CSS should be kept to a minimum and placed in app/css/all.css.
6. The design elements should be contained inside the existing <div class="card-body"> in templates/dashboard.php.
7. The existing card-body contents may be removed entirely.
8. Final markup should be validated with a 508 checker.
9. No PHP work is required; only markup is needed.

Describe alternatives you've considered

N/A.

Additional context

1. Full width

2. Medium width

3. Mobile devices