refactor(ui): add shared character avatar

src/app/splash/components/splash-latest-message.module.css

@@ -49,7 +49,7 @@
   height: 48px;
   place-items: center;
   border: 2px solid rgba(255, 255, 255, 0.74);
-  border-radius: 18px;
+  border-radius: 9999px;
   background: linear-gradient(145deg, #ffb36d, #ff5d95);
   box-shadow: 0 10px 24px rgba(255, 95, 128, 0.24);
   overflow: hidden;
@@ -58,7 +58,6 @@
 .avatar {
   width: 100%;
   height: 100%;
-  object-fit: cover;
 }
 
 .copy {

src/app/splash/components/splash-latest-message.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import Image from "next/image";
 import { MessageCircle } from "lucide-react";
 
+import { CharacterAvatar } from "@/app/_components";
+
 import styles from "./splash-latest-message.module.css";
 
 export interface SplashLatestMessageProps {
@@ -26,11 +27,10 @@ export function SplashLatestMessage({
       aria-label="Open latest message from Elio"
     >
       <span className={styles.avatarWrap}>
-        <Image
-          src="/images/chat/pic-chat-elio.png"
+        <CharacterAvatar
           alt=""
-          width={42}
-          height={42}
+          size="100%"
+          imageSize={42}
           className={styles.avatar}
         />
       </span>