feat: add subject overview cards

src/components/SubjectIcon.astro

+---
+interface Props {
+  name: "chinese" | "math" | "english" | "physics" | "chemistry" | "history";
+}
+
+const { name } = Astro.props;
+---
+<svg viewBox="0 0 48 48" aria-hidden="true">
+  {name === "chinese" && <><path d="M9 12.5h12a5 5 0 0 1 5 5v20H14a5 5 0 0 0-5 5v-30Z"/><path d="M39 12.5H27a5 5 0 0 0-5 5v20h12a5 5 0 0 1 5 5v-30Z"/><path d="M14 20h7M14 26h7M27 20h7M27 26h7"/></>}
+  {name === "math" && <><circle cx="15" cy="15" r="7"/><path d="m10 35 5-11 5 11M12 31h6M29 13h10M34 8v10M29 28h10M29 36h10"/></>}
+  {name === "english" && <><path d="m10 37 10-26 10 26M14 28h12M34 12v25M34 12h6M34 24h5M34 37h6"/></>}
+  {name === "physics" && <><ellipse cx="24" cy="24" rx="20" ry="8"/><ellipse cx="24" cy="24" rx="20" ry="8" transform="rotate(60 24 24)"/><ellipse cx="24" cy="24" rx="20" ry="8" transform="rotate(120 24 24)"/><circle cx="24" cy="24" r="3"/></>}
+  {name === "chemistry" && <><path d="M18 7h12M21 7v12L10 38a3 3 0 0 0 2.7 4h22.6a3 3 0 0 0 2.7-4L27 19V7"/><path d="M15 33h18M19 28h10"/></>}
+  {name === "history" && <><path d="M9 18h30L24 7 9 18ZM12 39h24M9 43h30M14 18v21M22 18v21M30 18v21M38 18v21"/></>}
+</svg>

src/pages/index.astro

@@ -4,16 +4,27 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import CTA from "../components/CTA.astro";
 import SectionHeading from "../components/SectionHeading.astro";
+import SubjectIcon from "../components/SubjectIcon.astro";
 import heroImage from "../../pic/主页大图素材-1.png";
 import { Image } from "astro:assets";
 import { site } from "../data/site";
 import { fmtDate, getPublishedArticles } from "../lib/articles";
 const latest = (await getPublishedArticles()).slice(0, 3);
+const subjects = [
+  { icon: "chinese", tone: "blue", name: "语文学习", desc: "品读古今经典，涵养文学素养" },
+  { icon: "math", tone: "rose", name: "数学思维", desc: "探索数学奥秘，构建逻辑思维" },
+  { icon: "english", tone: "orange", name: "英语能力", desc: "畅游语言世界，拓展国际视野" },
+  { icon: "physics", tone: "indigo", name: "物理探索", desc: "洞察万物原理，掌握自然法则" },
+  { icon: "chemistry", tone: "green", name: "化学实验", desc: "发现元素世界，理解物质变化" },
+  { icon: "history", tone: "purple", name: "历史人文", desc: "穿越时空长河，传承文明智慧" },
+] as const;
 const jsonLd = [{ "@context": "https://schema.org", "@type": "Service", name: "启优学在线一对一个性化辅导", provider: { "@id": new URL("/#organization", Astro.site).href }, areaServed: { "@type": "Country", name: "中国" }, audience: { "@type": "EducationalAudience", educationalRole: "student" }, description: site.home.subhead }, { "@context": "https://schema.org", "@type": "FAQPage", mainEntity: site.faq.slice(0, 4).map((item) => ({ "@type": "Question", name: item.q, acceptedAnswer: { "@type": "Answer", text: item.a } })) }];
 ---
 <Base title={site.seo.title} jsonLd={jsonLd}><Header /><main id="main-content">
   <section class="home-hero"><div class="container home-hero__grid"><div class="home-hero__copy" data-reveal><div class="hero-label"><strong>小初高在线辅导</strong></div><h1><span>优质师资直达，个性化辅导看得见</span><em>打破地域壁垒，让优质教育触手可及</em></h1><p>{site.home.subhead}</p><div class="hero__actions"><a class="button" href="/contact/">免费领取学情分析</a><a class="button button--outline" href="#workflow">了解学习流程</a></div><div class="hero__proof"><span>固定教师</span><span>互动课堂</span><span>课程回放</span><span>阶段复盘</span></div></div><div class="home-hero__visual" data-reveal><div class="image-frame"><Image src={heroImage} widths={[580, 760, 980]} sizes="(max-width: 760px) 100vw, 52vw" alt="启优学老师与学生在线一对一互动学习" format="webp" loading="eager" fetchpriority="high" /></div></div></div><div class="container stage-ruler" aria-label="覆盖学段"><span>小学 1-6 年级</span><i></i><span>初中 1-3 年级</span><i></i><span>高中 1-3 年级</span></div></section>
 
+  <section class="subject-overview section-pad"><div class="container"><div class="subject-overview__head" data-reveal><p class="subject-overview__label">启优学一对一在线辅导</p><h2>小学、初中、高中<br />个性化学习支持</h2><p class="subject-overview__lead">通过学情诊断、教师匹配与阶段复盘，为学生制定有针对性的在线一对一学习方案。</p><p class="subject-overview__intro">启优学一对一面向小学、初中和高中学生，提供学情诊断、教师匹配、专属学习方案、课堂过程反馈和课后学习报告，帮助家长清晰了解孩子的学习进展。</p></div><div class="subject-overview__grid">{subjects.map((item) => <article class={`subject-card subject-card--${item.tone}`} data-reveal><div class="subject-card__icon"><SubjectIcon name={item.icon} /></div><div><h3>{item.name}</h3><p>{item.desc}</p></div></article>)}</div></div></section>
+
   <section class="stat-band"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div><p class="data-note">师资数据来源于启优学一对一教务系统内部统计，截至 2026 年 7 月；相关数据会随师资及业务情况动态更新。</p></section>
 
   <section id="services" class="section-pad section-blue"><div class="container"><div class="section-intro-row"><SectionHeading title="从当前最需要解决的问题开始" description="课程不按统一模板推进。先看学生现在在哪里，再决定近期先做什么。" /><a class="text-link" href="/services/">查看全部学习需求</a></div><div class="need-grid">{site.services.map((item) => <a class="need-card" href={`/services/${item.slug}/`} data-reveal><h3>{item.name}</h3><p>{item.intro}</p><strong>了解适配方式</strong></a>)}</div></div></section>