rel 1.0
This commit is contained in:
+25
-173
@@ -1,178 +1,30 @@
|
||||
---
|
||||
/**
|
||||
* 首页 - 严格按设计稿还原
|
||||
* 结构：Hero（左文右图+引号）→ 我们的优势（Bento）→ 课程概念（3列带图标）→ 师资亮点+学习体验（双栏）
|
||||
* 根路径立即跳转默认语言。不用 Astro.redirect，静态构建否则会生成 2 秒 meta refresh。
|
||||
*/
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { DEFAULT_LANG } from '../i18n';
|
||||
|
||||
const target = `/${DEFAULT_LANG}`;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="智花慧学 | 五道题"
|
||||
description="五道题国际中文教育官网首页，展示教学理念、课程概念、师资亮点与智能学习体验。"
|
||||
currentPath="/"
|
||||
>
|
||||
<!-- Hero：左文右图，装饰引号，无按钮 -->
|
||||
<section class="hero index-hero">
|
||||
<div class="container hero-split">
|
||||
<div class="hero-split-text">
|
||||
<h1 class="hero-title">用中文连接世界</h1>
|
||||
<p class="hero-subtitle">智花，让学习更智能</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="index-left-right feature-card">
|
||||
<!-- 左侧大图 -->
|
||||
<div class="bento-hero">
|
||||
<div class="art-panel photo" style="height:100%">
|
||||
<img
|
||||
src="/images/index-left.png"
|
||||
alt="课程与学习体验可视化展示"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧文字卡片 -->
|
||||
<div class="bento-side soft">
|
||||
<h3>权威课程与师资</h3>
|
||||
<p>
|
||||
名师团队，打造科学系统的国际中文课程，覆盖 HSK
|
||||
分级、技能训练和进阶路径，兼顾学习效率与文化深度。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下方三列卡片：大缩略图 + 标题 + 描述 -->
|
||||
<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 showcase-card">
|
||||
<div class="showcase-hero">
|
||||
<div class="showcase-title">师资亮点</div>
|
||||
<img
|
||||
src="/images/teacher.png"
|
||||
alt="师资亮点展示"
|
||||
/>
|
||||
</div>
|
||||
<div class="showcase-body">
|
||||
<p>
|
||||
国际中文教育名师团队倾力打造，经验丰富，专业权威，覆盖听说读写全领域，结合AI技术提供个性化学习体验。
|
||||
</p>
|
||||
<div class="card-action">
|
||||
<a class="btn btn-outline" href="/faculty">查看完整师资体系</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="feature-card showcase-card">
|
||||
<div class="showcase-hero">
|
||||
<div class="showcase-title">学习体验</div>
|
||||
<img
|
||||
src="/images/study.png"
|
||||
alt="学习 App 界面与使用场景展示"
|
||||
/>
|
||||
</div>
|
||||
<div class="showcase-body">
|
||||
<p>
|
||||
展示APP使用场景：练习界面、AI推荐路径、进度追踪强调"每一次学习都智能、个性化"
|
||||
</p>
|
||||
<div class="card-action">
|
||||
<a class="btn btn-outline" href="#download">开始学习</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="refresh" content={`0;url=${target}`} />
|
||||
<link rel="canonical" href={target} />
|
||||
<meta name="robots" content="noindex" />
|
||||
<title>Redirecting…</title>
|
||||
<script is:inline define:vars={{ target }}>
|
||||
location.replace(target);
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
style="margin:0;font-family:system-ui,sans-serif;display:grid;place-items:center;min-height:100vh;background:#fffdfb;color:#444"
|
||||
>
|
||||
<p style="margin:0;font-size:14px">
|
||||
<a href={target} style="color:#4b76eb">继续前往首页 →</a>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user