@varlet/cli 3.16.0-alpha.1778310023051 → 3.16.0-alpha.1778498431663

package/lib/node/config/varlet.config.d.ts

@@ -68,6 +68,7 @@ export interface VarletConfigPcIndexPage {
     features?: {
         name: Record<string, string>;
         description: Record<string, string>;
+        link?: Record<string, string>;
     }[];
     teamMembers?: {
         label: Record<string, string>;

package/lib/node/config/varlet.default.config.js

@@ -43,6 +43,10 @@ export default defineConfig({
                         'zh-CN': '提供 60+ 个高质量通用组件',
                         'en-US': 'Provide 60+ high quality general purpose components',
                     },
+                    link: {
+                        'zh-CN': '/zh-CN/button',
+                        'en-US': '/en-US/button',
+                    },
                 },
                 {
                     name: {
@@ -53,15 +57,23 @@ export default defineConfig({
                         'zh-CN': '每一个组件都可单独引入，并有着良好的 tree-shaking 优化',
                         'en-US': 'Each component can be imported separately and has good tree-shaking optimization',
                     },
+                    link: {
+                        'zh-CN': '/zh-CN/importOnDemand',
+                        'en-US': '/en-US/importOnDemand',
+                    },
                 },
                 {
                     name: {
-                        'zh-CN': '主题定制',
-                        'en-US': 'Theme customization',
+                        'zh-CN': '多设计系统支持',
+                        'en-US': 'Multi-design system support',
                     },
                     description: {
-                        'zh-CN': '内置亮色和暗色两种主题，支持组件的样式自定义',
-                        'en-US': 'Built-in light and dark themes, support style customization of components',
+                        'zh-CN': '同时支持 MD2 与 MD3 两种设计系统，并覆盖明暗两套主题模式',
+                        'en-US': 'Supports both MD2 and MD3 design systems, each with light and dark theme modes',
+                    },
+                    link: {
+                        'zh-CN': '/zh-CN/themes',
+                        'en-US': '/en-US/themes',
                     },
                 },
                 {
@@ -73,11 +85,15 @@ export default defineConfig({
                         'zh-CN': '内置国际化 API，内置中文和英文的语言包',
                         'en-US': 'Built-in i18n API, which supports both Chinese and English languages by default',
                     },
+                    link: {
+                        'zh-CN': '/zh-CN/locale',
+                        'en-US': '/en-US/locale',
+                    },
                 },
                 {
                     name: {
-                        'zh-CN': '支持 Typescript',
-                        'en-US': 'Support typescript',
+                        'zh-CN': 'Typescript 友好',
+                        'en-US': 'Typescript-friendly',
                     },
                     description: {
                         'zh-CN': '使用 Typescript 构建，提供良好的组件类型系统',
@@ -93,15 +109,23 @@ export default defineConfig({
                         'zh-CN': '对服务端渲染支持良好，并对 Nuxt 进行了适配',
                         'en-US': 'Good support for server-side rendering and adaptation to Nuxt',
                     },
+                    link: {
+                        'zh-CN': '/zh-CN/serverSideRendering',
+                        'en-US': '/en-US/serverSideRendering',
+                    },
                 },
                 {
                     name: {
-                        'zh-CN': '国人开发',
-                        'en-US': 'Developed by Chinese',
+                        'zh-CN': '多端支持',
+                        'en-US': 'Cross-platform support',
                     },
                     description: {
-                        'zh-CN': '由国人开发，完善的中英文文档和后勤保障',
-                        'en-US': 'Complete Chinese and English documentation and logistics support',
+                        'zh-CN': '同时支持移动端与桌面端场景，组件能力覆盖多端界面开发',
+                        'en-US': 'Supports both mobile and desktop scenarios, with component coverage for multi-platform UI development',
+                    },
+                    link: {
+                        'zh-CN': '/zh-CN/browserAdaptation',
+                        'en-US': '/en-US/browserAdaptation',
                     },
                 },
                 {
@@ -113,15 +137,9 @@ export default defineConfig({
                         'zh-CN': '支持在 webstorm，vscode 中的组件语法高亮, 并提供 vscode 插件为开发提升效率',
                         'en-US': 'Supports to highlight the component syntax for webstorm and vscode, and provides a separate helper plugin for vscode',
                     },
-                },
-                {
-                    name: {
-                        'zh-CN': '组件库快速成型工具',
-                        'en-US': 'Component library toolchain',
-                    },
-                    description: {
-                        'zh-CN': '开源了搭建本组件库的所有工具链，提供快速开发组件库的能力',
-                        'en-US': 'Open-sourced the toolchain for building this component library, providing the ability to rapidly develop the component library',
+                    link: {
+                        'zh-CN': '/zh-CN/extension',
+                        'en-US': '/en-US/extension',
                     },
                 },
             ],
@@ -545,7 +563,7 @@ export default defineConfig({
         'color-body': '#fff',
         'color-index-page-background': '#fff',
         'color-index-page-get-started-button': '#3a7afe',
-        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, rgba(255, 168, 214, 0.9) 0%, rgba(220, 170, 255, 0.92) 45%, rgba(132, 205, 255, 0.98) 100%)',
         'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
         'color-index-page-divider-color': '#ddd',
         'card-border-radius': '12px',
@@ -590,8 +608,9 @@ export default defineConfig({
     darkTheme: {
         'color-body': '#121212',
         'color-index-page-background': '#1e1e1e',
+        'color-index-page-get-started-button': '#4a7afe',
         'color-index-page-feature-background': '#303030',
-        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, rgba(188, 122, 255, 0.44) 0%, rgba(151, 119, 255, 0.47) 46%, rgba(84, 132, 255, 0.58) 100%)',
         'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
         'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
         'card-border-radius': '12px',
@@ -635,9 +654,10 @@ export default defineConfig({
     },
     md3LightTheme: {
         'color-body': '#fff',
-        'color-index-page-background': '#fff',
+        'color-index-page-background': '#FEF7FF',
+        'color-index-page-get-started-button': '#6750A4',
         'color-index-page-feature-background': '#fff',
-        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, rgba(255, 168, 214, 0.9) 0%, rgba(220, 170, 255, 0.92) 45%, rgba(132, 205, 255, 0.98) 100%)',
         'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
         'color-index-page-divider-color': '#ddd',
         'card-border-radius': '12px',
@@ -681,9 +701,10 @@ export default defineConfig({
     },
     md3DarkTheme: {
         'color-body': '#050505',
-        'color-index-page-background': '#1e1e1e',
-        'color-index-page-feature-background': '#303030',
-        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
+        'color-index-page-background': '#141218',
+        'color-index-page-get-started-button': '#D0BCFF',
+        'color-index-page-feature-background': '#1c1b1d',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, rgba(188, 122, 255, 0.44) 0%, rgba(151, 119, 255, 0.47) 46%, rgba(84, 132, 255, 0.58) 100%)',
         'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
         'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
         'card-border-radius': '12px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.16.0-alpha.1778310023051",
+  "version": "3.16.0-alpha.1778498431663",
   "description": "cli of varlet",
   "keywords": [
     "cli",
@@ -56,8 +56,8 @@
     "typescript": "5.6.3",
     "vite-plus": "0.1.18",
     "vue": "3.5.21",
-    "@varlet/shared": "3.16.0-alpha.1778310023051",
-    "@varlet/vite-plugins": "3.16.0-alpha.1778310023051"
+    "@varlet/shared": "3.16.0-alpha.1778498431663",
+    "@varlet/vite-plugins": "3.16.0-alpha.1778498431663"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -69,9 +69,9 @@
     "@types/node": "^20.19.0",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/icons": "3.16.0-alpha.1778310023051",
-    "@varlet/touch-emulator": "3.16.0-alpha.1778310023051",
-    "@varlet/ui": "3.16.0-alpha.1778310023051"
+    "@varlet/icons": "3.16.0-alpha.1778498431663",
+    "@varlet/touch-emulator": "3.16.0-alpha.1778498431663",
+    "@varlet/ui": "3.16.0-alpha.1778498431663"
   },
   "peerDependencies": {
     "@vitest/coverage-istanbul": "4.1.4",
@@ -82,9 +82,9 @@
     "live-server": "^1.2.1",
     "vue": "3.5.21",
     "vue-router": "4.5.1",
-    "@varlet/icons": "3.16.0-alpha.1778310023051",
-    "@varlet/touch-emulator": "3.16.0-alpha.1778310023051",
-    "@varlet/ui": "3.16.0-alpha.1778310023051"
+    "@varlet/icons": "3.16.0-alpha.1778498431663",
+    "@varlet/touch-emulator": "3.16.0-alpha.1778498431663",
+    "@varlet/ui": "3.16.0-alpha.1778498431663"
   },
   "engines": {
     "node": "^14.18.0 || >=16.0.0"

package/site/pc/pages/index/index.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { ref, watch, type Ref } from 'vue'
+import { computed, ref, watch, type Ref } from 'vue'
 import config from '@config'
 import { getBrowserTheme, getPCLocationInfo, onThemeChange, setTheme, watchTheme, type Theme } from '@varlet/cli/client'
 import { useRoute, useRouter } from 'vue-router'
 import AppAd from '../../components/AppAd.vue'
 import AppHeader from '../../components/AppHeader.vue'
 
+type IndexFeature = {
+  name?: Record<string, string>
+  description?: Record<string, string>
+  link?: Record<string, string>
+}
+
 const route = useRoute()
 const router = useRouter()
 const currentTheme = ref(getBrowserTheme())
@@ -13,6 +19,11 @@ const github = config?.pc?.header?.github
 const title: Ref<string> = ref(config?.title)
 const language: Ref<string> = ref(config?.defaultLanguage)
 const indexPage: Ref<Record<string, any>> = ref(config?.pc?.indexPage)
+const teamTitle = () => indexPage.value?.teamMembers?.label?.[language.value]
+const contributorsTitle = () => indexPage.value?.contributors?.label?.[language.value]
+const sponsorsTitle = () => indexPage.value?.sponsors?.label?.[language.value]
+const indexCardVariant = computed(() => (currentTheme.value === 'md3DarkTheme' ? 'standard' : 'filled'))
+const indexCardSurface = computed(() => (currentTheme.value === 'md3DarkTheme' ? 'low' : undefined))
 
 const getStar = () => {
   router.push(`/${language.value}/home`)
@@ -38,6 +49,23 @@ const setLocale = () => {
   document.title = config?.pc.title[lang] as string
 }
 
+const getFeatureLink = (feature: IndexFeature) => feature.link?.[language.value]
+
+const toFeature = (feature: IndexFeature) => {
+  const link = getFeatureLink(feature)
+
+  if (!link) {
+    return
+  }
+
+  if (/^https?:\/\//.test(link)) {
+    window.open(link)
+    return
+  }
+
+  router.push(link)
+}
+
 const to = (url: string) => {
   window.open(url)
 }
@@ -47,10 +75,14 @@ setTheme(currentTheme.value)
 window.postMessage(getThemeMessage(), '*')
 
 watchTheme((theme, from) => {
-  from === 'mobile' && setCurrentTheme(theme)
+  if (from !== 'default') {
+    setCurrentTheme(theme)
+  }
 })
 
-onThemeChange()
+onThemeChange((theme) => {
+  currentTheme.value = theme
+})
 
 watch(
   () => route.path,
@@ -66,359 +98,535 @@ watch(
   <div class="varlet-doc-index">
     <app-ad :language="language" />
     <app-header :language="language" />
+
     <div class="varlet-doc-index__layout">
-      <div class="varlet-doc-index__main-container">
-        <div class="varlet-doc-index__logo-container">
-          <div class="varlet-doc-index__logo-background-mask"></div>
-          <img class="varlet-doc-index__logo" :src="config.logo" alt="" />
-        </div>
-        <div class="varlet-doc-index__info-container">
-          <div class="varlet-doc-index__title">{{ title }}</div>
-          <div class="varlet-doc-index__description">{{ indexPage.description[language] }}</div>
+      <section class="varlet-doc-index__hero">
+        <div class="varlet-doc-index__hero-content">
+          <h1 class="varlet-doc-index__title">{{ title }}</h1>
+          <p class="varlet-doc-index__description">{{ indexPage.description[language] }}</p>
 
-          <var-space size="large">
-            <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
+          <div class="varlet-doc-index__actions">
+            <var-button class="varlet-doc-index__link-button" type="primary" @click="getStar">
               {{ indexPage.started[language] }}
             </var-button>
-            <var-button class="varlet-doc-index__github-button" style="line-height: 1.2" @click="toGithub">
+            <var-button class="varlet-doc-index__github-button" type="primary" text outline @click="toGithub">
               {{ indexPage.viewOnGithub[language] }}
             </var-button>
-          </var-space>
+          </div>
         </div>
-      </div>
 
-      <div class="varlet-doc-index__features" v-if="indexPage.features">
-        <div class="varlet-doc-index__feature" v-for="feature in indexPage.features">
-          <div class="varlet-doc-index__feature-name">{{ feature.name[language] }}</div>
-          <div class="varlet-doc-index__feature-description">{{ feature.description[language] }}</div>
-        </div>
-      </div>
-
-      <div class="varlet-doc-index__team-members" v-if="indexPage.teamMembers">
-        <div class="varlet-doc-index__team-members-title">{{ indexPage.teamMembers.label[language] }}</div>
-
-        <div class="varlet-doc-index__team-members-container">
-          <div class="varlet-doc-index__team-member" v-for="member in indexPage.teamMembers.members">
-            <img class="varlet-doc-index__team-member-avatar" :src="member.avatar" />
-            <div class="varlet-doc-index__team-member-name">{{ member.name[language] }}</div>
-            <div class="varlet-doc-index__team-member-title">{{ member.title[language] }}</div>
-            <div class="varlet-doc-index__team-member-description">{{ member.description[language] }}</div>
-            <div class="varlet-doc-index__team-member-social">
-              <var-icon
-                class="varlet-doc-index__team-member-social-icon"
-                name="github"
-                :size="24"
-                @click="to(member.github)"
-                v-if="member.github"
-              />
-              <var-icon
-                class="varlet-doc-index__team-member-social-icon"
-                name="twitter"
-                :size="24"
-                @click="to(member.twitter)"
-                v-if="member.twitter"
-              />
+        <div class="varlet-doc-index__hero-side">
+          <div class="varlet-doc-index__hero-logo-stage">
+            <div class="varlet-doc-index__hero-brand-mark">
+              <div class="varlet-doc-index__hero-logo-background-mask"></div>
+              <img class="varlet-doc-index__hero-logo" :src="config.logo" alt="" />
             </div>
           </div>
         </div>
-      </div>
+      </section>
+
+      <section class="varlet-doc-index__section" v-if="indexPage.features?.length">
+        <div class="varlet-doc-index__features">
+          <var-card
+            class="varlet-doc-index__feature"
+            :variant="indexCardVariant"
+            :surface="indexCardSurface"
+            :hoverable="!!getFeatureLink(feature)"
+            :elevation="false"
+            v-for="feature in indexPage.features"
+            @click="toFeature(feature)"
+          >
+            <div class="varlet-doc-index__feature-name">{{ feature.name[language] }}</div>
+            <div class="varlet-doc-index__feature-description">{{ feature.description[language] }}</div>
+          </var-card>
+        </div>
+      </section>
+
+      <section class="varlet-doc-index__section" v-if="indexPage.teamMembers">
+        <div class="varlet-doc-index__section-header">
+          <div class="varlet-doc-index__section-divider">
+            <span class="varlet-doc-index__section-divider-text">{{ teamTitle() }}</span>
+          </div>
+        </div>
 
-      <div class="varlet-doc-index__contributors" v-if="indexPage.contributors">
-        <div class="varlet-doc-index__contributors-title">{{ indexPage.contributors.label[language] }}</div>
+        <div class="varlet-doc-index__team-members">
+          <var-card
+            class="varlet-doc-index__team-member"
+            :variant="indexCardVariant"
+            :surface="indexCardSurface"
+            :elevation="false"
+            v-for="member in indexPage.teamMembers.members"
+          >
+            <div class="varlet-doc-index__team-member-main">
+              <img class="varlet-doc-index__team-member-avatar" :src="member.avatar" />
+
+              <div class="varlet-doc-index__team-member-copy">
+                <div class="varlet-doc-index__team-member-name">{{ member.name[language] }}</div>
+                <div class="varlet-doc-index__team-member-title">{{ member.title[language] }}</div>
+                <div class="varlet-doc-index__team-member-description">{{ member.description[language] }}</div>
+
+                <div class="varlet-doc-index__team-member-social">
+                  <var-button
+                    class="varlet-doc-index__team-member-social-button"
+                    text
+                    round
+                    v-if="member.github"
+                    @click="to(member.github)"
+                  >
+                    <var-icon name="github" :size="22" />
+                  </var-button>
+                  <var-button
+                    class="varlet-doc-index__team-member-social-button"
+                    text
+                    round
+                    v-if="member.twitter"
+                    @click="to(member.twitter)"
+                  >
+                    <var-icon name="twitter" :size="22" />
+                  </var-button>
+                </div>
+              </div>
+            </div>
+          </var-card>
+        </div>
+      </section>
 
-        <a class="varlet-doc-index__contributors-link" :href="indexPage.contributors.link">
-          <img class="varlet-doc-index__contributors-image" :src="indexPage.contributors.image" />
+      <section class="varlet-doc-index__section" v-if="indexPage.contributors">
+        <div class="varlet-doc-index__section-header">
+          <div class="varlet-doc-index__section-divider">
+            <span class="varlet-doc-index__section-divider-text">{{ contributorsTitle() }}</span>
+          </div>
+        </div>
+
+        <a class="varlet-doc-index__image-link" :href="indexPage.contributors.link">
+          <var-card class="varlet-doc-index__image-panel" :variant="indexCardVariant" :surface="indexCardSurface" :elevation="false">
+            <img class="varlet-doc-index__contributors-image" :src="indexPage.contributors.image" />
+          </var-card>
         </a>
-      </div>
+      </section>
 
-      <div class="varlet-doc-index__sponsors" v-if="indexPage.sponsors">
-        <div class="varlet-doc-index__sponsors-title">{{ indexPage.sponsors.label[language] }}</div>
+      <section class="varlet-doc-index__section" v-if="indexPage.sponsors">
+        <div class="varlet-doc-index__section-header">
+          <div class="varlet-doc-index__section-divider">
+            <span class="varlet-doc-index__section-divider-text">{{ sponsorsTitle() }}</span>
+          </div>
+        </div>
 
-        <a class="varlet-doc-index__sponsors-link" :href="indexPage.sponsors.link">
-          <img class="varlet-doc-index__sponsors-image" :src="indexPage.sponsors.image" />
+        <a class="varlet-doc-index__image-link" :href="indexPage.sponsors.link">
+          <var-card class="varlet-doc-index__image-panel" :variant="indexCardVariant" :surface="indexCardSurface" :elevation="false">
+            <img class="varlet-doc-index__sponsors-image" :src="indexPage.sponsors.image" />
+          </var-card>
         </a>
-      </div>
+      </section>
 
-      <div class="varlet-doc-index__footer">
+      <div class="varlet-doc-index__footer-divider" aria-hidden="true"></div>
+
+      <footer class="varlet-doc-index__footer">
         <div class="varlet-doc-index__license">{{ indexPage.license[language] }}</div>
         <div class="varlet-doc-index__copyright">{{ indexPage.copyright[language] }}</div>
-      </div>
+      </footer>
     </div>
   </div>
 </template>
 
 <style lang="less">
-@keyframes logo-wave {
-  0% {
-    transform: translate(8%, 8%);
-  }
+.varlet-doc-index {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+  background: var(--site-config-color-index-page-background);
 
-  20% {
-    transform: translate(-8%, 8%);
+  .varlet-site-header {
+    background: var(--site-config-color-index-page-background);
   }
 
-  40% {
-    transform: translate(-8%, -8%);
+  &__layout {
+    width: 100%;
+    max-width: 1240px;
+    padding: 56px 32px 60px;
+    box-sizing: border-box;
   }
 
-  60% {
-    transform: translate(-2%, 8%);
+  &__hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+    gap: 36px;
+    align-items: center;
   }
 
-  80% {
-    transform: translate(8%, -8%);
+  &__hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-top: 8px;
   }
 
-  100% {
-    transform: translate(8%, 8%);
+  &__title {
+    margin: 0;
+    max-width: 720px;
+    color: var(--site-config-color-index-page-get-started-button);
+    font-size: 76px;
+    line-height: 0.95;
+    font-weight: 780;
+    letter-spacing: -0.03em;
   }
-}
 
-.varlet-doc-index {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 100vh;
-  box-sizing: border-box;
-  background: var(--site-config-color-index-page-background);
-  padding-bottom: 100px;
-  min-width: 1200px;
+  &__description {
+    max-width: 640px;
+    margin: 22px 0 0;
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 18px;
+    line-height: 1.75;
+  }
 
-  &__layout {
+  &__actions {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 170px 0;
-    max-width: 1200px;
-    transition: all 0.2s;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 30px;
   }
 
-  &__main-container {
-    display: flex;
+  &__link-button,
+  &__github-button {
+    min-width: 154px !important;
+    height: 44px !important;
+    padding: 0 22px !important;
+    font-size: 16px !important;
   }
 
-  &__info-container {
-    margin-left: 100px;
+  &__link-button {
+    background-color: var(--site-config-color-index-page-get-started-button) !important;
   }
 
-  &__logo {
-    width: 100%;
-    height: 100%;
-    flex-shrink: 0;
-    z-index: 2;
+  &__github-button {
+    color: var(--site-config-color-index-page-get-started-button) !important;
+    border-color: var(--site-config-color-index-page-get-started-button) !important;
+  }
+
+  &__hero-side {
+    min-width: 0;
+  }
+
+  &__hero-logo-stage {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 456px;
   }
 
-  &__logo-container {
+  &__hero-brand-mark {
     position: relative;
+    z-index: 1;
     display: flex;
+    align-items: center;
     justify-content: center;
-    width: 174px;
-    height: 174px;
-    margin-top: 8px;
+    width: 204px;
+    height: 204px;
   }
 
-  &__logo-background-mask {
+  &__hero-logo-background-mask {
     position: absolute;
-    left: -40px;
-    top: -40px;
-    bottom: -40px;
-    right: -40px;
+    inset: -64px;
     background: var(--site-config-color-index-page-logo-mask-background);
-    transition: background-color 0.2s;
-    filter: blur(45px);
+    filter: blur(56px);
     border-radius: 50%;
-    animation: logo-wave 6s infinite linear;
   }
 
-  &__title {
-    font-size: 60px;
+  &__hero-logo {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: auto;
   }
 
-  &__description {
-    max-width: 700px;
-    width: 90vw;
-    font-size: 20px;
-    line-height: 38px;
-    margin-top: 14px;
-    padding-left: 2px;
-    box-sizing: border-box;
-    color: var(--site-config-color-index-page-second-text-color);
+  &__section {
+    margin-top: 56px;
   }
 
-  &__link-button {
-    width: 170px !important;
-    height: 48px !important;
-    font-size: 19px !important;
-    transition: all 0.2s !important;
-    margin-top: 38px !important;
+  &__section-header {
+    margin-bottom: 22px;
   }
 
-  &__github-button {
-    width: 170px !important;
-    height: 48px !important;
-    font-size: 19px !important;
-    transition: all 0.2s !important;
-    margin-top: 38px !important;
+  &__section-divider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 50% 0 auto;
+      border-top: 1px solid color-mix(in srgb, var(--site-config-color-border) 72%, transparent);
+      transform: translateY(-50%);
+    }
+  }
+
+  &__section-divider-text {
+    position: relative;
+    z-index: 1;
+    padding: 0 18px;
+    background: var(--site-config-color-index-page-background);
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
   }
 
   &__features {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 90px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
   }
 
   &__feature {
-    width: 300px;
-    margin: 12px;
-    padding: 20px;
-    border-radius: 12px;
-    background: var(--site-config-color-index-page-feature-background);
-    box-shadow:
-      0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14),
-      0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    --card-border-radius: 16px;
+    --card-padding: 0;
+    --card-content-padding: 0;
+    --card-content-margin: 0;
+    --card-title-padding: 0;
+    --card-title-margin: 0;
+    --card-description-padding: 0;
+    --card-description-margin: 0;
+
+    display: flex;
+    flex-direction: column;
+    min-height: 160px;
+  }
+
+  &__feature .var-card__container {
+    padding: 18px 18px 16px;
+  }
+
+  &__feature-name {
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 1.45;
+    color: var(--site-config-color-text);
   }
 
   &__feature-description {
+    margin-top: 6px;
     color: var(--site-config-color-index-page-second-text-color);
     font-size: 14px;
-    margin-top: 10px;
     line-height: 1.7;
   }
 
-  &__contributors,
   &__team-members {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 90px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
   }
 
-  &__contributors-title,
-  &__team-members-title {
-    padding-top: 24px;
-    line-height: 32px;
-    font-size: 24px;
-    border-top: 2px solid var(--site-config-color-index-page-divider-color);
-    color: var(--site-config-color-index-page-second-text-color);
-    letter-spacing: 1px;
-    transition: all 0.2s;
+  &__team-member {
+    --card-border-radius: 16px;
+    --card-padding: 0;
+    --card-content-padding: 0;
+    --card-content-margin: 0;
+    min-height: 120px;
   }
 
-  &__team-members-container {
-    width: 1098px;
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 70px;
+  &__team-member .var-card__container {
+    padding: 18px;
   }
 
-  &__team-member {
+  &__team-member-main {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 300px;
-    margin: 12px;
-    padding: 30px 20px;
-    border-radius: 12px;
-    background: var(--site-config-color-index-page-feature-background);
-    box-shadow:
-      0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14),
-      0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
-    &-avatar {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-    }
-
-    &-name {
-      font-weight: bold;
-      font-size: 20px;
-      margin-top: 20px;
-    }
-
-    &-title,
-    &-description {
-      color: var(--site-config-color-index-page-second-text-color);
-      font-size: 14px;
-      margin-top: 10px;
-      min-height: 40px;
-      text-align: center;
-    }
+    align-items: flex-start;
+    gap: 14px;
+  }
 
-    &-social {
-      margin-top: 10px;
+  &__team-member-avatar {
+    width: 60px;
+    height: 60px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  }
 
-      &-icon {
-        margin: 10px 6px 0;
-        transition: all 0.25s !important;
+  &__team-member-copy {
+    min-width: 0;
+  }
 
-        &:hover {
-          opacity: 0.7;
-          transform: scale(1.25);
-          cursor: pointer;
-        }
-      }
-    }
+  &__team-member-name {
+    font-size: 16px;
+    font-weight: 600;
   }
 
-  &__contributors-link {
-    display: block;
-    margin-top: 80px;
-    width: 800px;
+  &__team-member-title {
+    margin-top: 4px;
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 13px;
+    line-height: 1.6;
   }
 
-  &__contributors-image {
-    display: block;
-    width: 100%;
+  &__team-member-description {
+    margin-top: 4px;
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 13px;
+    line-height: 1.65;
   }
 
-  &__sponsors {
+  &__team-member-social {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 90px;
+    gap: 6px;
+    margin-top: 10px;
+    margin-left: -6px;
   }
 
-  &__sponsors-title {
-    padding-top: 24px;
-    line-height: 32px;
-    font-size: 24px;
-    border-top: 2px solid var(--site-config-color-index-page-divider-color);
-    color: var(--site-config-color-index-page-second-text-color);
-    letter-spacing: 1px;
-    transition: all 0.2s;
+  &__team-member-social-button {
+    color: var(--site-config-color-text) !important;
   }
 
-  &__sponsors-link {
+  &__image-link {
     display: block;
-    margin-top: 50px;
-    width: 1100px;
   }
 
+  &__image-panel {
+    --card-border-radius: 16px;
+    --card-padding: 0;
+    --card-content-padding: 0;
+    --card-content-margin: 0;
+  }
+
+  &__image-panel .var-card__container {
+    padding: 20px;
+  }
+
+  &__contributors-image,
   &__sponsors-image {
     display: block;
     width: 100%;
+    border-radius: 12px;
   }
 
-  &__footer {
+  &__footer-divider {
+    position: relative;
+    width: 100%;
+    height: 8px;
+    margin-top: 56px;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  &__footer-divider::before {
+    content: '';
     position: absolute;
-    bottom: 0;
+    top: 0;
+    left: 50%;
+    width: 100vw;
+    height: 8px;
+    transform: translateX(-50%);
+    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' width='100%25' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpattern id='a' width='91' height='8' patternUnits='userSpaceOnUse'%3E%3Cg clip-path='url(%23clip0_2426_11367)'%3E%3Cpath d='M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0' stroke='%23E1E3E1' stroke-linecap='square'/%3E%3C/g%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");
+    background-repeat: repeat-x;
+    background-position: center;
+    background-size: auto 8px;
+  }
+
+  &__footer {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100px;
-    border-top: thin solid var(--site-config-color-border);
+    margin-top: 24px;
+    min-height: 56px;
+    padding-top: 0;
     color: var(--site-config-color-index-page-second-text-color);
     font-size: 14px;
-    line-height: 26px;
-    transition: all 0.2s;
+    line-height: 1.9;
+    text-align: center;
+  }
+
+  @media (max-width: 1100px) {
+    &__layout {
+      padding: 52px 24px 54px;
+    }
+
+    &__hero {
+      grid-template-columns: 1fr;
+      gap: 28px;
+    }
+
+    &__hero-content {
+      align-items: center;
+      text-align: center;
+    }
+
+    &__hero-side {
+      order: -1;
+    }
+
+    &__hero-logo-stage {
+      min-height: 292px;
+    }
+
+    &__hero-brand-mark {
+      width: 160px;
+      height: 160px;
+    }
+
+    &__features,
+    &__team-members {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 767px) {
+    &__layout {
+      padding: 44px 16px 42px;
+    }
+
+    &__title {
+      font-size: 52px;
+    }
+
+    &__description {
+      font-size: 16px;
+      line-height: 1.72;
+    }
+
+    &__actions {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    &__link-button,
+    &__github-button {
+      width: 100% !important;
+    }
+
+    &__hero-brand-mark {
+      width: 136px;
+      height: 136px;
+    }
+
+    &__hero-logo {
+      width: 100%;
+    }
+
+    &__features,
+    &__team-members {
+      grid-template-columns: 1fr;
+    }
+
+    &__feature {
+      min-height: auto;
+    }
+
+    &__feature .var-card__container,
+    &__team-member .var-card__container {
+      padding: 16px;
+    }
+
+    &__image-panel .var-card__container {
+      padding: 18px;
+    }
+
   }
 }
 </style>

package/site/tsconfig.json

@@ -5,12 +5,11 @@
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "downlevelIteration": true,
     "resolveJsonModule": true,
     "jsx": "preserve",
     "lib": ["esnext", "dom"],
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "outDir": "./lib"
   }
 }