chore(docs): update sponsors on main page (#6964)

* chore(docs): update sponsors on main page

- Update sponsors layout on main page
- Add a footer section on hero contents

* Extract common code

* Fix main page parallax image issue

* Remove unused variables

* Remove unused variables

docs/.vitepress/config/sponsors.ts

@@ -1,4 +1,4 @@
-export const sponsors = [
+export const platinumSponsors = [
   {
     name: 'JNPF',
     img: '/images/jnpf_index.png',
@@ -7,7 +7,6 @@ export const sponsors = [
     slogan_cn: 'JNPF 低代码开发平台，让开发变得简单！',
     className: 'jnpf',
     banner_img: '/images/jnpfsoft.jpg',
-    type: 'banner',
   },
   {
     name: 'VForm',
@@ -16,7 +15,6 @@ export const sponsors = [
     slogan: 'Vue 3 Visual/Low-Code Forms',
     slogan_cn: 'Vue 3 可视化/低代码表单',
     banner_img: '/images/vform-banner.jpg',
-    type: 'banner',
   },
   {
     name: 'JSDesign',
@@ -26,8 +24,10 @@ export const sponsors = [
     slogan: 'Professional online UI design tool',
     slogan_cn: '专业在线UI设计工具',
     banner_img: '/images/js-design-banner.jpg',
-    type: 'banner',
   },
+]
+
+export const goldSponsors = [
   {
     name: 'bit',
     img: '/images/bit.svg',

docs/.vitepress/crowdin/en-US/component/sponsor.json

@@ -1,4 +1,6 @@
 {
   "title": "Sponsors",
-  "sponsoredBy": "Sponsored by"
+  "sponsoredBy": "Sponsored by",
+  "platinumSponsor": "Platinum Sponsors",
+  "goldSponsor": "Gold Sponsors"
 }

docs/.vitepress/vitepress/components/globals/home-footer.vue

@@ -77,10 +77,11 @@ const homeLang = computed(() => homeLocale[lang.value])
 <style lang="scss">
 .footer {
   background-color: var(--bg-color);
-  width: 100%;
-  padding: 40px 80px;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 19px;
   box-sizing: border-box;
-  height: 340px;
+  // height: 340px;
 
   .container {
     box-sizing: border-box;

docs/.vitepress/vitepress/components/globals/parallax-home.vue

@@ -153,7 +153,11 @@ useEventListener(window, 'scroll', handleScroll)
         </div>
       </div>
     </div>
-
+    <img
+      src="/images/theme-index-blue.png"
+      alt="banner"
+      class="mobile-banner"
+    />
     <HomeSponsors />
     <HomeCards />
   </div>
@@ -161,7 +165,13 @@ useEventListener(window, 'scroll', handleScroll)
 </template>
 
 <style lang="scss">
+@use '../../styles/mixins' as *;
+
 .home-page {
+  .mobile-banner {
+    display: none;
+  }
+
   .banner-dot h1 span {
     position: relative;
     &::after {
@@ -239,6 +249,16 @@ useEventListener(window, 'scroll', handleScroll)
     }
   }
 
+  @media screen and (max-width: 959px) {
+    .jumbotron {
+      display: none !important;
+    }
+
+    .mobile-banner {
+      display: inline-block;
+    }
+  }
+
   @media (max-width: 768px) {
     .jumbotron {
       width: 50%;

docs/.vitepress/vitepress/components/home/home-cards.vue

@@ -44,7 +44,7 @@ const homeLang = computed(() => homeLocale[lang.value])
 .home-page {
   .cards {
     margin: 0 auto 110px;
-    width: 1140px;
+    max-width: 900px;
 
     .container {
       padding: 0;

docs/.vitepress/vitepress/components/home/home-sponsors.vue

@@ -1,53 +1,15 @@
 <script lang="ts" setup>
-import { isDark } from '../../composables/dark'
-import { useLang } from '../../composables/lang'
-import { sponsors } from '../../../config/sponsors'
+import { goldSponsors, platinumSponsors } from '../../../config/sponsors'
 
 import SponsorsButton from '../sponsors/sponsors-button.vue'
-
-const lang = useLang()
-
-const langZhCN = 'zh-CN'
-
-const getSponsorName = (sponsor) => {
-  if (lang.value === langZhCN) {
-    return sponsor.name_cn || sponsor.name
-  }
-  return sponsor.name
-}
-const getSponsorSlogan = (sponsor) => {
-  if (lang.value === langZhCN) {
-    return sponsor.slogan_cn || sponsor.slogan
-  }
-  return sponsor.slogan
-}
+import SponsorList from './sponsor-list.vue'
 </script>
 
 <template>
-  <div class="sponsors-container" m="t-9 auto">
-    <div class="sponsors-list">
-      <a
-        v-for="(sponsor, i) in sponsors"
-        :key="i"
-        :class="['sponsor', sponsor.className]"
-        :href="sponsor.url"
-        target="_blank"
-      >
-        <img
-          :class="sponsor.isDark && isDark ? 'filter invert' : ''"
-          width="45"
-          :src="sponsor.img"
-          :alt="sponsor.name"
-        />
-        <div>
-          <p>
-            Sponsored by
-            <span class="name">{{ getSponsorName(sponsor) }}</span>
-          </p>
-          <p>{{ getSponsorSlogan(sponsor) }}</p>
-        </div>
-      </a>
-    </div>
+  <div class="sponsors-container" m="auto">
+    <SponsorList :sponsors="platinumSponsors" sponsor-type="platinumSponsor" />
+    <SponsorList :sponsors="goldSponsors" sponsor-type="goldSponsor" />
+
     <sponsors-button round />
   </div>
 </template>
@@ -55,33 +17,45 @@ const getSponsorSlogan = (sponsor) => {
 <style lang="scss">
 .home-page {
   .sponsors-container {
-    width: 92%;
+    max-width: 900px;
+    margin-top: 52px;
     .join {
       text-align: center;
-      margin: 0 0 50px 0;
+      margin: 0 0 52px 0;
     }
   }
 
-  .sponsors-list {
-    display: flex;
-    justify-content: center;
+  .sponsor-list {
+    --min-width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));
+
+    &.platinum {
+      --min-width: 220px;
+    }
+    &.gold {
+      --min-width: 140px;
+
+      @media (max-width: 720px) {
+        --min-width: 160px;
+      }
+    }
   }
 
   .sponsor {
     margin: 0 20px 10px;
-    display: inline-flex;
-    width: 300px;
-    height: 100px;
-    justify-content: center;
+    height: calc(var(--min-width) / 2);
     align-items: center;
+    // for dark mode
+    // background-color: var(--bg-color-soft);
 
     .name {
       font-weight: bold;
       color: var(--text-color);
+      font-size: 14px;
     }
 
     img {
-      margin-right: 20px;
+      margin-right: 16px;
     }
 
     div {

docs/.vitepress/vitepress/components/home/sponsor-list.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { isDark } from '../../composables/dark'
+import { useLang } from '../../composables/lang'
+import sponsorLocale from '../../../i18n/component/sponsor.json'
+
+defineProps({
+  sponsors: Array,
+  sponsorType: String,
+})
+
+const lang = useLang()
+const sponsorLang = computed(() => sponsorLocale[lang.value])
+
+const langZhCN = 'zh-CN'
+
+const getSponsorName = (sponsor) => {
+  if (lang.value === langZhCN) {
+    return sponsor.name_cn || sponsor.name
+  }
+  return sponsor.name
+}
+const getSponsorSlogan = (sponsor) => {
+  if (lang.value === langZhCN) {
+    return sponsor.slogan_cn || sponsor.slogan
+  }
+  return sponsor.slogan
+}
+</script>
+
+<template>
+  <h2 class="text-center mb-4 text-xl">{{ sponsorLang[sponsorType] }}</h2>
+  <div class="grid gap-1 sponsor-list platinum">
+    <a
+      v-for="(sponsor, i) in sponsors"
+      :key="i"
+      :class="['sponsor flex px-4 rounded-md', sponsor.className]"
+      :href="sponsor.url"
+      target="_blank"
+    >
+      <img
+        :class="sponsor.isDark && isDark ? 'filter invert' : ''"
+        width="45"
+        :src="sponsor.img"
+        :alt="sponsor.name"
+      />
+      <div>
+        <p>
+          <span class="name">{{ getSponsorName(sponsor) }}</span>
+        </p>
+        <p>{{ getSponsorSlogan(sponsor) }}</p>
+      </div>
+    </a>
+  </div>
+</template>

docs/.vitepress/vitepress/components/vp-hero-content.vue

@@ -2,4 +2,25 @@
   <div class="hero-content">
     <Content />
   </div>
+  <el-divider style="margin-bottom: 0" />
+  <div class="text-center py-6 text-xs">
+    <p class="mb-1">
+      Released under the
+      <a
+        href="https://opensource.org/licenses/MIT"
+        target="_blank"
+        rel="noopener noreferer"
+        >MIT License</a
+      >.
+    </p>
+    <p class="mt-1">
+      Made with ❤️ by
+      <a
+        href="https://github.com/element-plus"
+        target="_blank"
+        rel="noopener noreferer"
+        >Element Plus</a
+      >
+    </p>
+  </div>
 </template>

docs/.vitepress/vitepress/components/vp-navbar.vue

@@ -17,10 +17,12 @@ defineProps<{
 defineEmits(['toggle'])
 const themeEnabled = useFeatureFlag('theme')
 
-const { theme } = useData()
+const { theme, page } = useData()
 
 const currentLink = computed(() => {
-  if (!inBrowser) return '/'
+  if (!inBrowser) {
+    return `/${page.value?.frontmatter?.lang || ''}`
+  }
   const existLangIndex = theme.value.langs.findIndex((lang) =>
     window?.location?.pathname.startsWith(`/${lang}`)
   )

docs/.vitepress/vitepress/components/vp-sponsor-large.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { sponsors } from '../../config/sponsors'
-const sponsorList = sponsors.filter((_) => _.type === 'banner')
+import { platinumSponsors } from '../../config/sponsors'
 </script>
 
 <template>
   <div class="container">
-    <div v-for="item in sponsorList" :key="item.name" class="sponsor-item">
+    <div v-for="item in platinumSponsors" :key="item.name" class="sponsor-item">
       <a
         :href="item.url"
         :title="`${item.name_cn || item.name} - ${

docs/.vitepress/vitepress/components/vp-sponsor-small.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { isDark } from '../composables/dark'
-import { sponsors } from '../../config/sponsors'
-const sponsorList = sponsors.filter((_) => !_.type)
+import { goldSponsors } from '../../config/sponsors'
 </script>
 
 <template>
   <div class="container">
     <div
-      v-for="item in sponsorList"
+      v-for="item in goldSponsors"
       :key="item.name"
       :class="['sponsor-item', item.isDark && isDark ? 'filter invert' : '']"
     >