feat(theme): update homepage with Apple-style design and add footer

- Change hero button from "Course Outline" to "GitHub" linking to repository
- Update color scheme to Apple blue gradient and refine button styles
- Add Apple-style footer with localized content, breadcrumb, and policy links
- Introduce top promotional banner with localized call-to-action
- Improve responsive design and adjust spacing for better visual hierarchy
This commit is contained in:
sanbuphy
2026-03-15 13:41:39 +08:00
parent 20ba9d7965
commit 600dc0fd5b
4 changed files with 787 additions and 234 deletions
File diff suppressed because it is too large Load Diff
+22 -13
View File
@@ -4,6 +4,10 @@
--vp-sidebar-nav-section-gap: 8px;
--ev-doc-font-size: 14px;
--ev-doc-line-height: 1.65;
--vp-c-brand-1: #0071e3;
--vp-c-brand-2: #0077ed;
--vp-c-brand-3: #0066cc;
--vp-c-brand-soft: rgba(0, 113, 227, 0.14);
}
.vp-doc {
@@ -302,42 +306,47 @@
/* Hero Section Refinements */
.VPHomeHero .name {
background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
background: -webkit-linear-gradient(315deg, #0071e3 10%, #5ac8fa 90%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 30px rgba(66, 211, 146, 0.3));
filter: drop-shadow(0 0 24px rgba(0, 113, 227, 0.28));
}
.VPHomeHero .text {
font-weight: 500;
color: var(--vp-c-text-2);
font-weight: 600;
color: #1d1d1f;
letter-spacing: -0.02em;
}
.VPHomeHero .action .VPButton.brand {
border-radius: 20px;
background-image: linear-gradient(to right, #42d392, #647eff);
border-radius: 999px;
background-image: none;
background-color: #0071e3;
border: none;
box-shadow: none;
transition:
transform 0.2s,
opacity 0.2s;
}
.VPHomeHero .action .VPButton.brand:hover {
transform: scale(1.05);
opacity: 0.9;
transform: scale(1.02);
background-color: #0077ed;
opacity: 1;
}
.VPHomeHero .action .VPButton.alt {
border-radius: 20px;
border-color: var(--vp-c-divider);
background-color: var(--vp-c-bg-soft);
border-radius: 999px;
border-color: #d2d2d7;
background-color: #fff;
color: #1d1d1f;
transition: transform 0.2s;
}
.VPHomeHero .action .VPButton.alt:hover {
transform: scale(1.05);
background-color: var(--vp-c-bg);
transform: scale(1.02);
background-color: #f5f5f7;
}
/* HomeFeatures Sections Scroll Offset */
+2 -2
View File
@@ -19,8 +19,8 @@ hero:
text: Start Learning
link: /en/stage-0/
- theme: alt
text: Course Outline
link: /en/stage-0/
text: GitHub
link: https://github.com/datawhalechina/easy-vibe
---
<HomeFeatures />
+1 -1
View File
@@ -1119,7 +1119,7 @@
</url>
<url>
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/3.1-choose-platform/</loc>
<lastmod>2026-03-08T12:07:23+08:00</lastmod>
<lastmod>2026-03-08T12:17:04+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/3.1-choose-platform/"/>