[251006] feat: views - PlayerPanel.jsx, ShopNowContainer.jsx, ShopNowC...

🕐 커밋 시간: 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()

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

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() {
+export default function ShopNowContainer({ shopNowInfo }) {
-  return <div className={css.container}>{/* 나중에 콘텐츠 추가 예정 */}</div>;
+  // 임시 더미 데이터 (나중에 실제 데이터로 교체)
+  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>
+  );
 }

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(
+  background: linear-gradient(270deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0) 65%),
-    to top,
+              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%),
-    rgba(0, 0, 0, 0.95) 0%,
+              linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 45%, black 100%),
-    rgba(0, 0, 0, 0.85) 40%,
+              rgba(0, 0, 0, 0.56);
-    rgba(0, 0, 0, 0.6) 70%,
+  border-top: 1px solid rgba(234, 234, 234, 0.8);
-    rgba(0, 0, 0, 0) 100%
-  );
-  border-top: 1px solid rgba(234, 234, 234, 0.3);
   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;
+    margin-left: 0;
-  }
-
-  &::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;
   }
 }

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>
+  );
+}

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

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