权威课程与师资
-名师团队，打造科学系统的国际中文课程，覆盖 HSK 分级、技能训练和进阶路径，兼顾学习效率与文化深度。
-
- 
+ 
{title}
-
+
+
- 智花|五道题在线教育
+ 智花慧学|五道题
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8731cf8..c575d20 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -20,7 +20,7 @@ const { title, description, currentPath } = Astro.props;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c369d5d..cc3a99c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,21 +8,21 @@ import { Icon } from 'astro-icon/components';
---
-
+
-
用中文连接世界
-智花，让学习更智能
+智花，让学习更智能
+
@@ -33,39 +33,64 @@ import { Icon } from 'astro-icon/components';
我们的优势
-
-
-
-
- 
+
-
+
@@ -91,14 +116,18 @@ import { Icon } from 'astro-icon/components';
+
+
+
-
-
+
+
+
+ 
+
+
+
+
权威课程与师资
++ 名师团队，打造科学系统的国际中文课程，覆盖 HSK + 分级、技能训练和进阶路径，兼顾学习效率与文化深度。 +
- 
+
+
AI智能学习技术
-AI 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。
++ AI + 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。 +
- 
+
+
个性化学习体验
-根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。
++ 根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。 +
- 
+
+
国际化学习社区
-全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。
++ 全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。 +
围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。
++ 围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。 +
根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。
++ 根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。 +
@@ -110,22 +139,39 @@ import { Icon } from 'astro-icon/components';
-
-
+
-
-
师资亮点
-国际中文教育名师团队倾力打造，经验丰富，专业权威。
-课程教学设计覆盖全领域，结合 AI 技术提供更稳定的学习反馈与更灵活的课堂支持。
- 查看完整师资体系 +
+ 
+
+ 师资亮点
+
+
+
+ 国际中文教育名师团队倾力打造，经验丰富，专业权威，覆盖听说读写全领域，结合AI技术提供个性化学习体验。 +
+
+ 查看完整师资体系
+
+ 学习体验
-
- 
+
+
+
+ 
-
diff --git a/src/styles/global.css b/src/styles/global.css
index d468002..fdbe4d7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -110,13 +110,13 @@ button {
align-items: center;
gap: 8px;
white-space: nowrap;
- font-size: 16px;
+ font-size: 24px;
font-weight: 700;
letter-spacing: 0.01em;
}
.brand-copy strong {
- color: var(--brand-strong);
+ color: #1f2430;
}
.brand-copy span {
@@ -133,7 +133,7 @@ button {
.nav-link {
position: relative;
padding: 8px 0;
- font-size: 13px;
+ font-size: 18px;
font-weight: 700;
color: #44423f;
letter-spacing: 0.04em;
@@ -215,6 +215,13 @@ button {
padding: 92px 0 60px;
}
+.index-hero {
+ background-image: url('/images/index-hero-bg.png');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
.hero.centered {
text-align: center;
}
@@ -243,8 +250,8 @@ button {
.hero-subtitle {
max-width: 640px;
margin: 18px auto 0;
- color: #a7a29e;
- font-size: 14px;
+ color: #2875FF;
+ font-size: 30px;
line-height: 1.9;
letter-spacing: 0.04em;
}
@@ -363,29 +370,6 @@ button {
overflow: hidden;
}
-.art-panel::before,
-.art-panel::after {
- content: "";
- position: absolute;
- border-radius: 999px;
-}
-
-.art-panel::before {
- width: 240px;
- height: 240px;
- top: -80px;
- right: -60px;
- background: radial-gradient(circle, rgba(122, 160, 255, 0.26), rgba(122, 160, 255, 0));
-}
-
-.art-panel::after {
- width: 180px;
- height: 180px;
- left: -50px;
- bottom: -40px;
- background: radial-gradient(circle, rgba(242, 136, 119, 0.18), rgba(242, 136, 119, 0));
-}
-
.art-panel img {
width: 100%;
height: auto;
@@ -504,6 +488,53 @@ button {
max-width: 540px;
}
+/* 展示型卡片（师资亮点 / 学习体验） */
+.showcase-card {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ overflow: hidden;
+}
+
+/* 图片区域：标题叠在图片上方 */
+.showcase-hero {
+ position: relative;
+}
+
+.showcase-hero img {
+ width: 100%;
+ aspect-ratio: 16 / 10;
+ object-fit: cover;
+ display: block;
+}
+
+.showcase-title {
+ position: absolute;
+ top: 28px;
+ left: 32px;
+ margin: 0;
+ color: #4986CB;
+ font-size: 32px;
+ font-weight: 800;
+ letter-spacing: 0.02em;
+ z-index: 1;
+}
+
+/* 文字区域 */
+.showcase-body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 28px 34px 34px;
+}
+
+.card-action {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: auto;
+ padding-top: 24px;
+}
+
.quote-card {
padding: 48px;
text-align: center;
@@ -787,24 +818,36 @@ button {
/* ========== Bento 网格（首页"我们的优势"） ========== */
.bento-grid {
display: grid;
- grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
- grid-template-rows: auto auto;
gap: 24px;
}
-.bento-grid .bento-hero {
- grid-row: 1 / 2;
- grid-column: 1 / 2;
+/* 左图右文卡片 */
+.index-left-right {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ padding: 0;
+ overflow: hidden;
+ max-height: 480px;
}
-.bento-grid .bento-side {
- grid-row: 1 / 2;
- grid-column: 2 / 3;
+.index-left-right .bento-hero {
+ min-height: 320px;
+}
+
+.index-left-right .bento-hero .art-panel {
+ border-radius: 0;
+ border: none;
+ box-shadow: none;
+}
+
+.index-left-right .bento-side {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 40px 56px;
}
.bento-grid .bento-row {
- grid-row: 2 / 3;
- grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
@@ -972,7 +1015,6 @@ button {
}
.card-with-thumb .card-thumb {
- padding: 28px 24px;
display: flex;
align-items: center;
justify-content: center;
@@ -980,7 +1022,6 @@ button {
}
.card-with-thumb .card-thumb img {
- max-height: 160px;
object-fit: contain;
}
@@ -1125,25 +1166,15 @@ button {
max-width: none;
}
- .bento-grid {
+ .index-left-right {
grid-template-columns: 1fr;
}
- .bento-grid .bento-hero,
- .bento-grid .bento-side {
- grid-column: 1;
- }
-
- .bento-grid .bento-hero {
- grid-row: auto;
- }
-
- .bento-grid .bento-side {
- grid-row: auto;
+ .index-left-right .bento-side {
+ padding: 28px;
}
.bento-grid .bento-row {
- grid-column: 1;
grid-template-columns: 1fr;
}
@@ -1191,7 +1222,7 @@ button {
.brand-copy {
gap: 6px;
- font-size: 14px;
+ font-size: 24px;
}
.hero-actions {
学习体验
+