🛠️ Refactor: maximize use of Quasar components

[dlqqq]

Motivation 🏁

I'm currently in the process of re-factoring the practice card, and there are a few glaring issues with the existing codebase, especially with the Vue SFCs. We should begin with the home page. Observe that the root element is the q-page component. This is wrong and leads to unexpected layout behavior. From the Quasar Docs:

A QPage must be encapsulated by QPageContainer, which in turn must be a child of QLayout.

The QLayout element provides built-in components that make generating user layouts far less error prone and more well-documented. There is no need to write use div elements with the mobile-container or config-header CSS classes, when Quasar ships with dedicated components for containers and headers.

Many more similar issues exist throughout the codebase, which all share a pattern of wrapping everything in a div and writing a custom CSS class. This is really hard to read, debug, or maintain.

Describe your refactoring solution 🛠️

The main goal is to re-factor the code using Quasar elements without changing the UI at all.

Additional details ℹ️

I'm unsure of how to make my PRs. Do I just submit one massive PR that re-factors a ton of source files? Suggestions welcome.

[ArsalaBangash]

@diracs-delta You can submit one PR with all these refactors :)