@anker-in/campaign-ui 0.2.11-beta.3 → 0.2.11-beta.31

package/src/components/chat/markdown.tsx

@@ -5,7 +5,7 @@ import remarkMath from 'remark-math'
 
 const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
+  (prevProps, nextProps) => prevProps.children === nextProps.children
 )
 
 type MarkdownProps = {

package/src/components/credits/context/hooks/useRedeemableList.ts

@@ -29,7 +29,7 @@ function useRedeemableList() {
     initData: {
       brand,
       page: 1,
-      page_size: 20,
+      page_size: 999,
       country: (ALPC_COUNTRY_MAP.get(locale) || locale)?.toUpperCase(),
     },
   })

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

@@ -4,10 +4,3 @@ export enum FunctionDiscountType {
   FixedAmount,
   FixedPrice,
 }
-
-// 小数位取舍方式
-export enum RoundSelected {
-  RoundHighest = 'round_highest',
-  RoundLowest = 'round_lowest',
-  RoundNearest = 'round_nearest',
-}

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

@@ -1,18 +1,9 @@
-import { FunctionDiscountType, RoundSelected } from './memberPriceConst'
-
-// 价格结尾配置
-export type PriceEndingConf = {
-  apply_price_ending: boolean
-  one_decimal_place: string
-  two_decimal_place: string
-  round_selected: RoundSelected
-}
+import { FunctionDiscountType } from './memberPriceConst'
 
 // 折扣配置
 export type DiscountConfig = {
   discount_type: FunctionDiscountType
   discount_value: number
-  price_ending_conf?: PriceEndingConf
 }
 
 // 会员价配置类型
@@ -36,19 +27,3 @@ export type FunctionMemberPriceConfig = {
     other_product_discounts: boolean
   }
 }
-
-// 会员价计算结果
-export type FunctionMemberPriceResult = {
-  hasMemberPrice: boolean
-  useCoupon: boolean
-  originalPrice: number
-  originalPriceWithCurrency: string
-  salePrice: number
-  salePriceWithCurrency: string
-  salePriceWithoutCoupon: number
-  salePriceWithoutCouponWithCurrency: string
-  savePrice: number
-  savePriceWithCurrency: string
-  savePriceWithoutCoupon: number
-  savePriceWithoutCouponWithCurrency: string
-}

package/src/components/credits/context/provider.tsx

@@ -17,10 +17,22 @@ type Context = {
   fetchCreditInfo: (user_id: string) => void
   gtm: {
     pageGroup: string
+    pageHandle?: string
   }
   pageCommon: CreditsPageCommon
   memberPriceDiscount?: FunctionMemberPriceConfig[]
   alpcBrand?: string
+  cartConfig?: {
+    addToCart: (params: {
+      variantList: Array<{
+        variant: any
+        quantity: number
+        attributes?: Array<{ key: string; value: string }>
+      }>
+      cartAttributes?: Record<string, string>
+      discountCodes?: string[]
+    }) => void | Promise<any>
+  }
 }
 
 export const CreditsContext = createContext<Context>({
@@ -35,10 +47,12 @@ export const CreditsContext = createContext<Context>({
   fetchCreditInfo: (user_id: string) => {},
   gtm: {
     pageGroup: '',
+    pageHandle: '',
   },
   pageCommon: {},
   memberPriceDiscount: undefined,
   alpcBrand: undefined,
+  cartConfig: undefined,
 })
 
 export function CreditsProvider({
@@ -57,6 +71,7 @@ export function CreditsProvider({
   pageCommon,
   memberPriceDiscount,
   alpcBrand,
+  cartConfig,
 }: PropsWithChildren<Context>) {
   return (
     <CreditsContext.Provider
@@ -75,6 +90,7 @@ export function CreditsProvider({
         pageCommon,
         memberPriceDiscount,
         alpcBrand,
+        cartConfig,
       }}
     >
       {children}

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

@@ -1,7 +1,6 @@
 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'
@@ -36,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 => {
@@ -91,9 +105,6 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
     }
   }, [actions, copy.list, isLogin])
 
-  // 只有大于3个任务时才显示蒙层
-  const shouldShowMask = list.length > 3
-
   return (
     <Container id={id} className="bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy.title} />
@@ -125,7 +136,7 @@ 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>
@@ -141,18 +152,12 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
 
         {/* 卡片列表 */}
         <div className="relative mt-[24px]">
-          <motion.div
-            className={cn('grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto')}
-            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' })
-                }
-              }
+          <div
+            className={cn(
+              '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'
+            )}
+            style={{
+              height: showMore || !shouldShowMask ? 'auto' : '512px',
             }}
           >
             {list.map(item => (
@@ -194,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>
                 )}
@@ -216,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

@@ -29,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)
@@ -61,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 md-l:line-clamp-3" />
+          <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/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,4 +1,4 @@
-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'
@@ -26,7 +26,7 @@ function RedeemableItem({
     profile,
     openSignUpPopup,
     pageCommon,
-    gtm: { pageGroup },
+    gtm: { pageGroup, pageHandle },
   } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand, locale } = useHeadlessContext()
@@ -113,18 +113,31 @@ function RedeemableItem({
   return (
     <div
       className={cn(
-        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] md:rounded-[12px] p-[24px] l:p-[8px] md-xl:p-[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={
           extractVariantId(itemData.productVariant?.id)
-            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`
-            : `/products/${itemData.product.handle}`
+            ? `/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-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}
+        className={cn('relative mx-auto h-[196px] w-fit md:h-[120px] md-xxl:h-[138px]')}
       >
         <Picture
           className="mx-auto h-full w-auto"
@@ -136,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
@@ -172,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"
@@ -198,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/creditsInfoCard/index.tsx

@@ -72,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>
@@ -132,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) => (