Merge pull request #1664 from milvus-io/ued-2975

add cloud advertisement to doc and blog detail pages

src/components/aside/index.module.less

@@ -1,7 +1,6 @@
 @import url('@/styles/global.module.less');
 
 .rightNavWrapper {
-  padding: 0 16px;
   font-family: 'Inter';
 
   .btnsGroup {

src/components/card/advCard/index.module.less

@@ -20,6 +20,7 @@
 
   .ctaButton {
     .paragraph4();
+    justify-content: center;
     svg path {
       stroke: #fff;
     }

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 && (
-        <div className={classes.advCardContainer}>
+      {isCnAdv ? (
+        <div className={clsx(classes.advCardContainer, className)}>
           <h2 className={classes.advTitle}>{t('advertise.title')}</h2>
           <p className={classes.advAbstract}>{t('advertise.content')}</p>
           <CustomButton
-            href={ctaLink}
+            href={CN_CTA_LINK}
+            endIcon={<RightTopArrowIcon />}
+            className={classes.ctaButton}
+          >
+            {t('advertise.ctaLabel')}
+          </CustomButton>
+        </div>
+      ) : (
+        <div className={clsx(classes.advCardContainer, className)}>
+          <h2 className={classes.advTitle}>{enTitle}</h2>
+          <p className={classes.advAbstract}>{t('advertise.content')}</p>
+          <CustomButton
+            href={enCtaLink}
             endIcon={<RightTopArrowIcon />}
             className={classes.ctaButton}
           >

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"
   }
 }

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) {
         })}
       </ul>
 
+      <CloudAdvertisementCard className={classes.advCard} />
+
       <div className="">
         <Share
           url={shareUrl}

src/parts/blogs/blogAnchors/index.module.less

@@ -43,3 +43,7 @@
     justify-content: flex-start;
   }
 }
+
+.advCard {
+  margin-bottom: 42px;
+}

src/styles/blogDetail.module.less

@@ -64,7 +64,7 @@
     margin-bottom: 60px;
 
     .articleContainer {
-      flex: 0 1 750px;
+      flex: 1;
       overflow: hidden;
 
       @media @tablet, @phone {
@@ -81,7 +81,7 @@
     }
 
     .anchorsContainer {
-      flex: 0 0 260px;
+      flex: 0 0 300px;
       position: sticky;
       height: fit-content;
       top: 100px;

src/styles/docDetail.module.less

@@ -17,6 +17,7 @@
 
   .asideSection {
     flex: 0 0 @doc-aside-width;
+    padding-right: 16px;
 
     @media @phone, @tablet {
       display: none;

src/styles/variables.module.less

@@ -34,7 +34,7 @@
 @footer-height-tablet: 676px;
 
 @doc-content-width: 950px;
-@doc-aside-width: 300px;
+@doc-aside-width: 316px;
 @doc-menu-width: 232px;
 @doc-menu-container-width: 282px;
 @doc-content-padding: 64px;