feat(tip): use coffee product image

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}>