feat(events): add event index page and back navigation

src/components/EventLanding.js

@@ -1,5 +1,6 @@
 import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
+import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
@@ -14,16 +15,9 @@ import {
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import events from "@site/src/data/events";
 import { formatDate, formatDateRange } from "@site/src/utils/date";
+import { isChinese, pick } from "@site/src/utils/i18n";
 import styles from "./EventLanding.module.css";
 
-function isChinese(locale) {
-  return locale.startsWith("zh");
-}
-
-function pick(locale, obj) {
-  return isChinese(locale) && obj.zh ? obj.zh : obj.en;
-}
-
 function utm(url, slug) {
   let u;
   try {
@@ -94,6 +88,9 @@ export default function EventLanding({ slug }) {
       <main className={styles.page}>
         <section className={styles.hero}>
           <div className="container">
+            <Link to="/landing" className={styles.backLink}>
+              ← {isZh ? "落地页" : "Landing Pages"}
+            </Link>
             {event.banner && (
               <img src={bannerUrl} alt={pick(locale, event.title)} className={styles.banner} />
             )}
@@ -245,6 +242,13 @@ export default function EventLanding({ slug }) {
             </div>
           </div>
         </section>
+        <section className={styles.moreEvents}>
+          <div className="container">
+            <Link to="/events" className={styles.backLink}>
+              ← {isZh ? "活动日历" : "Events Calendar"}
+            </Link>
+          </div>
+        </section>
       </main>
     </Layout>
   );

src/components/EventLanding.module.css

@@ -70,6 +70,59 @@
   text-decoration: none;
 }
 
+/* Backlink */
+.backLink {
+  display: inline-block;
+  margin-bottom: var(--hami-space-16);
+  color: var(--hami-color-muted);
+  font-size: 0.95rem;
+  text-decoration: none;
+}
+
+.backLink:hover {
+  color: var(--hami-color-primary);
+  text-decoration: none;
+}
+
+.moreEvents {
+  padding: var(--hami-space-16) 0 var(--hami-space-48);
+  text-align: center;
+}
+
+/* Event list (landing index) */
+.eventList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hami-space-16);
+  margin-top: var(--hami-space-32);
+}
+
+.eventCard {
+  display: block;
+  padding: var(--hami-space-24) var(--hami-space-32);
+  text-decoration: none;
+  transition: border-color var(--hami-motion-fast);
+}
+
+.eventCard:hover {
+  border-color: var(--hami-color-primary);
+  text-decoration: none;
+}
+
+.eventTitle {
+  font-family: var(--hami-font-display);
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--hami-color-text);
+  margin-bottom: var(--hami-space-8);
+}
+
+.eventMeta {
+  color: var(--hami-color-muted);
+  font-size: 0.95rem;
+  margin: 0;
+}
+
 /* Case study */
 .caseStudySection {
   padding: var(--hami-space-32) 0;

src/pages/landing/index.js

@@ -0,0 +1,54 @@
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import events from "@site/src/data/events";
+import { formatDate, formatDateRange } from "@site/src/utils/date";
+import { isChinese, pick } from "@site/src/utils/i18n";
+import styles from "@site/src/components/EventLanding.module.css";
+
+export default function EventLandingList() {
+  const { i18n } = useDocusaurusContext();
+  const isZh = isChinese(i18n.currentLocale);
+  const locale = i18n.currentLocale;
+
+  return (
+    <Layout
+      title={isZh ? "落地页 - 列表" : "Landing Pages"}
+      description={
+        isZh
+          ? "查看 HAMi 团队的活动落地页，获取演讲详情与社区资料。"
+          : "See the events and talks the HAMi team is part of, with slides and community resources."
+      }
+    >
+      <main className={styles.page}>
+        <section className={styles.hero}>
+          <div className="container">
+            <h1 className={styles.title}>{isZh ? "落地页" : "Landing Pages"}</h1>
+            <p className={styles.description}>
+              {isZh
+                ? "查看 HAMi 团队的活动落地页，获取演讲详情与社区资料。"
+                : "See the events and talks the HAMi team is part of, with slides and community resources."}
+            </p>
+            <div className={styles.eventList}>
+              {events.map((e) => (
+                <Link
+                  key={e.slug}
+                  to={`/landing/${e.slug}`}
+                  className={`hami-section-card ${styles.eventCard}`}
+                >
+                  <h3 className={styles.eventTitle}>{pick(locale, e.title)}</h3>
+                  <p className={styles.eventMeta}>
+                    {e.endDate
+                      ? formatDateRange(e.date, e.endDate, locale)
+                      : formatDate(e.date, locale)}
+                    {e.location ? ` - ${pick(locale, e.location)}` : ""}
+                  </p>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}

src/utils/i18n.js

@@ -0,0 +1,7 @@
+export function isChinese(locale) {
+  return locale.startsWith("zh");
+}
+
+export function pick(locale, obj) {
+  return isChinese(locale) && obj.zh ? obj.zh : obj.en;
+}