[Docs] Update homepage (#14534)

* docs: update homepage

* docs: update

* docs(element-plus): update font

* docs(theme-chalk): form font inherit

docs/.vitepress/config.mts

@@ -43,7 +43,7 @@ languages.forEach((lang) => {
 
 export const config: UserConfig = {
   title: 'Element Plus',
-  description: 'a Vue 3 based component library for designers and developers',
+  description: 'A Vue 3 based component library for designers and developers',
   lastUpdated: true,
   head,
   themeConfig: {

docs/.vitepress/crowdin/en-US/pages/home.json

@@ -22,7 +22,7 @@
   "21": "Please contact us via",
   "title_release": "Element Plus stable release is coming",
   "title": "Element Plus",
-  "title_sub": "a Vue 3 based component library for designers and developers",
+  "title_sub": "A Vue 3 based component library for designers and developers",
   "china_mirror": "China Mirror 🇨🇳",
   "discord": "Discord"
 }

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

@@ -115,9 +115,9 @@ useEventListener(window, 'scroll', handleScroll)
 <template>
   <div ref="target" class="home-page">
     <div class="banner" text="center">
-      <div class="banner-desc" m="t-4">
+      <div class="banner-desc">
         <h1>{{ homeLang['title'] }}</h1>
-        <p m="t-2">{{ homeLang['title_sub'] }}</p>
+        <p>{{ homeLang['title_sub'] }}</p>
       </div>
     </div>
     <div ref="jumbotronRef" class="jumbotron">
@@ -150,6 +150,14 @@ useEventListener(window, 'scroll', handleScroll)
 <style lang="scss">
 @use '../../styles/mixins' as *;
 
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('/fonts/Inter-ExtraBold.woff2') format('woff2');
+}
+
 .home-page {
   .mobile-banner {
     display: none;
@@ -170,14 +178,16 @@ useEventListener(window, 'scroll', handleScroll)
   }
   .banner-desc {
     h1 {
-      font-size: 34px;
+      font-size: 48px;
+      font-weight: 800;
       margin: 0;
-      line-height: 48px;
       color: var(--text-color);
+      font-family: 'Inter', sans-serif;
     }
 
     p {
-      font-size: 18px;
+      font-size: 16px;
+      margin-top: 20px;
       color: var(--text-color-light);
     }
   }
@@ -238,6 +248,7 @@ useEventListener(window, 'scroll', handleScroll)
     }
 
     .mobile-banner {
+      margin-top: 10px;
       display: inline-block;
     }
   }
@@ -257,9 +268,6 @@ useEventListener(window, 'scroll', handleScroll)
   }
 
   @media (max-width: 768px) {
-    .banner-desc {
-      padding-top: 0px;
-    }
     .cards {
       li {
         width: 80%;
@@ -276,16 +284,11 @@ useEventListener(window, 'scroll', handleScroll)
     }
     .banner-desc {
       h1 {
-        font-size: 22px;
-      }
-      #line2 {
-        display: none;
-      }
-      h2 {
-        font-size: 32px;
+        font-size: 36px;
       }
       p {
-        width: auto;
+        margin-top: 10px;
+        font-size: 14px;
       }
     }
     .banner-dot h1 span {
@@ -310,7 +313,7 @@ useEventListener(window, 'scroll', handleScroll)
       }
       .cd-str {
         font-size: 12px;
-        margin-top: 0px;
+        margin-top: 0;
       }
     }
     .sponsors-list {

docs/en-US/component/typography.md

@@ -34,6 +34,6 @@ typography/line-height
 ## Font-family
 
 ```css
-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+font-family: 'Inter', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
   'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 ```

docs/examples/watermark/custom.vue

@@ -27,7 +27,7 @@ const config = reactive({
     >
       <div class="demo">
         <h1>Element Plus</h1>
-        <h2>a Vue 3 based component library for designers and developers</h2>
+        <h2>A Vue 3 based component library for designers and developers</h2>
         <img src="/images/hamburger.png" alt="示例图片" />
       </div>
     </el-watermark>

packages/theme-chalk/src/reset.scss

@@ -2,8 +2,8 @@
 @use 'mixins/mixins' as *;
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-family: 'Inter', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   font-weight: 400;
   font-size: getCssVar('font-size', 'base');
   color: getCssVar('text-color', 'primary');
@@ -12,6 +12,10 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+input, textarea, button {
+  font-family: inherit;
+}
+
 a {
   color: getCssVar('color', 'primary');
   text-decoration: none;