Implement comprehensive i18n, pagination, and code refactoring based on feedback

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>

Author: Copilot

components/Home/UpcomingEvents.tsx

@@ -1,39 +1,48 @@
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Button, Card, Col, Container, Row } from 'react-bootstrap';
 
+import { I18nContext } from '../../models/Translation';
 import { ArticleMeta } from '../../pages/api/core';
 import { SectionTitle } from './SectionTitle';
 
 interface UpcomingEventsProps {
   events: ArticleMeta[];
 }
 
-export const UpcomingEvents: FC<UpcomingEventsProps> = ({ events }) => (
-  <div className="py-5 bg-white w-100 m-0">
-    <Container>
-      <SectionTitle>近期活动</SectionTitle>
+export const UpcomingEvents: FC<UpcomingEventsProps> = ({ events }) => {
+  const { t } = useContext(I18nContext);
 
-      <Row className="g-4" xs={1} sm={2} md={3}>
-        {events.map(({ name, meta, path }) => (
-          <Col key={name}>
-            <Card body>
-              <Card.Title className="text-dark">{name}</Card.Title>
-              <Card.Text className="text-dark">时间: {meta?.start || 'N/A'}</Card.Text>
-              <Card.Text className="text-dark">地点: {meta?.address || 'N/A'}</Card.Text>
+  return (
+    <div className="py-5 bg-white w-100 m-0">
+      <Container>
+        <SectionTitle>{t('upcoming_events')}</SectionTitle>
 
-              <Link href={path || '#'} className="btn btn-primary">
-                查看详情
-              </Link>
-            </Card>
-          </Col>
-        ))}
-      </Row>
-      <div className="text-center mt-4">
-        <Button variant="outline-primary" size="lg" href="/activity">
-          查看全部活动 →
-        </Button>
-      </div>
-    </Container>
-  </div>
-);
+        <Row className="g-4" xs={1} sm={2} md={3}>
+          {events.map(({ name, meta, path }) => (
+            <Col key={name}>
+              <Card body>
+                <Card.Title className="text-dark">{name}</Card.Title>
+                <Card.Text className="text-dark">
+                  {t('activity_time')}: {meta?.start || 'N/A'}
+                </Card.Text>
+                <Card.Text className="text-dark">
+                  {t('activity_location')}: {meta?.address || 'N/A'}
+                </Card.Text>
+
+                <Link href={path || '#'} className="btn btn-primary">
+                  {t('view_details')}
+                </Link>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+        <div className="text-center mt-4">
+          <Button variant="outline-primary" size="lg" href="/activity">
+            {t('view_all_activities')} →
+          </Button>
+        </div>
+      </Container>
+    </div>
+  );
+};

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.