From a483264c39d40b0324cda421c15b21dc0632d37d Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Mon, 6 Oct 2025 17:28:33 +0900
Subject: [PATCH] [251006] feat: views - PlayerPanel.jsx, ShopNowContainer.jsx,
 ShopNowC...
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 10. 06. 17:28:31

📊 변경 통계:
  • 총 파일: 7개
  • 추가: +86줄
  • 삭제: -30줄

📁 추가된 파일:
  + com.twin.app.shoptime/assets/images/player/icon_tabcontainer_shopnow.png
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.jsx
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShowNowContainer.figma.jsx

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less (unknown):
    ✅ Added: gradient(), position()
    ❌ Deleted: gradient(), position()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less (unknown):
    ✅ Added: focused()
---
 .../player/icon_tabcontainer_shopnow.png      | Bin 0 -> 1544 bytes
 .../src/views/PlayerPanel/PlayerPanel.jsx     |  11 +-
 .../PlayerTabContents/v2/ShopNowContainer.jsx |  31 +-
 .../v2/ShopNowContainer.module.less           |  74 +-
 .../PlayerTabContents/v2/ShopNowItem.jsx      |  32 +
 .../v2/ShopNowItem.module.less                |  78 +++
 .../v2/ShowNowContainer.figma.jsx             | 640 ++++++++++++++++++
 7 files changed, 836 insertions(+), 30 deletions(-)
 create mode 100644 com.twin.app.shoptime/assets/images/player/icon_tabcontainer_shopnow.png
 create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.jsx
 create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less
 create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShowNowContainer.figma.jsx

diff --git a/com.twin.app.shoptime/assets/images/player/icon_tabcontainer_shopnow.png b/com.twin.app.shoptime/assets/images/player/icon_tabcontainer_shopnow.png
new file mode 100644
index 0000000000000000000000000000000000000000..51f40b5d990e891ed42008a09a65f93e9be5d18b
GIT binary patch
literal 1544
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

literal 0
HcmV?d00001

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
index d7d1329a..bf48d39e 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -1744,15 +1744,17 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     );
   }, [sideContentsVisible, playListInfo, panelInfo, isOnTop]);
 
+  const [belowContentsVisible, setBelowContentsVisible] = USE_STATE('belowContentsVisible', true);
+
   const showBelowContents = useMemo(() => {
     return (
-      sideContentsVisible &&
+      belowContentsVisible &&
       playListInfo &&
       panelInfo?.shptmBanrTpNm !== 'MEDIA' &&
       !panelInfo?.modal &&
       isOnTop
     );
-  }, [sideContentsVisible, playListInfo, panelInfo, isOnTop]);
+  }, [belowContentsVisible, playListInfo, panelInfo, isOnTop]);
 
   const qrCurrentItem = useMemo(() => {
     if (shopNowInfo?.length && panelInfo?.shptmBanrTpNm === 'LIVE') {
@@ -1961,6 +1963,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         spotlightRestrict="self-only"
         spotlightId="spotlightId-video-contaienr"
         onKeyDown={onKeyDown}
+        onClick={() => {
+          if (!panelInfo?.modal && isOnTop && panelInfo?.shptmBanrTpNm !== 'MEDIA') {
+            setBelowContentsVisible((prev) => !prev);
+          }
+        }}
       >
         {isReadyToPlay && (
           <VideoPlayer
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.jsx
index c519e590..e29daafa 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.jsx
@@ -1,7 +1,34 @@
 import React from 'react';
 
 import css from './ShopNowContainer.module.less';
+import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png';
+import ShopNowItem from './ShopNowItem';
 
-export default function ShopNowContainer() {
-  return <div className={css.container}>{/* 나중에 콘텐츠 추가 예정 */}</div>;
+export default function ShopNowContainer({ shopNowInfo }) {
+  // 임시 더미 데이터 (나중에 실제 데이터로 교체)
+  const dummyProducts = Array(6).fill({
+    name: 'New Shark Vacuum! Your pet Hair Solution!',
+    salePrice: '32.98',
+    originalPrice: '150.00',
+    imageUrl: 'https://placehold.co/274x274',
+  });
+
+  const products = shopNowInfo || dummyProducts;
+
+  return (
+    <div className={css.container}>
+      <div className={css.header}>
+        <div className={css.iconWrapper}>
+          <img src={icon_shop_now} alt="shop now icon" className={css.icon} />
+        </div>
+        <div className={css.headerText}>SHOP NOW</div>
+      </div>
+
+      <div className={css.productList}>
+        {products.map((product, index) => (
+          <ShopNowItem key={index} product={product} />
+        ))}
+      </div>
+    </div>
+  );
 }
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less
index e9153322..01c07187 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less
@@ -2,38 +2,60 @@
 @import "../../../../style/utils.module.less";
 
 .container {
-  .size(@w: 100%, @h: 365px);
+  .size(@w: 100%, @h: 675px);
   .position(@position: fixed, @bottom: 0, @left: 0);
   padding: 60px;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.95) 0%,
-    rgba(0, 0, 0, 0.85) 40%,
-    rgba(0, 0, 0, 0.6) 70%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  border-top: 1px solid rgba(234, 234, 234, 0.3);
+  background: linear-gradient(270deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0) 65%),
+              linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0%, rgba(20.56, 4.68, 32.71, 0.53) 60%, rgba(199, 32, 84, 0) 98%),
+              linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 45%, black 100%),
+              rgba(0, 0, 0, 0.56);
+  border-top: 1px solid rgba(234, 234, 234, 0.8);
   overflow: hidden;
   .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start, @direction: column);
+  gap: 40px;
   z-index: 5;
+}
+
+.header {
+  width: 300px;
+  height: 70px;
+  padding: 20px 0;
+  overflow: hidden;
+  border-radius: 100px;
+  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center);
+  gap: 15px;
+}
+
+.iconWrapper {
+  .size(@w: 40px, @h: 40px);
+  .position(@position: relative);
+  background: white;
+  border-radius: 100px;
+  .flex(@display: flex, @justifyCenter: center, @alignCenter: center);
+}
+
+.icon {
+  .size(@w: 20.67px, @h: 20.67px);
+  object-fit: contain;
+}
+
+.headerText {
+  color: #EAEAEA;
+  font-size: 24px;
+  font-family: @baseFont;
+  font-weight: 700;
+  line-height: 31px;
+  word-wrap: break-word;
+}
+
+.productList {
+  align-self: stretch;
+  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
+  gap: 30px;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   > * + * {
-    margin-top: 20px;
-  }
-
-  &::before {
-    content: "";
-    .position(@position: absolute, @top: 0, @left: 0);
-    .size(@w: 100%, @h: 100%);
-    background: linear-gradient(
-      90deg,
-      rgba(30, 30, 30, 0.4) 0%,
-      rgba(50, 50, 50, 0.25) 30%,
-      transparent 50%,
-      rgba(50, 50, 50, 0.25) 70%,
-      rgba(30, 30, 30, 0.4) 100%
-    );
-    pointer-events: none;
-    z-index: -1;
+    margin-left: 0;
   }
 }
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.jsx
new file mode 100644
index 00000000..1a5be990
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './ShopNowItem.module.less';
+
+const SpottableDiv = Spottable('div');
+
+export default function ShopNowItem({ product, isFocused }) {
+  return (
+    <SpottableDiv className={css.item}>
+      <img
+        className={css.productImage}
+        src={product?.imageUrl || 'https://placehold.co/274x274'}
+        alt={product?.name}
+      />
+      <div className={css.productInfo}>
+        <div className={css.productName}>
+          {product?.name || 'New Shark Vacuum! Your pet Hair Solution!'}
+        </div>
+        <div className={css.priceWrapper}>
+          <div className={css.priceContainer}>
+            <div className={css.salePrice}>${product?.salePrice || '32.98'}</div>
+            {product?.originalPrice && (
+              <div className={css.originalPrice}>${product?.originalPrice || '150.00'}</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </SpottableDiv>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less
new file mode 100644
index 00000000..5129332a
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less
@@ -0,0 +1,78 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.item {
+  width: 310px;
+  padding: 18px;
+  background: rgba(51, 51, 51, 0.95);
+  border-radius: 12px;
+  border: 1px solid transparent;
+  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start, @direction: column);
+  gap: 15px;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+
+  &:focus {
+    border-color: @PRIMARY_COLOR_RED;
+    outline: 4px @PRIMARY_COLOR_RED solid;
+    outline-offset: -4px;
+
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius: 12px);
+    }
+  }
+}
+
+.productImage {
+  align-self: stretch;
+  height: 274px;
+  padding: 5px 4px;
+  object-fit: contain;
+}
+
+.productInfo {
+  align-self: stretch;
+  .flex(@display: flex, @justifyCenter: center, @alignCenter: flex-start, @direction: column);
+  gap: 15px;
+}
+
+.productName {
+  align-self: stretch;
+  color: #EAEAEA;
+  font-size: 24px;
+  font-family: @baseFont;
+  font-weight: 700;
+  line-height: 31px;
+  word-wrap: break-word;
+}
+
+.priceWrapper {
+  align-self: stretch;
+  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
+  gap: 10px;
+}
+
+.priceContainer {
+  padding: 4px 0;
+  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center);
+  gap: 11px;
+}
+
+.salePrice {
+  color: @PRIMARY_COLOR_RED;
+  font-size: 30px;
+  font-family: @baseFont;
+  font-weight: 700;
+  line-height: 35px;
+  word-wrap: break-word;
+}
+
+.originalPrice {
+  color: #808080;
+  font-size: 24px;
+  font-family: @baseFont;
+  font-weight: 400;
+  text-decoration: line-through;
+  line-height: 18px;
+  word-wrap: break-word;
+}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShowNowContainer.figma.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShowNowContainer.figma.jsx
new file mode 100644
index 00000000..672860ed
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShowNowContainer.figma.jsx
@@ -0,0 +1,640 @@
+<div
+  style={{
+    width: '100%',
+    height: '675 px',
+    padding: 60,
+    background:
+      'linear-gradient(270deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0) 65%), linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0%, rgba(20.56, 4.68, 32.71, 0.53) 60%, rgba(199, 32, 84, 0) 98%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 45%, black 100%), rgba(0, 0, 0, 0.56)',
+    overflow: 'hidden',
+    borderTop: '1px rgba(234.30, 234.30, 234.30, 0.80) solid',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    gap: 40,
+    display: 'inline-flex',
+  }}
+>
+  <div
+    style={{
+      width: 300,
+      height: 70,
+      paddingTop: 20,
+      paddingBottom: 20,
+      overflow: 'hidden',
+      borderRadius: 100,
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 15,
+      display: 'inline-flex',
+    }}
+  >
+    <div
+      style={{
+        width: 40,
+        height: 40,
+        position: 'relative',
+        background: 'white',
+        borderRadius: 100,
+      }}
+    >
+      <img
+        style={{ width: 20.67, height: 20.67, left: 9.67, top: 9.67, position: 'absolute' }}
+        src="https://placehold.co/21x21"
+      />
+    </div>
+    <div
+      style={{
+        color: '#EAEAEA',
+        fontSize: 24,
+        fontFamily: 'LG Smart UI',
+        fontWeight: '700',
+        lineHeight: 31,
+        wordWrap: 'break-word',
+      }}
+    >
+      SHOP NOW
+    </div>
+  </div>
+  <div
+    style={{
+      alignSelf: 'stretch',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      gap: 30,
+      display: 'inline-flex',
+    }}
+  >
+    <div
+      style={{
+        width: 310,
+        padding: 18,
+        background: 'rgba(51, 51, 51, 0.95)',
+        borderRadius: 12,
+        outline: '4px #C70850 solid',
+        outlineOffset: '-4px',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: 15,
+        display: 'inline-flex',
+      }}
+    >
+      <img
+        style={{
+          alignSelf: 'stretch',
+          height: 274,
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 5,
+          paddingBottom: 5,
+        }}
+        src="https://placehold.co/274x274"
+      />
+      <div
+        style={{
+          alignSelf: 'stretch',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          gap: 15,
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            alignSelf: 'stretch',
+            color: '#EAEAEA',
+            fontSize: 24,
+            fontFamily: 'LG Smart UI',
+            fontWeight: '700',
+            lineHeight: 31,
+            wordWrap: 'break-word',
+          }}
+        >
+          New Shark Vacuum! Your pet Hair Solution!
+        </div>
+        <div
+          style={{
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            gap: 10,
+            display: 'inline-flex',
+          }}
+        >
+          <div
+            style={{
+              paddingTop: 4,
+              paddingBottom: 4,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              gap: 11,
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                color: '#C70850',
+                fontSize: 30,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '700',
+                lineHeight: 35,
+                wordWrap: 'break-word',
+              }}
+            >
+              $32.98
+            </div>
+            <div
+              style={{
+                color: '#808080',
+                fontSize: 24,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '400',
+                textDecoration: 'line-through',
+                lineHeight: 18,
+                wordWrap: 'break-word',
+              }}
+            >
+              $150.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style={{
+        width: 310,
+        padding: 18,
+        background: 'rgba(51, 51, 51, 0.95)',
+        borderRadius: 12,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: 15,
+        display: 'inline-flex',
+      }}
+    >
+      <img
+        style={{
+          alignSelf: 'stretch',
+          height: 274,
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 5,
+          paddingBottom: 5,
+        }}
+        src="https://placehold.co/274x274"
+      />
+      <div
+        style={{
+          alignSelf: 'stretch',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          gap: 15,
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            alignSelf: 'stretch',
+            color: '#EAEAEA',
+            fontSize: 24,
+            fontFamily: 'LG Smart UI',
+            fontWeight: '700',
+            lineHeight: 31,
+            wordWrap: 'break-word',
+          }}
+        >
+          New Shark Vacuum! Your pet Hair Solution!
+        </div>
+        <div
+          style={{
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            gap: 10,
+            display: 'inline-flex',
+          }}
+        >
+          <div
+            style={{
+              paddingTop: 4,
+              paddingBottom: 4,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              gap: 11,
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                color: '#C70850',
+                fontSize: 30,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '700',
+                lineHeight: 35,
+                wordWrap: 'break-word',
+              }}
+            >
+              $32.98
+            </div>
+            <div
+              style={{
+                color: '#808080',
+                fontSize: 24,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '400',
+                textDecoration: 'line-through',
+                lineHeight: 18,
+                wordWrap: 'break-word',
+              }}
+            >
+              $150.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style={{
+        width: 310,
+        padding: 18,
+        background: 'rgba(51, 51, 51, 0.95)',
+        borderRadius: 12,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: 15,
+        display: 'inline-flex',
+      }}
+    >
+      <img
+        style={{
+          alignSelf: 'stretch',
+          height: 274,
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 5,
+          paddingBottom: 5,
+        }}
+        src="https://placehold.co/274x274"
+      />
+      <div
+        style={{
+          alignSelf: 'stretch',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          gap: 15,
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            alignSelf: 'stretch',
+            color: '#EAEAEA',
+            fontSize: 24,
+            fontFamily: 'LG Smart UI',
+            fontWeight: '700',
+            lineHeight: 31,
+            wordWrap: 'break-word',
+          }}
+        >
+          New Shark Vacuum! Your pet Hair Solution!
+        </div>
+        <div
+          style={{
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            gap: 10,
+            display: 'inline-flex',
+          }}
+        >
+          <div
+            style={{
+              paddingTop: 4,
+              paddingBottom: 4,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              gap: 11,
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                color: '#C70850',
+                fontSize: 30,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '700',
+                lineHeight: 35,
+                wordWrap: 'break-word',
+              }}
+            >
+              $32.98
+            </div>
+            <div
+              style={{
+                color: '#808080',
+                fontSize: 24,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '400',
+                textDecoration: 'line-through',
+                lineHeight: 18,
+                wordWrap: 'break-word',
+              }}
+            >
+              $150.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style={{
+        width: 310,
+        padding: 18,
+        background: 'rgba(51, 51, 51, 0.95)',
+        borderRadius: 12,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: 15,
+        display: 'inline-flex',
+      }}
+    >
+      <img
+        style={{
+          alignSelf: 'stretch',
+          height: 274,
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 5,
+          paddingBottom: 5,
+        }}
+        src="https://placehold.co/274x274"
+      />
+      <div
+        style={{
+          alignSelf: 'stretch',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          gap: 15,
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            alignSelf: 'stretch',
+            color: '#EAEAEA',
+            fontSize: 24,
+            fontFamily: 'LG Smart UI',
+            fontWeight: '700',
+            lineHeight: 31,
+            wordWrap: 'break-word',
+          }}
+        >
+          New Shark Vacuum! Your pet Hair Solution!
+        </div>
+        <div
+          style={{
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            gap: 10,
+            display: 'inline-flex',
+          }}
+        >
+          <div
+            style={{
+              paddingTop: 4,
+              paddingBottom: 4,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              gap: 11,
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                color: '#C70850',
+                fontSize: 30,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '700',
+                lineHeight: 35,
+                wordWrap: 'break-word',
+              }}
+            >
+              $32.98
+            </div>
+            <div
+              style={{
+                color: '#808080',
+                fontSize: 24,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '400',
+                textDecoration: 'line-through',
+                lineHeight: 18,
+                wordWrap: 'break-word',
+              }}
+            >
+              $150.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style={{
+        width: 310,
+        padding: 18,
+        background: 'rgba(51, 51, 51, 0.95)',
+        borderRadius: 12,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: 15,
+        display: 'inline-flex',
+      }}
+    >
+      <img
+        style={{
+          alignSelf: 'stretch',
+          height: 274,
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 5,
+          paddingBottom: 5,
+        }}
+        src="https://placehold.co/274x274"
+      />
+      <div
+        style={{
+          alignSelf: 'stretch',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          gap: 15,
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            alignSelf: 'stretch',
+            color: '#EAEAEA',
+            fontSize: 24,
+            fontFamily: 'LG Smart UI',
+            fontWeight: '700',
+            lineHeight: 31,
+            wordWrap: 'break-word',
+          }}
+        >
+          New Shark Vacuum! Your pet Hair Solution!
+        </div>
+        <div
+          style={{
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            gap: 10,
+            display: 'inline-flex',
+          }}
+        >
+          <div
+            style={{
+              paddingTop: 4,
+              paddingBottom: 4,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              gap: 11,
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                color: '#C70850',
+                fontSize: 30,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '700',
+                lineHeight: 35,
+                wordWrap: 'break-word',
+              }}
+            >
+              $32.98
+            </div>
+            <div
+              style={{
+                color: '#808080',
+                fontSize: 24,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '400',
+                textDecoration: 'line-through',
+                lineHeight: 18,
+                wordWrap: 'break-word',
+              }}
+            >
+              $150.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style={{
+        width: 310,
+        padding: 18,
+        background: 'rgba(51, 51, 51, 0.95)',
+        borderRadius: 12,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: 15,
+        display: 'inline-flex',
+      }}
+    >
+      <img
+        style={{
+          alignSelf: 'stretch',
+          height: 274,
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 5,
+          paddingBottom: 5,
+        }}
+        src="https://placehold.co/274x274"
+      />
+      <div
+        style={{
+          alignSelf: 'stretch',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          gap: 15,
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            alignSelf: 'stretch',
+            color: '#EAEAEA',
+            fontSize: 24,
+            fontFamily: 'LG Smart UI',
+            fontWeight: '700',
+            lineHeight: 31,
+            wordWrap: 'break-word',
+          }}
+        >
+          New Shark Vacuum! Your pet Hair Solution!
+        </div>
+        <div
+          style={{
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            gap: 10,
+            display: 'inline-flex',
+          }}
+        >
+          <div
+            style={{
+              paddingTop: 4,
+              paddingBottom: 4,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              gap: 11,
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                color: '#C70850',
+                fontSize: 30,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '700',
+                lineHeight: 35,
+                wordWrap: 'break-word',
+              }}
+            >
+              $32.98
+            </div>
+            <div
+              style={{
+                color: '#808080',
+                fontSize: 24,
+                fontFamily: 'LG Smart UI',
+                fontWeight: '400',
+                textDecoration: 'line-through',
+                lineHeight: 18,
+                wordWrap: 'break-word',
+              }}
+            >
+              $150.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>;