diff --git a/src/components/aside/index.module.less b/src/components/aside/index.module.less index 842f54acb..f4c8a886b 100644 --- a/src/components/aside/index.module.less +++ b/src/components/aside/index.module.less @@ -1,7 +1,6 @@ @import url('@/styles/global.module.less'); .rightNavWrapper { - padding: 0 16px; font-family: 'Inter'; .btnsGroup { diff --git a/src/components/card/advCard/index.module.less b/src/components/card/advCard/index.module.less index fe9a4d19e..dbc802bd4 100644 --- a/src/components/card/advCard/index.module.less +++ b/src/components/card/advCard/index.module.less @@ -20,6 +20,7 @@ .ctaButton { .paragraph4(); + justify-content: center; svg path { stroke: #fff; } diff --git a/src/components/card/advCard/index.tsx b/src/components/card/advCard/index.tsx index 11307c64d..26dca9d19 100644 --- a/src/components/card/advCard/index.tsx +++ b/src/components/card/advCard/index.tsx @@ -3,30 +3,70 @@ import { useTranslation } from 'react-i18next'; import { LanguageEnum } from '@/components/language-selector'; import CustomButton from '@/components/customButton'; import { RightTopArrowIcon } from '@/components/icons'; +import { useEffect, useMemo, useState } from 'react'; +import clsx from 'clsx'; -const DISPLAY_ADV_LANGUAGES = [LanguageEnum.CHINESE]; +const CN_CTA_LINK = + 'https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-09-30_display_milvus-docs_zilliz'; + +const MANAGE_MILVUS_CTA_LINK = + 'https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-10-17_display_manged-milvus-docs_milvusio'; +const CLOUD_UTM_CTA_LINK = + 'https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-10-17_display_zilliz-milvus-docs_milvusio'; export default function CloudAdvertisementCard(props: { - language: LanguageEnum; + language?: LanguageEnum; + className?: string; }) { - const { language } = props; - + const { language = LanguageEnum.ENGLISH, className = '' } = props; const { t } = useTranslation('docs', { lng: language }); + const isCnAdv = language === LanguageEnum.CHINESE; + + const [random, setRandom] = useState(Math.random()); + + const { enTitle, enCtaLink } = useMemo(() => { + const manageMilvusTitle = t('advertise.titleA'); + const tryCloudTitle = t('advertise.titleB'); + const title = random > 0.5 ? manageMilvusTitle : tryCloudTitle; + const ctaLink = random > 0.5 ? MANAGE_MILVUS_CTA_LINK : CLOUD_UTM_CTA_LINK; + return { + enTitle: title, + enCtaLink: ctaLink, + }; + }, [random]); - const ctaLink = - language === LanguageEnum.ENGLISH - ? 'https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-09-30_display_milvus-docs_zilliz' - : 'https://cloud.zilliz.com.cn/signup?utm_source=milvus&utm_medium=cta'; - const isDisplayAdv = DISPLAY_ADV_LANGUAGES.includes(language); + useEffect(() => { + const randomValue = Number( + window.localStorage.getItem('A_B_TEST_RANDOM') ?? NaN + ); + + if (isNaN(randomValue)) { + window.localStorage.setItem('A_B_TEST_RANDOM', `${random}`); + return; + } + setRandom(Math.random()); + }, []); return ( <> - {isDisplayAdv && ( -
+ {isCnAdv ? ( +

{t('advertise.title')}

{t('advertise.content')}

} + className={classes.ctaButton} + > + {t('advertise.ctaLabel')} + +
+ ) : ( +
+

{enTitle}

+

{t('advertise.content')}

+ } className={classes.ctaButton} > diff --git a/src/i18n/en/docs.json b/src/i18n/en/docs.json index 83fa6cd77..c30a2898d 100644 --- a/src/i18n/en/docs.json +++ b/src/i18n/en/docs.json @@ -28,8 +28,9 @@ "by": "Translated by" }, "advertise": { - "title": "Try Mananged Milvus Free", - "content": "Hassle-free, 10x faster than Milvus, AI-powered AutoIndex and enterprise-ready for your GenAI apps", - "ctaLabel": "Get Started Free" + "content": "Zilliz Cloud is hassle-free, powered by Milvus and 10x faster.", + "ctaLabel": "Get Started", + "titleA": "Try Managed Milvus for Free", + "titleB": "Try Zilliz Cloud for Free" } } diff --git a/src/parts/blogs/blogAnchors/index.jsx b/src/parts/blogs/blogAnchors/index.jsx index a9c4a19b9..5b69be7b6 100644 --- a/src/parts/blogs/blogAnchors/index.jsx +++ b/src/parts/blogs/blogAnchors/index.jsx @@ -4,6 +4,7 @@ import Link from 'next/link'; import React, { useEffect, useState } from 'react'; import { useActivateAnchorWhenScroll } from '../../../hooks/blog'; import Share from '../../../components/share'; +import CloudAdvertisementCard from '@/components/card/advCard'; export default function BlogAnchorSection(props) { const { @@ -66,6 +67,8 @@ export default function BlogAnchorSection(props) { })} + +