feat: 使用 Astro 框架重构网站
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
---
|
||||
/**
|
||||
* 首页 - 严格按设计稿还原
|
||||
* 结构：Hero（左文右图+引号）→ 我们的优势（Bento）→ 课程概念（3列带图标）→ 师资亮点+学习体验（双栏）
|
||||
*/
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="首页 | 智花 · 五道题在线教育"
|
||||
description="五道题国际中文教育官网首页，展示教学理念、课程概念、师资亮点与智能学习体验。"
|
||||
currentPath="/"
|
||||
>
|
||||
<!-- Hero：左文右图，装饰引号，无按钮 -->
|
||||
<section class="hero">
|
||||
<div class="container hero-split">
|
||||
<div class="hero-split-text">
|
||||
<h1 class="hero-title">用中文连接世界</h1>
|
||||
<p class="hero-subtitle" style="margin-left:0;color:var(--brand)">智花，让学习更智能</p>
|
||||
</div>
|
||||
<div class="hero-split-art" style="position:relative">
|
||||
<span class="deco-quote top-right">"</span>
|
||||
<img src="/images/sketch/ead4c466c86cafe8f76435d59c15ac159aed5cc3.png" alt="用中文连接世界" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 我们的优势 - Bento 布局 -->
|
||||
<section class="section compact">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">我们的优势</h2>
|
||||
</div>
|
||||
<div class="bento-grid">
|
||||
<!-- 左侧大图 -->
|
||||
<div class="bento-hero">
|
||||
<div class="art-panel photo" style="height:100%">
|
||||
<img src="/images/sketch/8ccfd197e95883a5800485bd794446260668decb.png" alt="课程与学习体验可视化展示" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧文字卡片 -->
|
||||
<article class="bento-side feature-card soft">
|
||||
<h3>权威课程与师资</h3>
|
||||
<p>名师团队，打造科学系统的国际中文课程，覆盖 HSK 分级、技能训练和进阶路径，兼顾学习效率与文化深度。</p>
|
||||
</article>
|
||||
<!-- 下方三列卡片：大缩略图 + 标题 + 描述 -->
|
||||
<div class="bento-row">
|
||||
<article class="feature-card soft card-with-thumb">
|
||||
<div class="card-thumb">
|
||||
<img src="/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.png" alt="" />
|
||||
</div>
|
||||
<h3>AI智能学习技术</h3>
|
||||
<p>AI 驱动个性化学习，让每一次练习都更高效。围绕学习记录、推荐路径和即时反馈，形成稳定的练习闭环。</p>
|
||||
</article>
|
||||
<article class="feature-card soft card-with-thumb">
|
||||
<div class="card-thumb">
|
||||
<img src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.png" alt="" />
|
||||
</div>
|
||||
<h3>个性化学习体验</h3>
|
||||
<p>根据学习水平动态调整，让不同阶段的学习者都能找到适合自己的节奏，减少无效重复，提升成长速度。</p>
|
||||
</article>
|
||||
<article class="feature-card soft card-with-thumb">
|
||||
<div class="card-thumb">
|
||||
<img src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.png" alt="" />
|
||||
</div>
|
||||
<h3>国际化学习社区</h3>
|
||||
<p>全球中文学习者互动平台，跨文化交流无障碍。课程之外，也为真实沟通、协作和表达提供持续场景。</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 课程概念：带 Lucide 图标的标题 -->
|
||||
<section class="section compact">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">课程概念</h2>
|
||||
</div>
|
||||
<div class="grid-three">
|
||||
<article class="info-card">
|
||||
<div class="info-card-title">
|
||||
<Icon name="lucide:book-text" />
|
||||
<span>HSK 等级课程</span>
|
||||
</div>
|
||||
<p>按照 HSK 等级精心设计，循序渐进，系统掌握中文语言能力。</p>
|
||||
</article>
|
||||
<article class="info-card">
|
||||
<div class="info-card-title">
|
||||
<Icon name="lucide:message-square-text" />
|
||||
<span>技能训练与情境化学习</span>
|
||||
</div>
|
||||
<p>围绕听、说、读、写四项技能构建练习路径，并结合真实情境，让中文学习更主动、更有效。</p>
|
||||
</article>
|
||||
<article class="info-card">
|
||||
<div class="info-card-title">
|
||||
<Icon name="lucide:user-round-check" />
|
||||
<span>个性化提高班</span>
|
||||
</div>
|
||||
<p>根据学员水平与学习意愿，量身组织提高班，强化短板，帮助学习者持续跃升。</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-outline" href="/curriculum">查看完整课程体系</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 师资亮点 + 学习体验 -->
|
||||
<section class="section">
|
||||
<div class="container grid-two">
|
||||
<article class="feature-card headline-card">
|
||||
<p class="eyebrow">师资亮点</p>
|
||||
<h2 class="statement">国际中文教育名师团队倾力打造，经验丰富，专业权威。</h2>
|
||||
<p class="lead">课程教学设计覆盖全领域，结合 AI 技术提供更稳定的学习反馈与更灵活的课堂支持。</p>
|
||||
<a class="mini-link" href="/faculty">查看完整师资体系</a>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<p class="eyebrow">学习体验</p>
|
||||
<div class="art-panel photo">
|
||||
<img src="/images/sketch/2be43b200b8951b4d2dfe7d7c6370d80413872e1.png" alt="学习 App 界面与使用场景展示" />
|
||||
</div>
|
||||
<div class="art-caption">
|
||||
<strong>学习 App 使用场景</strong>
|
||||
<span>练习界面 · AI 推荐路径 · 进度追踪</span>
|
||||
</div>
|
||||
<a class="mini-link" href="#download">开始学习</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user