板块 ① · Hero
留学战绩主标语 + 双 CTA
M3 渲染:大号衬线主标 (DM Serif Display + Noto Serif SC) + 副标 + 主按钮 "免费评估" + 副按钮 "查看战绩"。右半边可能放 SVG 序列动画 (照 browserpsylab hero 模式)。
数据源:
site.json#hero.{headline_cn, headline_en, subline, cta_primary, cta_secondary}板块 ② · 数据墙
573 份录取 · 222 位学生 · 港英澳为主
M3 渲染:3 列大号衬线数字 (clamp 40-64px) + 小标签。可叠加按地区/年份的筛选条 (admissions.json 573 条作为数据底)。
数据源:
site.json#hero.stats + admissions.json (573 records)板块 ③ · 差异化卖点
顾问即产品
M3 渲染:3 列卡片 (沿用 browserpsylab .lnd-step 模式),每张 H3 标题 + 一段说明 + 数字角标。突出 "小而精 vs 大平台" 对比。
数据源:
site.json#differentiators[]板块 ④ · 服务
留学申请 + 雅思内容
M3 渲染:两张服务卡片,留学占大头(详细 highlights 列表)、雅思卡片精简(定位为内容引流,不是主推课程)。可参考 browserpsylab 的对比表样式。
数据源:
site.json#services[]板块 ⑤ · 内容 / 资源
最新帖子
M3 渲染:帖子卡片网格 (封面 16:9 + 标题 + 摘要 + 分类徽章)。category=study-abroad 用主色徽章;category=ielts 用 mint 徽章。点开进帖子详情页(详情页模板 M3 末期再说)。
数据源:
posts.json (filter is_published=true, sort by published_at desc)板块 ⑥ · 联系
开始评估
M3 渲染:4 列联系信息 (wechat 二维码 + phone + email + address) + 一个简单咨询表单 (可选)。是主 CTA 的落点。
数据源:
site.json#contact.{wechat, email, phone, address}