feat(frontend): add logo to config page and move text out of box

packages/frontend/next.config.ts

@@ -2,6 +2,9 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   output: 'export',
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;

packages/frontend/src/app/configure/page.module.css

@@ -1,10 +1,18 @@
 .container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }
 
+.header {
+  text-align: center;
+  max-width: 800px;
+  border-radius: 8px;
+  margin: 20px;
+}
+
 .content {
   background-color: #000000; /* Slightly lighter black */
   border-radius: 8px;

packages/frontend/src/app/configure/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Image from 'next/image';
 import styles from './page.module.css';
 import {
   Config,
@@ -306,7 +307,14 @@ export default function Configure() {
 
   return (
     <div className={styles.container}>
-      <div className={styles.content}>
+      <div className={styles.header}>
+        <Image
+          src="/assets/logo.png"
+          alt="AIOStreams Logo"
+          width={200}
+          height={200}
+          style={{ alignSelf: 'center', justifyContent: 'center' }}
+        />
         <h1 style={{ textAlign: 'center' }}>AIOStreams v{version}</h1>
         <p style={{ textAlign: 'center', padding: '15px' }}>
           AIOStreams, the all-in-one streaming addon for Stremio. Combine your
@@ -324,7 +332,8 @@ export default function Configure() {
             GitHub
           </a>
         </p>
-
+      </div>
+      <div className={styles.content}>
         <div className={styles.section}>
           <h2 style={{ padding: '5px' }}>Resolutions</h2>
           <p style={{ padding: '5px' }}>

packages/frontend/src/app/globals.css

@@ -1,5 +1,5 @@
 :root {
-  --background: #131313;
+  --background: linear-gradient(200deg, #181818, #111111);
   --foreground: #ededed;
 }