feat:docs monitoring data (#3810)

Signed-off-by: jingyang <3161362058@qq.com>

docs/website/src/pages/components/Footer/index.tsx

@@ -47,7 +47,7 @@ const Footer = ({ isPc }: { isPc: boolean }) => {
         <img
           draggable="false"
           className="footer-img"
-          src={require('@site/static/illustrations/footer3.png').default}
+          src={require('@site/static/illustrations/footer-mobile.png').default}
           alt="gooter"
         />
         <div className="footer-context">

docs/website/src/pages/components/Header/index.tsx

@@ -8,6 +8,7 @@ import VideoPlayer from '../VideoPlayer'
 import './index.scss'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useIsBrowser from '@docusaurus/useIsBrowser'
+import HeaderSvg from '@site/static/illustrations/bg-header.svg';
 
 const navbar = [
   {
@@ -77,12 +78,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
   if (!isPc) {
     return (
       <div id="Start" className="home-header">
-        <img
-          draggable="false"
-          className="header-img"
-          src={require('@site/static/illustrations/bg-header.png').default}
-          alt="community"
-        />
+        <HeaderSvg className="header-img" />
         <nav>
           <div className="left">
             <MeunIcon
@@ -148,13 +144,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
 
   return (
     <div id="Start" className="home-header">
-      <img
-        draggable="false"
-        unselectable="on"
-        className="header-img"
-        src={require('@site/static/illustrations/bg-header.png').default}
-        alt="community"
-      />
+      <HeaderSvg className="header-img" />
       <nav>
         <div className="left">
           <LogoIcon width={'42px'} height={'42px'} />

docs/website/src/pages/components/VideoPlayer/index.scss

@@ -39,6 +39,12 @@
 
 @media screen and (max-width: 996px) {
   .video-box {
-    height: 200px;
+    height: 400px;
   }
 }
+
+@media screen and (max-width: 380px) {
+  .video-box {
+    height: 200px;
+  }
+}

docs/website/src/pages/index.tsx

@@ -18,7 +18,7 @@ const Home = () => {
   const isPc = useMemo(() => screenWidth > PC_MIN_WIDTH, [screenWidth])
 
   const HomeRender = (
-      <div id="sealos-layout-wrap-home-page">
+    <div id="sealos-layout-wrap-home-page">
       <Helmet>
         <script async src="https://www.googletagmanager.com/gtag/js?id=AW-786053845" />
         <script async >
@@ -30,6 +30,7 @@ const Home = () => {
             gtag('event', 'conversion', {'send_to': 'AW-786053845/LpbTCJ-8-coYENX16PYC'});
           `}
         </script>
+        <script async src="https://umami.cloud.sealos.io/oishii" data-website-id="a1c29ace-b288-431a-a2eb-8617d1d5b5ed"></script>
       </Helmet>
       <Layout>
         <div className="home">