[feat]: New homepage

.env

@@ -1,5 +1,5 @@
-NEXT_PUBLIC_SITE_NAME=freecodecamp-chengdu.github.io
-NEXT_PUBLIC_SITE_SUMMARY=Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.
+NEXT_PUBLIC_SITE_NAME=fCC 成都社区
+NEXT_PUBLIC_SITE_SUMMARY=fCC 成都社区
 NEXT_PUBLIC_LOGO = https://github.com/FreeCodeCamp-Chengdu.png
 
 NEXT_PUBLIC_SENTRY_DSN =

components/Home/CommunityStats.tsx

@@ -0,0 +1,32 @@
+import { Card, Col, Container, Row } from 'react-bootstrap';
+
+export const CommunityStats = () => (
+  <div className="py-5 bg-white">
+    <Container className="text-center">
+      <h2 className="mb-4 text-dark">社区数据</h2>
+      <div className="d-flex justify-content-center mb-4">
+        <div
+          className="border-bottom border-warning"
+          style={{ width: '60px', borderBottomWidth: '3px !important' }}
+         />
+      </div>
+      <Row className="justify-content-center">
+        {[
+          { number: '1000+', label: '社区成员' },
+          { number: '50+', label: '举办活动' },
+          { number: '200+', label: '技术文章' },
+          { number: '30+', label: '开源项目' },
+        ].map(({ number, label }) => (
+          <Col key={label} xs={12} sm={6} md={3} className="mb-3">
+            <Card className="border-0 shadow-sm p-3">
+              <Card.Body>
+                <h3 className="fw-bold text-dark">{number}</h3>
+                <p className="mb-0 text-dark">{label}</p>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </Container>
+  </div>
+);

components/Home/LatestBlogs.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import { FC } from 'react';
+import { Button, Card, Col, Container, Row } from 'react-bootstrap';
+
+import { ArticleMeta } from '../../pages/api/core';
+
+interface LatestBlogsProps {
+  articles: ArticleMeta[];
+}
+
+export const LatestBlogs: FC<LatestBlogsProps> = ({ articles }) => (
+  <div className="py-5">
+    <Container>
+      <h2 className="text-center mb-4 text-dark">最新博客文章</h2>
+      <div className="d-flex justify-content-center mb-4">
+        <div
+          className="border-bottom border-warning"
+          style={{ width: '60px', borderBottomWidth: '3px !important' }}
+         />
+      </div>
+      <Row className="g-4" xs={1} sm={2} md={3}>
+        {articles.map(({ name, meta, path }) => (
+          <Col key={name}>
+            <Card>
+              <Card.Body>
+                <Card.Title className="text-dark">{name}</Card.Title>
+                <Card.Text className="text-dark">
+                  发布日期: {meta?.date || '未知日期'}
+                </Card.Text>
+                <Link href={path || '#'} className="btn btn-secondary">
+                  阅读文章
+                </Link>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      <div className="text-center mt-4">
+        <Button variant="outline-primary" size="lg" href="/article">
+          查看全部文章 →
+        </Button>
+      </div>
+    </Container>
+  </div>
+);

components/Home/Sponsors.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { Button, Card, Col, Container, Row } from 'react-bootstrap';
+
+import { ArticleMeta } from '../../pages/api/core';
+
+interface SponsorsProps {
+  sponsors: ArticleMeta[];
+}
+
+export const Sponsors: FC<SponsorsProps> = ({ sponsors }) => (
+  <div className="py-5">
+    <Container>
+      <h2 className="text-center mb-4 text-dark">赞助商与合作伙伴</h2>
+      <div className="d-flex justify-content-center mb-4">
+        <div
+          className="border-bottom border-warning"
+          style={{ width: '60px', borderBottomWidth: '3px !important' }}
+         />
+      </div>
+      <Row className="g-4" xs={1} sm={2} md={3}>
+        {sponsors.map(({ name, meta }) => (
+          <Col key={name}>
+            <Card>
+              <Card.Body>
+                <Card.Title className="text-dark">{name}</Card.Title>
+                <Card.Text className="text-dark">
+                  {meta?.description || '暂无描述'}
+                </Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      <div className="text-center mt-4">
+        <Button variant="outline-primary" size="lg" href="/article/Partner">
+          成为赞助商 →
+        </Button>
+      </div>
+    </Container>
+  </div>
+);

components/Home/UpcomingEvents.tsx

@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import { FC } from 'react';
+import { Button, Card, Col, Container, Row } from 'react-bootstrap';
+
+import { ArticleMeta } from '../../pages/api/core';
+
+interface UpcomingEventsProps {
+  events: ArticleMeta[];
+}
+
+export const UpcomingEvents: FC<UpcomingEventsProps> = ({ events }) => (
+  <div className="py-5 bg-white">
+    <Container>
+      <h2 className="text-center mb-4 text-dark">近期活动</h2>
+      <div className="d-flex justify-content-center mb-4">
+        <div
+          className="border-bottom border-warning"
+          style={{ width: '60px', borderBottomWidth: '3px !important' }}
+         />
+      </div>
+      <Row className="g-4" xs={1} sm={2} md={3}>
+        {events.map(({ name, meta, path }) => (
+          <Col key={name}>
+            <Card>
+              <Card.Body>
+                <Card.Title className="text-dark">{name}</Card.Title>
+                <Card.Text className="text-dark">
+                  时间: {meta?.start || 'void 0'}
+                </Card.Text>
+                <Card.Text className="text-dark">
+                  地点: {meta?.address || 'void 0'}
+                </Card.Text>
+
+                <Link href={path || '#'} className="btn btn-primary">
+                  查看详情
+                </Link>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      <div className="text-center mt-4">
+        <Button variant="outline-primary" size="lg" href="/article/Activity">
+          查看全部活动 →
+        </Button>
+      </div>
+    </Container>
+  </div>
+);

components/Navigator/MainNavigator.tsx

@@ -10,7 +10,7 @@ const LanguageMenu = dynamic(import('./LanguageMenu'), { ssr: false });
 const Name = process.env.NEXT_PUBLIC_SITE_NAME || '';
 
 export const MainNavigator: FC = observer(() => (
-  <Navbar bg="primary" variant="dark" fixed="top" expand="sm" collapseOnSelect>
+  <Navbar bg="light" variant="light" fixed="top" expand="sm" collapseOnSelect>
     <Container>
       <Navbar.Brand href="/">{Name}</Navbar.Brand>
 
@@ -20,15 +20,15 @@ export const MainNavigator: FC = observer(() => (
         <Nav className="me-auto">
           <Nav.Link href="/article">{t('article')}</Nav.Link>
 
-          <Nav.Link href="/component">{t('component')}</Nav.Link>
+          <Nav.Link href="/activity">{t('activity')}</Nav.Link>
 
-          <Nav.Link href="/pagination">{t('pagination')}</Nav.Link>
+          <Nav.Link href="/community">{t('community')}</Nav.Link>
 
-          <Nav.Link href="/scroll-list">{t('scroll_list')}</Nav.Link>
+          <Nav.Link href="/about">{t('about')}</Nav.Link>
 
           <Nav.Link
             target="_blank"
-            href="https://github.com/freecodecamp-chengdu/freecodecamp-chengdu.github.io"
+            href="https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io"
           >
             {t('source_code')}
           </Nav.Link>

package.json

@@ -97,5 +97,12 @@
     "test": "lint-staged  &&  npm run lint",
     "pack-image": "docker build -t freecodecamp-chengdu/freecodecamp-chengdu.github.io:latest .",
     "container": "docker rm -f freecodecamp-chengdu.github.io  &&  docker run --name freecodecamp-chengdu.github.io -p 3000:3000 -d freecodecamp-chengdu/freecodecamp-chengdu.github.io:latest"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "@sentry/cli",
+      "core-js",
+      "sharp"
+    ]
   }
 }

pages/_app.tsx

@@ -6,7 +6,7 @@ import { enableStaticRendering, observer } from 'mobx-react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { FC } from 'react';
-import { Image } from 'react-bootstrap';
+import { Container, Image } from 'react-bootstrap';
 
 import { MDXLayout } from '../components/Layout/MDXLayout';
 import { MainNavigator } from '../components/Navigator/MainNavigator';
@@ -39,23 +39,32 @@ const AppShell: FC<AppProps> = observer(({ Component, pageProps, router }) => (
         <Component {...pageProps} />
       </MDXLayout>
     ) : (
-      <div className="mt-5">
+      <div>
         <Component {...pageProps} />
       </div>
     )}
 
-    <footer className="flex-fill d-flex justify-content-center align-items-center border-top py-4">
-      <a
-        className="flex-fill d-flex justify-content-center align-items-center"
-        href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {t('powered_by')}
-        <span className="mx-2">
-          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-        </span>
-      </a>
+    <footer className="section-wrapper border-top py-4">
+      <Container>
+        <div className="d-flex justify-content-center align-items-center">
+          <a
+            className="d-flex justify-content-center align-items-center"
+            href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t('powered_by')}
+            <span className="mx-2">
+              <Image
+                src="/vercel.svg"
+                alt="Vercel Logo"
+                width={72}
+                height={16}
+              />
+            </span>
+          </a>
+        </div>
+      </Container>
     </footer>
   </>
 ));