fixed build issues and some alignement issues

components/(customization)/avatarcustomization/page.tsx

@@ -249,11 +249,12 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
         <div className="avatar_base">
           {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
             <div className={className} key={key}>
-              <img src={src} alt={""} />
+              <img src={src} alt={key} />
             </div>
           ))}
         </div>
       </div>
+
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/mapiconcustomization/page.tsx

@@ -119,17 +119,15 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
   return (
     <main className="flex flex-col items-center space-y-6">
       <div className="flex w-full justify-center">
-        <div className="">
-          {Object.entries(MapIconTextures).map(([key, { src }]) => (
-            <div>
-              <img
-                className="w-[100px]"
-                src={src}
-                alt={mapIconId ? `Map Icon ${mapIconId}` : "Default Map Icon"}
-              />{" "}
-            </div>
-          ))}
-        </div>
+        {Object.entries(MapIconTextures).map(([key, { src }]) => (
+          <div key={key}>
+            <img
+              className="w-[100px]"
+              src={src}
+              alt={mapIconId ? `Map Icon ${mapIconId}` : "Default Map Icon"}
+            />
+          </div>
+        ))}
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/nameplatecustomization/page.tsx

@@ -119,15 +119,12 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
 
   return (
     <main className="flex flex-col items-center space-y-6">
-      {/* Avatar Customization Section */}
       <div className="flex w-full justify-center">
-        <div className="">
-          {Object.entries(namePlateTextures).map(([key, { src }]) => (
-            <div>
-              <img className="w-[300px]" src={src} alt={""} />
-            </div>
-          ))}
-        </div>
+        {Object.entries(namePlateTextures).map(([key, { src }]) => (
+          <div key={key}>
+            <img className="w-[300px]" src={src} alt={`Name Plate ${key}`} />
+          </div>
+        ))}
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/systemvoicecustomization/page.tsx

@@ -126,15 +126,16 @@ export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
 
   return (
     <main className="flex flex-col items-center space-y-6">
-      {/* Avatar Customization Section */}
       <div className="flex w-full justify-center">
-        <div className="">
-          {Object.entries(systemVoiceTextures).map(([key, { src }]) => (
-            <div>
-              <img className="w-[200px]" src={src} alt={""} />
-            </div>
-          ))}
-        </div>
+        {Object.entries(systemVoiceTextures).map(([key, { src }]) => (
+          <div key={key}>
+            <img
+              className="w-[200px]"
+              src={src}
+              alt={`System Voice Texture ${key}`}
+            />
+          </div>
+        ))}
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

components/(customization)/trophycustomization/page.tsx

@@ -102,8 +102,6 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
 
   return (
     <main className="flex flex-col items-center space-y-6">
-      {/* Avatar Customization Section */}
-
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">