feat(tip): use coffee product image

src/app/tip/tip-screen.module.css

@@ -214,12 +214,13 @@
   transform: scaleX(1.08);
 }
 
-.coffeeIcon {
+.coffeeImage {
   z-index: 1;
-  width: clamp(82px, 22vw, 108px);
+  width: clamp(132px, 31vw, 164px);
+  max-width: 92%;
   height: auto;
-  color: #7e4535;
-  filter: drop-shadow(0 12px 12px rgba(102, 53, 39, 0.18));
+  object-fit: contain;
+  filter: drop-shadow(0 14px 14px rgba(102, 53, 39, 0.2));
   animation: coffeeFloat 3.2s ease-in-out infinite;
 }
 
@@ -404,7 +405,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .coffeeIcon {
+  .coffeeImage {
     animation: none;
   }
 }

src/app/tip/tip-screen.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useEffect, useMemo, useRef } from "react";
-import { ArrowLeft, Coffee, Heart, Sparkles } from "lucide-react";
+import Image from "next/image";
+import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
 import { CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
@@ -181,7 +182,14 @@ export function TipScreen({
 
         <section className={styles.productCard} aria-label="Coffee tip product">
           <div className={styles.coffeeStage} aria-hidden="true">
-            <Coffee className={styles.coffeeIcon} strokeWidth={1.55} />
+            <Image
+              src="/images/tip/coffee.png"
+              alt=""
+              width={377}
+              height={360}
+              sizes="(max-width: 380px) 132px, 164px"
+              className={styles.coffeeImage}
+            />
           </div>
 
           <div className={styles.productCopy}>