feat: add cover image on main page background

projects/client/src/lib/components/background/BackgroundCoverImage.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import CrossOriginImage from "$lib/features/image/components/CrossOriginImage.svelte";
+  import { onMount } from "svelte";
+
+  type ImageBackgroundProps = {
+    src: string;
+    type: "Main" | "Show" | "Movie";
+  };
+
+  const { src, type }: ImageBackgroundProps = $props();
+  let isImageLoaded = $state(false);
+
+  onMount(() => {
+    const image = new Image();
+    image.src = src;
+
+    image.onload = () => {
+      isImageLoaded = true;
+    };
+  });
+</script>
+
+<div class="background-cover-image" class:image-loaded={isImageLoaded}>
+  <CrossOriginImage {src} alt={`${type} background`} />
+</div>
+
+<style>
+  :global([data-theme="light"]) {
+    .background-cover-image {
+      &.image-loaded {
+        :global(img) {
+          opacity: 0.85;
+        }
+      }
+    }
+  }
+
+  :global([data-theme="dark"]) {
+    .background-cover-image {
+      &.image-loaded {
+        :global(img) {
+          opacity: 0.32;
+        }
+      }
+    }
+  }
+  .background-cover-image {
+    z-index: -1;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      transition: opacity 250ms ease-in;
+      opacity: 0;
+    }
+
+    &::after {
+      content: "";
+      width: 100%;
+      height: 50%;
+
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      background: linear-gradient(
+        to bottom,
+        transparent 0%,
+        color-mix(in srgb, var(--color-background) 50%, transparent 50%) 30%,
+        var(--color-background) 70%
+      );
+
+      pointer-events: none;
+    }
+  }
+</style>

projects/client/src/routes/+layout.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-  import "../theme.css";
-  import "../dimensions.css";
   import "../app.css";
+  import "../dimensions.css";
+  import "../theme.css";
 
+  import BackgroundCoverImage from "$lib/components/background/BackgroundCoverImage.svelte";
+  import AuthGuard from "$lib/features/auth/components/AuthGuard.svelte";
   import { i18n } from "$lib/features/i18n/index.ts";
-  import { ParaglideJS } from "@inlang/paraglide-sveltekit";
   import Navbar from "$lib/sections/navbar/Navbar.svelte";
-  import AuthGuard from "$lib/features/auth/components/AuthGuard.svelte";
+  import { ParaglideJS } from "@inlang/paraglide-sveltekit";
 
   const { data, children } = $props();
 </script>
 
 <ParaglideJS {i18n}>
   <AuthGuard token={data.token}>
+    <BackgroundCoverImage
+      src="https://walter-r2.trakt.tv/images/movies/000/759/944/fanarts/full/a12a59d031.jpg.webp"
+      type="Main"
+    />
     <Navbar theme={data.theme} />
     {@render children()}
   </AuthGuard>
 </ParaglideJS>
+
 <svelte:head>
   <title>Trakt Lite</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />