From 2cda7bde099a20251124cda7b2e6567e17ba347c Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 18 Nov 2025 00:45:12 +0800
Subject: [PATCH] docs: add Sponsor

---
 site/public/mentorbook_banner_zh.svg  |  61 +++----
 site/src/components/rice/top_rice.vue | 223 ++++++++++++++++++++++++--
 site/src/layouts/index.vue            |  19 +--
 3 files changed, 239 insertions(+), 64 deletions(-)

diff --git a/site/public/mentorbook_banner_zh.svg b/site/public/mentorbook_banner_zh.svg
index 8ebd4692e..747d6652e 100644
--- a/site/public/mentorbook_banner_zh.svg
+++ b/site/public/mentorbook_banner_zh.svg
@@ -1,32 +1,33 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="280" viewBox="0 0 1200 280">
-    <defs>
-      <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stop-color="#0B1021" />
-        <stop offset="100%" stop-color="#182A4A" />
-      </linearGradient>
-      <pattern id="dots" width="28" height="28" patternUnits="userSpaceOnUse">
-        <circle cx="2" cy="2" r="2" fill="#7FB3FF" opacity="0.12"/>
-      </pattern>
-    </defs>
-    
-    <!-- background -->
-    <rect width="1200" height="280" fill="url(#g)"/>
-    <rect width="1200" height="280" fill="url(#dots)"/>
-    
-    <!-- decorative braces -->
-    <text x="80" y="140.0" text-anchor="start" font-size="140" font-family="monospace" fill="#5DF2A3" opacity="0.08">{</text>
-    <text x="1120" y="140.0" text-anchor="end" font-size="140" font-family="monospace" fill="#5DF2A3" opacity="0.08">}</text>
-    
-    <!-- brand name -->
-    <text x="600.0" y="120.0" text-anchor="middle"
-          font-family="Inter, system-ui" font-weight="800" font-size="72" fill="#5DF2A3">Mentorbook.AI</text>
-          
-    <!-- main slogan -->
-    <text x="600.0" y="175.0" text-anchor="middle"
-          font-family="Inter, system-ui" font-weight="700" font-size="42" fill="#EAF2FF">你的 AI 导师，你的学习之旅</text>
-    
-    <!-- value props -->
-    <text x="600.0" y="225.0" text-anchor="middle"
-          font-family="Inter, system-ui" font-weight="500" font-size="24" fill="#7FB3FF">✨ 个性化课程 · 即时反馈 · 100+ 学科领域</text>
-    </svg>
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0B1021" />
+      <stop offset="100%" stop-color="#182A4A" />
+    </linearGradient>
+    <pattern id="dots" width="28" height="28" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="2" fill="#7FB3FF" opacity="0.12" />
+    </pattern>
+  </defs>
 
+  <!-- background -->
+  <rect width="1200" height="280" fill="url(#g)" />
+  <rect width="1200" height="280" fill="url(#dots)" />
+
+  <!-- decorative braces -->
+  <text x="80" y="140.0" text-anchor="start" font-size="140" font-family="monospace" fill="#5DF2A3"
+    opacity="0.08">{</text>
+  <text x="1120" y="140.0" text-anchor="end" font-size="140" font-family="monospace" fill="#5DF2A3"
+    opacity="0.08">}</text>
+
+  <!-- brand name -->
+  <text x="600.0" y="120.0" text-anchor="middle" font-family="Inter, system-ui" font-weight="800" font-size="72"
+    fill="#5DF2A3">Mentorbook.AI</text>
+
+  <!-- main slogan -->
+  <text x="600.0" y="175.0" text-anchor="middle" font-family="Inter, system-ui" font-weight="700" font-size="42"
+    fill="#EAF2FF">你的 AI 导师，你的学习助手</text>
+
+  <!-- value props -->
+  <text x="600.0" y="225.0" text-anchor="middle" font-family="Inter, system-ui" font-weight="500" font-size="24"
+    fill="#7FB3FF">✨ 个性化课程 · 即时反馈 · 100+ 学科领域</text>
+</svg>
\ No newline at end of file
diff --git a/site/src/components/rice/top_rice.vue b/site/src/components/rice/top_rice.vue
index e62722e24..6629fc979 100644
--- a/site/src/components/rice/top_rice.vue
+++ b/site/src/components/rice/top_rice.vue
@@ -1,17 +1,26 @@
 <template>
-  <div v-if="show">
-    <template v-if="ads.length">
-      <a-carousel autoplay>
-        <template v-for="ad in ads" :key="ad.href">
-          <a :href="ad.href" target="_blank">
-            <img style="width: 100%; max-width: 1200px" :alt="ad.alt || ''" :src="ad.img" />
-          </a>
-        </template>
-      </a-carousel>
-    </template>
+  <div class="top-rice">
+    <!-- Mentorbook banner -->
+    <div v-if="showMentorbook" class="mentorbook-banner">
+      <a href="https://mentorbook.ai/" target="_blank" class="banner-content">
+        <div class="brand-name">Mentorbook.AI</div>
+        <div class="main-slogan">
+          {{ isCN ? '你的 AI 导师，你的学习助手' : 'Your AI Mentor, Your Learning Journey' }}
+        </div>
+        <div class="value-props">
+          {{
+            isCN
+              ? '✨ 个性化课程 · 即时反馈 · 100+ 学科领域'
+              : '✨ Personalized Courses · Instant Feedback · 100+ Subjects'
+          }}
+        </div>
+      </a>
+      <a href="https://mentorbook.ai/" target="_blank" class="start-button">
+        {{ isCN ? '免费开始' : 'Get Started Free' }}
+      </a>
+    </div>
   </div>
 </template>
-
 <script>
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -28,23 +37,205 @@ export default {
   data() {
     return {
       show: true,
-      showGoogleAd: location.host.indexOf('antdv.com') > -1,
+      showMentorbook: true,
       cnAds: [
         {
           img: `https://yidengfe.com/launches/01/yd.png?v=${Date.now()}`,
           href: 'https://yidengfe.com/launches/01/yd.html',
-          visible: isEffective('2020-09-11 17:00:00', '2021-03-11 17:00:00'),
+          visible: true,
+        },
+      ].filter(ad => ad.visible),
+      enAds: [
+        {
+          img: `https://yidengfe.com/launches/01/yd.png?v=${Date.now()}`,
+          href: 'https://yidengfe.com/launches/01/yd.html',
+          visible: true,
         },
       ].filter(ad => ad.visible),
-      enAds: [].filter(ad => ad.visible),
     };
   },
   computed: {
-    ads() {
+    otherAds() {
       return this.isCN ? this.cnAds : this.enAds;
     },
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.top-rice {
+  width: 100%;
+  margin-bottom: 16px;
+
+  .mentorbook-banner {
+    display: flex;
+    width: 100%;
+    background: linear-gradient(135deg, #0b1021 0%, #182a4a 100%);
+    position: relative;
+    overflow: hidden;
+    padding: 0 16px;
+    height: 48px;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+
+    // Dots pattern background
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: radial-gradient(circle, rgba(127, 179, 255, 0.12) 2px, transparent 2px);
+      background-size: 28px 28px;
+      background-position: 0 0;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    // Left brace
+    &::after {
+      content: '{';
+      position: absolute;
+      left: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 32px;
+      font-family: monospace;
+      color: #5df2a3;
+      opacity: 0.08;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .banner-content {
+      position: relative;
+      z-index: 1;
+      flex: 1;
+      height: 48px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 12px;
+      text-decoration: none;
+      transition: opacity 0.3s;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+
+    .start-button {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 32px;
+      padding: 0 16px;
+      background: #5df2a3;
+      color: #0b1021;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      font-weight: 600;
+      font-size: 14px;
+      text-decoration: none;
+      border-radius: 6px;
+      white-space: nowrap;
+      transition: all 0.3s;
+      margin-left: 16px;
+
+      &:hover {
+        background: #4dd893;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(93, 242, 163, 0.3);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      @media (max-width: 768px) {
+        font-size: 12px;
+        padding: 0 12px;
+        height: 28px;
+      }
+
+      @media (max-width: 480px) {
+        font-size: 11px;
+        padding: 0 10px;
+        height: 26px;
+        margin-left: 8px;
+      }
+    }
+
+    .brand-name {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      font-weight: 800;
+      font-size: 20px;
+      color: #5df2a3;
+      line-height: 48px;
+      white-space: nowrap;
+
+      @media (max-width: 768px) {
+        font-size: 18px;
+      }
+
+      @media (max-width: 480px) {
+        font-size: 16px;
+      }
+    }
+
+    .main-slogan {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      font-weight: 600;
+      font-size: 16px;
+      color: #eaf2ff;
+      line-height: 48px;
+      white-space: nowrap;
+
+      @media (max-width: 768px) {
+        font-size: 14px;
+      }
+
+      @media (max-width: 480px) {
+        display: none;
+      }
+    }
+
+    .value-props {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      font-weight: 500;
+      font-size: 14px;
+      color: #7fb3ff;
+      line-height: 48px;
+      white-space: nowrap;
+
+      @media (max-width: 1024px) {
+        display: none;
+      }
+    }
+  }
+
+  .ad-link {
+    display: block;
+    width: 100%;
+    text-decoration: none;
+    transition: opacity 0.3s;
+    margin-top: 16px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .ad-image {
+    width: 100%;
+    max-width: 1200px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/site/src/layouts/index.vue b/site/src/layouts/index.vue
index e4d2877e9..1cb963bac 100644
--- a/site/src/layouts/index.vue
+++ b/site/src/layouts/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <TopAd :is-c-n="isZhCN" />
   <Header />
   <div v-if="headers.length" class="toc-affix" :style="y > 102 ? 'position:fixed; top: 16px;' : ''">
     <a-anchor style="width: 160px" :items="headers">
@@ -43,8 +44,6 @@
       </template>
       <a-col :xxxl="20" :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
         <section :class="mainContainerClass">
-          <WWAdsVue v-if="isZhCN" />
-          <TopAd v-else />
           <Demo v-if="isDemo" :page-data="pageData" :is-zh-c-n="isZhCN">
             <component :is="matchCom" />
           </Demo>
@@ -85,22 +84,6 @@
             </template>
           </a-float-button>
         </a-float-button-group>
-        <!-- <div class="fixed-widgets" :style="isZhCN ? { bottom: '175px' } : {}">
-          <a-dropdown placement="top">
-            <template #overlay>
-              <a-menu
-                :selected-keys="[themeMode.theme.value]"
-                @click="({ key }) => themeMode.changeTheme(key)"
-              >
-                <a-menu-item key="default">{{ $t('app.theme.switch.default') }}</a-menu-item>
-                <a-menu-item key="dark">{{ $t('app.theme.switch.dark') }}</a-menu-item>
-              </a-menu>
-            </template>
-            <a-avatar class="fixed-widgets-avatar" :size="44">
-              <template #icon><ThemeIcon /></template>
-            </a-avatar>
-          </a-dropdown>
-        </div> -->
         <PrevAndNext :menus="menus" :current-menu-index="currentMenuIndex" :is-zh-c-n="isZhCN" />
         <Footer />
       </a-col>