From 04eabf3e1f73ef495dff8a2315bbca8dc1e26f6d Mon Sep 17 00:00:00 2001
From: Mario <info@magicpotter.at>
Date: Fri, 13 Mar 2026 10:33:38 +0100
Subject: [PATCH] Fix Avatar Image Loading from Assets

---
 src/_component/AvatarEditor.tsx |  6 +++---
 src/_component/PreviewPanel.tsx |  4 ++--
 src/_lib/avatar.constants.ts    | 25 +++++++++++++++++--------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/_component/AvatarEditor.tsx b/src/_component/AvatarEditor.tsx
index 781b7d1..831dbcc 100644
--- a/src/_component/AvatarEditor.tsx
+++ b/src/_component/AvatarEditor.tsx
@@ -211,8 +211,8 @@ export function AvatarEditor () {
 
     return (
         <div className="min-h-screen bg-slate-950 text-white">
-            <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
-                <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/10 via-transparent to-transparent" />
+            <div className="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950">
+                <div className="absolute inset-0 bg-[radial-linear(ellipse_at_top,_var(--tw-linear-stops))] from-indigo-900/10 via-transparent to-transparent" />
 
                 <main className="relative container mx-auto px-4 py-12">
                     <header className="mb-14 text-center">
@@ -221,7 +221,7 @@ export function AvatarEditor () {
                             <span className="font-medium text-indigo-300">Gaming Avatar Creator</span>
                         </div>
 
-                        <h1 className="bg-gradient-to-r from-white via-slate-200 to-white bg-clip-text text-5xl font-extrabold tracking-tight text-transparent md:text-6xl">
+                        <h1 className="bg-linear-to-r from-white via-slate-200 to-white bg-clip-text text-5xl font-extrabold tracking-tight text-transparent md:text-6xl">
                             NEXUS-CORE
                         </h1>
 
diff --git a/src/_component/PreviewPanel.tsx b/src/_component/PreviewPanel.tsx
index f680422..9c22a23 100644
--- a/src/_component/PreviewPanel.tsx
+++ b/src/_component/PreviewPanel.tsx
@@ -33,7 +33,7 @@ export function PreviewPanel ( {
                 />
 
                 <div className="group relative mb-6">
-                    <div className="absolute -inset-1 rounded-2xl bg-gradient-to-r from-indigo-600 to-violet-600 opacity-20 blur transition duration-300 group-hover:opacity-40" />
+                    <div className="absolute -inset-1 rounded-2xl bg-linear-to-r from-indigo-600 to-violet-600 opacity-20 blur transition duration-300 group-hover:opacity-40" />
 
                     <div className="relative overflow-hidden rounded-2xl border border-white/5 bg-slate-950 p-2">
                         <div className="relative">
@@ -57,7 +57,7 @@ export function PreviewPanel ( {
 
                 <button
                     onClick={ downloadAvatar }
-                    className="group flex w-full items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-6 py-4 font-bold text-white shadow-lg shadow-indigo-900/20 transition-all duration-300 hover:scale-105 hover:from-indigo-500 hover:to-violet-500 hover:shadow-indigo-800/30"
+                    className="group flex w-full items-center justify-center gap-3 rounded-xl bg-linear-to-r from-indigo-600 to-violet-600 px-6 py-4 font-bold text-white shadow-lg shadow-indigo-900/20 transition-all duration-300 hover:scale-105 hover:from-indigo-500 hover:to-violet-500 hover:shadow-indigo-800/30"
                 >
                     <Download className="h-5 w-5 group-hover:animate-bounce" />
                     Avatar herunterladen
diff --git a/src/_lib/avatar.constants.ts b/src/_lib/avatar.constants.ts
index 2bcab4c..13d6952 100644
--- a/src/_lib/avatar.constants.ts
+++ b/src/_lib/avatar.constants.ts
@@ -1,12 +1,21 @@
+import LogoBlau from "../assets/Logo_Blau.png";
+import LogoGelb from "../assets/Logo_Gelb.png";
+import LogoGrun from "../assets/Logo_Grun.png";
+import LogoOrange from "../assets/Logo_Orange.png";
+import LogoPink from "../assets/Logo_Pink.png";
+import LogoRot from "../assets/Logo_Rot.png";
+import LogoTurkis from "../assets/Logo_Turkis.png";
+import LogoT from "../assets/Logo_T.png";
+
 export const AVATAR_IMAGES = [
-    "Logo_Blau.png",
-    "Logo_Gelb.png",
-    "Logo_Grun.png",
-    "Logo_Orange.png",
-    "Logo_Pink.png",
-    "Logo_Rot.png",
-    "Logo_Turkis.png",
-    "Logo_T.png",
+    LogoBlau,
+    LogoGelb,
+    LogoGrun,
+    LogoOrange,
+    LogoPink,
+    LogoRot,
+    LogoTurkis,
+    LogoT,
 ];
 
 export const FONTS = [