feat(ui): update hero button text and enhance welcome screen

- Change primary hero button text from "Start Learning" to "Start Vibe Together!" across all language versions to align with project branding
- Update online reading links in README files to point to /welcome.html for better user onboarding
- Enhance WelcomeScreen.vue with improved animation timing and spacing
- Add dynamic SVG wordmark to homepage hero section for visual appeal
- Implement animated color transition for top promo bar
- Remove testing guidelines comment in AGENTS.md as placeholder
- Adjust feature card styling with increased min-height and icon sizes
This commit is contained in:
sanbuphy
2026-03-18 12:12:42 +08:00
parent 39e75df8c7
commit c8b68e5139
24 changed files with 205 additions and 59 deletions
+4 -4
View File
@@ -16,16 +16,16 @@
</p> </p>
<p align="center"> <p align="center">
🚀 <a href="https://datawhalechina.github.io/easy-vibe/">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">还想学 OpenClaw</a><br> 🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">还想学 OpenClaw</a><br>
<span style="font-size: 0.85em; color: #888;"><a href="https://datawhalechina.github.io/easy-vibe/">Start Experience</a> · <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a></span> <span style="font-size: 0.85em; color: #888;"><a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Start Experience</a> · <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a></span>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">在线阅读</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在线阅读</a> ·
<a href="#-内容导航">学习地图</a> · <a href="#-内容导航">学习地图</a> ·
<a href="#contact">社区交流</a><br> <a href="#contact">社区交流</a><br>
<span style="font-size: 0.85em; color: #888;"> <span style="font-size: 0.85em; color: #888;">
<a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
<a href="#-content-navigation">Learning Map</a> · <a href="#-content-navigation">Learning Map</a> ·
<a href="#contact">Community</a> <a href="#contact">Community</a>
</span> </span>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : تعلم Vibe Coding من 0 إلى 1 # Easy-Vibe : تعلم Vibe Coding من 0 إلى 1
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">دليل تفاعلي</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">دليل تفاعلي</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">القراءة عبر الإنترنت</a> ·
<a href="#-التنقل">خريطة التعلم</a> · <a href="#-التنقل">خريطة التعلم</a> ·
<a href="#contact">المجتمع</a> <a href="#contact">المجتمع</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : Lerne Vibe Coding von 0 auf 1 # Easy-Vibe : Lerne Vibe Coding von 0 auf 1
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interaktives Tutorial</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interaktives Tutorial</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">Online lesen</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen</a> ·
<a href="#-navigation">Lernkarte</a> · <a href="#-navigation">Lernkarte</a> ·
<a href="#contact">Community</a> <a href="#contact">Community</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : Learn vibe coding from 0 to 1 # Easy-Vibe : Learn vibe coding from 0 to 1
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
<a href="#-navigation">Learning Map</a> · <a href="#-navigation">Learning Map</a> ·
<a href="#contact">Community</a> <a href="#contact">Community</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : Aprende Vibe Coding de 0 a 1 # Easy-Vibe : Aprende Vibe Coding de 0 a 1
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea</a> ·
<a href="#-navegación">Mapa de aprendizaje</a> · <a href="#-navegación">Mapa de aprendizaje</a> ·
<a href="#contact">Comunidad</a> <a href="#contact">Comunidad</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : Apprendre le Vibe Coding de 0 à 1 # Easy-Vibe : Apprendre le Vibe Coding de 0 à 1
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutoriel interactif</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutoriel interactif</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne</a> ·
<a href="#-navigation">Carte d'apprentissage</a> · <a href="#-navigation">Carte d'apprentissage</a> ·
<a href="#contact">Communauté</a> <a href="#contact">Communauté</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : 0から1で学ぶVibe Coding # Easy-Vibe : 0から1で学ぶVibe Coding
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む</a> ·
<a href="#-コンテンツナビゲーション">学習マップ</a> · <a href="#-コンテンツナビゲーション">学習マップ</a> ·
<a href="#contact">コミュニティ交流</a> <a href="#contact">コミュニティ交流</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : 0에서 1까지 배우는 Vibe Coding # Easy-Vibe : 0에서 1까지 배우는 Vibe Coding
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">대화형 튜토리얼</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">대화형 튜토리얼</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인 읽기</a> ·
<a href="#-콘텐츠-탐색">학습 지도</a> · <a href="#-콘텐츠-탐색">학습 지도</a> ·
<a href="#contact">커뮤니티 교류</a> <a href="#contact">커뮤니티 교류</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : Học Vibe Coding từ 0 đến 1 # Easy-Vibe : Học Vibe Coding từ 0 đến 1
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Hướng dẫn tương tác</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Hướng dẫn tương tác</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Đọc trực tuyến</a> ·
<a href="#-điều-hướng">Bản đồ học tập</a> · <a href="#-điều-hướng">Bản đồ học tập</a> ·
<a href="#contact">Cộng đồng</a> <a href="#contact">Cộng đồng</a>
</p> </p>
+2 -2
View File
@@ -12,11 +12,11 @@
# Easy-Vibe : 從 0 到 1 學習 Vibe Coding # Easy-Vibe : 從 0 到 1 學習 Vibe Coding
<p align="center"> <p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a> 📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀</a> · <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在線閱讀</a> ·
<a href="#-內容導航">學習地圖</a> · <a href="#-內容導航">學習地圖</a> ·
<a href="#contact">社區交流</a> <a href="#contact">社區交流</a>
</p> </p>
+55 -2
View File
@@ -6,6 +6,7 @@ import GitHubStars from './components/GitHubStars.vue'
import { onMounted, ref, watch, computed } from 'vue' import { onMounted, ref, watch, computed } from 'vue'
import ReadingProgress from './components/ReadingProgress.vue' import ReadingProgress from './components/ReadingProgress.vue'
import { Setting } from '@element-plus/icons-vue' import { Setting } from '@element-plus/icons-vue'
import easyVibePaths from './data/easyVibePaths.json'
const { frontmatter } = useData() const { frontmatter } = useData()
const route = useRoute() const route = useRoute()
@@ -416,6 +417,38 @@ watch(sidebarCollapsed, (collapsed) => {
</el-popover> </el-popover>
</ClientOnly> </ClientOnly>
</template> </template>
<template #home-hero-info-before>
<div
v-if="frontmatter.layout === 'home'"
class="vp-home-wordmark"
>
<svg
viewBox="0 0 460 220"
class="vp-home-wordmark-svg"
>
<defs>
<linearGradient
id="home-hero-ocean"
x1="0"
y1="0"
x2="460"
y2="0"
gradientUnits="userSpaceOnUse"
>
<stop offset="0%" stop-color="#06b6d4" />
<stop offset="50%" stop-color="#0ea5e9" />
<stop offset="100%" stop-color="#3b82f6" />
</linearGradient>
</defs>
<path
v-for="(path, index) in easyVibePaths"
:key="index"
:d="path"
class="vp-home-wordmark-path"
/>
</svg>
</div>
</template>
<template #home-hero-info-after> <template #home-hero-info-after>
<div <div
v-if=" v-if="
@@ -467,7 +500,8 @@ watch(sidebarCollapsed, (collapsed) => {
/* 调整打字机容器的样式,使其看起来像原来的 tagline */ /* 调整打字机容器的样式,使其看起来像原来的 tagline */
.vp-typed-tagline { .vp-typed-tagline {
padding-top: 8px; padding-top: 0;
margin-top: 8px;
line-height: 28px; line-height: 28px;
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
@@ -485,7 +519,7 @@ watch(sidebarCollapsed, (collapsed) => {
text-align: center; text-align: center;
} }
.VPHomeHero .main { .VPHomeHero .main {
margin: 0 auto; margin: -18px auto 0;
} }
.VPHomeHero .name, .VPHomeHero .name,
.VPHomeHero .text { .VPHomeHero .text {
@@ -493,11 +527,30 @@ watch(sidebarCollapsed, (collapsed) => {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.VPHomeHero .name {
display: none !important;
}
.VPHomeHero .text { .VPHomeHero .text {
color: var(--vp-c-text-1) !important; color: var(--vp-c-text-1) !important;
} }
.VPHomeHero .actions { .VPHomeHero .actions {
justify-content: center; justify-content: center;
margin-top: 20px;
}
.vp-home-wordmark {
display: flex;
justify-content: center;
margin-top: -12px;
margin-bottom: 18px;
}
.vp-home-wordmark-svg {
width: min(380px, 52vw);
height: auto;
filter: none;
}
.vp-home-wordmark-path {
fill: url(#home-hero-ocean);
stroke: none;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@@ -8,6 +8,11 @@ const { site, page, lang } = useData()
const activeTab = ref('home') const activeTab = ref('home')
const showLangMenu = ref(false) const showLangMenu = ref(false)
const topPromoProgress = ref(1) const topPromoProgress = ref(1)
const topPromoIntroProgress = ref(0)
const topPromoColorProgress = ref(0)
let topPromoIntroRaf = 0
let topPromoColorRaf = 0
let topPromoColorTimer = 0
const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen' const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen'
// Appendix Scroll Logic // Appendix Scroll Logic
@@ -1620,12 +1625,27 @@ const updateTopPromoVisibility = () => {
} }
const topPromoStyle = computed(() => { const topPromoStyle = computed(() => {
const progress = topPromoProgress.value const scrollProgress = topPromoProgress.value
const introProgress = topPromoIntroProgress.value
const colorProgress = topPromoColorProgress.value
const progress = scrollProgress * introProgress
const scrollOffset = -100 * (1 - scrollProgress)
const startTextColor = { r: 255, g: 255, b: 255 }
const endTextColor = { r: 29, g: 29, b: 31 }
const startBgColor = { r: 0, g: 113, b: 227 }
const endBgColor = { r: 245, g: 245, b: 247 }
const startLinkColor = { r: 255, g: 255, b: 255 }
const endLinkColor = { r: 0, g: 102, b: 204 }
const textColor = `rgb(${Math.round(startTextColor.r + (endTextColor.r - startTextColor.r) * colorProgress)}, ${Math.round(startTextColor.g + (endTextColor.g - startTextColor.g) * colorProgress)}, ${Math.round(startTextColor.b + (endTextColor.b - startTextColor.b) * colorProgress)})`
const bgColor = `rgb(${Math.round(startBgColor.r + (endBgColor.r - startBgColor.r) * colorProgress)}, ${Math.round(startBgColor.g + (endBgColor.g - startBgColor.g) * colorProgress)}, ${Math.round(startBgColor.b + (endBgColor.b - startBgColor.b) * colorProgress)})`
const linkColor = `rgb(${Math.round(startLinkColor.r + (endLinkColor.r - startLinkColor.r) * colorProgress)}, ${Math.round(startLinkColor.g + (endLinkColor.g - startLinkColor.g) * colorProgress)}, ${Math.round(startLinkColor.b + (endLinkColor.b - startLinkColor.b) * colorProgress)})`
return { return {
opacity: progress, opacity: progress,
transform: `translateY(${-100 * (1 - progress)}%)`, transform: `translateY(${scrollOffset}%)`,
maxHeight: `${30 * progress}px`, maxHeight: `${30 * progress}px`,
borderTopColor: `rgba(229, 229, 234, ${progress})`, backgroundColor: bgColor,
color: textColor,
'--top-promo-link-color': linkColor,
pointerEvents: progress < 0.02 ? 'none' : 'auto' pointerEvents: progress < 0.02 ? 'none' : 'auto'
} }
}) })
@@ -1636,6 +1656,33 @@ const replayIntro = () => {
} }
onMounted(() => { onMounted(() => {
const introDuration = 1800
const colorDelay = 500
const colorDuration = 1800
const introStart = performance.now()
const stepTopPromoIntro = (now) => {
const raw = Math.min(1, (now - introStart) / introDuration)
const eased = 1 - Math.pow(1 - raw, 3)
topPromoIntroProgress.value = eased
if (raw < 1) {
topPromoIntroRaf = window.requestAnimationFrame(stepTopPromoIntro)
return
}
topPromoColorTimer = window.setTimeout(() => {
const colorStart = performance.now()
const stepTopPromoColor = (time) => {
const colorRaw = Math.min(1, (time - colorStart) / colorDuration)
const colorEased = 1 - Math.pow(1 - colorRaw, 3)
topPromoColorProgress.value = colorEased
if (colorRaw < 1) {
topPromoColorRaf = window.requestAnimationFrame(stepTopPromoColor)
}
}
topPromoColorRaf = window.requestAnimationFrame(stepTopPromoColor)
}, colorDelay)
}
topPromoIntroRaf = window.requestAnimationFrame(stepTopPromoIntro)
const currentPath = window.location.pathname const currentPath = window.location.pathname
const basePath = site.value.base || '/' const basePath = site.value.base || '/'
const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/` const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`
@@ -1681,6 +1728,18 @@ onMounted(() => {
}) })
onUnmounted(() => { onUnmounted(() => {
if (topPromoIntroRaf) {
window.cancelAnimationFrame(topPromoIntroRaf)
topPromoIntroRaf = 0
}
if (topPromoColorRaf) {
window.cancelAnimationFrame(topPromoColorRaf)
topPromoColorRaf = 0
}
if (topPromoColorTimer) {
window.clearTimeout(topPromoColorTimer)
topPromoColorTimer = 0
}
document.removeEventListener('click', closeLangMenu) document.removeEventListener('click', closeLangMenu)
if (appendixWrapper.value) { if (appendixWrapper.value) {
appendixWrapper.value.removeEventListener('scroll', onAppendixScroll) appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
@@ -2365,8 +2424,8 @@ a {
} }
.nav-promo { .nav-promo {
height: 30px;
max-height: 30px; max-height: 30px;
border-top: 1px solid #e5e5ea;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -2378,17 +2437,19 @@ a {
transform-origin: top center; transform-origin: top center;
position: relative; position: relative;
z-index: 1; z-index: 1;
will-change: transform, opacity, max-height, border-color; will-change: transform, opacity, max-height, background-color, color;
transition: transition:
transform 0.16s ease-out, transform 0.16s ease-out,
opacity 0.16s ease-out, opacity 0.16s ease-out,
max-height 0.16s ease-out, max-height 0.16s ease-out,
border-color 0.16s ease-out; background-color 0.22s ease-out,
color 0.22s ease-out;
} }
.nav-promo a { .nav-promo a {
color: #0066cc; color: var(--top-promo-link-color, #0066cc);
text-decoration: none; text-decoration: none;
transition: color 0.25s ease-out;
} }
.button { .button {
@@ -2786,6 +2847,7 @@ a {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
scroll-snap-align: start; scroll-snap-align: start;
width: 100%; width: 100%;
min-height: 360px;
transition: transform 0.25s ease; transition: transform 0.25s ease;
} }
@@ -2853,14 +2915,14 @@ a {
} }
.appendix-icon-wrapper { .appendix-icon-wrapper {
width: 64px; width: 100%;
height: 64px; height: 190px;
border-radius: 17.5px; /* Apple continuous curve approximation */ border-radius: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32px; font-size: 88px;
margin-bottom: 16px; margin-bottom: 14px;
/* Glassmorphism / VisionOS Style */ /* Glassmorphism / VisionOS Style */
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
@@ -2916,7 +2978,7 @@ a {
} }
.appendix-text { .appendix-text {
font-size: 15px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
color: #6e6e73; color: #6e6e73;
margin: 0; margin: 0;
@@ -2928,7 +2990,7 @@ a {
font-weight: 600; font-weight: 600;
color: #1d1d1f; color: #1d1d1f;
margin-right: 6px; margin-right: 6px;
font-size: 13px; font-size: 12px;
} }
/* Footer */ /* Footer */
@@ -258,23 +258,26 @@ onUnmounted(() => {
} }
.welcome-tip { .welcome-tip {
margin: 24px 0 0; margin: 44px 0 0;
font-size: 11px; font-size: 11px;
letter-spacing: 0.08em; letter-spacing: 0.2em;
color: rgba(34, 34, 34, 0.38); color: rgba(34, 34, 34, 0.32);
text-transform: uppercase; text-transform: uppercase;
animation: welcome-tip-breathe 7s ease-in-out infinite; animation: welcome-tip-breathe 5s ease-in-out infinite;
} }
@keyframes welcome-tip-breathe { @keyframes welcome-tip-breathe {
0% { 0% {
opacity: 0.24; opacity: 0;
} }
50% { 40% {
opacity: 0.72; opacity: 0.55;
}
80% {
opacity: 0;
} }
100% { 100% {
opacity: 0.24; opacity: 0;
} }
} }
+31 -3
View File
@@ -305,15 +305,43 @@
} }
/* Hero Section Refinements */ /* Hero Section Refinements */
.VPHomeHero .name { .VPHomeHero .name,
background: -webkit-linear-gradient(315deg, #0071e3 10%, #5ac8fa 90%); .VPHomeHero .name.clip {
position: relative;
top: -8px;
background-image: linear-gradient(
100deg,
#06b6d4 0%,
#0ea5e9 18%,
#3b82f6 36%,
#9d4edd 56%,
#ff3c81 74%,
#f97316 88%,
#06b6d4 100%
);
background-size: 220% 220%;
background-position: 0% 50%;
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(0, 113, 227, 0.28)); filter: drop-shadow(0 0 22px rgba(59, 130, 246, 0.26));
animation: ev-hero-name-flow 8s ease-in-out infinite alternate;
}
@keyframes ev-hero-name-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 35% 50%;
}
} }
.VPHomeHero .text { .VPHomeHero .text {
display: none !important;
font-weight: 600; font-weight: 600;
color: #1d1d1f; color: #1d1d1f;
letter-spacing: -0.02em; letter-spacing: -0.02em;
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- هكذا يجب أن تكون البرمجة. - هكذا يجب أن تكون البرمجة.
actions: actions:
- theme: brand - theme: brand
text: ابدأ التعلم text: ابدأ vibe معًا!
link: /ar-sa/stage-0/ link: /ar-sa/stage-0/
- theme: alt - theme: alt
text: مخطط الدورة text: مخطط الدورة
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- So sollte Programmieren sich anfühlen. - So sollte Programmieren sich anfühlen.
actions: actions:
- theme: brand - theme: brand
text: Starten text: Zusammen vibe starten!
link: /de-de/stage-0/ link: /de-de/stage-0/
- theme: alt - theme: alt
text: Kursübersicht text: Kursübersicht
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- This is how coding should feel. - This is how coding should feel.
actions: actions:
- theme: brand - theme: brand
text: Start Learning text: Start Vibe Together!
link: /en/stage-0/ link: /en/stage-0/
- theme: alt - theme: alt
text: GitHub text: GitHub
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- Así debería sentirse programar. - Así debería sentirse programar.
actions: actions:
- theme: brand - theme: brand
text: Empezar text: ¡Empezar a vibe juntos!
link: /es-es/stage-0/ link: /es-es/stage-0/
- theme: alt - theme: alt
text: Esquema del Curso text: Esquema del Curso
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- C'est ainsi que le coding devrait être. - C'est ainsi que le coding devrait être.
actions: actions:
- theme: brand - theme: brand
text: Commencer text: Commencer à vibe ensemble !
link: /fr-fr/stage-0/ link: /fr-fr/stage-0/
- theme: alt - theme: alt
text: Plan du Cours text: Plan du Cours
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- プログラミングは、こうあるべき。 - プログラミングは、こうあるべき。
actions: actions:
- theme: brand - theme: brand
text: 学習を開始 text: 一緒にvibeを始めよう!
link: /ja-jp/stage-0/ link: /ja-jp/stage-0/
- theme: alt - theme: alt
text: コース概要 text: コース概要
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- 프로그래밍은, 이래야 합니다. - 프로그래밍은, 이래야 합니다.
actions: actions:
- theme: brand - theme: brand
text: 학습 시작 text: 함께 vibe 시작!
link: /ko-kr/stage-0/ link: /ko-kr/stage-0/
- theme: alt - theme: alt
text: 과정 개요 text: 과정 개요
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- Lập trình nên như thế này. - Lập trình nên như thế này.
actions: actions:
- theme: brand - theme: brand
text: Bắt đầu học text: Bắt đầu vibe cùng nhau!
link: /vi-vn/stage-0/ link: /vi-vn/stage-0/
- theme: alt - theme: alt
text: Đề cương khóa học text: Đề cương khóa học
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- 这就是编程该有的样子。 - 这就是编程该有的样子。
actions: actions:
- theme: brand - theme: brand
text: 开始学习 text: 开始一起 vibe
link: /zh-cn/stage-0/0.1-learning-map/ link: /zh-cn/stage-0/0.1-learning-map/
- theme: alt - theme: alt
text: GitHub 加速更新 text: GitHub 加速更新
+1 -1
View File
@@ -16,7 +16,7 @@ hero:
- 這就是編程該有的樣子。 - 這就是編程該有的樣子。
actions: actions:
- theme: brand - theme: brand
text: 開始學習 text: 開始一起 vibe
link: /zh-tw/stage-0/ link: /zh-tw/stage-0/
- theme: alt - theme: alt
text: 課程大綱 text: 課程大綱