Refactor OverviewView and NoLoginView to integrate Character3D component

- Replaced avatar display logic in OverviewView with a 3D character representation based on user gender and age.
- Updated NoLoginView to utilize Character3D for displaying mascots, enhancing visual consistency.
- Removed outdated avatar positioning logic and related computed properties for improved code clarity and maintainability.
- Adjusted CSS styles for better layout and responsiveness of character displays.

frontend/src/views/home/NoLoginView.vue

@@ -4,7 +4,9 @@
             <strong>{{ $t('home.betaNoticeLabel') }}</strong> {{ $t('home.betaNoticeText') }}
         </div>
         <div class="home-structure">
-            <div class="mascot"><img src="/images/mascot/mascot_male.png" /></div>
+            <div class="mascot">
+                <Character3D gender="male" />
+            </div>
             <div class="actions">
                 <div>
                     <h2>{{ $t('home.nologin.welcome') }}</h2>
@@ -36,9 +38,6 @@
 
                     <h3>{{ $t('home.nologin.getStarted.title') }}</h3>
                     <p>{{ $t('home.nologin.getStarted.text', { register: $t('home.nologin.login.register') }) }}</p>
-
-                    <h2>{{ $t('home.nologin.randomchat') }}</h2>
-                    <button @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
                 </div>
                 <div>
                     <div>
@@ -59,6 +58,10 @@
                     <div>
                         <button type="button" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
                     </div>
+                    <div>
+                        <h2>{{ $t('home.nologin.randomchat') }}</h2>
+                        <button @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
+                    </div>
                     <div>
                         <span @click="openPasswordResetDialog" class="link">{{
                             $t('home.nologin.login.lostpassword') }}</span> | <span id="o1p5iry1"
@@ -66,7 +69,9 @@
                     </div>
                 </div>
             </div>
-            <div class="mascot"><img src="/images/mascot/mascot_female.png" /></div>
+            <div class="mascot">
+                <Character3D gender="female" />
+            </div>
             <RandomChatDialog ref="randomChatDialog" />
             <RegisterDialog ref="registerDialog" />
             <PasswordResetDialog ref="passwordResetDialog" />
@@ -80,6 +85,7 @@
 import RandomChatDialog from '@/dialogues/chat/RandomChatDialog.vue';
 import RegisterDialog from '@/dialogues/auth/RegisterDialog.vue';
 import PasswordResetDialog from '@/dialogues/auth/PasswordResetDialog.vue';
+import Character3D from '@/components/Character3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapActions } from 'vuex';
 
@@ -95,6 +101,7 @@ export default {
         RandomChatDialog,
         RegisterDialog,
         PasswordResetDialog,
+        Character3D,
     },
     methods: {
         ...mapActions(['login']),
@@ -154,6 +161,9 @@ export default {
     justify-content: center;
     align-items: center;
     background-color: #fdf1db;
+    width: 80%;
+    height: 80%;
+    min-height: 400px;
 }
 
 .actions {