⭐ feat(www): Add logic to the homepage and Steam integration (#258)

## Description
<!-- Briefly describe the purpose and scope of your changes -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Upgraded API and authentication services with dynamic scaling,
enhanced load balancing, and real-time interaction endpoints.
- Introduced new commands to streamline local development and container
builds.
- Added new endpoints for retrieving Steam account information and
managing connections.
- Implemented a QR code authentication interface for Steam, enhancing
user login experiences.

- **Database Updates**
- Rolled out comprehensive schema migrations that improve data integrity
and indexing.
- Introduced new tables for managing Steam user credentials and machine
information.

- **UI Enhancements**
- Added refreshed animated assets and an improved QR code login flow for
a more engaging experience.
	- Introduced new styled components for displaying friends and games.

- **Maintenance**
- Completed extensive refactoring and configuration updates to optimize
performance and development workflows.
- Updated logging configurations and improved error handling mechanisms.
	- Streamlined resource definitions in the configuration files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

packages/www/src/ui/custom-qr.tsx

@@ -28,6 +28,22 @@ type Props = {
     imageBackground?: string;
 };
 
+/**
+ * Renders an SVG element displaying a QR code generated from a URI.
+ *
+ * This component creates a QR code matrix based on the provided URI and error correction level, then renders
+ * the QR code using SVG elements. It highlights finder patterns and conditionally renders QR code dots,
+ * while optionally embedding a logo in the center with a specified background and an adjustable clear area.
+ *
+ * @param ecl - The error correction level for the QR code (defaults to 'M').
+ * @param size - The overall size (in pixels) of the QR code, including margins (defaults to 200).
+ * @param uri - The URI to encode into the QR code.
+ * @param clearArea - When true, reserves extra space in the QR code for an embedded logo.
+ * @param image - An optional JSX element to render as a central logo within the QR code.
+ * @param imageBackground - The background color for the logo area (defaults to 'transparent').
+ *
+ * @returns An SVG element representing the generated QR code.
+ */
 export function QRCode({
     ecl = 'M',
     size: sizeProp = 200,
@@ -36,7 +52,7 @@ export function QRCode({
     image,
     imageBackground = 'transparent',
 }: Props) {
-    const logoSize = clearArea ? 32 : 0;
+    const logoSize = clearArea ? 38 : 0;
     const size = sizeProp - 10 * 2;
 
     const dots = createMemo(() => {
@@ -115,7 +131,6 @@ export function QRCode({
                             (i < 7 && j > matrix.length - 8)
                         )
                     ) {
-                        //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
                         if (
                             image ||
                             !(