Redesign class archive visual system with real-photo hero

src/data/site.ts

@@ -10,7 +10,7 @@ export const site = {
   description:
     "高平一中2024届612班纪念网站，收录三年时间线、班级照片、青春刊物和同学近况，保存我们共同走过的高中时光。",
   anniversary: "2024.06 - 2026.06 · 毕业周年纪念",
-  heroImage: "/assets/campus-hero.png",
+  heroImage: "/assets/wechat-archive/wechat-373.webp",
   footer: "高平一中612班纪念网站"
 };
 

src/layouts/BaseLayout.astro

@@ -36,7 +36,7 @@ const buildTime = new Intl.DateTimeFormat("zh-CN", {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="referrer" content="no-referrer" />
     <SeoHead {title} {description} {image} {noindex} />
-    <meta name="theme-color" content="#156b70" />
+    <meta name="theme-color" content="#3f7fd6" />
     <meta name="application-name" content={site.className} />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />

src/pages/index.astro

@@ -12,17 +12,27 @@ import { articles, featuredArticles } from "../data/articles";
 const previewTimeline = timeline.slice(0, 4);
 const previewPhotoTopics = photoTopics.slice(0, 4);
 const previewPeople = people.slice(0, 6);
+const [heroLead, heroRest] = site.title.split("，");
+const heroRestLead = heroRest.slice(0, 4);
+const heroRestTail = heroRest.slice(4);
 ---
 
 <BaseLayout title={site.name} description={site.description}>
   <section
     id="top"
     class="hero"
-    style={`--hero-image: url("${site.heroImage}")`}
   >
     <div class="hero-content">
+      <div class="archive-index" aria-label="班级档案编号">
+        <span>ARCHIVE NO. 612</span>
+        <span>{site.cohort} · 高平一中</span>
+      </div>
       <p class="eyebrow">{site.anniversary}</p>
-      <h1>{site.title}</h1>
+      <h1>
+        <span>{heroLead}，</span>
+        <span>{heroRestLead}</span>
+        <span>{heroRestTail}</span>
+      </h1>
       <p>{site.subtitle}</p>
       <div class="hero-actions">
         <a class="button primary" href="/timeline/">翻开回忆</a>
@@ -30,6 +40,21 @@ const previewPeople = people.slice(0, 6);
         <a class="button" href="/messages/">写一句话</a>
       </div>
     </div>
+
+    <figure class="hero-photo">
+      <img
+        src={site.heroImage}
+        alt="夕阳照进612班教室，同学们正在低头自习"
+        width="1080"
+        height="810"
+        loading="eager"
+        fetchpriority="high"
+      />
+      <figcaption>
+        <span>高三教室 · 夕阳自习</span>
+        <span>一张真正属于 612 班的照片</span>
+      </figcaption>
+    </figure>
   </section>
 
   <aside class="stats" aria-label="纪念数据">