labring · yangchuansheng · Nov 13, 2023 · Nov 13, 2023
diff --git a/docs/website/src/components/NavBanner/index.scss b/docs/website/src/components/NavBanner/index.scss
@@ -0,0 +1,195 @@
+.sealos-banner-box {
+  position: fixed;
+  top: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(20, 46, 78, 0.3) 0%,
+    rgba(33, 115, 160, 0.3) 50%,
+    rgba(20, 46, 78, 0.3) 100%
+  );
+  backdrop-filter: blur(187px);
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: #fff;
+  font-family: PingFang SC;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+  z-index: 99;
+  flex-shrink: 0;
+
+  svg {
+    position: absolute;
+    right: 9rem;
+    cursor: pointer;
+  }
+}
+
+.sealos-banner-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0 14px;
+  margin-left: 24px;
+  position: relative;
+  height: 32px;
+  font-size: 16px;
+  svg {
+    position: absolute;
+    right: -8px;
+    bottom: -8px;
+  }
+}
+
+.sealos-banner-container {
+  width: 590px;
+  height: 444px;
+  border-radius: 16px;
+  background: #0e1a28;
+  box-shadow: 0px 8px 29px 0px rgba(187, 196, 206, 0.25);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99;
+  .title {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px 16px 0px 0px;
+    background: rgba(122, 207, 255, 0.1);
+
+    .txt {
+      color: #fff;
+      font-family: Karmilla;
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 140%;
+      margin-left: 8px;
+    }
+
+    .sealos-banner-btn-close {
+      cursor: pointer;
+      fill: #fff;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      right: 20px;
+      // margin-left: auto;
+    }
+  }
+}
+
+.sealos-banner-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 117px;
+
+  color: #fff;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%;
+  letter-spacing: 0.28px;
+
+  .banner-title {
+    font-size: 28px;
+    margin-top: 76px;
+    margin-bottom: 30px;
+  }
+
+  .banner__subtitle {
+    font-size: 18px;
+  }
+}
+
+.btn {
+  cursor: pointer;
+  border-radius: 64px;
+  background: #479ceb;
+  display: flex;
+  padding: 12px 16px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 46px;
+  width: 100%;
+}
+
+.btn-cancel {
+  cursor: pointer;
+  margin-top: 20px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.sealos-banner-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.48);
+  z-index: 99;
+}
+
+@media screen and (max-width: 1000px) {
+  .sealos-banner-box {
+    font-size: 12px;
+    font-weight: 500;
+
+    svg {
+      position: absolute;
+      right: 1rem;
+    }
+  }
+
+  .sealos-banner-btn {
+    font-size: 12px;
+    font-weight: 500;
+    padding: 0 8px;
+  }
+
+  .sealos-banner-container {
+    width: 90%;
+
+    .title {
+      svg {
+        width: 36px;
+        height: 36px;
+      }
+
+      .txt {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .sealos-banner-body {
+    padding: 0 12px;
+    .banner-title {
+      font-size: 20px;
+    }
+
+    .banner__subtitle {
+      font-size: 14px;
+    }
+  }
+
+  .btn {
+    font-size: 14px;
+  }
+}
diff --git a/docs/website/src/components/NavBanner/index.tsx b/docs/website/src/components/NavBanner/index.tsx
@@ -0,0 +1,47 @@
+import Translate from '@docusaurus/Translate';
+import React, { useEffect, useState } from 'react';
+import CloseIcon from '@site/static/icons/close.svg';
+import './index.scss';
+
+export default function NavBanner({
+  isBannerVisible = false,
+  setIsBannerVisible
+}: {
+  isBannerVisible: boolean;
+  setIsBannerVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const closeBanner = () => {
+    localStorage.setItem('bannerCloseTimestamp', Date.now().toString());
+    setIsBannerVisible(false);
+  };
+
+  const goDetail = () => {
+    window.open(`https://seaos.run`);
+  };
+
+  useEffect(() => {
+    const lastCloseTimestamp = +localStorage.getItem('bannerCloseTimestamp');
+    if (
+      window.location.hostname === 'localhost' &&
+      (!lastCloseTimestamp || Date.now() - lastCloseTimestamp > 7 * 24 * 60 * 60 * 1000)
+    ) {
+      setIsBannerVisible(true);
+    } else {
+      setIsBannerVisible(false);
+    }
+  }, []);
+
+  return (
+    <>
+      {isBannerVisible && (
+        <div className="sealos-banner-box">
+          <Translate>如果您是国内用户，请直接访问 👉 </Translate>
+          <div className="sealos-banner-btn" onClick={goDetail}>
+            国内官网
+          </div>
+          <CloseIcon onClick={closeBanner} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/...te/src/pages/components/Banner/index.scss → ...website/src/components/_Banner/index.scss b/...te/src/pages/components/Banner/index.scss → ...website/src/components/_Banner/index.scss
diff --git a/...ite/src/pages/components/Banner/index.tsx → .../website/src/components/_Banner/index.tsx b/...ite/src/pages/components/Banner/index.tsx → .../website/src/components/_Banner/index.tsx
diff --git a/docs/website/src/pages/components/Header/index.scss b/docs/website/src/pages/components/Header/index.scss
@@ -21,7 +21,6 @@
     align-items: center;
     justify-content: space-between;
     padding: 30px 0;
-    margin-top: 48px;
 
     .sealos-title {
       line-height: 140%;

diff --git a/docs/website/src/pages/components/Header/index.tsx b/docs/website/src/pages/components/Header/index.tsx
@@ -3,11 +3,12 @@ import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import useWindow from '@site/src/hooks/useWindow';
+import NavBanner from '@site/src/components/NavBanner';
 import GithubIcon from '@site/static/icons/github.svg';
 import MeunIcon from '@site/static/icons/meun.svg';
 import LogoIcon from '@site/static/icons/sealos.svg';
 import React, { useEffect, useState } from 'react';
-import VideoPlayer from '../VideoPlayer';
+import VideoPlayer from '@site/src/pages/components/VideoPlayer';
 import './index.scss';
 
 const navbar = [
@@ -42,22 +43,23 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
   const [stars, setStars] = useState(10000);
   const isBrowser = useIsBrowser();
   const { cloudUrl, bd_vid } = useWindow();
-
-  const i18nMap: { [key: string]: { label: string; link: string } } = {
-    en: { label: '中', link: '/zh-Hans/' },
-    ['zh-Hans']: { label: 'En', link: '/' }
-  };
+  const [isBannerVisible, setIsBannerVisible] = useState(false);
 
   const {
-    i18n: { currentLocale },
-    siteConfig: {
-      themeConfig: {
-        // @ts-ignore nextLine
-        // navbar: { items: navbarData }
-      }
-    }
+    i18n: { currentLocale, defaultLocale }
   } = useDocusaurusContext();
 
+  const i18nMap: { [key: string]: { label: string; link: string } } =
+    defaultLocale === 'en'
+      ? {
+          en: { label: '中', link: '/zh-Hans/' },
+          ['zh-Hans']: { label: 'En', link: '/' }
+        }
+      : {
+          en: { label: '中', link: '/' },
+          ['zh-Hans']: { label: 'En', link: '/en/' }
+        };
+
   useEffect(() => {
     const getStars = async () => {
       try {
@@ -89,7 +91,16 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
           src={require('@site/static/img/bg-header.png').default}
           alt="community"
         />
-        <nav>
+        <NavBanner isBannerVisible={isBannerVisible} setIsBannerVisible={setIsBannerVisible} />
+        <nav
+          style={
+            isBannerVisible
+              ? {
+                  marginTop: '48px'
+                }
+              : {}
+          }
+        >
           <div className="left">
             <MeunIcon width={'24px'} height={'24px'} onClick={() => openSideBar()} />
             <LogoIcon width={'42px'} height={'42px'} />
@@ -149,13 +160,22 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
         src={require('@site/static/img/bg-header.png').default}
         alt="community"
       />
-      <nav>
+      <NavBanner isBannerVisible={isBannerVisible} setIsBannerVisible={setIsBannerVisible} />
+      <nav
+        style={
+          isBannerVisible
+            ? {
+                marginTop: '48px'
+              }
+            : {}
+        }
+      >
         <div className="left">
           <div
             className="sealos_home_header_title"
             onClick={() =>
               window.location.replace(
-                `${location.origin}${currentLocale === 'en' ? '/' : '/zh-Hans/'}`
+                `${location.origin}${currentLocale === defaultLocale ? '/' : `/${currentLocale}/`}`
               )
             }
           >
@@ -180,12 +200,10 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
             <div
               className="i18nIcon"
               onClick={() =>
-                window.location.replace(
-                  `${location.origin}${currentLocale === 'en' ? '/zh-Hans/' : '/'}`
-                )
+                window.location.replace(`${location.origin}${i18nMap[currentLocale].link}`)
               }
             >
-              {i18nMap[currentLocale]?.label}
+              {i18nMap[currentLocale].label}
             </div>
           )}
           <a className="start-now-button" href={`${cloudUrl}?bd_vid=${bd_vid}`} target="_blank">

diff --git a/docs/website/src/pages/index.tsx b/docs/website/src/pages/index.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { PC_MIN_WIDTH } from '../constants/platform';
 import useWindow from '../hooks/useWindow';
-import Banner from './components/Banner';
 import Capability from './components/Capability';
 import Community from './components/Community';
 import HomeFooter from './components/Footer';
@@ -45,7 +44,6 @@ const Home = () => {
 
   const HomeRender = (
     <div id="sealos-layout-wrap-home-page">
-      <Banner />
       <Helmet>
         <script async src="https://www.googletagmanager.com/gtag/js?id=AW-786053845" />
         <script async>

diff --git a/docs/website/src/pages/self-hosting/header/index.scss b/docs/website/src/pages/self-hosting/header/index.scss
@@ -17,7 +17,6 @@
     align-items: center;
     justify-content: space-between;
     padding: 30px 0;
-    margin-top: 48px;
 
     .sealos-title {
       line-height: 140%;
@@ -88,6 +87,8 @@
         margin-left: 16px;
         font-weight: 500;
         color: #fff;
+        cursor: pointer;
+
         a {
           font-size: 16px;
         }