feat(splash): add latest message entry

src/app/splash/components/index.ts

@@ -5,6 +5,7 @@
 export * from "./splash-background";
 export * from "./splash-button";
 export * from "./splash-content";
+export * from "./splash-latest-message";
 export * from "./splash-loading";
 export * from "./splash-logo";
 export * from "./splash-progress";

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

@@ -0,0 +1,99 @@
+.card {
+  display: grid;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 12px;
+  margin-top: var(--page-section-gap-lg, 26px);
+  padding: 12px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 24px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)),
+    rgba(28, 19, 30, 0.18);
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    0 18px 42px rgba(46, 22, 38, 0.18);
+  backdrop-filter: blur(18px);
+  animation: messageFloatIn 0.5s ease 0.08s both;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.card:hover {
+  border-color: rgba(255, 255, 255, 0.38);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 22px 48px rgba(46, 22, 38, 0.24);
+  transform: translateY(-1px);
+}
+
+.card:active {
+  transform: translateY(1px) scale(0.995);
+}
+
+.card:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.9);
+  outline-offset: 3px;
+}
+
+.avatarWrap {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border: 2px solid rgba(255, 255, 255, 0.74);
+  border-radius: 18px;
+  background: linear-gradient(145deg, #ffb36d, #ff5d95);
+  box-shadow: 0 10px 24px rgba(255, 95, 128, 0.24);
+  overflow: hidden;
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: clamp(11px, 2.593vw, 13px);
+  font-weight: 820;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.message {
+  color: #ffffff;
+  font-size: clamp(14px, 3.333vw, 17px);
+  font-weight: 760;
+  line-height: 1.35;
+}
+
+@keyframes messageFloatIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

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

@@ -0,0 +1,42 @@
+"use client";
+
+import Image from "next/image";
+import { MessageCircle } from "lucide-react";
+
+import styles from "./splash-latest-message.module.css";
+
+export interface SplashLatestMessageProps {
+  onOpenChat: () => void;
+}
+
+export function SplashLatestMessage({
+  onOpenChat,
+}: SplashLatestMessageProps) {
+  return (
+    <button
+      type="button"
+      className={styles.card}
+      onClick={onOpenChat}
+      aria-label="Open latest message from Elio"
+    >
+      <span className={styles.avatarWrap}>
+        <Image
+          src="/images/chat/pic-chat-elio.png"
+          alt=""
+          width={42}
+          height={42}
+          className={styles.avatar}
+        />
+      </span>
+      <span className={styles.copy}>
+        <span className={styles.eyebrow}>
+          <MessageCircle size={13} aria-hidden="true" />
+          Latest message
+        </span>
+        <span className={styles.message}>
+          I saved a sweet little moment for you. Come closer?
+        </span>
+      </span>
+    </button>
+  );
+}

src/app/splash/components/splash-screen.module.css

@@ -31,7 +31,7 @@
   padding:
     calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
     calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
-    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px) + 86px)
     calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
 }
 

src/app/splash/splash-screen.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect } from "react";
 
-import { MobileShell } from "@/app/_components/core";
+import { AppBottomNav, MobileShell } from "@/app/_components/core";
+import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import { pwaUtil } from "@/utils";
 
@@ -10,6 +11,7 @@ import {
   SplashBackground,
   SplashButton,
   SplashContent,
+  SplashLatestMessage,
   SplashLogo,
 } from "./components";
 import styles from "./components/splash-screen.module.css";
@@ -26,6 +28,10 @@ export function SplashScreen() {
     navigator.openChat({ replace: true });
   };
 
+  const handleOpenPrivateRoom = () => {
+    navigator.push(ROUTES.privateRoom, { scroll: false });
+  };
+
   useEffect(() => {
     pwaUtil.prepareInstallPrompt();
   }, []);
@@ -43,12 +49,18 @@ export function SplashScreen() {
           <div className={styles.buttonArea}>
             <SplashButton onStartChat={handleStartChat} />
           </div>
+          <SplashLatestMessage onOpenChat={handleStartChat} />
           <p className={styles.bottom}>
             Elio Silvestri, Your exclusive AI boyfriend
             <br />
             24/7 online | Chat | Companion | Heal | Sweet moments
           </p>
         </div>
+        <AppBottomNav
+          activeItem={null}
+          onChatClick={handleStartChat}
+          onPrivateRoomClick={handleOpenPrivateRoom}
+        />
       </div>
     </MobileShell>
   );