add try cloud banner on every page

src/components/banner/index.module.less

@@ -0,0 +1,19 @@
+@import (reference) '../../styles/global.module.less';
+
+.bannerContainer {
+  padding: 10px 25px;
+  background-color: #000;
+
+  .bannerText {
+    .paragraph4-regular();
+    text-align: center;
+    color: #fff;
+
+    a {
+      color: @color-blue1;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

src/components/banner/index.tsx

@@ -0,0 +1,19 @@
+import { CLOUD_SIGNUP_LINK } from '@/consts';
+import classes from './index.module.less';
+import { useTranslation, Trans } from 'react-i18next';
+
+export default function CloudBanner() {
+  const { t } = useTranslation('home');
+
+  return (
+    <div className={classes.bannerContainer}>
+      <p className={classes.bannerText}>
+        <Trans
+          t={t}
+          i18nKey="banner"
+          components={[<a href={CLOUD_SIGNUP_LINK} key="zilliz-cloud"></a>]}
+        />
+      </p>
+    </div>
+  );
+}

src/components/header/index.tsx

@@ -2,6 +2,7 @@ import classes from './index.module.less';
 import clsx from 'clsx';
 import DesktopHeader from './DescktopHeader';
 import MobileHeader from './mobileHeader';
+import CloudBanner from '../banner';
 
 const Header: React.FC<{
   darkMode?: Boolean;
@@ -14,6 +15,7 @@ const Header: React.FC<{
         [classes.fixedHeader]: darkMode,
       })}
     >
+      <CloudBanner />
       <DesktopHeader className={className} />
       <MobileHeader className={className} />
     </header>

src/components/layout/docLayout/index.module.less

@@ -1,8 +1,6 @@
 @import (reference) '../../../styles/global.module.less';
 @import (reference) '../../../styles/responsive.module.less';
 
-@top: 58px;
-
 div.docHeader {
   .docContainer();
 }
@@ -12,8 +10,8 @@ div.mainContainer {
 
   .flexibleContainer {
     position: sticky;
-    top: @top;
-    height: calc(100vh - @top);
+    top: @header-height-tablet;
+    height: calc(100vh - @header-height-tablet);
     background-color: #fff;
     z-index: 998;
     min-width: 24px;

src/i18n/en/home.json

@@ -134,5 +134,6 @@
   },
   "productionSection": {
     "title": "Trusted for production workloads"
-  }
+  },
+  "banner": "🚀 Try Zilliz Cloud, the fully managed Milvus, for free—experience 10x faster performance!. <0>Try Now>></0>"
 }

src/styles/blogDetail.module.less

@@ -21,7 +21,7 @@
       margin-bottom: 32px;
       color: @color-black2;
       font-size: 14px;
-  
+
       a {
         color: @color-black1-5;
         text-decoration: none;
@@ -33,7 +33,7 @@
           text-underline-position: from-font;
         }
       }
-  
+
       svg {
         width: 1em;
         height: 1em;
@@ -64,7 +64,6 @@
       line-height: 1.4;
       letter-spacing: 1.4px;
       font-weight: 600;
-
     }
 
     .subTitleSeparator {
@@ -122,7 +121,7 @@
       flex: 0 0 271px;
       position: sticky;
       height: fit-content;
-      top: 80px;
+      top: 120px;
 
       @media @tablet, @phone {
         display: none;

src/styles/variables.module.less

@@ -21,15 +21,15 @@
 @color-white: #ffffff;
 @color-white1: #f9f9f9;
 @color-black1: #00131a;
-@color-black1-5: #2E373B;
+@color-black1-5: #2e373b;
 @color-black2: #667176;
 @color-black3: #d0d7dc;
 @color-blue1: #00b3ff;
 @color-blue2: #008dc8;
 @color-black4: #ececee;
 
-@header-height-desktop: 58px;
-@header-height-tablet: 58px;
+@header-height-desktop: calc(58px + 40px);
+@header-height-tablet: calc(58px + 40px);
 
 @footer-height-desktop: 467px;
 @footer-height-tablet: 676px;