feat(tip): display realistic coffee photo

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

@@ -176,52 +176,31 @@
 
 .coffeeStage {
   position: relative;
-  display: grid;
+  width: 100%;
-  min-height: 172px;
-  place-items: center;
-  overflow: hidden;
-  border-radius: 30px;
-  background:
-    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.82), transparent 34%),
-    linear-gradient(145deg, #fff8ed, #ffe1cc);
-  box-shadow: inset 0 0 0 1px rgba(126, 66, 57, 0.06);
-  isolation: isolate;
-}
-
-.coffeeStage::before {
-  position: absolute;
-  width: clamp(112px, 30vw, 148px);
   aspect-ratio: 1;
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  overflow: hidden;
-  border-radius: 50%;
+  border-radius: clamp(24px, 6.667vw, 32px);
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 198, 151, 0.3));
+  background: #c59b7d;
   box-shadow:
-    0 20px 42px rgba(174, 91, 60, 0.13),
+    0 18px 34px rgba(102, 53, 39, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+    inset 0 0 0 1px rgba(126, 66, 57, 0.08);
-  content: "";
+  isolation: isolate;
-  transform: rotate(-8deg);
 }
 
 .coffeeStage::after {
   position: absolute;
-  bottom: 24px;
+  inset: 0;
-  width: clamp(72px, 18vw, 98px);
+  z-index: 1;
-  height: 15px;
+  border-radius: inherit;
-  border-radius: 50%;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
-  background: rgba(111, 58, 44, 0.12);
   content: "";
-  filter: blur(7px);
+  pointer-events: none;
-  transform: scaleX(1.08);
 }
 
 .coffeeImage {
-  z-index: 1;
+  width: 100%;
-  width: clamp(132px, 31vw, 164px);
+  height: 100%;
-  max-width: 92%;
+  object-fit: cover;
-  height: auto;
-  object-fit: contain;
-  filter: drop-shadow(0 14px 14px rgba(102, 53, 39, 0.2));
-  animation: coffeeFloat 3.2s ease-in-out infinite;
 }
 
 .productCopy {
@@ -370,7 +349,8 @@
   }
 
   .coffeeStage {
-    min-height: 152px;
+    width: min(100%, 220px);
+    justify-self: center;
   }
 }
 
@@ -392,20 +372,3 @@
     transform: translateY(0) scale(1);
   }
 }
-
-@keyframes coffeeFloat {
-  0%,
-  100% {
-    transform: translateY(3px) rotate(-1deg);
-  }
-
-  50% {
-    transform: translateY(-5px) rotate(1deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .coffeeImage {
-    animation: none;
-  }
-}

src/app/tip/tip-screen.tsx

@@ -183,11 +183,11 @@ export function TipScreen({
         <section className={styles.productCard} aria-label="Coffee tip product">
           <div className={styles.coffeeStage} aria-hidden="true">
             <Image
-              src="/images/tip/coffee.png"
+              src="/images/tip/coffee.jpg"
               alt=""
-              width={377}
+              width={736}
-              height={360}
+              height={736}
-              sizes="(max-width: 380px) 132px, 164px"
+              sizes="(max-width: 380px) 220px, 211px"
               className={styles.coffeeImage}
             />
           </div>