@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.21

package/src/components/credits/context/utils.ts

@@ -147,3 +147,12 @@ export function formatVariantPrice({
 
   return { price, basePrice, discount }
 }
+
+/**
+ * 提取 variant id，去掉 gid://shopify/ProductVariant/ 前缀
+ */
+export function extractVariantId(id: string | number | undefined): string | null {
+  if (!id) return null
+  const idStr = typeof id === 'number' ? id.toString() : id
+  return idStr.replace('gid://shopify/ProductVariant/', '')
+}

package/src/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.tsx

@@ -1,15 +1,15 @@
 import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import { motion } from 'framer-motion'
-import { useMemo, useState } from 'react'
+import { useMemo, useState, useRef, useEffect } from 'react'
 
 import { TaskType, type CreditsAnkersolixTaskProps } from './type'
 import { useActions } from '../creditsWaysToGetCredits/useActions'
 import { useCreditsContext } from '../context/provider'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersolixTaskProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
@@ -35,6 +35,21 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
       isSuccess: isUploadReceiptSuccess,
     },
   })
+
+  const shouldShowMask = (copy?.list || []).length > 3
+
+  // Handle scroll after collapse animation
+  useEffect(() => {
+    if (!showMore && shouldShowMask && window.screen.width < 768) {
+      const timer = setTimeout(() => {
+        const section = document.getElementById(id || 'ankersolix-task')
+        if (section) {
+          section.scrollIntoView({ behavior: 'smooth', block: 'end' })
+        }
+      }, 300) // Match transition duration
+      return () => clearTimeout(timer)
+    }
+  }, [showMore, shouldShowMask, id])
   const list = useMemo(() => {
     const list = copy.list
       .map(item => {
@@ -90,12 +105,9 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
     }
   }, [actions, copy.list, isLogin])
 
-  // 只有大于3个任务时才显示蒙层
-  const shouldShowMask = list.length > 3
-
   return (
-    <Container id={id} className="[&>div]:l:!px-0 bg-[#F5F5F7]">
-      <Heading as="h2" size="4" html={copy.title} className='md:px-[16px]'/>
+    <Container id={id} className="bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy.title} />
       <div
         className={cn(
           'mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden',
@@ -114,8 +126,8 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
           }}
         />
         {/* 副标题和装饰图部分 */}
-        <div className="flex items-center justify-between h-[560px] md:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start">
-          <div className="flex flex-col gap-[8px]">
+        <div className="flex items-center justify-between xl-xxl:h-[448px] l-xl:h-[336px] h-[560px] l:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start">
+          <div className="flex flex-col gap-[8px] l:mt-[8px]">
             <Heading
               as="h3"
               size={4}
@@ -124,59 +136,55 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
             />
             <div className="flex items-center gap-[8px]">
               <p
-                className="text-[48px] font-bold tracking-[-1.92px] leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]"
+                className="text-[48px] font-bold leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]"
                 dangerouslySetInnerHTML={{ __html: copy.equalCredits }}
               />
             </div>
           </div>
           {copy.mainImage?.url && (
-            <Picture className="w-full max-w-[50%] md:max-w-full md:mt-[24px] l:max-w-full l:mt-[24px]" source={copy.mainImage.url} />
+            <Picture
+              className="h-full object-contain l:mx-auto md:h-auto md:w-full md-l:h-[302px]"
+              imgClassName="!h-full !object-contain"
+              source={copy.mainImage.url}
+            />
           )}
         </div>
 
         {/* 卡片列表 */}
-        <div className="relative">
-          <motion.div
+        <div className="relative mt-[24px]">
+          <div
             className={cn(
-              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto'
+              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto transition-all duration-300 ease-in-out'
             )}
-            initial={{ height: shouldShowMask ? 512 : 'auto' }}
-            animate={{ height: showMore || !shouldShowMask ? 'auto' : 512 }}
-            transition={{ duration: 0.3 }}
-            onAnimationComplete={() => {
-              if (!showMore && shouldShowMask && window.screen.width < 768) {
-                const section = document.getElementById(id || 'ankersolix-task')
-                if (section) {
-                  section.scrollIntoView({ behavior: 'smooth', block: 'end' })
-                }
-              }
+            style={{
+              height: showMore || !shouldShowMask ? 'auto' : '512px',
             }}
           >
             {list.map(item => (
               <div
                 key={item.id}
                 className={cn(
-                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] md:p-[16px] l:p-[24px]',
-                  rounded ? '' : ''
+                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] xl:p-[16px]',
+                  rounded ? 'rounded-[16px]' : ''
                 )}
               >
                 <div>
-                  <Heading
-                    as="h4"
+                  <Text
+                    as="p"
                     html={item.title}
                     size={2}
-                    className="text-[24px] font-bold text-[#080a0f] tracking-[-0.96px] leading-[1.2] text-pretty md:text-[18px] l:text-[20px]"
+                    className="text-pretty text-[24px] font-bold xxl:text-[20px]"
                   />
-                  <div className="mt-[8px] flex items-center gap-[4px]">
+                  <div className="mt-[8px] l:mt-[4px] flex items-center">
                     <Picture
-                      className="size-[24px] [&_path]:size-full"
+                      className="size-[24px] xxl:size-[18px] [&_path]:size-full"
                       source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"
                     />
                     <Text
                       as="p"
                       html={item.credits}
                       size={2}
-                      className="text-[18px] font-bold text-[#080a0f] tracking-[-0.36px] leading-[1.4] md:text-[16px]"
+                      className="ml-[4px] mt-[6px] text-[18px] xxl:text-[14px]"
                     />
                   </div>
                 </div>
@@ -191,17 +199,12 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
                     {...(item.handleClick && { onClick: item.handleClick })}
                     variant="primary"
                     size="lg"
-                    className="mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]"
+                    className="mt-[24px] w-fit"
                   >
                     {item.buttonLabel}
                   </Button>
                 ) : (
-                  <Button
-                    variant="primary"
-                    size="lg"
-                    className="mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]"
-                    disabled
-                  >
+                  <Button variant="primary" size="lg" className="mt-[24px] w-fit" disabled>
                     {item.buttonLabel}
                   </Button>
                 )}
@@ -213,7 +216,7 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
                 style={{ background: 'linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)' }}
               ></div>
             )}
-          </motion.div>
+          </div>
           {shouldShowMask && (
             <>
               {showMore ? (

package/src/components/credits/creditsBanner/index.tsx

@@ -5,6 +5,8 @@ import { useCreditsContext } from '../context/provider'
 type Img = {
   url: string
   alt: string
+  width?: number
+  height?: number
 }
 export type CreditsBannerCopy = {
   pcImg: Img
@@ -34,15 +36,41 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
     buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()
   }
 
+  // 计算图片比例，如果没有配置则使用默认值
+  const pcAspectRatio =
+    copy.pcImg?.width && copy.pcImg?.height ? `${copy.pcImg.width} / ${copy.pcImg.height}` : '1920 / 804'
+  const laptopAspectRatio =
+    copy.laptopImg?.width && copy.laptopImg?.height ? `${copy.laptopImg.width} / ${copy.laptopImg.height}` : '768 / 660'
+  const mobileAspectRatio =
+    copy.mobileImg?.width && copy.mobileImg?.height ? `${copy.mobileImg.width} / ${copy.mobileImg.height}` : '390 / 660'
+
   return (
     <>
       <div id={id} className=" relative w-full">
         <Picture
-          className="aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]"
+          className="credits-banner-image w-full"
+          style={{
+            aspectRatio: pcAspectRatio,
+          }}
+          imgClassName="object-cover w-full h-full"
           source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}
           alt={copy.pcImg?.alt}
           loading="eager"
         ></Picture>
+        <style>
+          {`
+            @media (max-width: 1024px) and (min-width: 768px) {
+              .credits-banner-image {
+                aspect-ratio: ${laptopAspectRatio} !important;
+              }
+            }
+            @media (max-width: 767px) {
+              .credits-banner-image {
+                aspect-ratio: ${mobileAspectRatio} !important;
+              }
+            }
+          `}
+        </style>
         {isLogin && (
           <div
             className="absolute inset-0 "
@@ -54,10 +82,10 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
 
         <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
           <div className="grid grid-cols-12">
-            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
-                size="5"
+                className="text-[48px] font-bold xl-xxl:text-[40px] l:text-[32px]"
                 html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
               ></Heading>
 

package/src/components/credits/creditsBenefits/BenefitItem.tsx

@@ -1,6 +1,7 @@
 import { Heading, Picture, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import IconInfo from './IconInfo'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export interface BenefitItemCopy {
   icon: {
@@ -28,13 +29,16 @@ const BenefitItem = ({
   cardBgColor?: string
   cardBorderColor?: string
 }) => {
-  const { brand } = useHeadlessContext()
+  const { brand, locale } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
+  // 德语和法语需要折行
+  const shouldBreakWords = ['de', 'eu-de', 'fr', 'eu-fr'].includes(locale)
+
   // 根据 bigIcon 设置不同屏幕下的图标大小
-  // 尺寸：≥1921px=64px, 1441-1920px=54px, ≤1440px=48px
+  // 尺寸：≥1921px=64px, 1441-1920px=56px, 1025-1440px=20px, ≤1024px=48px
   const iconSizeClass = bigIcon
-    ? 'mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'
+    ? 'mb-[16px] size-[64px] xl-xxl:size-[56px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'
     : 'mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'
 
   console.log('cardBgColor in BenefitItem', cardBgColor)
@@ -60,7 +64,11 @@ const BenefitItem = ({
       <div className="flex flex-col">
         <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />
         <div className="flex items-center">
-          <Heading html={item.text} size="2" className="break-all" />
+          <Heading
+            html={item.text}
+            size="2"
+            className={cn('md-l:line-clamp-3', shouldBreakWords && 'break-words')}
+          />
           {item.note && (
             <div
               role="button"

package/src/components/credits/creditsBenefits/IconInfo.tsx

@@ -2,7 +2,7 @@ export const IconInfo = () => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      className='size-[18px] cursor-pointer [&_svg]:size-full'
+      className='size-[20px] cursor-pointer [&_svg]:size-full'
       width='18'
       height='18'
       viewBox='0 0 18 18'

package/src/components/credits/creditsBenefits/index.tsx

@@ -47,7 +47,7 @@ export const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?:
   return (
     <Container id={id} className="!z-[30] bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy?.title} />
-      <div className="mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
+      <div className="mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch">
         {copy.benefits.map((item, index) => (
           <BenefitItem
             key={index}

package/src/components/credits/creditsCash/CreditsCash.tsx

@@ -4,16 +4,19 @@ import { useMemo, useState } from 'react'
 import RedeemableItem from './RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import RulesModal from '../modal/rulesModal'
-import { useProductsByHandles } from '@anker-in/lib'
+import { useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
 import { CreditsCashCopy, RedeemItem } from './type'
 import { Product, classNames as cn } from '@anker-in/lib'
 import { useCreditsContext } from '../context/provider'
 import { numberFormat } from '../context/utils'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }) => {
   const [rules, setRules] = useState<string | string[]>()
   const { redeemableList } = useRedeemableList()
   const { pageCommon } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const variantMetafieldIdentifiers: any[] = []
 
@@ -27,7 +30,7 @@ export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }
   const list = useMemo(() => {
     return productByHandles
       ?.map((product: Product) => {
-        const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)
+        const config = (copy.list || []).find(item => item.products?.[0]?.handle === product.handle)
         const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
         const productVariant =
           product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0]
@@ -69,7 +72,7 @@ export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }
       {rules && (
         <RulesModal
           overlayClassName="md:px-[16px] md:items-center"
-          className="md:h-fit md:rounded-b-[16px]"
+          className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}
           isOpen={rules.length > 0}
           onClose={() => setRules([])}
           titleClassName="border-b-transparent h-[56px]"

package/src/components/credits/creditsCash/RedeemableItem.tsx

@@ -1,12 +1,13 @@
-import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { Button, Text, Picture, Badge } from '@anker-in/headless-ui'
 import { useMemo, useState } from 'react'
 
 import { CreditsCashCopy, RedeemItem } from './type'
 import { useCreditsContext } from '../context/provider'
 import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
-import { formatPrice, numberFormat } from '../context/utils'
-import { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'
+import { formatPrice, numberFormat, extractVariantId } from '../context/utils'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../../components/registration'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function RedeemableItem({
   copy,
@@ -25,7 +26,7 @@ function RedeemableItem({
     profile,
     openSignUpPopup,
     pageCommon,
-    gtm: { pageGroup },
+    gtm: { pageGroup, pageHandle },
   } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand, locale } = useHeadlessContext()
@@ -112,14 +113,31 @@ function RedeemableItem({
   return (
     <div
       className={cn(
-        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        'relative flex flex-col items-center rounded-[16px] bg-[#EAEAEC] md:rounded-[12px] px-[24px] pb-[24px] l:px-[8px] l:pb-[8px] md-xl:px-[16px] md-xl:pb-[16px]',
         !rounded && 'rounded-none md:rounded-none',
+        copy.badgeLabel ? 'pt-[48px] l:pt-[44px]' : 'pt-[24px] md-xl:pt-[16px] l:pt-[8px]',
         className
       )}
     >
+      {/* Redeem 标签 Badge */}
+      {copy.badgeLabel && (
+        <Badge
+          className="absolute left-[24px] l:left-[16px] !bg-gradient-brand top-[16px] z-10"
+          size="lg"
+          variant="promotional"
+          promotionalType="regular-member"
+        >
+          {copy.badgeLabel}
+        </Badge>
+      )}
+
       <a
-        href={`/products/${itemData.product.handle}`}
-        className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}
+        href={
+          extractVariantId(itemData.productVariant?.id)
+            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}${pageHandle ? `&ref=${pageHandle}` : ''}`
+            : `/products/${itemData.product.handle}${pageHandle ? `?ref=${pageHandle}` : ''}`
+        }
+        className={cn('relative mx-auto h-[196px] w-fit md:h-[120px] md-xxl:h-[138px]')}
       >
         <Picture
           className="mx-auto h-full w-auto"
@@ -131,12 +149,12 @@ function RedeemableItem({
           }
         ></Picture>
       </a>
-      <div className={cn('mt-[22px] w-full l:mt-[8px]')}>
+      <div className={cn('mt-[10px] w-full xl:mt-[8px]')}>
         <Text
           html={itemData?.product?.title}
           title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}
           size={2}
-          className="line-clamp-2 h-[58px] text-[24px] l-xxl:text-[20px] l:text-[16px] leading-[1.2] l:h-[40px] l-xxl:h-[48px]"
+          className="line-clamp-2 h-[58px] text-[24px] l-xxl:text-[20px] l:text-[16px] leading-[1.2] l:h-[38px] l-xxl:h-[48px]"
         />
         {itemData?.config?.rules?.split('<br>')?.length > 0 && (
           <button
@@ -167,7 +185,7 @@ function RedeemableItem({
           </button>
         )}
 
-        <div className="flex flex-wrap items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
+        <div className="flex flex-wrap items-center l:mt-[12px] md:min-h-[46px] laptop:text-[16px] lg-desktop:text-[18px]">
           <Picture
             className="size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]"
             source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
@@ -193,7 +211,7 @@ function RedeemableItem({
           />
         </div>
 
-        <div className="group relative w-full">
+        <div className="group relative w-full mt-[8px]">
           <Button
             disabled={isDisabled}
             variant="primary"

package/src/components/credits/creditsCash/type.ts

@@ -25,6 +25,7 @@ export type CreditsCashCopy = {
   unlockRewards: string
   btnRedeem: string
   off: string
+  badgeLabel?: string
 }
 
 export type RedeemItem = {

package/src/components/credits/creditsFaq/faqItem/FaqItem.tsx

@@ -1,7 +1,6 @@
 import { Heading, Text } from '@anker-in/headless-ui'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { classNames as cn } from '@anker-in/lib'
-import { motion } from 'framer-motion'
 import { type ReactNode, useEffect, useState } from 'react'
 
 type FaqItemProps = {
@@ -67,29 +66,32 @@ export const FaqItem = ({
           />
         )}
       </div>
-      <motion.div
-        initial={false}
-        animate={{ height: !expanded ? 0 : 'auto' }}
-        className="overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]"
-      >
-        {answer?.toString()?.includes('https://www.youtube.com') ? (
-          <Text
-            as="div"
-            className={cn('mt-[8px]')}
-            data-ratio="16:9"
-            data-content={answer}
-            html={answer?.toString()}
-          ></Text>
-        ) : (
-          <Text
-            as="div"
-            html={answer?.toString()}
-            className={cn(
-              'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
-            )}
-          ></Text>
+      <div
+        className={cn(
+          'grid transition-all duration-300 ease-in-out [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]',
+          expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
         )}
-      </motion.div>
+      >
+        <div className="overflow-hidden">
+          {answer?.toString()?.includes('https://www.youtube.com') ? (
+            <Text
+              as="div"
+              className={cn('mt-[8px]')}
+              data-ratio="16:9"
+              data-content={answer}
+              html={answer?.toString()}
+            ></Text>
+          ) : (
+            <Text
+              as="div"
+              html={answer?.toString()}
+              className={cn(
+                'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
+              )}
+            ></Text>
+          )}
+        </div>
+      </div>
     </div>
   )
 }

package/src/components/credits/creditsFaq/index.tsx

@@ -1,8 +1,9 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useMemo, useState } from 'react'
 
 import { FaqItem } from './faqItem/FaqItem'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export type CreditsFaqCopy = {
   title: string

package/src/components/credits/creditsInfoCard/index.tsx

@@ -5,7 +5,8 @@ import { useCreditsContext } from '../context/provider'
 import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
 import MyRewardsModal from '../modal/MyRewardsModal'
-import { gaNormalClick, classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 type ButtonConfig = {
   text: string
@@ -71,7 +72,13 @@ export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?:
               {copy.balanceLabel}
             </div>
             <div className="flex items-baseline">
-              <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
+              <div
+                className={cn(
+                  'mr-[8px] text-[36px] font-extrabold text-brand-color-1',
+                  'min-md:text-[44px]',
+                  'min-xl:text-[56px]'
+                )}
+              >
                 {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
               </div>
               <div className="text-[16px]">{pageCommon?.pointUnit}</div>
@@ -131,7 +138,7 @@ export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?:
         </div>
         <div
           className={cn(
-            'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'
+            'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] gap-[16px]  l:pl-0 l:pl-[48px] md-l:grid-cols-2'
           )}
         >
           {copy.buttons?.map((item, index) => (