From 74174bda99f1784030bfaa18f460e4efe255f1f6 Mon Sep 17 00:00:00 2001
From: ethan 3 <iimsyw@gmail.com>
Date: Mon, 24 Feb 2025 07:49:28 +0000
Subject: [PATCH 1/7] library flow

---
 pages/_app.tsx       |  3 +++
 pages/library.mdx    | 35 +++++++++++++++++++++++++++++++++++
 translation/en-US.ts |  3 +++
 translation/zh-CN.ts |  3 +++
 translation/zh-TW.ts |  3 +++
 5 files changed, 47 insertions(+)
 create mode 100644 pages/library.mdx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index b2e8102..b894528 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -45,6 +45,9 @@ const App: FC<AppProps> = observer(({ Component, pageProps }) => {
       href: 'https://github.com/Open-Source-Bazaar/Git-Hackathon-scaffold',
       name: t('hackathon'),
     },
+    {
+      href: '/library', name: t('open_library'),
+    },
   ];
   return (
     <>
diff --git a/pages/library.mdx b/pages/library.mdx
new file mode 100644
index 0000000..57c90da
--- /dev/null
+++ b/pages/library.mdx
@@ -0,0 +1,35 @@
+# 社区图书馆
+
+## 简介
+
+freeCodeCamp 成都社区「Open Library」是一个开放、共享的社区图书馆，旨在促进知识交流，推动社区成员之间的学习和成长,增强社区成员之间的互动与信任。我们深知知识的流动能够点燃创新的火花，因此，我们采用了一种独特的“无储存”借阅模式，让书籍在会员之间自由流转，而非集中存放。
+
+## 申请会员
+
+如果你热爱阅读，愿意分享知识，欢迎填写 <a href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld" target="_blank">fCC 成都社区图书馆-会员申请</a>，加入 freeCodeCamp 成都社区「Open Library」，成为知识流动的一部分！
+
+## 书籍募捐
+
+我们鼓励社区成员捐赠书籍，共同丰富书目资源。捐赠流程如下：
+
+1. **填写捐赠申请**：填写 <a href="https://open-source-bazaar.feishu.cn/share/base/form/shrcncbxU0MpcN7pzG3MLNX0GEd?prefill_%E6%93%8D%E4%BD%9C=%E6%8D%90%E8%B5%A0" target="_blank">fCC 成都社区图书馆-书籍捐赠</a>。
+
+2. **书籍登记**：如所捐赠书籍在「 fCC 成都社区图书馆」还未登记，请先填写 <a href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb" target="_blank">fCC 成都社区图书馆-书籍登记</a>，然后回到第 1 步继续捐赠。建议在移动端设备上登记，方便扫描书籍 ISBN 码。
+
+3. **书籍进入图书馆**：完成以上流程后，书籍正式进入 Open Library 的传递流程，开始流转于社区成员之间。
+
+## 借阅与传递
+
+在 Open Library，所有书籍均来自社区成员的捐赠，并由借阅者直接**传递**给下一位借书人。
+
+借阅流程如下：
+
+1. **查阅书籍**：社区成员可以在 <a href="https://open-source-bazaar.feishu.cn/share/base/view/shrcnvT0Lyk8LKS8KtPbO9HPPHb" target="_blank">fCC 成都社区图书馆</a>中查找自己感兴趣的书籍。
+2. **申请借阅**：填写 <a href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnNiKwb9ApzFFGI3YkCXDdwe?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%85%A5" target="_blank">fCC 成都社区图书馆-书籍借入</a>申请，与当前持书者取得联系。
+3. **线下传递**：双方约定时间和传递方式，通常可用快递传递书籍。请传递者填写 <a href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnuDb3oOuhMjSaXNIHEPA4Ef?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%87%BA" target="_blank">fCC 成都社区图书馆-书籍传递</a>，再将书籍传递出去。
+4. **阅读与分享**：借阅者在阅读完毕后，可以分享自己的阅读感悟，并在社区推荐给下一位感兴趣的成员。
+5. **继续传递**：当有新的借阅者申请时，当前持书人将书籍传递给下一位读者，确保知识的持续流动。
+
+## 未来
+
+期待未来可以与更多开放空间合作，定期举办主题阅读会。
\ No newline at end of file
diff --git a/translation/en-US.ts b/translation/en-US.ts
index abbb596..7e0ac36 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -11,4 +11,7 @@ export default {
   // Search
   keywords: 'Keywords',
   search_results: 'Search Results',
+
+  // Open Library
+  open_library: "Open Library",
 };
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 7baf329..44edfe7 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -11,4 +11,7 @@ export default {
   // Search
   keywords: '关键词',
   search_results: '搜索结果',
+
+  // Open Library
+  open_library: "开源图书馆",
 };
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index 024e7fb..be691cc 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -11,4 +11,7 @@ export default {
   // Search
   keywords: '關鍵詞',
   search_results: '搜尋結果',
+
+  // Open Library
+  open_library: "開源圖書館",
 };

From 07745ad86bc52e9c5ce68a5b83fd84eeacf70fb1 Mon Sep 17 00:00:00 2001
From: dethan3 <iimsyw@gmail.com>
Date: Fri, 18 Apr 2025 16:16:34 +0800
Subject: [PATCH 2/7] [feat] Initial open-library homepage, component & hook
 fix

---
 .husky/pre-commit                             |   2 +-
 components/open-library/Footer.tsx            |  69 ++++
 components/open-library/Navbar.tsx            |  46 +++
 package.json                                  |   3 +-
 pages/_app.tsx                                |   3 +-
 pages/open-library/index.tsx                  | 345 ++++++++++++++++++
 pages/{library.mdx => open-library/readme.md} |   2 +-
 7 files changed, 466 insertions(+), 4 deletions(-)
 create mode 100644 components/open-library/Footer.tsx
 create mode 100644 components/open-library/Navbar.tsx
 create mode 100644 pages/open-library/index.tsx
 rename pages/{library.mdx => open-library/readme.md} (99%)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 255814b..98475b5 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1 @@
-npm test
+pnpm test
diff --git a/components/open-library/Footer.tsx b/components/open-library/Footer.tsx
new file mode 100644
index 0000000..124e088
--- /dev/null
+++ b/components/open-library/Footer.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Container, Row, Col, Nav } from 'react-bootstrap';
+
+const FooterComponent = () => {
+  return (
+    <footer className="bg-dark text-light py-4 mt-5">
+      <Container>
+        <Row>
+          <Col md={4} className="mb-3 mb-md-0">
+            <h5>Open Library</h5>
+            <p>
+              A community-driven library for sharing knowledge and stories.
+              Built with open source. Powered by generosity.
+            </p>
+          </Col>
+          <Col md={2} className="mb-3 mb-md-0">
+            <h5>Quick Links</h5>
+            <Nav className="flex-column">
+              <Nav.Link href="#home" className="text-light px-0">
+                Home
+              </Nav.Link>
+              <Nav.Link href="#catalog" className="text-light px-0">
+                Catalog
+              </Nav.Link>
+              <Nav.Link href="#about" className="text-light px-0">
+                About Us
+              </Nav.Link>
+              <Nav.Link href="#donate" className="text-light px-0">
+                Donate
+              </Nav.Link>
+            </Nav>
+          </Col>
+          <Col md={3} className="mb-3 mb-md-0">
+            <h5>Contact</h5>
+            <p className="mb-1">Email: info@openlibrary.community</p>
+            <p>Address: 123 Library Lane, Knowledge City, World</p>
+          </Col>
+          <Col md={3}>
+            <h5>Follow Us</h5>
+            <div>
+              <a href="#facebook" className="text-light me-3">
+                Facebook
+              </a>
+              <a href="#twitter" className="text-light me-3">
+                Twitter
+              </a>
+              <a href="#instagram" className="text-light me-3">
+                Instagram
+              </a>
+              <a href="#linkedin" className="text-light">
+                Linkedin
+              </a>
+            </div>
+          </Col>
+        </Row>
+        <Row className="mt-3">
+          <Col className="text-center text-muted">
+            <small>
+              &copy; {new Date().getFullYear()} Open Library Community. All
+              Rights Reserved.
+            </small>
+          </Col>
+        </Row>
+      </Container>
+    </footer>
+  );
+};
+
+export default FooterComponent;
diff --git a/components/open-library/Navbar.tsx b/components/open-library/Navbar.tsx
new file mode 100644
index 0000000..28767c5
--- /dev/null
+++ b/components/open-library/Navbar.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Navbar,
+  Nav,
+  Container,
+  Button,
+  Form,
+  FormControl,
+} from 'react-bootstrap';
+
+const NavbarComponent = () => {
+  return (
+    <Navbar bg="light" expand="lg" sticky="top" className="mb-4 shadow-sm">
+      <Container fluid>
+        <Navbar.Brand href="#home" className="d-flex align-items-center">
+          Open Library
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#catalog">Catalog</Nav.Link>
+            <Nav.Link href="#about">About</Nav.Link>
+            <Nav.Link href="#donate">Donate</Nav.Link>
+            <Nav.Link href="#how-to-borrow">How to Borrow</Nav.Link>
+            <Nav.Link href="#review">Review</Nav.Link>
+          </Nav>
+          <Form className="d-flex">
+            <FormControl
+              type="search"
+              placeholder="Search Books..."
+              className="me-2"
+              aria-label="Search"
+            />
+            <Button variant="outline-success">Search</Button>
+          </Form>
+          <Button variant="primary" className="ms-lg-2 mt-2 mt-lg-0">
+            Login/Register
+          </Button>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default NavbarComponent;
diff --git a/package.json b/package.json
index 2e2cd5e..d3c513d 100644
--- a/package.json
+++ b/package.json
@@ -81,5 +81,6 @@
   },
   "lint-staged": {
     "*.{html,md,scss,json,yml,js,mjs,ts,tsx}": "prettier --write"
-  }
+  },
+  "packageManager": "pnpm@10.8.1+sha512.c50088ba998c67b8ca8c99df8a5e02fd2ae2e2b29aaf238feaa9e124248d3f48f9fb6db2424949ff901cffbb5e0f0cc1ad6aedb602cd29450751d11c35023677"
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b894528..6818a20 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -46,7 +46,8 @@ const App: FC<AppProps> = observer(({ Component, pageProps }) => {
       name: t('hackathon'),
     },
     {
-      href: '/library', name: t('open_library'),
+      href: '/open-library',
+      name: t('open_library'),
     },
   ];
   return (
diff --git a/pages/open-library/index.tsx b/pages/open-library/index.tsx
new file mode 100644
index 0000000..ef893f5
--- /dev/null
+++ b/pages/open-library/index.tsx
@@ -0,0 +1,345 @@
+import React from 'react';
+import Link from 'next/link';
+import {
+  Container,
+  Row,
+  Col,
+  Button,
+  Card,
+  Form,
+  Image,
+  Stack,
+} from 'react-bootstrap';
+import NavbarComponent from '../../components/open-library/Navbar';
+import FooterComponent from '../../components/open-library/Footer';
+
+// TODO: Define a type for Book and Testimonial
+type Book = {
+  id: number;
+  title: string;
+  author: string;
+  cover?: string; // Optional cover image URL
+};
+
+type Testimonial = {
+  id: number;
+  name: string;
+  quote: string;
+};
+
+export default function OpenLibraryHomepage() {
+  // Sample featured books data
+  const featuredBooks: Book[] = [
+    {
+      id: 1,
+      title: 'Clean Code',
+      author: 'Robert C. Martin',
+      cover: '/images/placeholder-book.svg',
+    }, // TODO: Replace placeholder path
+    {
+      id: 2,
+      title: 'Eloquent JavaScript',
+      author: 'Marijn Haverbeke',
+      cover: '/images/placeholder-book.svg',
+    },
+    {
+      id: 3,
+      title: 'Design Patterns',
+      author: 'Erich Gamma et al.',
+      cover: '/images/placeholder-book.svg',
+    },
+    {
+      id: 4,
+      title: "You Don't Know JS",
+      author: 'Kyle Simpson',
+      cover: '/images/placeholder-book.svg',
+    },
+  ];
+
+  // Sample testimonials data
+  const testimonials: Testimonial[] = [
+    {
+      id: 1,
+      name: 'Zhang Wei',
+      quote:
+        "Open Library helped me discover amazing tech books I couldn't find elsewhere.",
+    },
+    {
+      id: 2,
+      name: 'Li Mei',
+      quote:
+        "The community is so supportive. I've both borrowed and donated books here.",
+    },
+    {
+      id: 3,
+      name: 'Wang Chen',
+      quote:
+        'As a student, this resource has been invaluable for my studies in computer science.',
+    },
+  ];
+
+  return (
+    <>
+      {/* --- Navbar --- */}
+      <NavbarComponent />
+
+      <main>
+        {/* --- Hero Section --- */}
+        <section
+          className="py-5"
+          style={{
+            background:
+              'linear-gradient(to right, var(--bs-success-bg-subtle), var(--bs-teal-bg-subtle))',
+          }}
+        >
+          <Container>
+            <Row className="align-items-center">
+              <Col md={7}>
+                <h1 className="display-5 fw-bold mb-4">
+                  Free knowledge flows here
+                </h1>
+                <p className="lead mb-4">
+                  Share and borrow books in our open-source community. Join
+                  freeCodeCamp Chengdu's initiative to make learning accessible
+                  to everyone.
+                </p>
+                {/* TODO: Link this button to the actual Feishu form or member sign-up page */}
+                <Button variant="success" size="lg">
+                  Become a Member
+                </Button>
+              </Col>
+              <Col md={5} className="mt-4 mt-md-0 text-center">
+                {/* TODO: Replace placeholder */}
+                <Image
+                  src="/images/placeholder-hero.svg"
+                  alt="People sharing books"
+                  fluid
+                  rounded
+                  className="shadow-sm"
+                />
+              </Col>
+            </Row>
+          </Container>
+        </section>
+
+        {/* --- Featured Books Section --- */}
+        <section className="py-5 bg-light">
+          <Container>
+            <h2 className="text-center fw-bold mb-2 h1">Featured Books</h2>
+            <p className="text-center text-muted mb-5">
+              Discover what our community is reading right now
+            </p>
+            <Row xs={1} sm={2} md={4} className="g-4 justify-content-center">
+              {featuredBooks.map(book => (
+                // TODO: Potentially move Card rendering to components/open-library/BookCard.tsx
+                <Col key={book.id}>
+                  <Card className="h-100 shadow-sm border-0">
+                    <div className="text-center p-4">
+                      <Image
+                        src={book.cover || '/images/placeholder-book.svg'} // Default placeholder if cover is missing
+                        alt={`${book.title} cover`}
+                        style={{
+                          height: '200px',
+                          width: 'auto',
+                          objectFit: 'contain',
+                        }}
+                      />
+                    </div>
+                    <Card.Body className="text-center d-flex flex-column">
+                      <Card.Title className="fw-bold h5 mb-1">
+                        {book.title}
+                      </Card.Title>
+                      <Card.Text className="text-muted mb-3">
+                        {book.author}
+                      </Card.Text>
+                      <div className="mt-auto">
+                        <Link
+                          href={`/open-library/book/${book.id}`}
+                          passHref
+                          legacyBehavior
+                        >
+                          <Button variant="outline-success" as="a">
+                            View Details
+                          </Button>
+                        </Link>
+                      </div>
+                    </Card.Body>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+            <div className="text-center mt-5">
+              <Link href="/open-library/books" passHref legacyBehavior>
+                <Button
+                  variant="link"
+                  className="text-success text-decoration-none"
+                >
+                  Browse All Books →
+                </Button>
+              </Link>
+            </div>
+          </Container>
+        </section>
+
+        {/* --- Donation Callout Section --- */}
+        <section className="py-5 bg-warning-subtle">
+          <Container>
+            <Row className="align-items-center">
+              <Col md={7}>
+                <h2 className="fw-bold mb-4 h1">Share Your Knowledge</h2>
+                <p className="lead mb-4">
+                  Have books collecting dust on your shelf? Donate them to our
+                  community and help others learn and grow. Your contribution
+                  makes a difference!
+                </p>
+                <Link href="/open-library/donate" passHref legacyBehavior>
+                  <Button variant="warning">Donate a Book</Button>
+                </Link>
+              </Col>
+              <Col md={5} className="mt-4 mt-md-0 text-center">
+                {/* TODO: Replace placeholder */}
+                <Image
+                  src="/images/placeholder-donate.svg"
+                  alt="Book donation"
+                  fluid
+                  rounded
+                  className="shadow-sm"
+                />
+              </Col>
+            </Row>
+          </Container>
+        </section>
+
+        {/* --- How It Works Section --- */}
+        <section className="py-5">
+          <Container>
+            <h2 className="text-center fw-bold mb-2 h1">How It Works</h2>
+            <p className="text-center text-muted mb-5">
+              Three simple steps to borrow books from our community
+            </p>
+            <Row className="text-center g-4">
+              <Col md={4}>
+                <div className="mb-3">
+                  <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
+                </div>
+                <h3 className="fw-bold h4 mb-2">1. Find a Book</h3>
+                <p className="text-muted px-md-3">
+                  Browse our collection and find the book that interests you.
+                  Filter by category, author, or popularity.
+                </p>
+              </Col>
+              <Col md={4}>
+                <div className="mb-3">
+                  <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
+                </div>
+                <h3 className="fw-bold h4 mb-2">2. Apply to Borrow</h3>
+                <p className="text-muted px-md-3">
+                  Submit a simple request form. We'll connect you with the book
+                  owner and arrange the handover.
+                </p>
+              </Col>
+              <Col md={4}>
+                <div className="mb-3">
+                  <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
+                </div>
+                <h3 className="fw-bold h4 mb-2">3. Receive and Pass It On</h3>
+                <p className="text-muted px-md-3">
+                  Enjoy your book and return it when you're done. Consider
+                  donating your own books to keep knowledge flowing.
+                </p>
+              </Col>
+            </Row>
+            <div className="text-center mt-5">
+              <Link href="/open-library/how-to-borrow" passHref legacyBehavior>
+                <Button
+                  variant="link"
+                  className="text-success text-decoration-none"
+                >
+                  Learn More About Borrowing →
+                </Button>
+              </Link>
+            </div>
+          </Container>
+        </section>
+
+        {/* --- Testimonials Section --- */}
+        <section className="py-5 bg-light">
+          <Container>
+            <h2 className="text-center fw-bold mb-2 h1">Community Voices</h2>
+            <p className="text-center text-muted mb-5">
+              What our members say about Open Library
+            </p>
+            <Row xs={1} md={3} className="g-4">
+              {testimonials.map(testimonial => (
+                <Col key={testimonial.id}>
+                  <Card className="h-100 shadow-sm border-0">
+                    <Card.Body>
+                      <blockquote className="blockquote mb-0">
+                        <p className="fst-italic"> "{testimonial.quote}" </p>
+                        <footer className="blockquote-footer mt-2">
+                          {testimonial.name}
+                        </footer>
+                      </blockquote>
+                    </Card.Body>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+            <div className="text-center mt-5">
+              <Link href="/open-library/review" passHref legacyBehavior>
+                <Button
+                  variant="link"
+                  className="text-success text-decoration-none"
+                >
+                  Read More Reviews →
+                </Button>
+              </Link>
+            </div>
+          </Container>
+        </section>
+
+        {/* --- Newsletter Section --- */}
+        <section className="py-5">
+          <Container>
+            <Row className="justify-content-center">
+              <Col lg={6}>
+                <Card className="shadow-sm border-0">
+                  <Card.Body className="p-4 p-md-5 text-center">
+                    <h3 className="fw-bold mb-2 h2">Stay Updated</h3>
+                    <p className="text-muted mb-4">
+                      Subscribe to our newsletter for new book arrivals and
+                      community events.
+                    </p>
+                    {/* TODO: Implement actual newsletter subscription logic */}
+                    <Form onSubmit={e => e.preventDefault()}>
+                      {' '}
+                      {/* Prevent default form submission */}
+                      <Stack
+                        direction="horizontal"
+                        gap={2}
+                        className="mx-auto"
+                        style={{ maxWidth: '400px' }}
+                      >
+                        <Form.Control
+                          type="email"
+                          placeholder="Your email address"
+                          required
+                        />
+                        <Button variant="success" type="submit">
+                          Subscribe
+                        </Button>
+                      </Stack>
+                    </Form>
+                  </Card.Body>
+                </Card>
+              </Col>
+            </Row>
+          </Container>
+        </section>
+      </main>
+
+      {/* --- Footer --- */}
+      <FooterComponent />
+    </>
+  );
+}
diff --git a/pages/library.mdx b/pages/open-library/readme.md
similarity index 99%
rename from pages/library.mdx
rename to pages/open-library/readme.md
index 57c90da..b9d7c47 100644
--- a/pages/library.mdx
+++ b/pages/open-library/readme.md
@@ -32,4 +32,4 @@ freeCodeCamp 成都社区「Open Library」是一个开放、共享的社区图
 
 ## 未来
 
-期待未来可以与更多开放空间合作，定期举办主题阅读会。
\ No newline at end of file
+期待未来可以与更多开放空间合作，定期举办主题阅读会。

From e10b0b1f5259722d1416132eefa73b4d6b683c6e Mon Sep 17 00:00:00 2001
From: dethan3 <iimsyw@gmail.com>
Date: Thu, 24 Apr 2025 12:57:24 +0800
Subject: [PATCH 3/7] feat: customize Open Library layout and styling

---
 components/open-library/Footer.tsx |  25 +++-
 components/open-library/Layout.tsx |  60 +++++++++
 components/open-library/Navbar.tsx |  36 +++--
 pages/_app.tsx                     | 126 +++++++++--------
 pages/open-library/index.tsx       | 208 ++++++++++++++++++++++++-----
 5 files changed, 352 insertions(+), 103 deletions(-)
 create mode 100644 components/open-library/Layout.tsx

diff --git a/components/open-library/Footer.tsx b/components/open-library/Footer.tsx
index 124e088..cde0a5f 100644
--- a/components/open-library/Footer.tsx
+++ b/components/open-library/Footer.tsx
@@ -1,10 +1,29 @@
 import React from 'react';
-import { Container, Row, Col, Nav } from 'react-bootstrap';
+import { Row, Col, Nav } from 'react-bootstrap';
+
+//
+const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <div
+      style={{
+        maxWidth: '1200px',
+        margin: '0 auto',
+        padding: '0 20px',
+        width: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
 
 const FooterComponent = () => {
   return (
     <footer className="bg-dark text-light py-4 mt-5">
-      <Container>
+      <ContentContainer>
         <Row>
           <Col md={4} className="mb-3 mb-md-0">
             <h5>Open Library</h5>
@@ -61,7 +80,7 @@ const FooterComponent = () => {
             </small>
           </Col>
         </Row>
-      </Container>
+      </ContentContainer>
     </footer>
   );
 };
diff --git a/components/open-library/Layout.tsx b/components/open-library/Layout.tsx
new file mode 100644
index 0000000..bace01f
--- /dev/null
+++ b/components/open-library/Layout.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Head from 'next/head';
+import NavbarComponent from './Navbar';
+import FooterComponent from './Footer';
+
+// 内容容器组件，使内容居中但不添加边框
+const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <div
+      style={{
+        maxWidth: '1200px',
+        margin: '0 auto',
+        padding: '0 20px',
+        width: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title?: string;
+}
+
+/**
+ * Open Library 的共享布局组件
+ * 包含导航栏、页脚和内容容器
+ * 所有 Open Library 页面都应使用此布局
+ */
+const Layout: React.FC<LayoutProps> = ({
+  children,
+  title = 'Open Library - Open Source Bazaar',
+}) => {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      {/* 导航栏 */}
+      <NavbarComponent />
+
+      {/* 主要内容 */}
+      <main>{children}</main>
+
+      {/* 页脚 */}
+      <FooterComponent />
+    </>
+  );
+};
+
+// 导出布局组件和内容容器组件，以便在页面中使用
+export { Layout, ContentContainer };
+export default Layout;
diff --git a/components/open-library/Navbar.tsx b/components/open-library/Navbar.tsx
index 28767c5..8e40419 100644
--- a/components/open-library/Navbar.tsx
+++ b/components/open-library/Navbar.tsx
@@ -11,19 +11,37 @@ import {
 const NavbarComponent = () => {
   return (
     <Navbar bg="light" expand="lg" sticky="top" className="mb-4 shadow-sm">
-      <Container fluid>
-        <Navbar.Brand href="#home" className="d-flex align-items-center">
+      {/* 使用自定义的居中容器替代 Container fluid，与页面内容保持一致的宽度和居中效果 */}
+      <div
+        style={{
+          maxWidth: '1200px',
+          margin: '0 auto',
+          padding: '0 20px',
+          width: '100%',
+          boxSizing: 'border-box',
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Navbar.Brand
+          href="/open-library"
+          className="d-flex align-items-center"
+        >
           Open Library
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="me-auto">
-            <Nav.Link href="#home">Home</Nav.Link>
-            <Nav.Link href="#catalog">Catalog</Nav.Link>
-            <Nav.Link href="#about">About</Nav.Link>
-            <Nav.Link href="#donate">Donate</Nav.Link>
-            <Nav.Link href="#how-to-borrow">How to Borrow</Nav.Link>
-            <Nav.Link href="#review">Review</Nav.Link>
+            <Nav.Link href="/open-library">Home</Nav.Link>
+            <Nav.Link href="/open-library/books">Catalog</Nav.Link>
+            <Nav.Link href="/open-library/about">About</Nav.Link>
+            <Nav.Link href="/open-library/donate">Donate</Nav.Link>
+            <Nav.Link href="/open-library/how-to-borrow">
+              How to Borrow
+            </Nav.Link>
+            <Nav.Link href="/open-library/review">Review</Nav.Link>
           </Nav>
           <Form className="d-flex">
             <FormControl
@@ -38,7 +56,7 @@ const NavbarComponent = () => {
             Login/Register
           </Button>
         </Navbar.Collapse>
-      </Container>
+      </div>
     </Navbar>
   );
 };
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6818a20..99c7009 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -35,6 +35,9 @@ const App: FC<AppProps> = observer(({ Component, pageProps }) => {
   const { pathname } = useRouter();
   const thisFullYear = new Date().getFullYear();
 
+  // 检查是否是 Open Library 路径
+  const isOpenLibraryPath = pathname.startsWith('/open-library');
+
   const topNavBarMenu = [
     { href: '/about', name: t('about') },
     { href: '/history', name: t('history') },
@@ -59,62 +62,75 @@ const App: FC<AppProps> = observer(({ Component, pageProps }) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Navbar bg="dark" variant="dark" fixed="top" expand="lg">
-        <Container>
-          <Navbar.Brand href="/" className="fw-bolder">
-            {t('open_source_bazaar')}
-          </Navbar.Brand>
-          <Navbar.Toggle aria-controls="navbarScroll" />
-          <Navbar.Collapse id="navbarScroll">
-            <Nav className="me-auto my-2 my-lg-0" navbarScroll>
-              {topNavBarMenu.map(({ href, name }) => (
-                <Nav.Link
-                  key={`${href}-${name}`}
-                  href={href}
-                  className={
-                    pathname === `${href}` ? 'fw-bolder text-light' : ''
-                  }
-                >
-                  {name}
-                </Nav.Link>
-              ))}
-            </Nav>
-
-            <LanguageMenu />
-          </Navbar.Collapse>
-        </Container>
-      </Navbar>
-
-      <div className="mt-5 pt-2">
-        <PageContent>
-          <Component {...pageProps} />
-        </PageContent>
-      </div>
-
-      <footer className="mw-100 bg-dark text-white">
-        <p className="text-center my-0 py-3">
-          <span className="pr-3">
-            © 2021{thisFullYear === 2021 ? '' : `-${thisFullYear}`}{' '}
-            {t('open_source_bazaar')}
-          </span>
-          {/* <a
-            className="flex-fill d-flex justify-content-center align-items-center"
-            href="https://vercel.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Powered by
-            <span className="mx-2">
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                width={72}
-                height={16}
-              />
+      {/* 只在非 Open Library 路径显示主站导航栏 */}
+      {!isOpenLibraryPath && (
+        <Navbar bg="dark" variant="dark" fixed="top" expand="lg">
+          <Container>
+            <Navbar.Brand href="/" className="fw-bolder">
+              {t('open_source_bazaar')}
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="navbarScroll" />
+            <Navbar.Collapse id="navbarScroll">
+              <Nav className="me-auto my-2 my-lg-0" navbarScroll>
+                {topNavBarMenu.map(({ href, name }) => (
+                  <Nav.Link
+                    key={`${href}-${name}`}
+                    href={href}
+                    className={
+                      pathname === `${href}` ? 'fw-bolder text-light' : ''
+                    }
+                  >
+                    {name}
+                  </Nav.Link>
+                ))}
+              </Nav>
+
+              <LanguageMenu />
+            </Navbar.Collapse>
+          </Container>
+        </Navbar>
+      )}
+
+      {/* 根据路径决定是否使用 PageContent 包装 */}
+      {isOpenLibraryPath ? (
+        // Open Library 路径直接渲染内容，不使用 PageContent
+        <Component {...pageProps} />
+      ) : (
+        // 其他路径使用原来的 PageContent 包装
+        <div className="mt-5 pt-2">
+          <PageContent>
+            <Component {...pageProps} />
+          </PageContent>
+        </div>
+      )}
+
+      {/* 只在非 Open Library 路径显示主站页脚 */}
+      {!isOpenLibraryPath && (
+        <footer className="mw-100 bg-dark text-white">
+          <p className="text-center my-0 py-3">
+            <span className="pr-3">
+              2021{thisFullYear === 2021 ? '' : `-${thisFullYear}`}{' '}
+              {t('open_source_bazaar')}
             </span>
-          </a> */}
-        </p>
-      </footer>
+            {/* <a
+              className="flex-fill d-flex justify-content-center align-items-center"
+              href="https://vercel.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Powered by
+              <span className="mx-2">
+                <Image
+                  src="/vercel.svg"
+                  alt="Vercel Logo"
+                  width={72}
+                  height={16}
+                />
+              </span>
+            </a> */}
+          </p>
+        </footer>
+      )}
     </>
   );
 });
diff --git a/pages/open-library/index.tsx b/pages/open-library/index.tsx
index ef893f5..91d6bfa 100644
--- a/pages/open-library/index.tsx
+++ b/pages/open-library/index.tsx
@@ -1,17 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Link from 'next/link';
-import {
-  Container,
-  Row,
-  Col,
-  Button,
-  Card,
-  Form,
-  Image,
-  Stack,
-} from 'react-bootstrap';
-import NavbarComponent from '../../components/open-library/Navbar';
-import FooterComponent from '../../components/open-library/Footer';
+import { Row, Col, Button, Card, Form, Image, Stack } from 'react-bootstrap';
+import { Layout, ContentContainer } from '../../components/open-library/Layout';
 
 // TODO: Define a type for Book and Testimonial
 type Book = {
@@ -78,11 +68,160 @@ export default function OpenLibraryHomepage() {
     },
   ];
 
-  return (
-    <>
-      {/* --- Navbar --- */}
-      <NavbarComponent />
+  // Use client-side code to hide the main site header and adjust layout
+  useEffect(() => {
+    // Function to apply style to an element
+    const applyStyle = (
+      element: HTMLElement | null,
+      styles: Partial<CSSStyleDeclaration>,
+    ) => {
+      if (!element) return;
+
+      Object.entries(styles).forEach(([property, value]) => {
+        if (value) {
+          // @ts-ignore: dynamic property assignment
+          element.style[property] = value;
+        }
+      });
+    };
+
+    // Hide the main site header
+    const mainHeader = document.querySelector(
+      'nav.navbar.bg-dark.navbar-dark.fixed-top',
+    );
+    applyStyle(mainHeader as HTMLElement, { display: 'none' });
+
+    // Remove top margin that accommodates the main header
+    const mainContent = document.querySelector('div.mt-5.pt-2');
+    applyStyle(mainContent as HTMLElement, {
+      marginTop: '0',
+      paddingTop: '0',
+      maxWidth: '100%',
+      width: '100%',
+    });
+
+    // Remove background and padding from main content
+    const mainWrapper = document.querySelector(
+      'main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center',
+    );
+    applyStyle(mainWrapper as HTMLElement, {
+      background: 'none',
+      padding: '0',
+      margin: '0',
+      maxWidth: '100%',
+      width: '100%',
+    });
+
+    // Remove container constraints
+    const containers = document.querySelectorAll('.container');
+    containers.forEach(container => {
+      applyStyle(container as HTMLElement, {
+        maxWidth: '100%',
+        padding: '0',
+        margin: '0',
+      });
+    });
+
+    // Remove card styling
+    const cards = document.querySelectorAll('.card');
+    cards.forEach(card => {
+      if (
+        card.closest(
+          'main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center',
+        )
+      ) {
+        applyStyle(card as HTMLElement, {
+          background: 'transparent',
+          border: 'none',
+          boxShadow: 'none',
+          padding: '0',
+          margin: '0',
+        });
+      }
+    });
+
+    // Remove card body padding
+    const cardBodies = document.querySelectorAll('.card-body');
+    cardBodies.forEach(cardBody => {
+      if (
+        cardBody.closest(
+          'main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center',
+        )
+      ) {
+        applyStyle(cardBody as HTMLElement, {
+          padding: '0',
+        });
+      }
+    });
 
+    // Hide the main site footer
+    const mainFooter = document.querySelector(
+      'footer.mw-100.bg-dark.text-white',
+    );
+    applyStyle(mainFooter as HTMLElement, { display: 'none' });
+
+    // Remove all padding and margin from body and html
+    applyStyle(document.body, {
+      margin: '0',
+      padding: '0',
+      overflow: 'auto',
+    });
+
+    applyStyle(document.documentElement, {
+      margin: '0',
+      padding: '0',
+      overflow: 'auto',
+    });
+
+    // Target the MDXProvider wrapper (main white background)
+    const mdxProvider = document.querySelector(`.MDXProvider`);
+    applyStyle(mdxProvider as HTMLElement, {
+      padding: '0 !important',
+      margin: '0 !important',
+      background: 'transparent !important',
+      border: 'none !important',
+      boxShadow: 'none !important',
+    });
+
+    // Add custom styles to ensure full width
+    const style = document.createElement('style');
+    style.textContent = `
+      body, html {
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow-x: hidden !important;
+      }
+      .container, .container-fluid {
+        max-width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+      main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center {
+        padding: 0 !important;
+        margin: 0 !important;
+        max-width: 100% !important;
+        width: 100% !important;
+      }
+      main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center > .container {
+        max-width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
+      }
+      .MDXProvider {
+        padding: 0 !important;
+        margin: 0 !important;
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+
+  return (
+    <Layout title="Open Library - Free knowledge flows here">
       <main>
         {/* --- Hero Section --- */}
         <section
@@ -92,7 +231,7 @@ export default function OpenLibraryHomepage() {
               'linear-gradient(to right, var(--bs-success-bg-subtle), var(--bs-teal-bg-subtle))',
           }}
         >
-          <Container>
+          <ContentContainer>
             <Row className="align-items-center">
               <Col md={7}>
                 <h1 className="display-5 fw-bold mb-4">
@@ -119,12 +258,12 @@ export default function OpenLibraryHomepage() {
                 />
               </Col>
             </Row>
-          </Container>
+          </ContentContainer>
         </section>
 
         {/* --- Featured Books Section --- */}
         <section className="py-5 bg-light">
-          <Container>
+          <ContentContainer>
             <h2 className="text-center fw-bold mb-2 h1">Featured Books</h2>
             <p className="text-center text-muted mb-5">
               Discover what our community is reading right now
@@ -174,16 +313,16 @@ export default function OpenLibraryHomepage() {
                   variant="link"
                   className="text-success text-decoration-none"
                 >
-                  Browse All Books →
+                  Browse All Books
                 </Button>
               </Link>
             </div>
-          </Container>
+          </ContentContainer>
         </section>
 
         {/* --- Donation Callout Section --- */}
         <section className="py-5 bg-warning-subtle">
-          <Container>
+          <ContentContainer>
             <Row className="align-items-center">
               <Col md={7}>
                 <h2 className="fw-bold mb-4 h1">Share Your Knowledge</h2>
@@ -207,12 +346,12 @@ export default function OpenLibraryHomepage() {
                 />
               </Col>
             </Row>
-          </Container>
+          </ContentContainer>
         </section>
 
         {/* --- How It Works Section --- */}
         <section className="py-5">
-          <Container>
+          <ContentContainer>
             <h2 className="text-center fw-bold mb-2 h1">How It Works</h2>
             <p className="text-center text-muted mb-5">
               Three simple steps to borrow books from our community
@@ -255,16 +394,16 @@ export default function OpenLibraryHomepage() {
                   variant="link"
                   className="text-success text-decoration-none"
                 >
-                  Learn More About Borrowing →
+                  Learn More About Borrowing
                 </Button>
               </Link>
             </div>
-          </Container>
+          </ContentContainer>
         </section>
 
         {/* --- Testimonials Section --- */}
         <section className="py-5 bg-light">
-          <Container>
+          <ContentContainer>
             <h2 className="text-center fw-bold mb-2 h1">Community Voices</h2>
             <p className="text-center text-muted mb-5">
               What our members say about Open Library
@@ -291,16 +430,16 @@ export default function OpenLibraryHomepage() {
                   variant="link"
                   className="text-success text-decoration-none"
                 >
-                  Read More Reviews →
+                  Read More Reviews
                 </Button>
               </Link>
             </div>
-          </Container>
+          </ContentContainer>
         </section>
 
         {/* --- Newsletter Section --- */}
         <section className="py-5">
-          <Container>
+          <ContentContainer>
             <Row className="justify-content-center">
               <Col lg={6}>
                 <Card className="shadow-sm border-0">
@@ -334,12 +473,9 @@ export default function OpenLibraryHomepage() {
                 </Card>
               </Col>
             </Row>
-          </Container>
+          </ContentContainer>
         </section>
       </main>
-
-      {/* --- Footer --- */}
-      <FooterComponent />
-    </>
+    </Layout>
   );
 }

From 69dbf8b67af1c783a8ff0cc1bdb724648dca1d3e Mon Sep 17 00:00:00 2001
From: dethan3 <iimsyw@gmail.com>
Date: Thu, 24 Apr 2025 13:38:45 +0800
Subject: [PATCH 4/7] fix: resolve import sorting and TS annotation issues

---
 components/open-library/Footer.tsx | 2 +-
 components/open-library/Layout.tsx | 7 ++++---
 components/open-library/Navbar.tsx | 9 +--------
 pages/open-library/index.tsx       | 9 +++++----
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/components/open-library/Footer.tsx b/components/open-library/Footer.tsx
index cde0a5f..d9acd09 100644
--- a/components/open-library/Footer.tsx
+++ b/components/open-library/Footer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col, Nav } from 'react-bootstrap';
+import { Col, Nav, Row } from 'react-bootstrap';
 
 //
 const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
diff --git a/components/open-library/Layout.tsx b/components/open-library/Layout.tsx
index bace01f..2f4def9 100644
--- a/components/open-library/Layout.tsx
+++ b/components/open-library/Layout.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
 import Head from 'next/head';
-import NavbarComponent from './Navbar';
+import React from 'react';
+
 import FooterComponent from './Footer';
+import NavbarComponent from './Navbar';
 
 // 内容容器组件，使内容居中但不添加边框
 const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
@@ -56,5 +57,5 @@ const Layout: React.FC<LayoutProps> = ({
 };
 
 // 导出布局组件和内容容器组件，以便在页面中使用
-export { Layout, ContentContainer };
 export default Layout;
+export { ContentContainer, Layout };
diff --git a/components/open-library/Navbar.tsx b/components/open-library/Navbar.tsx
index 8e40419..a71ac23 100644
--- a/components/open-library/Navbar.tsx
+++ b/components/open-library/Navbar.tsx
@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Navbar,
-  Nav,
-  Container,
-  Button,
-  Form,
-  FormControl,
-} from 'react-bootstrap';
+import { Button, Form, FormControl, Nav, Navbar } from 'react-bootstrap';
 
 const NavbarComponent = () => {
   return (
diff --git a/pages/open-library/index.tsx b/pages/open-library/index.tsx
index 91d6bfa..074b5e7 100644
--- a/pages/open-library/index.tsx
+++ b/pages/open-library/index.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
 import Link from 'next/link';
-import { Row, Col, Button, Card, Form, Image, Stack } from 'react-bootstrap';
-import { Layout, ContentContainer } from '../../components/open-library/Layout';
+import React, { useEffect } from 'react';
+import { Button, Card, Col, Form, Image, Row, Stack } from 'react-bootstrap';
+
+import { ContentContainer, Layout } from '../../components/open-library/Layout';
 
 // TODO: Define a type for Book and Testimonial
 type Book = {
@@ -79,7 +80,7 @@ export default function OpenLibraryHomepage() {
 
       Object.entries(styles).forEach(([property, value]) => {
         if (value) {
-          // @ts-ignore: dynamic property assignment
+          // @ts-expect-error: dynamic property assignment
           element.style[property] = value;
         }
       });

From a72c2eee8578d4200caaae0bc51e79d08120dba8 Mon Sep 17 00:00:00 2001
From: dethan3 <iimsyw@gmail.com>
Date: Fri, 25 Apr 2025 14:18:41 +0800
Subject: [PATCH 5/7] feat: implement Open Library basic framework with
 multilingual support

---
 .husky/pre-push                               |   2 +-
 components/open-library/Footer.tsx            | 120 +++--
 components/open-library/Layout.tsx            |  13 +-
 components/open-library/Navbar.tsx            |  48 +-
 .../open-library/useOpenLibraryLayout.ts      |  20 +
 pages/_app.tsx                                |   1 +
 pages/api/hello.ts                            |  10 +-
 pages/open-library/about.tsx                  | 201 ++++++++
 pages/open-library/book/[id].tsx              | 453 ++++++++++++++++++
 pages/open-library/books/index.tsx            | 318 ++++++++++++
 pages/open-library/donate.tsx                 | 254 ++++++++++
 pages/open-library/how-to-borrow.tsx          | 294 ++++++++++++
 pages/open-library/index.tsx                  | 241 ++--------
 pages/open-library/review.tsx                 | 372 ++++++++++++++
 styles/open-library.css                       |  65 +++
 translation/en-US.ts                          | 149 +++++-
 translation/zh-CN.ts                          | 146 +++++-
 translation/zh-TW.ts                          | 145 +++++-
 18 files changed, 2570 insertions(+), 282 deletions(-)
 create mode 100644 components/open-library/useOpenLibraryLayout.ts
 create mode 100644 pages/open-library/about.tsx
 create mode 100644 pages/open-library/book/[id].tsx
 create mode 100644 pages/open-library/books/index.tsx
 create mode 100644 pages/open-library/donate.tsx
 create mode 100644 pages/open-library/how-to-borrow.tsx
 create mode 100644 pages/open-library/review.tsx
 create mode 100644 styles/open-library.css

diff --git a/.husky/pre-push b/.husky/pre-push
index da7be55..0c958d2 100644
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -1 +1 @@
-npm run build
+pnpm run build
diff --git a/components/open-library/Footer.tsx b/components/open-library/Footer.tsx
index d9acd09..c17b219 100644
--- a/components/open-library/Footer.tsx
+++ b/components/open-library/Footer.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Col, Nav, Row } from 'react-bootstrap';
 
+import { t } from '../../models/Translation';
+
 //
 const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -21,65 +23,95 @@ const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
 };
 
 const FooterComponent = () => {
+  // Use client-side rendering for the copyright text to avoid hydration issues
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   return (
     <footer className="bg-dark text-light py-4 mt-5">
       <ContentContainer>
         <Row>
           <Col md={4} className="mb-3 mb-md-0">
-            <h5>Open Library</h5>
-            <p>
-              A community-driven library for sharing knowledge and stories.
-              Built with open source. Powered by generosity.
-            </p>
-          </Col>
-          <Col md={2} className="mb-3 mb-md-0">
-            <h5>Quick Links</h5>
-            <Nav className="flex-column">
-              <Nav.Link href="#home" className="text-light px-0">
-                Home
-              </Nav.Link>
-              <Nav.Link href="#catalog" className="text-light px-0">
-                Catalog
-              </Nav.Link>
-              <Nav.Link href="#about" className="text-light px-0">
-                About Us
-              </Nav.Link>
-              <Nav.Link href="#donate" className="text-light px-0">
-                Donate
-              </Nav.Link>
-            </Nav>
-          </Col>
-          <Col md={3} className="mb-3 mb-md-0">
-            <h5>Contact</h5>
-            <p className="mb-1">Email: info@openlibrary.community</p>
-            <p>Address: 123 Library Lane, Knowledge City, World</p>
-          </Col>
-          <Col md={3}>
-            <h5>Follow Us</h5>
-            <div>
-              <a href="#facebook" className="text-light me-3">
-                Facebook
+            <h5>{t('open_library')}</h5>
+            <p>{t('footer_description')}</p>
+            <div className="mt-2">
+              <a href="#github" className="text-light me-3">
+                GitHub
               </a>
               <a href="#twitter" className="text-light me-3">
                 Twitter
               </a>
-              <a href="#instagram" className="text-light me-3">
-                Instagram
+              <a href="#feishu" className="text-light me-3">
+                Feishu
               </a>
-              <a href="#linkedin" className="text-light">
-                Linkedin
+              <a href="#instagram" className="text-light">
+                Instagram
               </a>
             </div>
           </Col>
-        </Row>
-        <Row className="mt-3">
-          <Col className="text-center text-muted">
-            <small>
-              &copy; {new Date().getFullYear()} Open Library Community. All
-              Rights Reserved.
-            </small>
+          <Col md={3} className="mb-3 mb-md-0">
+            <h5>{t('quick_links_footer')}</h5>
+            <Nav className="flex-column">
+              <Nav.Link href="/open-library/books" className="text-light px-0">
+                {t('catalog_footer')}
+              </Nav.Link>
+              <Nav.Link href="/open-library/donate" className="text-light px-0">
+                {t('donate_footer')}
+              </Nav.Link>
+              <Nav.Link
+                href="/open-library/how-to-borrow"
+                className="text-light px-0"
+              >
+                {t('how_to_borrow')}
+              </Nav.Link>
+              <Nav.Link href="/open-library/about" className="text-light px-0">
+                {t('about_us_footer')}
+              </Nav.Link>
+              <Nav.Link href="/open-library/faq" className="text-light px-0">
+                {t('faq')}
+              </Nav.Link>
+            </Nav>
+          </Col>
+          <Col md={5}>
+            <h5>{t('contact')}</h5>
+            <p className="mb-1">freeCodeCamp Chengdu Community</p>
+            <p className="mb-1">Chengdu, Sichuan, China</p>
+            <p className="mb-1">Email: contact@openlibrary.org</p>
+            <p>WeChat: FCCChengdu</p>
           </Col>
         </Row>
+
+        <hr
+          className="mt-4 mb-3"
+          style={{ borderColor: 'rgba(255,255,255,0.2)' }}
+        />
+
+        {/* Use a more direct approach with inline styles to ensure visibility */}
+        <div
+          className="py-2"
+          style={{
+            textAlign: 'center',
+            color: '#6c757d',
+            fontSize: '0.875rem',
+            width: '100%',
+            display: 'block',
+          }}
+        >
+          {isMounted ? (
+            <>
+              &copy; {new Date().getFullYear()} {t('open_library')}.{' '}
+              {t('all_rights_reserved')}
+            </>
+          ) : (
+            <>
+              &copy; {new Date().getFullYear()} Open Library. All rights
+              reserved.
+            </>
+          )}
+        </div>
       </ContentContainer>
     </footer>
   );
diff --git a/components/open-library/Layout.tsx b/components/open-library/Layout.tsx
index 2f4def9..92e09d5 100644
--- a/components/open-library/Layout.tsx
+++ b/components/open-library/Layout.tsx
@@ -2,9 +2,9 @@ import Head from 'next/head';
 import React from 'react';
 
 import FooterComponent from './Footer';
-import NavbarComponent from './Navbar';
+import LibraryNavbar from './Navbar';
+import { useOpenLibraryLayout } from './useOpenLibraryLayout';
 
-// 内容容器组件，使内容居中但不添加边框
 const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
@@ -37,6 +37,9 @@ const Layout: React.FC<LayoutProps> = ({
   children,
   title = 'Open Library - Open Source Bazaar',
 }) => {
+  // Apply Open Library layout styles
+  useOpenLibraryLayout();
+
   return (
     <>
       <Head>
@@ -44,18 +47,14 @@ const Layout: React.FC<LayoutProps> = ({
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
 
-      {/* 导航栏 */}
-      <NavbarComponent />
+      <LibraryNavbar />
 
-      {/* 主要内容 */}
       <main>{children}</main>
 
-      {/* 页脚 */}
       <FooterComponent />
     </>
   );
 };
 
-// 导出布局组件和内容容器组件，以便在页面中使用
 export default Layout;
 export { ContentContainer, Layout };
diff --git a/components/open-library/Navbar.tsx b/components/open-library/Navbar.tsx
index a71ac23..1b2fd35 100644
--- a/components/open-library/Navbar.tsx
+++ b/components/open-library/Navbar.tsx
@@ -1,7 +1,22 @@
+import dynamic from 'next/dynamic';
 import React from 'react';
 import { Button, Form, FormControl, Nav, Navbar } from 'react-bootstrap';
 
-const NavbarComponent = () => {
+import { t } from '../../models/Translation';
+
+// 动态导入 LanguageMenu 组件，禁用 SSR
+const LanguageMenu = dynamic(() => import('../Navigator/LanguageMenu'), {
+  ssr: false,
+});
+
+const LibraryNavbar = () => {
+  // Use a client-side only rendering approach for the brand text to avoid hydration mismatch
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   return (
     <Navbar bg="light" expand="lg" sticky="top" className="mb-4 shadow-sm">
       {/* 使用自定义的居中容器替代 Container fluid，与页面内容保持一致的宽度和居中效果 */}
@@ -22,36 +37,27 @@ const NavbarComponent = () => {
           href="/open-library"
           className="d-flex align-items-center"
         >
-          Open Library
+          {/* Use a static placeholder during SSR and replace it with translated content after hydration */}
+          {isMounted ? t('open_library') : 'Open Library'}
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="me-auto">
-            <Nav.Link href="/open-library">Home</Nav.Link>
-            <Nav.Link href="/open-library/books">Catalog</Nav.Link>
-            <Nav.Link href="/open-library/about">About</Nav.Link>
-            <Nav.Link href="/open-library/donate">Donate</Nav.Link>
+            <Nav.Link href="/open-library">{t('home')}</Nav.Link>
+            <Nav.Link href="/open-library/books">{t('catalog')}</Nav.Link>
+            <Nav.Link href="/open-library/about">{t('about')}</Nav.Link>
+            <Nav.Link href="/open-library/donate">{t('donate')}</Nav.Link>
             <Nav.Link href="/open-library/how-to-borrow">
-              How to Borrow
+              {t('how_to_borrow')}
             </Nav.Link>
-            <Nav.Link href="/open-library/review">Review</Nav.Link>
+            <Nav.Link href="/open-library/review">{t('review')}</Nav.Link>
           </Nav>
-          <Form className="d-flex">
-            <FormControl
-              type="search"
-              placeholder="Search Books..."
-              className="me-2"
-              aria-label="Search"
-            />
-            <Button variant="outline-success">Search</Button>
-          </Form>
-          <Button variant="primary" className="ms-lg-2 mt-2 mt-lg-0">
-            Login/Register
-          </Button>
+          {/* 添加语言切换菜单 */}
+          <LanguageMenu />
         </Navbar.Collapse>
       </div>
     </Navbar>
   );
 };
 
-export default NavbarComponent;
+export default LibraryNavbar;
diff --git a/components/open-library/useOpenLibraryLayout.ts b/components/open-library/useOpenLibraryLayout.ts
new file mode 100644
index 0000000..cd15c3d
--- /dev/null
+++ b/components/open-library/useOpenLibraryLayout.ts
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to apply Open Library layout styles
+ * This adds the open-library class to the body and html elements
+ * which triggers the CSS rules in styles/open-library.css
+ */
+export function useOpenLibraryLayout() {
+  useEffect(() => {
+    // Add open-library class to body and html
+    document.body.classList.add('open-library');
+    document.documentElement.classList.add('open-library');
+
+    // Clean up function to remove classes when component unmounts
+    return () => {
+      document.body.classList.remove('open-library');
+      document.documentElement.classList.remove('open-library');
+    };
+  }, []);
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 99c7009..12b87f9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import '../styles/globals.css';
+import '../styles/open-library.css';
 
 import { HTTPError } from 'koajax';
 import { configure } from 'mobx';
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
index f8bcc7e..46714b3 100644
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' });
 }
diff --git a/pages/open-library/about.tsx b/pages/open-library/about.tsx
new file mode 100644
index 0000000..c8a8bf1
--- /dev/null
+++ b/pages/open-library/about.tsx
@@ -0,0 +1,201 @@
+import React from 'react';
+import { Card, Col, Container, Image, Row } from 'react-bootstrap';
+
+import { ContentContainer, Layout } from '../../components/open-library/Layout';
+
+export default function AboutPage() {
+  return (
+    <Layout title="About - Open Library">
+      <ContentContainer>
+        <div className="mb-5">
+          <h1 className="display-4 mb-4">关于社区图书馆</h1>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h2 className="mb-4">我们的使命</h2>
+              <p className="lead">
+                freeCodeCamp 成都社区「Open
+                Library」是一个开放、共享的社区图书馆，旨在促进知识交流，推动社区成员之间的学习和成长，增强社区成员之间的互动与信任。
+              </p>
+              <p>
+                我们深知知识的流动能够点燃创新的火花，因此，我们采用了一种独特的"无储存"借阅模式，让书籍在会员之间自由流转，而非集中存放。这种模式不仅节省了物理空间，更重要的是促进了社区成员之间的直接交流和互动。
+              </p>
+            </Card.Body>
+          </Card>
+
+          <Row className="mb-5">
+            <Col md={6} className="mb-4 mb-md-0">
+              <Card className="h-100 border-0 shadow-sm">
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">我们的价值观</h3>
+                  <ul className="list-unstyled">
+                    <li className="mb-3">
+                      <div className="d-flex">
+                        <div className="me-3">
+                          <span className="text-primary fw-bold fs-4">✦</span>
+                        </div>
+                        <div>
+                          <h5>开放共享</h5>
+                          <p>
+                            我们相信知识应该是开放和共享的，每个人都有权利获取和贡献知识。
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                    <li className="mb-3">
+                      <div className="d-flex">
+                        <div className="me-3">
+                          <span className="text-primary fw-bold fs-4">✦</span>
+                        </div>
+                        <div>
+                          <h5>社区驱动</h5>
+                          <p>
+                            我们的图书馆完全由社区成员驱动，每个人都可以贡献和受益。
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                    <li className="mb-3">
+                      <div className="d-flex">
+                        <div className="me-3">
+                          <span className="text-primary fw-bold fs-4">✦</span>
+                        </div>
+                        <div>
+                          <h5>信任与责任</h5>
+                          <p>
+                            我们基于互相信任建立借阅系统，同时鼓励每个人对所借书籍负责。
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col md={6}>
+              <Card className="h-100 border-0 shadow-sm">
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">我们的特色</h3>
+                  <ul className="list-unstyled">
+                    <li className="mb-3">
+                      <div className="d-flex">
+                        <div className="me-3">
+                          <span className="text-success fw-bold fs-4">✓</span>
+                        </div>
+                        <div>
+                          <h5>"无储存"借阅模式</h5>
+                          <p>
+                            书籍在会员之间直接流转，无需集中存放，促进社区成员之间的直接交流。
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                    <li className="mb-3">
+                      <div className="d-flex">
+                        <div className="me-3">
+                          <span className="text-success fw-bold fs-4">✓</span>
+                        </div>
+                        <div>
+                          <h5>社区捐赠</h5>
+                          <p>
+                            所有书籍均来自社区成员的捐赠，体现了共享和互助的精神。
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                    <li className="mb-3">
+                      <div className="d-flex">
+                        <div className="me-3">
+                          <span className="text-success fw-bold fs-4">✓</span>
+                        </div>
+                        <div>
+                          <h5>线上管理</h5>
+                          <p>
+                            通过飞书多维表格进行书籍管理和借阅记录，方便透明。
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h2 className="mb-4">我们的团队</h2>
+              <p>
+                Open Library 由 freeCodeCamp
+                成都社区的志愿者团队运营。我们的团队成员来自各行各业，但都有一个共同的目标：促进知识共享和社区建设。
+              </p>
+
+              <Row className="mt-4">
+                <Col md={4} className="mb-4 text-center">
+                  <Image
+                    src="/images/placeholder-profile.svg"
+                    roundedCircle
+                    width={120}
+                    height={120}
+                    className="mb-3"
+                  />
+                  <h5>张伟</h5>
+                  <p className="text-muted">图书馆创始人</p>
+                </Col>
+                <Col md={4} className="mb-4 text-center">
+                  <Image
+                    src="/images/placeholder-profile.svg"
+                    roundedCircle
+                    width={120}
+                    height={120}
+                    className="mb-3"
+                  />
+                  <h5>李梅</h5>
+                  <p className="text-muted">社区协调员</p>
+                </Col>
+                <Col md={4} className="mb-4 text-center">
+                  <Image
+                    src="/images/placeholder-profile.svg"
+                    roundedCircle
+                    width={120}
+                    height={120}
+                    className="mb-3"
+                  />
+                  <h5>王晨</h5>
+                  <p className="text-muted">技术支持</p>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+
+          <Card className="border-0 shadow-sm">
+            <Card.Body className="p-4">
+              <h2 className="mb-4">加入我们</h2>
+              <p>
+                如果你热爱阅读，愿意分享知识，欢迎加入 freeCodeCamp
+                成都社区「Open Library」，成为知识流动的一部分！
+              </p>
+              <p>成为会员后，你可以：</p>
+              <ul>
+                <li>借阅其他会员捐赠的书籍</li>
+                <li>捐赠自己的书籍给社区</li>
+                <li>参与社区组织的读书会和讨论</li>
+                <li>结识志同道合的朋友</li>
+              </ul>
+              <div className="text-center mt-4">
+                <a
+                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="btn btn-primary btn-lg"
+                >
+                  申请成为会员
+                </a>
+              </div>
+            </Card.Body>
+          </Card>
+        </div>
+      </ContentContainer>
+    </Layout>
+  );
+}
diff --git a/pages/open-library/book/[id].tsx b/pages/open-library/book/[id].tsx
new file mode 100644
index 0000000..bf330a8
--- /dev/null
+++ b/pages/open-library/book/[id].tsx
@@ -0,0 +1,453 @@
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { Badge, Button, Card, Col, Row, Tab, Tabs } from 'react-bootstrap';
+
+import {
+  ContentContainer,
+  Layout,
+} from '../../../components/open-library/Layout';
+
+// Book type definition
+type Book = {
+  id: number;
+  title: string;
+  author: string;
+  cover?: string;
+  category: string;
+  language: string;
+  status: 'available' | 'borrowed';
+  currentHolder?: string;
+  description?: string;
+  isbn?: string;
+  publisher?: string;
+  publishYear?: number;
+  pageCount?: number;
+  borrowHistory?: {
+    borrower: string;
+    borrowDate: string;
+    returnDate?: string;
+  }[];
+  reviews?: {
+    reviewer: string;
+    rating: number;
+    comment: string;
+    date: string;
+  }[];
+};
+
+// Mock database of books
+const booksDatabase: Book[] = [
+  {
+    id: 1,
+    title: 'Clean Code',
+    author: 'Robert C. Martin',
+    cover: '/images/placeholder-book.svg',
+    category: 'Programming',
+    language: 'English',
+    status: 'available',
+    description:
+      "A handbook of agile software craftsmanship. Even bad code can function. But if code isn't clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. But it doesn't have to be that way.",
+    isbn: '9780132350884',
+    publisher: 'Prentice Hall',
+    publishYear: 2008,
+    pageCount: 464,
+    borrowHistory: [
+      {
+        borrower: 'Wang Chen',
+        borrowDate: '2023-10-15',
+        returnDate: '2023-11-20',
+      },
+      {
+        borrower: 'Li Mei',
+        borrowDate: '2023-08-01',
+        returnDate: '2023-09-05',
+      },
+    ],
+    reviews: [
+      {
+        reviewer: 'Wang Chen',
+        rating: 5,
+        comment:
+          'This book completely changed how I approach writing code. Highly recommended for all developers!',
+        date: '2023-11-25',
+      },
+      {
+        reviewer: 'Li Mei',
+        rating: 4,
+        comment:
+          'Great principles that have stood the test of time. Some examples are a bit dated but the concepts are solid.',
+        date: '2023-09-10',
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Eloquent JavaScript',
+    author: 'Marijn Haverbeke',
+    cover: '/images/placeholder-book.svg',
+    category: 'Programming',
+    language: 'English',
+    status: 'borrowed',
+    currentHolder: 'Zhang Wei',
+    description:
+      'A modern introduction to programming. JavaScript lies at the heart of almost every modern web application, from social apps like Twitter to browser-based game frameworks like Phaser and Babylon. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications.',
+    isbn: '9781593279509',
+    publisher: 'No Starch Press',
+    publishYear: 2018,
+    pageCount: 472,
+    borrowHistory: [
+      {
+        borrower: 'Zhang Wei',
+        borrowDate: '2024-03-10',
+      },
+    ],
+    reviews: [
+      {
+        reviewer: 'Liu Jie',
+        rating: 5,
+        comment:
+          'Perfect for beginners and intermediate JavaScript developers. The exercises are particularly helpful.',
+        date: '2023-12-05',
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: 'Design Patterns',
+    author: 'Erich Gamma et al.',
+    cover: '/images/placeholder-book.svg',
+    category: 'Programming',
+    language: 'English',
+    status: 'available',
+    description:
+      'Elements of Reusable Object-Oriented Software. Capturing a wealth of experience about the design of object-oriented software, four top-notch designers present a catalog of simple and succinct solutions to commonly occurring design problems.',
+    isbn: '9780201633610',
+    publisher: 'Addison-Wesley Professional',
+    publishYear: 1994,
+    pageCount: 416,
+    borrowHistory: [
+      {
+        borrower: 'Chen Ming',
+        borrowDate: '2023-06-15',
+        returnDate: '2023-07-20',
+      },
+    ],
+    reviews: [
+      {
+        reviewer: 'Chen Ming',
+        rating: 4,
+        comment:
+          'A classic that has stood the test of time. The examples are in C++ and Smalltalk, but the concepts apply to any OO language.',
+        date: '2023-07-25',
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: "You Don't Know JS",
+    author: 'Kyle Simpson',
+    cover: '/images/placeholder-book.svg',
+    category: 'Programming',
+    language: 'English',
+    status: 'available',
+    description:
+      'A book series on JavaScript. This is a series of books diving deep into the core mechanisms of the JavaScript language.',
+    isbn: '9781491924464',
+    publisher: "O'Reilly Media",
+    publishYear: 2015,
+    pageCount: 278,
+    borrowHistory: [],
+    reviews: [],
+  },
+  {
+    id: 5,
+    title: '深入理解计算机系统',
+    author: 'Randal E. Bryant',
+    cover: '/images/placeholder-book.svg',
+    category: 'Computer Science',
+    language: 'Chinese',
+    status: 'borrowed',
+    currentHolder: 'Li Mei',
+    description:
+      "Computer Systems: A Programmer's Perspective (Chinese Edition). This book introduces the important and enduring concepts that underlie computer systems.",
+    isbn: '9787111544937',
+    publisher: '机械工业出版社',
+    publishYear: 2016,
+    pageCount: 731,
+    borrowHistory: [
+      {
+        borrower: 'Li Mei',
+        borrowDate: '2024-02-01',
+      },
+    ],
+    reviews: [
+      {
+        reviewer: 'Zhang Wei',
+        rating: 5,
+        comment:
+          '这是一本非常全面的计算机系统书籍，对理解计算机底层工作原理非常有帮助。',
+        date: '2023-10-15',
+      },
+    ],
+  },
+];
+
+export default function BookDetail() {
+  const router = useRouter();
+  const { id } = router.query;
+  const [book, setBook] = useState<Book | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (id) {
+      // In a real app, this would be an API call
+      const bookId = Array.isArray(id)
+        ? parseInt(id[0])
+        : parseInt(id as string);
+      const foundBook = booksDatabase.find(b => b.id === bookId);
+
+      setBook(foundBook || null);
+      setLoading(false);
+    }
+  }, [id]);
+
+  if (loading) {
+    return (
+      <Layout title="Loading... - Open Library">
+        <ContentContainer>
+          <div
+            className="d-flex justify-content-center align-items-center"
+            style={{ height: '50vh' }}
+          >
+            <div className="spinner-border text-primary" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </div>
+          </div>
+        </ContentContainer>
+      </Layout>
+    );
+  }
+
+  if (!book) {
+    return (
+      <Layout title="Book Not Found - Open Library">
+        <ContentContainer>
+          <div className="text-center my-5">
+            <h2>Book Not Found</h2>
+            <p>Sorry, we couldn't find the book you're looking for.</p>
+            <Button
+              variant="primary"
+              onClick={() => router.push('/open-library/books')}
+            >
+              Return to Catalog
+            </Button>
+          </div>
+        </ContentContainer>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout title={`${book.title} - Open Library`}>
+      <ContentContainer>
+        <div className="mb-4">
+          <Button
+            variant="outline-secondary"
+            className="mb-3"
+            onClick={() => router.back()}
+          >
+            &larr; Back
+          </Button>
+
+          <Card className="border-0 shadow-sm">
+            <Card.Body>
+              <Row>
+                <Col md={3} className="text-center mb-4 mb-md-0">
+                  <img
+                    src={book.cover || '/images/placeholder-book.svg'}
+                    alt={book.title}
+                    className="img-fluid"
+                    style={{ maxHeight: '300px' }}
+                  />
+                  <div className="mt-3">
+                    <Badge
+                      bg={book.status === 'available' ? 'success' : 'warning'}
+                      text={book.status === 'available' ? 'white' : 'dark'}
+                      className="px-3 py-2"
+                    >
+                      {book.status === 'available'
+                        ? 'Available'
+                        : 'Currently Borrowed'}
+                    </Badge>
+                  </div>
+                  {book.status === 'borrowed' && book.currentHolder && (
+                    <div className="mt-2 text-muted">
+                      <small>Current holder: {book.currentHolder}</small>
+                    </div>
+                  )}
+                </Col>
+                <Col md={9}>
+                  <h1>{book.title}</h1>
+                  <h5 className="text-muted mb-3">by {book.author}</h5>
+
+                  <div className="mb-3">
+                    <Badge bg="secondary" className="me-2">
+                      {book.category}
+                    </Badge>
+                    <Badge bg="info" text="dark">
+                      {book.language}
+                    </Badge>
+                  </div>
+
+                  <p className="lead">{book.description}</p>
+
+                  <Row className="mt-4">
+                    <Col sm={6} md={3} className="mb-3">
+                      <div className="text-muted small">ISBN</div>
+                      <div>{book.isbn || 'N/A'}</div>
+                    </Col>
+                    <Col sm={6} md={3} className="mb-3">
+                      <div className="text-muted small">Publisher</div>
+                      <div>{book.publisher || 'N/A'}</div>
+                    </Col>
+                    <Col sm={6} md={3} className="mb-3">
+                      <div className="text-muted small">Published</div>
+                      <div>{book.publishYear || 'N/A'}</div>
+                    </Col>
+                    <Col sm={6} md={3} className="mb-3">
+                      <div className="text-muted small">Pages</div>
+                      <div>{book.pageCount || 'N/A'}</div>
+                    </Col>
+                  </Row>
+
+                  <div className="mt-4">
+                    {book.status === 'available' ? (
+                      <Button
+                        variant="primary"
+                        size="lg"
+                        href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnNiKwb9ApzFFGI3YkCXDdwe?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%85%A5"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Request to Borrow
+                      </Button>
+                    ) : (
+                      <Button variant="outline-primary" size="lg" disabled>
+                        Currently Unavailable
+                      </Button>
+                    )}
+                  </div>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+
+          <div className="mt-4">
+            <Tabs defaultActiveKey="reviews" className="mb-3">
+              <Tab eventKey="reviews" title="Reviews">
+                {book.reviews && book.reviews.length > 0 ? (
+                  <div>
+                    {book.reviews.map((review, index) => (
+                      <Card key={index} className="mb-3 shadow-sm">
+                        <Card.Body>
+                          <div className="d-flex justify-content-between align-items-center mb-2">
+                            <h5 className="mb-0">{review.reviewer}</h5>
+                            <div>
+                              {[...Array(5)].map((_, i) => (
+                                <span key={i} className="text-warning">
+                                  {i < review.rating ? '\u2605' : '\u2606'}
+                                </span>
+                              ))}
+                            </div>
+                          </div>
+                          <Card.Text>{review.comment}</Card.Text>
+                          <Card.Text>
+                            <small className="text-muted">
+                              {new Date(review.date).toLocaleDateString()}
+                            </small>
+                          </Card.Text>
+                        </Card.Body>
+                      </Card>
+                    ))}
+                    <div className="text-center mt-4">
+                      <Button
+                        variant="outline-primary"
+                        href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Add Your Review
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="text-center py-5">
+                    <p className="mb-4">
+                      No reviews yet. Be the first to review this book!
+                    </p>
+                    <Button
+                      variant="primary"
+                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Write a Review
+                    </Button>
+                  </div>
+                )}
+              </Tab>
+              <Tab eventKey="history" title="Borrow History">
+                {book.borrowHistory && book.borrowHistory.length > 0 ? (
+                  <div className="table-responsive">
+                    <table className="table table-hover">
+                      <thead>
+                        <tr>
+                          <th>Borrower</th>
+                          <th>Borrow Date</th>
+                          <th>Return Date</th>
+                          <th>Status</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {book.borrowHistory.map((history, index) => (
+                          <tr key={index}>
+                            <td>{history.borrower}</td>
+                            <td>
+                              {new Date(
+                                history.borrowDate,
+                              ).toLocaleDateString()}
+                            </td>
+                            <td>
+                              {history.returnDate
+                                ? new Date(
+                                    history.returnDate,
+                                  ).toLocaleDateString()
+                                : '-'}
+                            </td>
+                            <td>
+                              {history.returnDate ? (
+                                <Badge bg="success">Returned</Badge>
+                              ) : (
+                                <Badge bg="warning" text="dark">
+                                  Active
+                                </Badge>
+                              )}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                ) : (
+                  <div className="text-center py-5">
+                    <p>This book has not been borrowed yet.</p>
+                  </div>
+                )}
+              </Tab>
+            </Tabs>
+          </div>
+        </div>
+      </ContentContainer>
+    </Layout>
+  );
+}
diff --git a/pages/open-library/books/index.tsx b/pages/open-library/books/index.tsx
new file mode 100644
index 0000000..c18b6a0
--- /dev/null
+++ b/pages/open-library/books/index.tsx
@@ -0,0 +1,318 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  FormControl,
+  InputGroup,
+  Row,
+} from 'react-bootstrap';
+
+import {
+  ContentContainer,
+  Layout,
+} from '../../../components/open-library/Layout';
+
+// Book type definition
+type Book = {
+  id: number;
+  title: string;
+  author: string;
+  cover?: string;
+  category: string;
+  language: string;
+  status: 'available' | 'borrowed';
+  currentHolder?: string;
+  description?: string;
+};
+
+export default function BookCatalog() {
+  // Sample books data - in a real app, this would come from an API
+  const [books, setBooks] = useState<Book[]>([
+    {
+      id: 1,
+      title: 'Clean Code',
+      author: 'Robert C. Martin',
+      cover: '/images/placeholder-book.svg',
+      category: 'Programming',
+      language: 'English',
+      status: 'available',
+      description: 'A handbook of agile software craftsmanship',
+    },
+    {
+      id: 2,
+      title: 'Eloquent JavaScript',
+      author: 'Marijn Haverbeke',
+      cover: '/images/placeholder-book.svg',
+      category: 'Programming',
+      language: 'English',
+      status: 'borrowed',
+      currentHolder: 'Zhang Wei',
+      description: 'A modern introduction to programming',
+    },
+    {
+      id: 3,
+      title: 'Design Patterns',
+      author: 'Erich Gamma et al.',
+      cover: '/images/placeholder-book.svg',
+      category: 'Programming',
+      language: 'English',
+      status: 'available',
+      description: 'Elements of Reusable Object-Oriented Software',
+    },
+    {
+      id: 4,
+      title: "You Don't Know JS",
+      author: 'Kyle Simpson',
+      cover: '/images/placeholder-book.svg',
+      category: 'Programming',
+      language: 'English',
+      status: 'available',
+      description: 'A book series on JavaScript',
+    },
+    {
+      id: 5,
+      title: '深入理解计算机系统',
+      author: 'Randal E. Bryant',
+      cover: '/images/placeholder-book.svg',
+      category: 'Computer Science',
+      language: 'Chinese',
+      status: 'borrowed',
+      currentHolder: 'Li Mei',
+      description:
+        "Computer Systems: A Programmer's Perspective (Chinese Edition)",
+    },
+    {
+      id: 6,
+      title: '算法导论',
+      author: 'Thomas H. Cormen et al.',
+      cover: '/images/placeholder-book.svg',
+      category: 'Computer Science',
+      language: 'Chinese',
+      status: 'available',
+      description: 'Introduction to Algorithms (Chinese Edition)',
+    },
+    {
+      id: 7,
+      title: 'JavaScript高级程序设计',
+      author: 'Nicholas C. Zakas',
+      cover: '/images/placeholder-book.svg',
+      category: 'Programming',
+      language: 'Chinese',
+      status: 'available',
+      description:
+        'Professional JavaScript for Web Developers (Chinese Edition)',
+    },
+    {
+      id: 8,
+      title: 'CSS揭秘',
+      author: 'Lea Verou',
+      cover: '/images/placeholder-book.svg',
+      category: 'Web Development',
+      language: 'Chinese',
+      status: 'borrowed',
+      currentHolder: 'Wang Chen',
+      description: 'CSS Secrets (Chinese Edition)',
+    },
+  ]);
+
+  const [filteredBooks, setFilteredBooks] = useState<Book[]>(books);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('');
+  const [languageFilter, setLanguageFilter] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+
+  // Extract unique categories and languages for filter dropdowns
+  const categories = [...new Set(books.map(book => book.category))];
+  const languages = [...new Set(books.map(book => book.language))];
+
+  // Apply filters when any filter changes
+  useEffect(() => {
+    let results = books;
+
+    // Apply search term filter
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      results = results.filter(
+        book =>
+          book.title.toLowerCase().includes(term) ||
+          book.author.toLowerCase().includes(term) ||
+          (book.description && book.description.toLowerCase().includes(term)),
+      );
+    }
+
+    // Apply category filter
+    if (categoryFilter) {
+      results = results.filter(book => book.category === categoryFilter);
+    }
+
+    // Apply language filter
+    if (languageFilter) {
+      results = results.filter(book => book.language === languageFilter);
+    }
+
+    // Apply status filter
+    if (statusFilter) {
+      results = results.filter(book => book.status === statusFilter);
+    }
+
+    setFilteredBooks(results);
+  }, [searchTerm, categoryFilter, languageFilter, statusFilter, books]);
+
+  // Reset all filters
+  const resetFilters = () => {
+    setSearchTerm('');
+    setCategoryFilter('');
+    setLanguageFilter('');
+    setStatusFilter('');
+  };
+
+  return (
+    <Layout title="Book Catalog - Open Library">
+      <ContentContainer>
+        <h1 className="mb-4">Book Catalog</h1>
+
+        {/* Search and Filters */}
+        <Card className="mb-4">
+          <Card.Body>
+            <Row>
+              <Col md={6} className="mb-3 mb-md-0">
+                <InputGroup>
+                  <FormControl
+                    placeholder="Search by title, author, or description..."
+                    value={searchTerm}
+                    onChange={e => setSearchTerm(e.target.value)}
+                  />
+                  <Button variant="outline-secondary">Search</Button>
+                </InputGroup>
+              </Col>
+              <Col md={6}>
+                <Row>
+                  <Col sm={4}>
+                    <Form.Select
+                      value={categoryFilter}
+                      className="mb-2 mb-sm-0"
+                      onChange={e => setCategoryFilter(e.target.value)}
+                    >
+                      <option value="">All Categories</option>
+                      {categories.map(category => (
+                        <option key={category} value={category}>
+                          {category}
+                        </option>
+                      ))}
+                    </Form.Select>
+                  </Col>
+                  <Col sm={4}>
+                    <Form.Select
+                      value={languageFilter}
+                      className="mb-2 mb-sm-0"
+                      onChange={e => setLanguageFilter(e.target.value)}
+                    >
+                      <option value="">All Languages</option>
+                      {languages.map(language => (
+                        <option key={language} value={language}>
+                          {language}
+                        </option>
+                      ))}
+                    </Form.Select>
+                  </Col>
+                  <Col sm={4}>
+                    <Form.Select
+                      value={statusFilter}
+                      onChange={e => setStatusFilter(e.target.value)}
+                    >
+                      <option value="">All Status</option>
+                      <option value="available">Available</option>
+                      <option value="borrowed">Borrowed</option>
+                    </Form.Select>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+            <div className="d-flex justify-content-between align-items-center mt-3">
+              <div>
+                <small className="text-muted">
+                  Showing {filteredBooks.length} of {books.length} books
+                </small>
+              </div>
+              <Button
+                variant="outline-secondary"
+                size="sm"
+                onClick={resetFilters}
+              >
+                Reset Filters
+              </Button>
+            </div>
+          </Card.Body>
+        </Card>
+
+        {/* Book Grid */}
+        <Row xs={1} md={2} lg={3} xl={4} className="g-4">
+          {filteredBooks.map(book => (
+            <Col key={book.id}>
+              <Card className="h-100 shadow-sm">
+                <div className="text-center pt-3">
+                  <Card.Img
+                    variant="top"
+                    src={book.cover || '/images/placeholder-book.svg'}
+                    style={{ height: '180px', objectFit: 'contain' }}
+                  />
+                </div>
+                <Card.Body className="d-flex flex-column">
+                  <Card.Title>{book.title}</Card.Title>
+                  <Card.Subtitle className="mb-2 text-muted">
+                    {book.author}
+                  </Card.Subtitle>
+                  <Card.Text className="small text-truncate">
+                    {book.description}
+                  </Card.Text>
+                  <div className="mt-auto">
+                    <div className="d-flex justify-content-between align-items-center mb-2">
+                      <span className="badge bg-secondary">
+                        {book.category}
+                      </span>
+                      <span className="badge bg-info text-dark">
+                        {book.language}
+                      </span>
+                    </div>
+                    <div className="d-flex justify-content-between align-items-center">
+                      <span
+                        className={`badge ${book.status === 'available' ? 'bg-success' : 'bg-warning text-dark'}`}
+                      >
+                        {book.status === 'available' ? 'Available' : 'Borrowed'}
+                      </span>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        href={`/open-library/book/${book.id}`}
+                      >
+                        View Details
+                      </Button>
+                    </div>
+                    {book.status === 'borrowed' && (
+                      <div className="mt-2 small text-muted">
+                        Currently with: {book.currentHolder}
+                      </div>
+                    )}
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+
+        {/* No Results */}
+        {filteredBooks.length === 0 && (
+          <div className="text-center my-5 py-5">
+            <h3>No books found</h3>
+            <p className="text-muted">Try adjusting your search or filters</p>
+            <Button variant="primary" onClick={resetFilters}>
+              Reset All Filters
+            </Button>
+          </div>
+        )}
+      </ContentContainer>
+    </Layout>
+  );
+}
diff --git a/pages/open-library/donate.tsx b/pages/open-library/donate.tsx
new file mode 100644
index 0000000..7e54e0d
--- /dev/null
+++ b/pages/open-library/donate.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import { Button, Card, Col, Row } from 'react-bootstrap';
+
+import { ContentContainer, Layout } from '../../components/open-library/Layout';
+
+export default function DonatePage() {
+  return (
+    <Layout title="Donate Books - Open Library">
+      <ContentContainer>
+        <div className="mb-5">
+          <h1 className="display-4 mb-4">书籍募捐</h1>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h2 className="mb-4">为什么捐赠书籍？</h2>
+              <p className="lead">
+                您的一本书，可能会改变他人的一生。通过捐赠书籍，您不仅能够让闲置的知识重新流动，还能够帮助更多的人获取学习资源。
+              </p>
+              <p>
+                在 Open
+                Library，我们相信知识应该是流动的。您捐赠的每一本书都将在社区成员之间传递，让更多人受益。当您捐赠一本书，您不仅是在分享一个物品，更是在分享知识、经验和思想。
+              </p>
+            </Card.Body>
+          </Card>
+
+          <Row className="mb-5">
+            <Col lg={6} className="mb-4">
+              <Card className="h-100 border-0 shadow-sm">
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">捐赠流程</h3>
+                  <ol className="list-group list-group-numbered mb-4">
+                    <li className="list-group-item border-0 d-flex align-items-start">
+                      <div>
+                        <h5 className="mb-1">填写捐赠申请</h5>
+                        <p className="mb-0">
+                          填写我们的在线表单，提供您想要捐赠的书籍信息。
+                        </p>
+                      </div>
+                    </li>
+                    <li className="list-group-item border-0 d-flex align-items-start">
+                      <div>
+                        <h5 className="mb-1">书籍登记</h5>
+                        <p className="mb-0">
+                          如所捐赠书籍在「fCC
+                          成都社区图书馆」还未登记，请先填写书籍登记表，然后回到第
+                          1 步继续捐赠。建议在移动端设备上登记，方便扫描书籍
+                          ISBN 码。
+                        </p>
+                      </div>
+                    </li>
+                    <li className="list-group-item border-0 d-flex align-items-start">
+                      <div>
+                        <h5 className="mb-1">书籍进入图书馆</h5>
+                        <p className="mb-0">
+                          完成以上流程后，书籍正式进入 Open Library
+                          的传递流程，开始流转于社区成员之间。
+                        </p>
+                      </div>
+                    </li>
+                  </ol>
+                  <div className="text-center mt-4">
+                    <a
+                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcncbxU0MpcN7pzG3MLNX0GEd?prefill_%E6%93%8D%E4%BD%9C=%E6%8D%90%E8%B5%A0"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="btn btn-primary"
+                    >
+                      填写捐赠申请
+                    </a>
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col lg={6} className="mb-4">
+              <Card className="h-100 border-0 shadow-sm">
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">书籍登记</h3>
+                  <p>
+                    如果您要捐赠的书籍在我们的图书馆中还未登记，请先完成书籍登记流程。这有助于我们维护一个完整的书籍数据库，方便其他会员查找和借阅。
+                  </p>
+                  <p>登记时，您需要提供以下信息：</p>
+                  <ul>
+                    <li>书籍标题</li>
+                    <li>作者</li>
+                    <li>ISBN（可通过扫描获取）</li>
+                    <li>出版社</li>
+                    <li>出版年份</li>
+                    <li>书籍类别</li>
+                    <li>书籍语言</li>
+                    <li>书籍简介</li>
+                    <li>书籍封面照片（可选）</li>
+                  </ul>
+                  <div className="text-center mt-4">
+                    <a
+                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="btn btn-outline-primary"
+                    >
+                      书籍登记表单
+                    </a>
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h3 className="mb-4">我们接受什么样的书籍？</h3>
+              <Row>
+                <Col md={6} className="mb-4">
+                  <h5 className="text-success">✓ 我们欢迎</h5>
+                  <ul>
+                    <li>技术类书籍（编程、设计、数据科学等）</li>
+                    <li>科学类书籍</li>
+                    <li>商业和管理类书籍</li>
+                    <li>自我提升类书籍</li>
+                    <li>文学和小说</li>
+                    <li>状态良好的二手书</li>
+                  </ul>
+                </Col>
+                <Col md={6}>
+                  <h5 className="text-danger">✗ 不适合捐赠</h5>
+                  <ul>
+                    <li>严重破损或缺页的书籍</li>
+                    <li>有大量笔记或标记的书籍</li>
+                    <li>过时的技术书籍（5年以上的技术书可能已过时）</li>
+                    <li>教科书和习题集</li>
+                    <li>杂志和期刊</li>
+                  </ul>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+
+          <Card className="border-0 shadow-sm">
+            <Row className="g-0">
+              <Col md={5} className="d-none d-md-block">
+                <div
+                  className="h-100"
+                  style={{
+                    backgroundImage: 'url(/images/placeholder-library.jpg)',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    minHeight: '300px',
+                  }}
+                ></div>
+              </Col>
+              <Col md={7}>
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">常见问题</h3>
+                  <div className="accordion" id="donationFAQ">
+                    <div className="accordion-item border-0 mb-3">
+                      <h2 className="accordion-header">
+                        <button
+                          className="accordion-button collapsed"
+                          type="button"
+                          data-bs-toggle="collapse"
+                          data-bs-target="#faq1"
+                        >
+                          我捐赠的书籍会怎么处理？
+                        </button>
+                      </h2>
+                      <div id="faq1" className="accordion-collapse collapse">
+                        <div className="accordion-body">
+                          您捐赠的书籍将进入我们的借阅系统，供社区成员借阅。当有人申请借阅时，书籍将从当前持有者（可能是您）直接传递给下一位借阅者。
+                        </div>
+                      </div>
+                    </div>
+                    <div className="accordion-item border-0 mb-3">
+                      <h2 className="accordion-header">
+                        <button
+                          className="accordion-button collapsed"
+                          type="button"
+                          data-bs-toggle="collapse"
+                          data-bs-target="#faq2"
+                        >
+                          我可以随时取回我捐赠的书籍吗？
+                        </button>
+                      </h2>
+                      <div id="faq2" className="accordion-collapse collapse">
+                        <div className="accordion-body">
+                          一旦书籍捐赠给图书馆，我们视为您已将书籍所有权转让给社区。如果您希望再次阅读这本书，可以通过正常的借阅流程申请借阅。
+                        </div>
+                      </div>
+                    </div>
+                    <div className="accordion-item border-0 mb-3">
+                      <h2 className="accordion-header">
+                        <button
+                          className="accordion-button collapsed"
+                          type="button"
+                          data-bs-toggle="collapse"
+                          data-bs-target="#faq3"
+                        >
+                          如何知道我捐赠的书籍被谁借阅了？
+                        </button>
+                      </h2>
+                      <div id="faq3" className="accordion-collapse collapse">
+                        <div className="accordion-body">
+                          您可以在我们的飞书多维表格中查看每本书的借阅记录，包括当前持有者和历史借阅情况。
+                        </div>
+                      </div>
+                    </div>
+                    <div className="accordion-item border-0">
+                      <h2 className="accordion-header">
+                        <button
+                          className="accordion-button collapsed"
+                          type="button"
+                          data-bs-toggle="collapse"
+                          data-bs-target="#faq4"
+                        >
+                          我需要成为会员才能捐赠书籍吗？
+                        </button>
+                      </h2>
+                      <div id="faq4" className="accordion-collapse collapse">
+                        <div className="accordion-body">
+                          是的，我们要求捐赠者成为 Open Library
+                          的会员。这有助于我们建立一个基于信任的社区，并确保书籍的流转质量。
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Card.Body>
+              </Col>
+            </Row>
+          </Card>
+
+          <div className="text-center mt-5">
+            <h3 className="mb-4">准备好捐赠书籍了吗？</h3>
+            <div className="d-flex justify-content-center gap-3 flex-wrap">
+              <a
+                href="https://open-source-bazaar.feishu.cn/share/base/form/shrcncbxU0MpcN7pzG3MLNX0GEd?prefill_%E6%93%8D%E4%BD%9C=%E6%8D%90%E8%B5%A0"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-primary btn-lg"
+              >
+                填写捐赠申请
+              </a>
+              <a
+                href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-outline-primary btn-lg"
+              >
+                申请成为会员
+              </a>
+            </div>
+          </div>
+        </div>
+      </ContentContainer>
+    </Layout>
+  );
+}
diff --git a/pages/open-library/how-to-borrow.tsx b/pages/open-library/how-to-borrow.tsx
new file mode 100644
index 0000000..451dfea
--- /dev/null
+++ b/pages/open-library/how-to-borrow.tsx
@@ -0,0 +1,294 @@
+import React from 'react';
+import { Button, Card, Col, Row } from 'react-bootstrap';
+
+import { ContentContainer, Layout } from '../../components/open-library/Layout';
+
+export default function HowToBorrowPage() {
+  return (
+    <Layout title="How to Borrow - Open Library">
+      <ContentContainer>
+        <div className="mb-5">
+          <h1 className="display-4 mb-4">如何借阅</h1>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h2 className="mb-4">借阅与传递模式</h2>
+              <p className="lead">
+                在 Open Library，所有书籍均来自社区成员的捐赠，并由借阅者直接
+                <strong>传递</strong>给下一位借书人。
+              </p>
+              <p>
+                我们采用的是一种独特的"无储存"借阅模式，让书籍在会员之间自由流转，而非集中存放。这种模式不仅节省了物理空间，更重要的是促进了社区成员之间的直接交流和互动。
+              </p>
+            </Card.Body>
+          </Card>
+
+          <Row className="mb-5">
+            <Col lg={7} className="mb-4 mb-lg-0">
+              <Card className="h-100 border-0 shadow-sm">
+                <Card.Body className="p-4">
+                  <h3 className="mb-4">借阅流程</h3>
+                  <div className="position-relative">
+                    <div
+                      className="position-absolute h-100"
+                      style={{
+                        left: '24px',
+                        width: '2px',
+                        backgroundColor: '#e9ecef',
+                        zIndex: 1,
+                      }}
+                    ></div>
+
+                    <div
+                      className="d-flex mb-4 position-relative"
+                      style={{ zIndex: 2 }}
+                    >
+                      <div
+                        className="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
+                        style={{ width: '50px', height: '50px', flexShrink: 0 }}
+                      >
+                        <h4 className="mb-0">1</h4>
+                      </div>
+                      <div>
+                        <h5>查阅书籍</h5>
+                        <p>
+                          社区成员可以在{' '}
+                          <a
+                            href="https://open-source-bazaar.feishu.cn/share/base/view/shrcnvT0Lyk8LKS8KtPbO9HPPHb"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            fCC 成都社区图书馆
+                          </a>{' '}
+                          中查找自己感兴趣的书籍，或者在我们的{' '}
+                          <a href="/open-library/books">书籍目录</a> 中浏览。
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      className="d-flex mb-4 position-relative"
+                      style={{ zIndex: 2 }}
+                    >
+                      <div
+                        className="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
+                        style={{ width: '50px', height: '50px', flexShrink: 0 }}
+                      >
+                        <h4 className="mb-0">2</h4>
+                      </div>
+                      <div>
+                        <h5>申请借阅</h5>
+                        <p>
+                          找到心仪的书籍后，填写{' '}
+                          <a
+                            href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnNiKwb9ApzFFGI3YkCXDdwe?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%85%A5"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            fCC 成都社区图书馆-书籍借入
+                          </a>{' '}
+                          申请，与当前持书者取得联系。
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      className="d-flex mb-4 position-relative"
+                      style={{ zIndex: 2 }}
+                    >
+                      <div
+                        className="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
+                        style={{ width: '50px', height: '50px', flexShrink: 0 }}
+                      >
+                        <h4 className="mb-0">3</h4>
+                      </div>
+                      <div>
+                        <h5>线下传递</h5>
+                        <p>
+                          双方约定时间和传递方式，通常可用快递传递书籍。请传递者填写{' '}
+                          <a
+                            href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnuDb3oOuhMjSaXNIHEPA4Ef?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%87%BA"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            fCC 成都社区图书馆-书籍传递
+                          </a>
+                          ，再将书籍传递出去。
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      className="d-flex mb-4 position-relative"
+                      style={{ zIndex: 2 }}
+                    >
+                      <div
+                        className="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
+                        style={{ width: '50px', height: '50px', flexShrink: 0 }}
+                      >
+                        <h4 className="mb-0">4</h4>
+                      </div>
+                      <div>
+                        <h5>阅读与分享</h5>
+                        <p>
+                          借阅者在阅读完毕后，可以分享自己的阅读感悟，并在社区推荐给下一位感兴趣的成员。我们鼓励借阅者在归还前写下简短的书评。
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      className="d-flex position-relative"
+                      style={{ zIndex: 2 }}
+                    >
+                      <div
+                        className="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
+                        style={{ width: '50px', height: '50px', flexShrink: 0 }}
+                      >
+                        <h4 className="mb-0">5</h4>
+                      </div>
+                      <div>
+                        <h5>继续传递</h5>
+                        <p>
+                          当有新的借阅者申请时，当前持书人将书籍传递给下一位读者，确保知识的持续流动。
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col lg={5}>
+              <Card className="border-0 shadow-sm mb-4">
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">借阅规则</h3>
+                  <ul className="list-group list-group-flush">
+                    <li className="list-group-item px-0">
+                      <strong>借阅期限：</strong> 每本书的标准借阅期为 30
+                      天，如需延长可与图书馆管理员联系。
+                    </li>
+                    <li className="list-group-item px-0">
+                      <strong>借阅数量：</strong> 每位会员同时最多可借阅 3
+                      本书。
+                    </li>
+                    <li className="list-group-item px-0">
+                      <strong>书籍状态：</strong>{' '}
+                      借阅者有责任保持书籍的良好状态，避免损坏、标记或丢失。
+                    </li>
+                    <li className="list-group-item px-0">
+                      <strong>传递责任：</strong>{' '}
+                      当前持书人负责将书籍安全传递给下一位借阅者，并承担相关的传递费用。
+                    </li>
+                    <li className="list-group-item px-0">
+                      <strong>丢失或损坏：</strong>{' '}
+                      如果书籍在您借阅期间丢失或严重损坏，请联系图书馆管理员并考虑捐赠一本相同或类似的书籍作为替代。
+                    </li>
+                  </ul>
+                </Card.Body>
+              </Card>
+
+              <Card className="border-0 shadow-sm">
+                <Card.Body className="p-4">
+                  <h3 className="mb-3">快速链接</h3>
+                  <div className="d-grid gap-2">
+                    <a
+                      href="https://open-source-bazaar.feishu.cn/share/base/view/shrcnvT0Lyk8LKS8KtPbO9HPPHb"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="btn btn-outline-primary"
+                    >
+                      查看完整书籍目录
+                    </a>
+                    <a
+                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnNiKwb9ApzFFGI3YkCXDdwe?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%85%A5"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="btn btn-outline-primary"
+                    >
+                      填写借阅申请
+                    </a>
+                    <a
+                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnuDb3oOuhMjSaXNIHEPA4Ef?prefill_%E6%93%8D%E4%BD%9C=%E5%80%9F%E5%87%BA"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="btn btn-outline-primary"
+                    >
+                      填写书籍传递表
+                    </a>
+                    <a href="/open-library/books" className="btn btn-primary">
+                      浏览书籍目录
+                    </a>
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h3 className="mb-4">常见问题解答</h3>
+              <Row>
+                <Col md={6} className="mb-4">
+                  <h5>如何知道一本书是否可借？</h5>
+                  <p>
+                    您可以在飞书多维表格或我们的网站书籍目录中查看书籍的当前状态。如果标记为"可借阅"，则表示该书可以申请借阅。
+                  </p>
+                </Col>
+                <Col md={6} className="mb-4">
+                  <h5>我需要支付借阅费用吗？</h5>
+                  <p>
+                    Open Library
+                    不收取借阅费用，但借阅者需要承担书籍传递的相关费用（如快递费）。
+                  </p>
+                </Col>
+                <Col md={6} className="mb-4">
+                  <h5>如果当前没有人申请借我手中的书，我需要归还吗？</h5>
+                  <p>
+                    标准借阅期为 30
+                    天。如果期满后没有新的借阅申请，您可以继续保留该书，但请随时准备传递给下一位申请者。
+                  </p>
+                </Col>
+                <Col md={6} className="mb-4">
+                  <h5>如何联系当前持书人？</h5>
+                  <p>
+                    当您提交借阅申请后，我们会为您提供当前持书人的联系方式，以便您们协商传递事宜。
+                  </p>
+                </Col>
+                <Col md={6} className="mb-4">
+                  <h5>如果我想长期保留一本书怎么办？</h5>
+                  <p>
+                    Open Library
+                    的宗旨是促进知识流动，我们鼓励书籍在会员之间传递。如果您特别喜欢某本书，建议购买一本自己的副本，或者考虑捐赠一本相同的书籍给图书馆。
+                  </p>
+                </Col>
+                <Col md={6}>
+                  <h5>我可以借阅电子书吗？</h5>
+                  <p>
+                    目前 Open Library
+                    主要提供实体书的借阅服务。我们正在考虑未来增加电子书资源，敬请期待。
+                  </p>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+
+          <div className="text-center">
+            <h3 className="mb-4">准备好借阅了吗？</h3>
+            <div className="d-flex justify-content-center gap-3 flex-wrap">
+              <a href="/open-library/books" className="btn btn-primary btn-lg">
+                浏览书籍目录
+              </a>
+              <a
+                href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-outline-primary btn-lg"
+              >
+                申请成为会员
+              </a>
+            </div>
+          </div>
+        </div>
+      </ContentContainer>
+    </Layout>
+  );
+}
diff --git a/pages/open-library/index.tsx b/pages/open-library/index.tsx
index 074b5e7..5853be1 100644
--- a/pages/open-library/index.tsx
+++ b/pages/open-library/index.tsx
@@ -1,8 +1,9 @@
 import Link from 'next/link';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Button, Card, Col, Form, Image, Row, Stack } from 'react-bootstrap';
 
 import { ContentContainer, Layout } from '../../components/open-library/Layout';
+import { t } from '../../models/Translation';
 
 // TODO: Define a type for Book and Testimonial
 type Book = {
@@ -69,160 +70,8 @@ export default function OpenLibraryHomepage() {
     },
   ];
 
-  // Use client-side code to hide the main site header and adjust layout
-  useEffect(() => {
-    // Function to apply style to an element
-    const applyStyle = (
-      element: HTMLElement | null,
-      styles: Partial<CSSStyleDeclaration>,
-    ) => {
-      if (!element) return;
-
-      Object.entries(styles).forEach(([property, value]) => {
-        if (value) {
-          // @ts-expect-error: dynamic property assignment
-          element.style[property] = value;
-        }
-      });
-    };
-
-    // Hide the main site header
-    const mainHeader = document.querySelector(
-      'nav.navbar.bg-dark.navbar-dark.fixed-top',
-    );
-    applyStyle(mainHeader as HTMLElement, { display: 'none' });
-
-    // Remove top margin that accommodates the main header
-    const mainContent = document.querySelector('div.mt-5.pt-2');
-    applyStyle(mainContent as HTMLElement, {
-      marginTop: '0',
-      paddingTop: '0',
-      maxWidth: '100%',
-      width: '100%',
-    });
-
-    // Remove background and padding from main content
-    const mainWrapper = document.querySelector(
-      'main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center',
-    );
-    applyStyle(mainWrapper as HTMLElement, {
-      background: 'none',
-      padding: '0',
-      margin: '0',
-      maxWidth: '100%',
-      width: '100%',
-    });
-
-    // Remove container constraints
-    const containers = document.querySelectorAll('.container');
-    containers.forEach(container => {
-      applyStyle(container as HTMLElement, {
-        maxWidth: '100%',
-        padding: '0',
-        margin: '0',
-      });
-    });
-
-    // Remove card styling
-    const cards = document.querySelectorAll('.card');
-    cards.forEach(card => {
-      if (
-        card.closest(
-          'main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center',
-        )
-      ) {
-        applyStyle(card as HTMLElement, {
-          background: 'transparent',
-          border: 'none',
-          boxShadow: 'none',
-          padding: '0',
-          margin: '0',
-        });
-      }
-    });
-
-    // Remove card body padding
-    const cardBodies = document.querySelectorAll('.card-body');
-    cardBodies.forEach(cardBody => {
-      if (
-        cardBody.closest(
-          'main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center',
-        )
-      ) {
-        applyStyle(cardBody as HTMLElement, {
-          padding: '0',
-        });
-      }
-    });
-
-    // Hide the main site footer
-    const mainFooter = document.querySelector(
-      'footer.mw-100.bg-dark.text-white',
-    );
-    applyStyle(mainFooter as HTMLElement, { display: 'none' });
-
-    // Remove all padding and margin from body and html
-    applyStyle(document.body, {
-      margin: '0',
-      padding: '0',
-      overflow: 'auto',
-    });
-
-    applyStyle(document.documentElement, {
-      margin: '0',
-      padding: '0',
-      overflow: 'auto',
-    });
-
-    // Target the MDXProvider wrapper (main white background)
-    const mdxProvider = document.querySelector(`.MDXProvider`);
-    applyStyle(mdxProvider as HTMLElement, {
-      padding: '0 !important',
-      margin: '0 !important',
-      background: 'transparent !important',
-      border: 'none !important',
-      boxShadow: 'none !important',
-    });
-
-    // Add custom styles to ensure full width
-    const style = document.createElement('style');
-    style.textContent = `
-      body, html {
-        margin: 0 !important;
-        padding: 0 !important;
-        overflow-x: hidden !important;
-      }
-      .container, .container-fluid {
-        max-width: 100% !important;
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-      }
-      main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center {
-        padding: 0 !important;
-        margin: 0 !important;
-        max-width: 100% !important;
-        width: 100% !important;
-      }
-      main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center > .container {
-        max-width: 100% !important;
-        padding: 0 !important;
-        margin: 0 !important;
-      }
-      .MDXProvider {
-        padding: 0 !important;
-        margin: 0 !important;
-        background: transparent !important;
-        border: none !important;
-        box-shadow: none !important;
-      }
-    `;
-    document.head.appendChild(style);
-  }, []);
-
   return (
-    <Layout title="Open Library - Free knowledge flows here">
+    <Layout title={`${t('open_library')} - freeCodeCamp 成都社区`}>
       <main>
         {/* --- Hero Section --- */}
         <section
@@ -235,17 +84,17 @@ export default function OpenLibraryHomepage() {
           <ContentContainer>
             <Row className="align-items-center">
               <Col md={7}>
-                <h1 className="display-5 fw-bold mb-4">
-                  Free knowledge flows here
-                </h1>
-                <p className="lead mb-4">
-                  Share and borrow books in our open-source community. Join
-                  freeCodeCamp Chengdu's initiative to make learning accessible
-                  to everyone.
-                </p>
+                <h1 className="display-5 fw-bold mb-4">{t('hero_title')}</h1>
+                <p className="lead mb-4">{t('hero_subtitle')}</p>
                 {/* TODO: Link this button to the actual Feishu form or member sign-up page */}
-                <Button variant="success" size="lg">
-                  Become a Member
+                <Button
+                  variant="success"
+                  size="lg"
+                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('become_member')}
                 </Button>
               </Col>
               <Col md={5} className="mt-4 mt-md-0 text-center">
@@ -265,9 +114,11 @@ export default function OpenLibraryHomepage() {
         {/* --- Featured Books Section --- */}
         <section className="py-5 bg-light">
           <ContentContainer>
-            <h2 className="text-center fw-bold mb-2 h1">Featured Books</h2>
+            <h2 className="text-center fw-bold mb-2 h1">
+              {t('featured_books')}
+            </h2>
             <p className="text-center text-muted mb-5">
-              Discover what our community is reading right now
+              {t('featured_books_subtitle')}
             </p>
             <Row xs={1} sm={2} md={4} className="g-4 justify-content-center">
               {featuredBooks.map(book => (
@@ -299,7 +150,7 @@ export default function OpenLibraryHomepage() {
                           legacyBehavior
                         >
                           <Button variant="outline-success" as="a">
-                            View Details
+                            {t('view_details')}
                           </Button>
                         </Link>
                       </div>
@@ -314,7 +165,7 @@ export default function OpenLibraryHomepage() {
                   variant="link"
                   className="text-success text-decoration-none"
                 >
-                  Browse All Books
+                  {t('view_all_books')} &rarr;
                 </Button>
               </Link>
             </div>
@@ -326,14 +177,10 @@ export default function OpenLibraryHomepage() {
           <ContentContainer>
             <Row className="align-items-center">
               <Col md={7}>
-                <h2 className="fw-bold mb-4 h1">Share Your Knowledge</h2>
-                <p className="lead mb-4">
-                  Have books collecting dust on your shelf? Donate them to our
-                  community and help others learn and grow. Your contribution
-                  makes a difference!
-                </p>
+                <h2 className="fw-bold mb-4 h1">{t('share_your_knowledge')}</h2>
+                <p className="lead mb-4">{t('donation_callout_subtitle')}</p>
                 <Link href="/open-library/donate" passHref legacyBehavior>
-                  <Button variant="warning">Donate a Book</Button>
+                  <Button variant="warning">{t('donate_a_book')}</Button>
                 </Link>
               </Col>
               <Col md={5} className="mt-4 mt-md-0 text-center">
@@ -353,40 +200,31 @@ export default function OpenLibraryHomepage() {
         {/* --- How It Works Section --- */}
         <section className="py-5">
           <ContentContainer>
-            <h2 className="text-center fw-bold mb-2 h1">How It Works</h2>
+            <h2 className="text-center fw-bold mb-2 h1">{t('how_it_works')}</h2>
             <p className="text-center text-muted mb-5">
-              Three simple steps to borrow books from our community
+              {t('how_it_works_description')}
             </p>
             <Row className="text-center g-4">
               <Col md={4}>
                 <div className="mb-3">
                   <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
                 </div>
-                <h3 className="fw-bold h4 mb-2">1. Find a Book</h3>
-                <p className="text-muted px-md-3">
-                  Browse our collection and find the book that interests you.
-                  Filter by category, author, or popularity.
-                </p>
+                <h3 className="fw-bold h4 mb-2">{t('step_1_find_book')}</h3>
+                <p className="text-muted px-md-3">{t('step_1_description')}</p>
               </Col>
               <Col md={4}>
                 <div className="mb-3">
                   <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
                 </div>
-                <h3 className="fw-bold h4 mb-2">2. Apply to Borrow</h3>
-                <p className="text-muted px-md-3">
-                  Submit a simple request form. We'll connect you with the book
-                  owner and arrange the handover.
-                </p>
+                <h3 className="fw-bold h4 mb-2">{t('step_2_apply')}</h3>
+                <p className="text-muted px-md-3">{t('step_2_description')}</p>
               </Col>
               <Col md={4}>
                 <div className="mb-3">
                   <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
                 </div>
-                <h3 className="fw-bold h4 mb-2">3. Receive and Pass It On</h3>
-                <p className="text-muted px-md-3">
-                  Enjoy your book and return it when you're done. Consider
-                  donating your own books to keep knowledge flowing.
-                </p>
+                <h3 className="fw-bold h4 mb-2">{t('step_3_receive')}</h3>
+                <p className="text-muted px-md-3">{t('step_3_description')}</p>
               </Col>
             </Row>
             <div className="text-center mt-5">
@@ -395,7 +233,7 @@ export default function OpenLibraryHomepage() {
                   variant="link"
                   className="text-success text-decoration-none"
                 >
-                  Learn More About Borrowing
+                  {t('learn_more_about_borrowing')}
                 </Button>
               </Link>
             </div>
@@ -405,9 +243,11 @@ export default function OpenLibraryHomepage() {
         {/* --- Testimonials Section --- */}
         <section className="py-5 bg-light">
           <ContentContainer>
-            <h2 className="text-center fw-bold mb-2 h1">Community Voices</h2>
+            <h2 className="text-center fw-bold mb-2 h1">
+              {t('community_voices')}
+            </h2>
             <p className="text-center text-muted mb-5">
-              What our members say about Open Library
+              {t('community_voices_description')}
             </p>
             <Row xs={1} md={3} className="g-4">
               {testimonials.map(testimonial => (
@@ -431,7 +271,7 @@ export default function OpenLibraryHomepage() {
                   variant="link"
                   className="text-success text-decoration-none"
                 >
-                  Read More Reviews
+                  {t('read_more_reviews')}
                 </Button>
               </Link>
             </div>
@@ -445,10 +285,9 @@ export default function OpenLibraryHomepage() {
               <Col lg={6}>
                 <Card className="shadow-sm border-0">
                   <Card.Body className="p-4 p-md-5 text-center">
-                    <h3 className="fw-bold mb-2 h2">Stay Updated</h3>
+                    <h3 className="fw-bold mb-2 h2">{t('stay_updated')}</h3>
                     <p className="text-muted mb-4">
-                      Subscribe to our newsletter for new book arrivals and
-                      community events.
+                      {t('newsletter_description')}
                     </p>
                     {/* TODO: Implement actual newsletter subscription logic */}
                     <Form onSubmit={e => e.preventDefault()}>
@@ -462,11 +301,11 @@ export default function OpenLibraryHomepage() {
                       >
                         <Form.Control
                           type="email"
-                          placeholder="Your email address"
+                          placeholder={t('email_placeholder')}
                           required
                         />
                         <Button variant="success" type="submit">
-                          Subscribe
+                          {t('subscribe')}
                         </Button>
                       </Stack>
                     </Form>
diff --git a/pages/open-library/review.tsx b/pages/open-library/review.tsx
new file mode 100644
index 0000000..28222cf
--- /dev/null
+++ b/pages/open-library/review.tsx
@@ -0,0 +1,372 @@
+import React, { useState } from 'react';
+import { Button, Card, Col, Form, Row, Tab, Tabs } from 'react-bootstrap';
+
+import { ContentContainer, Layout } from '../../components/open-library/Layout';
+
+// Review type definition
+type Review = {
+  id: number;
+  bookTitle: string;
+  bookAuthor: string;
+  bookCover?: string;
+  reviewer: string;
+  rating: number;
+  comment: string;
+  date: string;
+};
+
+export default function ReviewPage() {
+  // Sample reviews data - in a real app, this would come from an API
+  const [reviews, setReviews] = useState<Review[]>([
+    {
+      id: 1,
+      bookTitle: 'Clean Code',
+      bookAuthor: 'Robert C. Martin',
+      bookCover: '/images/placeholder-book.svg',
+      reviewer: 'Wang Chen',
+      rating: 5,
+      comment:
+        'This book completely changed how I approach writing code. Highly recommended for all developers!',
+      date: '2023-11-25',
+    },
+    {
+      id: 2,
+      bookTitle: 'Clean Code',
+      bookAuthor: 'Robert C. Martin',
+      bookCover: '/images/placeholder-book.svg',
+      reviewer: 'Li Mei',
+      rating: 4,
+      comment:
+        'Great principles that have stood the test of time. Some examples are a bit dated but the concepts are solid.',
+      date: '2023-09-10',
+    },
+    {
+      id: 3,
+      bookTitle: 'Eloquent JavaScript',
+      bookAuthor: 'Marijn Haverbeke',
+      bookCover: '/images/placeholder-book.svg',
+      reviewer: 'Liu Jie',
+      rating: 5,
+      comment:
+        'Perfect for beginners and intermediate JavaScript developers. The exercises are particularly helpful.',
+      date: '2023-12-05',
+    },
+    {
+      id: 4,
+      bookTitle: 'Design Patterns',
+      bookAuthor: 'Erich Gamma et al.',
+      bookCover: '/images/placeholder-book.svg',
+      reviewer: 'Chen Ming',
+      rating: 4,
+      comment:
+        'A classic that has stood the test of time. The examples are in C++ and Smalltalk, but the concepts apply to any OO language.',
+      date: '2023-07-25',
+    },
+    {
+      id: 5,
+      bookTitle: '深入理解计算机系统',
+      bookAuthor: 'Randal E. Bryant',
+      bookCover: '/images/placeholder-book.svg',
+      reviewer: 'Zhang Wei',
+      rating: 5,
+      comment:
+        '这是一本非常全面的计算机系统书籍，对理解计算机底层工作原理非常有帮助。',
+      date: '2023-10-15',
+    },
+  ]);
+
+  // Function to render star rating
+  const renderStars = (rating: number) => {
+    return (
+      <div className="text-warning">
+        {[...Array(5)].map((_, i) => (
+          <span key={i} style={{ fontSize: '1.2rem' }}>
+            {i < rating ? '\u2605' : '\u2606'}
+          </span>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Layout title="Book Reviews - Open Library">
+      <ContentContainer>
+        <div className="mb-5">
+          <h1 className="display-4 mb-4">书籍评价</h1>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h2 className="mb-4">社区书评</h2>
+              <p className="lead">
+                阅读是一种体验，分享让这种体验更加丰富。浏览社区成员的书评，或者分享您自己的阅读感受。
+              </p>
+              <div className="d-flex justify-content-end">
+                <Button
+                  variant="primary"
+                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  写书评
+                </Button>
+              </div>
+            </Card.Body>
+          </Card>
+
+          <Tabs defaultActiveKey="all" className="mb-4">
+            <Tab eventKey="all" title="所有评价">
+              <div className="mt-3">
+                {reviews.map(review => (
+                  <Card key={review.id} className="mb-4 shadow-sm">
+                    <Card.Body>
+                      <Row>
+                        <Col md={3} className="mb-3 mb-md-0">
+                          <div className="d-flex flex-column align-items-center">
+                            <img
+                              src={
+                                review.bookCover ||
+                                '/images/placeholder-book.svg'
+                              }
+                              alt={review.bookTitle}
+                              className="img-fluid mb-2"
+                              style={{ maxHeight: '150px' }}
+                            />
+                            <h6 className="text-center">{review.bookTitle}</h6>
+                            <p className="text-muted small text-center">
+                              {review.bookAuthor}
+                            </p>
+                          </div>
+                        </Col>
+                        <Col md={9}>
+                          <div className="d-flex justify-content-between align-items-center mb-3">
+                            <h5>{review.reviewer}</h5>
+                            {renderStars(review.rating)}
+                          </div>
+                          <p className="mb-3">{review.comment}</p>
+                          <div className="d-flex justify-content-between align-items-center">
+                            <small className="text-muted">
+                              {new Date(review.date).toLocaleDateString(
+                                'en-US',
+                                {
+                                  year: 'numeric',
+                                  month: '2-digit',
+                                  day: '2-digit',
+                                },
+                              )}
+                            </small>
+                            <Button
+                              variant="outline-primary"
+                              size="sm"
+                              href={`/open-library/book/${review.id}`}
+                            >
+                              查看书籍详情
+                            </Button>
+                          </div>
+                        </Col>
+                      </Row>
+                    </Card.Body>
+                  </Card>
+                ))}
+              </div>
+            </Tab>
+            <Tab eventKey="recent" title="最新评价">
+              <div className="mt-3">
+                {reviews
+                  .sort(
+                    (a, b) =>
+                      new Date(b.date).getTime() - new Date(a.date).getTime(),
+                  )
+                  .slice(0, 3)
+                  .map(review => (
+                    <Card key={review.id} className="mb-4 shadow-sm">
+                      <Card.Body>
+                        <Row>
+                          <Col md={3} className="mb-3 mb-md-0">
+                            <div className="d-flex flex-column align-items-center">
+                              <img
+                                src={
+                                  review.bookCover ||
+                                  '/images/placeholder-book.svg'
+                                }
+                                alt={review.bookTitle}
+                                className="img-fluid mb-2"
+                                style={{ maxHeight: '150px' }}
+                              />
+                              <h6 className="text-center">
+                                {review.bookTitle}
+                              </h6>
+                              <p className="text-muted small text-center">
+                                {review.bookAuthor}
+                              </p>
+                            </div>
+                          </Col>
+                          <Col md={9}>
+                            <div className="d-flex justify-content-between align-items-center mb-3">
+                              <h5>{review.reviewer}</h5>
+                              {renderStars(review.rating)}
+                            </div>
+                            <p className="mb-3">{review.comment}</p>
+                            <div className="d-flex justify-content-between align-items-center">
+                              <small className="text-muted">
+                                {new Date(review.date).toLocaleDateString(
+                                  'en-US',
+                                  {
+                                    year: 'numeric',
+                                    month: '2-digit',
+                                    day: '2-digit',
+                                  },
+                                )}
+                              </small>
+                              <Button
+                                variant="outline-primary"
+                                size="sm"
+                                href={`/open-library/book/${review.id}`}
+                              >
+                                查看书籍详情
+                              </Button>
+                            </div>
+                          </Col>
+                        </Row>
+                      </Card.Body>
+                    </Card>
+                  ))}
+              </div>
+            </Tab>
+            <Tab eventKey="top" title="高分评价">
+              <div className="mt-3">
+                {reviews
+                  .filter(review => review.rating >= 5)
+                  .map(review => (
+                    <Card key={review.id} className="mb-4 shadow-sm">
+                      <Card.Body>
+                        <Row>
+                          <Col md={3} className="mb-3 mb-md-0">
+                            <div className="d-flex flex-column align-items-center">
+                              <img
+                                src={
+                                  review.bookCover ||
+                                  '/images/placeholder-book.svg'
+                                }
+                                alt={review.bookTitle}
+                                className="img-fluid mb-2"
+                                style={{ maxHeight: '150px' }}
+                              />
+                              <h6 className="text-center">
+                                {review.bookTitle}
+                              </h6>
+                              <p className="text-muted small text-center">
+                                {review.bookAuthor}
+                              </p>
+                            </div>
+                          </Col>
+                          <Col md={9}>
+                            <div className="d-flex justify-content-between align-items-center mb-3">
+                              <h5>{review.reviewer}</h5>
+                              {renderStars(review.rating)}
+                            </div>
+                            <p className="mb-3">{review.comment}</p>
+                            <div className="d-flex justify-content-between align-items-center">
+                              <small className="text-muted">
+                                {new Date(review.date).toLocaleDateString(
+                                  'en-US',
+                                  {
+                                    year: 'numeric',
+                                    month: '2-digit',
+                                    day: '2-digit',
+                                  },
+                                )}
+                              </small>
+                              <Button
+                                variant="outline-primary"
+                                size="sm"
+                                href={`/open-library/book/${review.id}`}
+                              >
+                                查看书籍详情
+                              </Button>
+                            </div>
+                          </Col>
+                        </Row>
+                      </Card.Body>
+                    </Card>
+                  ))}
+              </div>
+            </Tab>
+          </Tabs>
+
+          <Card className="border-0 shadow-sm mb-5">
+            <Card.Body className="p-4">
+              <h3 className="mb-4">写下您的书评</h3>
+              <p>
+                阅读完一本书后，请花几分钟时间分享您的阅读体验。您的评价将帮助其他社区成员找到适合他们的书籍。
+              </p>
+              <div className="text-center mt-4">
+                <Button
+                  variant="primary"
+                  size="lg"
+                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  写书评
+                </Button>
+              </div>
+            </Card.Body>
+          </Card>
+
+          <Card className="border-0 shadow-sm">
+            <Card.Body className="p-4">
+              <h3 className="mb-4">书评指南</h3>
+              <Row>
+                <Col md={6} className="mb-4 mb-md-0">
+                  <h5>如何写一篇有帮助的书评</h5>
+                  <ul>
+                    <li>简要概述书籍内容，但不要透露关键情节</li>
+                    <li>分享您从书中获得的主要收获</li>
+                    <li>提及书籍的优点和可能的缺点</li>
+                    <li>说明适合阅读这本书的人群</li>
+                    <li>分享书中让您印象深刻的观点或引用</li>
+                  </ul>
+                </Col>
+                <Col md={6}>
+                  <h5>评分参考</h5>
+                  <ul className="list-unstyled">
+                    <li className="mb-2">
+                      <div className="d-flex align-items-center">
+                        <div className="text-warning me-2">★★★★★</div>
+                        <div>杰出，强烈推荐，改变思维的书籍</div>
+                      </div>
+                    </li>
+                    <li className="mb-2">
+                      <div className="d-flex align-items-center">
+                        <div className="text-warning me-2">★★★★☆</div>
+                        <div>非常好，值得推荐，有一些小缺点</div>
+                      </div>
+                    </li>
+                    <li className="mb-2">
+                      <div className="d-flex align-items-center">
+                        <div className="text-warning me-2">★★★☆☆</div>
+                        <div>好，有价值，但不突出</div>
+                      </div>
+                    </li>
+                    <li className="mb-2">
+                      <div className="d-flex align-items-center">
+                        <div className="text-warning me-2">★★☆☆☆</div>
+                        <div>一般，有一些有用信息，但整体平淡</div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex align-items-center">
+                        <div className="text-warning me-2">★☆☆☆☆</div>
+                        <div>不推荐，内容质量较低或不准确</div>
+                      </div>
+                    </li>
+                  </ul>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </div>
+      </ContentContainer>
+    </Layout>
+  );
+}
diff --git a/styles/open-library.css b/styles/open-library.css
new file mode 100644
index 0000000..540c4bd
--- /dev/null
+++ b/styles/open-library.css
@@ -0,0 +1,65 @@
+/* Open Library Global Styles */
+
+/* Reset styles for Open Library section */
+body.open-library, 
+html.open-library {
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow-x: hidden !important;
+}
+
+/* Hide main site header and footer */
+body.open-library nav.navbar.bg-dark.navbar-dark.fixed-top,
+body.open-library footer.mw-100.bg-dark.text-white {
+  display: none !important;
+}
+
+/* Remove top margin that accommodates the main header */
+body.open-library div.mt-5.pt-2 {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+/* Adjust main wrapper */
+body.open-library main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center {
+  background: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+/* Adjust container styles */
+body.open-library .container,
+body.open-library .container-fluid {
+  max-width: 100% !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* Remove card styling from main content */
+body.open-library main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center .card {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Remove card body padding */
+body.open-library main.flex-fill.d-flex.flex-column.justify-content-start.align-items-center .card-body {
+  padding: 0 !important;
+}
+
+/* Target the MDXProvider wrapper (main white background) */
+body.open-library .MDXProvider {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
diff --git a/translation/en-US.ts b/translation/en-US.ts
index 7e0ac36..fa87442 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -13,5 +13,152 @@ export default {
   search_results: 'Search Results',
 
   // Open Library
-  open_library: "Open Library",
+  open_library: 'Open Library',
+
+  // Open Library Navigation
+  home: 'Home',
+  catalog: 'Catalog',
+  donate: 'Donate',
+  how_to_borrow: 'How to Borrow',
+  review: 'Review',
+
+  // Open Library Home Page
+  featured_books: 'Featured Books',
+  view_all_books: 'Browse All Books',
+  browse_catalog: 'Browse Catalog',
+  testimonials: 'Testimonials',
+  join_community: 'Join Our Community',
+  become_member: 'Become a Member',
+  donate_books: 'Donate Books',
+  how_it_works: 'How It Works',
+  how_it_works_description:
+    'Three simple steps to borrow books from our community',
+  step_1_find_book: '1. Find a Book',
+  step_1_description:
+    'Browse our collection and find the book that interests you. Filter by category, author, or popularity.',
+  step_2_apply: '2. Apply to Borrow',
+  step_2_description:
+    "Submit a simple request form. We'll connect you with the book owner and arrange the handover.",
+  step_3_receive: '3. Receive and Pass It On',
+  step_3_description:
+    "Enjoy your book and return it when you're done. Consider donating your own books to keep knowledge flowing.",
+  learn_more_about_borrowing: 'Learn More About Borrowing',
+  community_voices: 'Community Voices',
+  community_voices_description: 'What our members say about Open Library',
+  read_more_reviews: 'Read More Reviews',
+  share_your_knowledge: 'Share Your Knowledge',
+  donate_a_book: 'Donate a Book',
+  stay_updated: 'Stay Updated',
+  newsletter_description:
+    'Subscribe to our newsletter for new book arrivals and community events.',
+  email_placeholder: 'Your email address',
+  subscribe: 'Subscribe',
+
+  // Open Library Books Page
+  book_catalog: 'Book Catalog',
+  search_books: 'Search Books',
+  all_categories: 'All Categories',
+  all_languages: 'All Languages',
+  all_status: 'All Status',
+  available: 'Available',
+  borrowed: 'Borrowed',
+  reset_filters: 'Reset Filters',
+  showing_books: 'Showing {0} of {1} books',
+  no_books_found: 'No books found',
+  try_adjusting_filters: 'Try adjusting your search or filters',
+  reset_all_filters: 'Reset All Filters',
+  view_details: 'View Details',
+  currently_with: 'Currently with: {0}',
+
+  // Open Library Book Detail Page
+  loading: 'Loading...',
+  book_not_found: 'Book Not Found',
+  return_to_catalog: 'Return to Catalog',
+  back: 'Back',
+  by_author: 'by {0}',
+  currently_borrowed: 'Currently Borrowed',
+  currently_unavailable: 'Currently Unavailable',
+  request_to_borrow: 'Request to Borrow',
+  reviews: 'Reviews',
+  borrow_history: 'Borrow History',
+  no_reviews_yet: 'No reviews yet',
+  be_first_to_review: 'Be the first to review this book!',
+  write_review: 'Write a Review',
+  add_your_review: 'Add Your Review',
+  borrower: 'Borrower',
+  borrow_date: 'Borrow Date',
+  return_date: 'Return Date',
+  status: 'Status',
+  returned: 'Returned',
+  active: 'Active',
+  not_borrowed_yet: 'This book has not been borrowed yet',
+
+  // Open Library About Page
+  about_open_library: 'About Open Library',
+  our_mission: 'Our Mission',
+  our_values: 'Our Values',
+  our_features: 'Our Features',
+  our_team: 'Our Team',
+  join_us_open_library: 'Join Us',
+
+  // Open Library Donate Page
+  book_donation: 'Book Donation',
+  why_donate: 'Why Donate Books?',
+  donation_process: 'Donation Process',
+  book_registration: 'Book Registration',
+  what_books_we_accept: 'What Books Do We Accept?',
+  we_welcome: 'We Welcome',
+  not_suitable: 'Not Suitable for Donation',
+  faq: 'Frequently Asked Questions',
+  ready_to_donate: 'Ready to Donate Books?',
+  fill_donation_form: 'Fill Donation Form',
+  apply_for_membership: 'Apply for Membership',
+
+  // Open Library How to Borrow Page
+  how_to_borrow_page: 'How to Borrow',
+  borrowing_and_passing: 'Borrowing and Passing Model',
+  borrowing_process: 'Borrowing Process',
+  borrowing_rules: 'Borrowing Rules',
+  quick_links: 'Quick Links',
+  view_full_catalog: 'View Full Catalog',
+  fill_borrow_request: 'Fill Borrow Request',
+  fill_book_passing_form: 'Fill Book Passing Form',
+  browse_book_catalog: 'Browse Book Catalog',
+
+  // Open Library Review Page
+  book_reviews: 'Book Reviews',
+  community_reviews: 'Community Reviews',
+  all_reviews: 'All Reviews',
+  recent_reviews: 'Recent Reviews',
+  top_reviews: 'Top Reviews',
+  write_your_review: 'Write Your Review',
+  review_guidelines: 'Review Guidelines',
+  how_to_write_helpful_review: 'How to Write a Helpful Review',
+  rating_reference: 'Rating Reference',
+
+  // Homepage Hero Section
+  hero_title: 'Free knowledge flows here',
+  hero_subtitle:
+    "Share and borrow books in our open-source community. Join freeCodeCamp Chengdu's initiative to make learning accessible to everyone.",
+
+  // Featured Books Section
+  featured_books_subtitle: 'Discover what our community is reading right now',
+
+  // Donation Callout Section
+  donation_callout_subtitle:
+    'Have books collecting dust on your shelf? Donate them to our community and help others learn and grow. Your contribution makes a difference!',
+
+  // Footer
+  footer_description:
+    'A community-driven library for sharing knowledge and stories. Built with open source. Powered by generosity.',
+  quick_links_footer: 'Quick Links',
+  home_footer: 'Home',
+  catalog_footer: 'Catalog',
+  about_us_footer: 'About Us',
+  donate_footer: 'Donate',
+  contact: 'Contact',
+  contact_email: 'Email: info@openlibrary.community',
+  contact_address: 'Address: 123 Library Lane, Knowledge City, World',
+  follow_us: 'Follow Us',
+  all_rights_reserved: 'All Rights Reserved',
 };
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 44edfe7..35e7ebc 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -13,5 +13,149 @@ export default {
   search_results: '搜索结果',
 
   // Open Library
-  open_library: "开源图书馆",
+  open_library: '开源图书馆',
+
+  // Open Library Navigation
+  home: '首页',
+  catalog: '书籍目录',
+  donate: '书籍募捐',
+  how_to_borrow: '如何借阅',
+  review: '书籍评价',
+
+  // Open Library Home Page
+  featured_books: '精选书籍',
+  view_all_books: '浏览全部书籍',
+  browse_catalog: '浏览书目',
+  testimonials: '读者反馈',
+  join_community: '加入社区',
+  become_member: '成为会员',
+  donate_books: '捐赠书籍',
+  how_it_works: '运作方式',
+  how_it_works_description: '三个简单步骤借阅社区书籍',
+  step_1_find_book: '1. 寻找书籍',
+  step_1_description:
+    '浏览我们的藏书并找到您感兴趣的书籍。可按类别、作者或热度筛选。',
+  step_2_apply: '2. 申请借阅',
+  step_2_description: '提交简单的申请表。我们将为您联系书籍所有者并安排交接。',
+  step_3_receive: '3. 接收并传递',
+  step_3_description:
+    '阅读完毕后归还书籍。考虑捐赠您自己的书籍，让知识持续流动。',
+  learn_more_about_borrowing: '了解更多借阅信息',
+  community_voices: '社区声音',
+  community_voices_description: '会员对开源图书馆的评价',
+  read_more_reviews: '阅读更多评价',
+  share_your_knowledge: '分享您的知识',
+  donate_a_book: '捐赠一本书',
+  stay_updated: '保持更新',
+  newsletter_description: '订阅我们的通讯，获取新书到达和社区活动信息。',
+  email_placeholder: '您的电子邮箱',
+  subscribe: '订阅',
+
+  // Open Library Books Page
+  book_catalog: '书籍目录',
+  search_books: '搜索书籍',
+  all_categories: '所有分类',
+  all_languages: '所有语言',
+  all_status: '所有状态',
+  available: '可借阅',
+  borrowed: '已借出',
+  reset_filters: '重置筛选',
+  showing_books: '显示 {0} 本书，共 {1} 本',
+  no_books_found: '未找到书籍',
+  try_adjusting_filters: '尝试调整筛选条件',
+  reset_all_filters: '重置所有筛选',
+  view_details: '查看详情',
+  currently_with: '当前持有者: {0}',
+
+  // Open Library Book Detail Page
+  loading: '加载中...',
+  book_not_found: '未找到书籍',
+  return_to_catalog: '返回目录',
+  back: '返回',
+  by_author: '作者: {0}',
+  currently_borrowed: '当前已借出',
+  currently_unavailable: '当前不可用',
+  request_to_borrow: '申请借阅',
+  reviews: '评价',
+  borrow_history: '借阅历史',
+  no_reviews_yet: '暂无评价',
+  be_first_to_review: '成为第一个评价的人！',
+  write_review: '写评价',
+  add_your_review: '添加您的评价',
+  borrower: '借阅者',
+  borrow_date: '借阅日期',
+  return_date: '归还日期',
+  status: '状态',
+  returned: '已归还',
+  active: '借阅中',
+  not_borrowed_yet: '此书尚未被借阅过',
+
+  // Open Library About Page
+  about_open_library: '关于社区图书馆',
+  our_mission: '我们的使命',
+  our_values: '我们的价值观',
+  our_features: '我们的特色',
+  our_team: '我们的团队',
+  join_us_open_library: '加入我们',
+
+  // Open Library Donate Page
+  book_donation: '书籍募捐',
+  why_donate: '为什么捐赠书籍？',
+  donation_process: '捐赠流程',
+  book_registration: '书籍登记',
+  what_books_we_accept: '我们接受什么样的书籍？',
+  we_welcome: '我们欢迎',
+  not_suitable: '不适合捐赠',
+  faq: '常见问题',
+  ready_to_donate: '准备好捐赠书籍了吗？',
+  fill_donation_form: '填写捐赠申请',
+  apply_for_membership: '申请成为会员',
+
+  // Open Library How to Borrow Page
+  how_to_borrow_page: '如何借阅',
+  borrowing_and_passing: '借阅与传递模式',
+  borrowing_process: '借阅流程',
+  borrowing_rules: '借阅规则',
+  quick_links: '快速链接',
+  view_full_catalog: '查看完整书籍目录',
+  fill_borrow_request: '填写借阅申请',
+  fill_book_passing_form: '填写书籍传递表',
+  browse_book_catalog: '浏览书籍目录',
+
+  // Open Library Review Page
+  book_reviews: '书籍评价',
+  community_reviews: '社区书评',
+  all_reviews: '所有评价',
+  recent_reviews: '最新评价',
+  top_reviews: '高分评价',
+  write_your_review: '写下您的书评',
+  review_guidelines: '书评指南',
+  how_to_write_helpful_review: '如何写一篇有帮助的书评',
+  rating_reference: '评分参考',
+
+  // Homepage Hero Section
+  hero_title: '知识在这里自由流动',
+  hero_subtitle:
+    '在我们的开源社区中分享和借阅书籍。加入 freeCodeCamp 成都社区的倡议，让学习对每个人都触手可及。',
+
+  // Featured Books Section
+  featured_books_subtitle: '发现我们社区现在正在阅读的书籍',
+
+  // Donation Callout Section
+  donation_callout_subtitle:
+    '您的书架上有积灰的书吗？将它们捐赠给我们的社区，帮助他人学习和成长。您的贡献会产生影响！',
+
+  // Footer
+  footer_description:
+    '一个由社区驱动的图书馆，用于分享知识和故事。开源构建。由慷慨驱动。',
+  quick_links_footer: '快速链接',
+  home_footer: '首页',
+  catalog_footer: '目录',
+  about_us_footer: '关于我们',
+  donate_footer: '捐赠',
+  contact: '联系我们',
+  contact_email: '邮箱：info@openlibrary.community',
+  contact_address: '地址：123 图书馆路，知识城，世界',
+  follow_us: '关注我们',
+  all_rights_reserved: '版权所有',
 };
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index be691cc..ba0dc09 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -13,5 +13,148 @@ export default {
   search_results: '搜尋結果',
 
   // Open Library
-  open_library: "開源圖書館",
+  open_library: '開源圖書館',
+
+  // Open Library Navigation
+  home: '首頁',
+  catalog: '目錄',
+  donate: '捐贈',
+  how_to_borrow: '如何借書',
+  review: '書評',
+
+  // Open Library Home Page
+  featured_books: '特色書籍',
+  view_all_books: '查看所有書籍',
+  browse_catalog: '瀏覽目錄',
+  testimonials: '證言',
+  join_community: '加入社群',
+  become_member: '成為會員',
+  donate_books: '捐贈書籍',
+  how_it_works: '如何運作',
+  how_it_works_description: '九步驟加入社群圖書館',
+  step_1_find_book: '1. 找書',
+  step_1_description:
+    '瀏覽我們的書籍目錄，找到您想要的書籍。您可以按類別、作者或標題搜索。',
+  step_2_apply: '2. 申請借書',
+  step_2_description: '填寫借書申請表格，我們會與您聯絡安排借書事宜。',
+  step_3_receive: '3. 收書',
+  step_3_description: '書籍將會寄送到您指定的地址，請注意查收。',
+  learn_more_about_borrowing: '了解更多借書資訊',
+  community_voices: '社群聲音',
+  community_voices_description: '聽聽我們的社群成員怎麼說',
+  read_more_reviews: '閱讀更多書評',
+  share_your_knowledge: '分享您的知識',
+  donate_a_book: '捐贈一本書',
+  stay_updated: '保持更新',
+  newsletter_description: '訂閱我們的電子報，保持與社群圖書館的聯絡。',
+  email_placeholder: '您的電子郵件地址',
+  subscribe: '訂閱',
+
+  // Open Library Books Page
+  book_catalog: '書籍目錄',
+  search_books: '搜尋書籍',
+  all_categories: '所有類別',
+  all_languages: '所有語言',
+  all_status: '所有狀態',
+  available: '可借',
+  borrowed: '已借出',
+  reset_filters: '重設篩選',
+  showing_books: '顯示 {0} 本書，共 {1} 本',
+  no_books_found: '沒有找到書籍',
+  try_adjusting_filters: '試著調整篩選條件',
+  reset_all_filters: '重設所有篩選',
+  view_details: '查看詳情',
+  currently_with: '目前由 {0} 借出',
+
+  // Open Library Book Detail Page
+  loading: '載入中...',
+  book_not_found: '沒有找到書籍',
+  return_to_catalog: '返回目錄',
+  back: '返回',
+  by_author: '作者：{0}',
+  currently_borrowed: '目前已借出',
+  currently_unavailable: '目前不可借',
+  request_to_borrow: '申請借書',
+  reviews: '書評',
+  borrow_history: '借書歷史',
+  no_reviews_yet: '尚無書評',
+  be_first_to_review: '成為第一個書評的人！',
+  write_review: '寫書評',
+  add_your_review: '新增您的書評',
+  borrower: '借書人',
+  borrow_date: '借書日期',
+  return_date: '歸還日期',
+  status: '狀態',
+  returned: '已歸還',
+  active: '借書中',
+  not_borrowed_yet: '尚未借出',
+
+  // Open Library About Page
+  about_open_library: '關於開源圖書館',
+  our_mission: '我們的使命',
+  our_values: '我們的價值',
+  our_features: '我們的特色',
+  our_team: '我們的團隊',
+  join_us_open_library: '加入我們',
+
+  // Open Library Donate Page
+  book_donation: '書籍捐贈',
+  why_donate: '為什麼捐贈？',
+  donation_process: '捐贈流程',
+  book_registration: '書籍登錄',
+  what_books_we_accept: '我們接受什麼書籍？',
+  we_welcome: '我們歡迎',
+  not_suitable: '不適合',
+  faq: '常見問題',
+  ready_to_donate: '準備捐贈書籍？',
+  fill_donation_form: '填寫捐贈表單',
+  apply_for_membership: '申請會員',
+
+  // Open Library How to Borrow Page
+  how_to_borrow_page: '如何借書',
+  borrowing_and_passing: '借閱與傳遞模式',
+  borrowing_process: '借書流程',
+  borrowing_rules: '借書規則',
+  quick_links: '快速連結',
+  view_full_catalog: '查看完整目錄',
+  fill_borrow_request: '填寫借書申請',
+  fill_book_passing_form: '填寫書籍傳遞表單',
+  browse_book_catalog: '瀏覽書籍目錄',
+
+  // Open Library Review Page
+  book_reviews: '書籍書評',
+  community_reviews: '社群書評',
+  all_reviews: '所有書評',
+  recent_reviews: '最新書評',
+  top_reviews: '最佳書評',
+  write_your_review: '寫您的書評',
+  review_guidelines: '書評指南',
+  how_to_write_helpful_review: '如何寫有用的書評',
+  rating_reference: '評分參考',
+
+  // Homepage Hero Section
+  hero_title: '在我們的開源圖書館中探索',
+  hero_subtitle:
+    '在我們的社群圖書館中探索免費的書籍和資源。加入 freeCodeCamp 成為社群圖書館的一部分，學習和分享知識。',
+
+  // Featured Books Section
+  featured_books_subtitle: '我們社群圖書館中最受歡迎的書籍',
+
+  // Donation Callout Section
+  donation_callout_subtitle:
+    '您的捐贈將有助於我們的社群圖書館的發展。您的支持將有助於我們提供更多免費的書籍和資源給社群成員。',
+
+  // Footer
+  footer_description:
+    '一個開源的社群圖書館，提供免費的書籍和資源給社群成員。開源。免費。無限可能。',
+  quick_links_footer: '快速連結',
+  home_footer: '首頁',
+  catalog_footer: '目錄',
+  about_us_footer: '關於我們',
+  donate_footer: '捐贈',
+  contact: '聯絡我們',
+  contact_email: '聯絡郵件：info@openlibrary.community',
+  contact_address: '地址：123 圖書館路，社群圖書館，香港',
+  follow_us: '關注我們',
+  all_rights_reserved: '版權所有',
 };

From 23870d8e610d79e33acf509fb18e85e2e4c6dba3 Mon Sep 17 00:00:00 2001
From: dethan3 <iimsyw@gmail.com>
Date: Fri, 25 Apr 2025 14:22:20 +0800
Subject: [PATCH 6/7] fix: replace <a> tags with Next.js <Link> components and
 fix TypeScript errors

---
 components/open-library/Navbar.tsx   |  2 +-
 pages/open-library/books/index.tsx   |  4 ++--
 pages/open-library/how-to-borrow.tsx | 20 ++++++++++++--------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/open-library/Navbar.tsx b/components/open-library/Navbar.tsx
index 1b2fd35..c870c9a 100644
--- a/components/open-library/Navbar.tsx
+++ b/components/open-library/Navbar.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic';
 import React from 'react';
-import { Button, Form, FormControl, Nav, Navbar } from 'react-bootstrap';
+import { Nav, Navbar } from 'react-bootstrap';
 
 import { t } from '../../models/Translation';
 
diff --git a/pages/open-library/books/index.tsx b/pages/open-library/books/index.tsx
index c18b6a0..f46f708 100644
--- a/pages/open-library/books/index.tsx
+++ b/pages/open-library/books/index.tsx
@@ -124,8 +124,8 @@ export default function BookCatalog() {
   const [statusFilter, setStatusFilter] = useState('');
 
   // Extract unique categories and languages for filter dropdowns
-  const categories = [...new Set(books.map(book => book.category))];
-  const languages = [...new Set(books.map(book => book.language))];
+  const categories = Array.from(new Set(books.map(book => book.category)));
+  const languages = Array.from(new Set(books.map(book => book.language)));
 
   // Apply filters when any filter changes
   useEffect(() => {
diff --git a/pages/open-library/how-to-borrow.tsx b/pages/open-library/how-to-borrow.tsx
index 451dfea..3304bdd 100644
--- a/pages/open-library/how-to-borrow.tsx
+++ b/pages/open-library/how-to-borrow.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 import { Button, Card, Col, Row } from 'react-bootstrap';
 
@@ -61,7 +62,10 @@ export default function HowToBorrowPage() {
                             fCC 成都社区图书馆
                           </a>{' '}
                           中查找自己感兴趣的书籍，或者在我们的{' '}
-                          <a href="/open-library/books">书籍目录</a> 中浏览。
+                          <Link href="/open-library/books" legacyBehavior>
+                            <a>书籍目录</a>
+                          </Link>{' '}
+                          中浏览。
                         </p>
                       </div>
                     </div>
@@ -214,9 +218,9 @@ export default function HowToBorrowPage() {
                     >
                       填写书籍传递表
                     </a>
-                    <a href="/open-library/books" className="btn btn-primary">
-                      浏览书籍目录
-                    </a>
+                    <Link href="/open-library/books" legacyBehavior>
+                      <a className="btn btn-primary">浏览书籍目录</a>
+                    </Link>
                   </div>
                 </Card.Body>
               </Card>
@@ -274,14 +278,14 @@ export default function HowToBorrowPage() {
           <div className="text-center">
             <h3 className="mb-4">准备好借阅了吗？</h3>
             <div className="d-flex justify-content-center gap-3 flex-wrap">
-              <a href="/open-library/books" className="btn btn-primary btn-lg">
-                浏览书籍目录
-              </a>
+              <Link href="/open-library/books" legacyBehavior>
+                <a className="btn btn-primary btn-lg">浏览书籍目录</a>
+              </Link>
               <a
                 href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="btn btn-outline-primary btn-lg"
+                className="btn btn-warning btn-lg"
               >
                 申请成为会员
               </a>

From 99320ce1c351c3a0d180c03d122e1d268626f663 Mon Sep 17 00:00:00 2001
From: dethan3 <iimsyw@gmail.com>
Date: Thu, 19 Jun 2025 09:23:18 +0800
Subject: [PATCH 7/7] feat: Complete MVP layout improvements

---
 components/Layout/CardPage.tsx            |   2 +-
 components/open-library/BookCard.tsx      | 101 +++++
 components/open-library/FeaturedBooks.tsx |  72 ++++
 components/open-library/Footer.tsx        | 108 +++--
 components/open-library/HeroSection.tsx   |  81 ++++
 components/open-library/HowItWorks.tsx    | 163 +++++++
 components/open-library/Layout.tsx        |  18 +-
 components/open-library/Navbar.tsx        |  24 +-
 pages/api/core.ts                         |   2 +-
 pages/open-library/about.tsx              | 201 ---------
 pages/open-library/book/[id].tsx          |   5 +-
 pages/open-library/books/index.tsx        | 274 +++---------
 pages/open-library/donate.tsx             | 254 -----------
 pages/open-library/how-to-borrow.tsx      |   2 +-
 pages/open-library/index.tsx              | 496 +++++++++-------------
 pages/open-library/review.tsx             | 372 ----------------
 16 files changed, 757 insertions(+), 1418 deletions(-)
 create mode 100644 components/open-library/BookCard.tsx
 create mode 100644 components/open-library/FeaturedBooks.tsx
 create mode 100644 components/open-library/HeroSection.tsx
 create mode 100644 components/open-library/HowItWorks.tsx
 delete mode 100644 pages/open-library/about.tsx
 delete mode 100644 pages/open-library/donate.tsx
 delete mode 100644 pages/open-library/review.tsx

diff --git a/components/Layout/CardPage.tsx b/components/Layout/CardPage.tsx
index 66ca2c6..f6da494 100644
--- a/components/Layout/CardPage.tsx
+++ b/components/Layout/CardPage.tsx
@@ -4,7 +4,7 @@ import { Col, Pagination, Row } from 'react-bootstrap';
 import { SearchPageMeta } from '../../models/System';
 
 export interface CardPageProps extends SearchPageMeta {
-  Card: ComponentClass<any> | FC<any>;
+  Card: ComponentClass<Record<string, unknown>> | FC<Record<string, unknown>>;
   cardLinkOf?: (id: string) => string;
   pageLinkOf: (page: number) => string;
 }
diff --git a/components/open-library/BookCard.tsx b/components/open-library/BookCard.tsx
new file mode 100644
index 0000000..9b607d6
--- /dev/null
+++ b/components/open-library/BookCard.tsx
@@ -0,0 +1,101 @@
+import Link from 'next/link';
+import React from 'react';
+import { Button, Card, Image } from 'react-bootstrap';
+
+import { t } from '../../models/Translation';
+
+export interface Book {
+  id: number;
+  title: string;
+  author: string;
+  cover?: string;
+  status?: 'available' | 'borrowed';
+  category?: string;
+  description?: string;
+}
+
+interface BookCardProps {
+  book: Book;
+  showStatus?: boolean;
+  variant?: 'featured' | 'catalog';
+}
+
+const BookCard: React.FC<BookCardProps> = ({
+  book,
+  showStatus = false,
+  variant = 'featured',
+}) => {
+  const cardClass =
+    variant === 'featured'
+      ? 'h-100 shadow-sm border-0'
+      : 'h-100 shadow border-0';
+
+  return (
+    <Card className={cardClass}>
+      <div className="text-center p-3 position-relative">
+        {showStatus && (
+          <div className="position-absolute top-0 end-0 m-2">
+            <span
+              className={`badge ${
+                book.status === 'available'
+                  ? 'bg-success'
+                  : 'bg-warning text-dark'
+              }`}
+            >
+              {book.status === 'available' ? '可借阅' : '已借出'}
+            </span>
+          </div>
+        )}
+        <div
+          className="d-flex align-items-center justify-content-center overflow-hidden rounded bg-light"
+          style={{ height: '180px' }}
+        >
+          <Image
+            src={book.cover || '/images/placeholder-book.svg'}
+            alt={`${book.title} 封面`}
+            className="img-fluid"
+            style={{
+              maxHeight: '160px',
+              maxWidth: '120px',
+              objectFit: 'contain',
+            }}
+          />
+        </div>
+      </div>
+      <Card.Body className="text-center d-flex flex-column p-3">
+        <Card.Title
+          className="fw-bold h6 mb-2 text-truncate"
+          title={book.title}
+        >
+          {book.title}
+        </Card.Title>
+        <Card.Text
+          className="text-muted small mb-2 text-truncate"
+          title={book.author}
+        >
+          {book.author}
+        </Card.Text>
+        {book.category && (
+          <Card.Text className="text-muted small mb-3">
+            <i className="bi bi-tag me-1"></i>
+            {book.category}
+          </Card.Text>
+        )}
+        <div className="mt-auto">
+          <Link href={`/open-library/book/${book.id}`} passHref legacyBehavior>
+            <Button
+              variant="outline-success"
+              size="sm"
+              as="a"
+              className="rounded-pill px-3 fw-medium"
+            >
+              {t('view_details')}
+            </Button>
+          </Link>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default BookCard;
diff --git a/components/open-library/FeaturedBooks.tsx b/components/open-library/FeaturedBooks.tsx
new file mode 100644
index 0000000..b65c970
--- /dev/null
+++ b/components/open-library/FeaturedBooks.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link';
+import React from 'react';
+import { Button, Col, Row } from 'react-bootstrap';
+
+import BookCard, { Book } from './BookCard';
+import { ContentContainer } from './Layout';
+
+interface FeaturedBooksProps {
+  books: Book[];
+  title?: string;
+  subtitle?: string;
+  showViewAll?: boolean;
+  viewAllLink?: string;
+  viewAllText?: string;
+}
+
+const FeaturedBooks: React.FC<FeaturedBooksProps> = ({
+  books,
+  title = '精选图书',
+  subtitle = '社区成员推荐的优质读物，涵盖技术、设计、创业等多个领域',
+  showViewAll = true,
+  viewAllLink = '/open-library/books',
+  viewAllText = '查看全部图书',
+}) => {
+  return (
+    <section className="py-5 bg-light">
+      <ContentContainer>
+        <div className="text-center mb-5">
+          <h2 className="display-5 fw-bold text-dark mb-3 position-relative">
+            {title}
+            <div className="position-absolute start-50 translate-middle-x mt-2">
+              <div
+                className="bg-success rounded-pill"
+                style={{ width: '60px', height: '3px' }}
+              ></div>
+            </div>
+          </h2>
+          <p className="lead text-muted mx-auto" style={{ maxWidth: '600px' }}>
+            {subtitle}
+          </p>
+        </div>
+
+        <Row xs={1} sm={2} lg={3} xl={4} className="g-4 justify-content-center">
+          {books.slice(0, 8).map(book => (
+            <Col key={book.id}>
+              <BookCard book={book} variant="featured" />
+            </Col>
+          ))}
+        </Row>
+
+        {showViewAll && (
+          <div className="text-center mt-5">
+            <Link href={viewAllLink} passHref legacyBehavior>
+              <Button
+                variant="outline-success"
+                size="lg"
+                as="a"
+                className="rounded-pill px-4 fw-semibold"
+              >
+                <i className="bi bi-collection me-2"></i>
+                {viewAllText}
+                <i className="bi bi-arrow-right ms-2"></i>
+              </Button>
+            </Link>
+          </div>
+        )}
+      </ContentContainer>
+    </section>
+  );
+};
+
+export default FeaturedBooks;
diff --git a/components/open-library/Footer.tsx b/components/open-library/Footer.tsx
index c17b219..7e3a39e 100644
--- a/components/open-library/Footer.tsx
+++ b/components/open-library/Footer.tsx
@@ -3,23 +3,11 @@ import { Col, Nav, Row } from 'react-bootstrap';
 
 import { t } from '../../models/Translation';
 
-//
+// 使用 Bootstrap 工具类替换内联样式的 ContentContainer
 const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return (
-    <div
-      style={{
-        maxWidth: '1200px',
-        margin: '0 auto',
-        padding: '0 20px',
-        width: '100%',
-        boxSizing: 'border-box',
-      }}
-    >
-      {children}
-    </div>
-  );
+  return <div className="container-xl px-3">{children}</div>;
 };
 
 const FooterComponent = () => {
@@ -31,75 +19,83 @@ const FooterComponent = () => {
   }, []);
 
   return (
-    <footer className="bg-dark text-light py-4 mt-5">
+    <footer className="bg-dark text-light py-4">
       <ContentContainer>
         <Row>
           <Col md={4} className="mb-3 mb-md-0">
-            <h5>{t('open_library')}</h5>
-            <p>{t('footer_description')}</p>
-            <div className="mt-2">
-              <a href="#github" className="text-light me-3">
+            <h5 className="fw-bold mb-3">{t('open_library')}</h5>
+            <p className="text-light opacity-75 lh-base">
+              {t('footer_description')}
+            </p>
+            <div className="mt-3">
+              <a
+                href="#github"
+                className="text-light text-decoration-none me-3 hover-opacity"
+              >
+                <i className="bi bi-github me-1"></i>
                 GitHub
               </a>
-              <a href="#twitter" className="text-light me-3">
+              <a
+                href="#twitter"
+                className="text-light text-decoration-none me-3 hover-opacity"
+              >
+                <i className="bi bi-twitter me-1"></i>
                 Twitter
               </a>
-              <a href="#feishu" className="text-light me-3">
+              <a
+                href="#feishu"
+                className="text-light text-decoration-none me-3 hover-opacity"
+              >
+                <i className="bi bi-chat-dots me-1"></i>
                 Feishu
               </a>
-              <a href="#instagram" className="text-light">
-                Instagram
-              </a>
             </div>
           </Col>
           <Col md={3} className="mb-3 mb-md-0">
-            <h5>{t('quick_links_footer')}</h5>
+            <h5 className="fw-bold mb-3">{t('quick_links_footer')}</h5>
             <Nav className="flex-column">
-              <Nav.Link href="/open-library/books" className="text-light px-0">
+              <Nav.Link
+                href="/open-library/books"
+                className="text-light px-0 py-1 text-decoration-none"
+              >
+                <i className="bi bi-book me-2"></i>
                 {t('catalog_footer')}
               </Nav.Link>
-              <Nav.Link href="/open-library/donate" className="text-light px-0">
-                {t('donate_footer')}
-              </Nav.Link>
               <Nav.Link
                 href="/open-library/how-to-borrow"
-                className="text-light px-0"
+                className="text-light px-0 py-1 text-decoration-none"
               >
+                <i className="bi bi-info-circle me-2"></i>
                 {t('how_to_borrow')}
               </Nav.Link>
-              <Nav.Link href="/open-library/about" className="text-light px-0">
-                {t('about_us_footer')}
-              </Nav.Link>
-              <Nav.Link href="/open-library/faq" className="text-light px-0">
-                {t('faq')}
-              </Nav.Link>
             </Nav>
           </Col>
           <Col md={5}>
-            <h5>{t('contact')}</h5>
-            <p className="mb-1">freeCodeCamp Chengdu Community</p>
-            <p className="mb-1">Chengdu, Sichuan, China</p>
-            <p className="mb-1">Email: contact@openlibrary.org</p>
-            <p>WeChat: FCCChengdu</p>
+            <h5 className="fw-bold mb-3">{t('contact')}</h5>
+            <div className="text-light opacity-75">
+              <p className="mb-2">
+                <i className="bi bi-geo-alt me-2"></i>
+                freeCodeCamp Chengdu Community
+              </p>
+              <p className="mb-2">
+                <i className="bi bi-pin-map me-2"></i>
+                Chengdu, Sichuan, China
+              </p>
+              <p className="mb-2">
+                <i className="bi bi-envelope me-2"></i>
+                Email: contact@openlibrary.org
+              </p>
+              <p className="mb-0">
+                <i className="bi bi-wechat me-2"></i>
+                WeChat: FCCChengdu
+              </p>
+            </div>
           </Col>
         </Row>
 
-        <hr
-          className="mt-4 mb-3"
-          style={{ borderColor: 'rgba(255,255,255,0.2)' }}
-        />
+        <hr className="mt-4 mb-3 border-secondary opacity-25" />
 
-        {/* Use a more direct approach with inline styles to ensure visibility */}
-        <div
-          className="py-2"
-          style={{
-            textAlign: 'center',
-            color: '#6c757d',
-            fontSize: '0.875rem',
-            width: '100%',
-            display: 'block',
-          }}
-        >
+        <div className="text-center text-light opacity-75 py-2">
           {isMounted ? (
             <>
               &copy; {new Date().getFullYear()} {t('open_library')}.{' '}
diff --git a/components/open-library/HeroSection.tsx b/components/open-library/HeroSection.tsx
new file mode 100644
index 0000000..3ecc17c
--- /dev/null
+++ b/components/open-library/HeroSection.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Button, Col, Image, Row } from 'react-bootstrap';
+
+import { ContentContainer } from './Layout';
+
+interface HeroSectionProps {
+  title?: string;
+  subtitle?: string;
+  ctaText?: string;
+  ctaLink?: string;
+  heroImage?: string;
+  heroImageAlt?: string;
+}
+
+const HeroSection: React.FC<HeroSectionProps> = ({
+  title = 'freeCodeCamp 成都社区 Open Library',
+  subtitle = '让知识在社区中自由流动，连接每一个热爱学习的心',
+  ctaText = '加入我们',
+  ctaLink = 'https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld',
+  heroImage = '/images/open-library-hero.svg',
+  heroImageAlt = '社区成员分享书籍',
+}) => {
+  return (
+    <section
+      className="bg-primary text-white position-relative overflow-hidden w-100"
+      style={{
+        marginLeft: 'calc(-50vw + 50%)',
+        marginRight: 'calc(-50vw + 50%)',
+        width: '100vw',
+        marginTop: '0',
+        paddingTop: '7.5rem',
+        paddingBottom: '7.5rem',
+      }}
+    >
+      <ContentContainer>
+        <Row className="align-items-center min-vh-60">
+          <Col lg={6} className="order-2 order-lg-1">
+            <div className="position-relative">
+              <h1 className="display-4 fw-bold mb-4 text-white">{title}</h1>
+              <p className="lead fs-5 mb-4 text-white-50">{subtitle}</p>
+              <div className="mb-4">
+                <Button
+                  variant="warning"
+                  size="lg"
+                  href={ctaLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="me-3 mb-2 rounded-pill px-4 fw-bold text-dark"
+                >
+                  <i className="bi bi-person-plus me-2"></i>
+                  {ctaText}
+                </Button>
+                <Button
+                  variant="outline-light"
+                  size="lg"
+                  href="/open-library/books"
+                  className="mb-2 rounded-pill px-4"
+                >
+                  <i className="bi bi-book me-2"></i>
+                  浏览图书
+                </Button>
+              </div>
+            </div>
+          </Col>
+          <Col lg={6} className="order-1 order-lg-2 text-center mb-5 mb-lg-0">
+            <div className="position-relative">
+              <Image
+                src={heroImage}
+                alt={heroImageAlt}
+                fluid
+                className="shadow-lg rounded"
+              />
+            </div>
+          </Col>
+        </Row>
+      </ContentContainer>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/components/open-library/HowItWorks.tsx b/components/open-library/HowItWorks.tsx
new file mode 100644
index 0000000..ccc6b4c
--- /dev/null
+++ b/components/open-library/HowItWorks.tsx
@@ -0,0 +1,163 @@
+import Link from 'next/link';
+import React from 'react';
+import { Button, Col, Row } from 'react-bootstrap';
+
+import { ContentContainer } from './Layout';
+
+interface Step {
+  id: number;
+  title: string;
+  description: string;
+  icon: string;
+  color: string;
+}
+
+interface HowItWorksProps {
+  title?: string;
+  subtitle?: string;
+  steps?: Step[];
+  showLearnMore?: boolean;
+  learnMoreLink?: string;
+}
+
+const defaultSteps: Step[] = [
+  {
+    id: 1,
+    title: '浏览图书',
+    description: '在图书目录中找到你感兴趣的书籍，查看详细信息和当前状态',
+    icon: 'bi-search',
+    color: '#6f42c1',
+  },
+  {
+    id: 2,
+    title: '申请借阅',
+    description: '填写借阅申请表单，系统会自动联系当前持书人',
+    icon: 'bi-file-earmark-text',
+    color: '#0d6efd',
+  },
+  {
+    id: 3,
+    title: '线下传递',
+    description: '与持书人约定传递方式，通常通过快递或面对面交接',
+    icon: 'bi-arrow-left-right',
+    color: '#fd7e14',
+  },
+  {
+    id: 4,
+    title: '享受阅读',
+    description: '阅读完成后，可以写下书评并准备传递给下一位读者',
+    icon: 'bi-book-half',
+    color: '#198754',
+  },
+];
+
+const HowItWorks: React.FC<HowItWorksProps> = ({
+  title = '如何使用 Open Library',
+  subtitle = '简单四步，让知识在社区中自由流动',
+  steps = defaultSteps,
+  showLearnMore = true,
+  learnMoreLink = '/open-library/how-to-borrow',
+}) => {
+  return (
+    <section className="py-5 bg-white">
+      <ContentContainer>
+        <div className="text-center mb-5">
+          <h2 className="display-5 fw-bold text-dark mb-3 position-relative">
+            {title}
+            <div className="position-absolute start-50 translate-middle-x mt-2">
+              <div
+                className="bg-primary rounded-pill"
+                style={{ width: '60px', height: '3px' }}
+              ></div>
+            </div>
+          </h2>
+          <p className="lead text-muted mx-auto" style={{ maxWidth: '600px' }}>
+            {subtitle}
+          </p>
+        </div>
+
+        <Row className="g-4">
+          {steps.map((step, index) => (
+            <Col key={step.id} md={6} lg={3}>
+              <div className="text-center p-3">
+                <div
+                  className="position-relative mb-3 d-flex justify-content-center"
+                  style={{ height: '80px' }}
+                >
+                  <div
+                    className="rounded-circle d-flex align-items-center justify-content-center text-white fs-4 shadow position-relative"
+                    style={{
+                      backgroundColor: step.color,
+                      width: '60px',
+                      height: '60px',
+                    }}
+                  >
+                    <i className={`bi ${step.icon}`}></i>
+                  </div>
+                  <span
+                    className="position-absolute bg-danger text-white rounded-circle d-flex align-items-center justify-content-center fw-bold small"
+                    style={{
+                      width: '24px',
+                      height: '24px',
+                      top: '-10px',
+                      right: 'calc(50% - 42px)',
+                      fontSize: '0.75rem',
+                    }}
+                  >
+                    {step.id}
+                  </span>
+                  {/* 连接线仅在大屏幕显示且不是最后一个 */}
+                  {index < steps.length - 1 && (
+                    <div
+                      className="position-absolute bg-secondary d-none d-lg-block"
+                      style={{
+                        top: '30px',
+                        left: 'calc(100% - 30px)',
+                        width: '60px',
+                        height: '2px',
+                      }}
+                    >
+                      <div
+                        className="position-absolute"
+                        style={{
+                          right: '-6px',
+                          top: '-4px',
+                          width: '0',
+                          height: '0',
+                          borderLeft: '6px solid #6c757d',
+                          borderTop: '5px solid transparent',
+                          borderBottom: '5px solid transparent',
+                        }}
+                      ></div>
+                    </div>
+                  )}
+                </div>
+                <h3 className="h5 fw-semibold text-dark mb-3">{step.title}</h3>
+                <p className="text-muted lh-base">{step.description}</p>
+              </div>
+            </Col>
+          ))}
+        </Row>
+
+        {showLearnMore && (
+          <div className="text-center mt-5">
+            <Link href={learnMoreLink} passHref legacyBehavior>
+              <Button
+                variant="outline-primary"
+                size="lg"
+                as="a"
+                className="rounded-pill px-4 fw-semibold"
+              >
+                <i className="bi bi-info-circle me-2"></i>
+                了解详细流程
+                <i className="bi bi-arrow-right ms-2"></i>
+              </Button>
+            </Link>
+          </div>
+        )}
+      </ContentContainer>
+    </section>
+  );
+};
+
+export default HowItWorks;
diff --git a/components/open-library/Layout.tsx b/components/open-library/Layout.tsx
index 92e09d5..c126f93 100644
--- a/components/open-library/Layout.tsx
+++ b/components/open-library/Layout.tsx
@@ -8,19 +8,7 @@ import { useOpenLibraryLayout } from './useOpenLibraryLayout';
 const ContentContainer: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return (
-    <div
-      style={{
-        maxWidth: '1200px',
-        margin: '0 auto',
-        padding: '0 20px',
-        width: '100%',
-        boxSizing: 'border-box',
-      }}
-    >
-      {children}
-    </div>
-  );
+  return <div className="container-xl px-3">{children}</div>;
 };
 
 interface LayoutProps {
@@ -49,7 +37,9 @@ const Layout: React.FC<LayoutProps> = ({
 
       <LibraryNavbar />
 
-      <main>{children}</main>
+      <main className="py-5">
+        <ContentContainer>{children}</ContentContainer>
+      </main>
 
       <FooterComponent />
     </>
diff --git a/components/open-library/Navbar.tsx b/components/open-library/Navbar.tsx
index c870c9a..966c73a 100644
--- a/components/open-library/Navbar.tsx
+++ b/components/open-library/Navbar.tsx
@@ -18,21 +18,8 @@ const LibraryNavbar = () => {
   }, []);
 
   return (
-    <Navbar bg="light" expand="lg" sticky="top" className="mb-4 shadow-sm">
-      {/* 使用自定义的居中容器替代 Container fluid，与页面内容保持一致的宽度和居中效果 */}
-      <div
-        style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          width: '100%',
-          boxSizing: 'border-box',
-          display: 'flex',
-          flexWrap: 'wrap',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+    <Navbar bg="light" expand="lg" sticky="top" className="shadow-sm">
+      <div className="container-xl px-3 d-flex flex-wrap align-items-center justify-content-between w-100">
         <Navbar.Brand
           href="/open-library"
           className="d-flex align-items-center"
@@ -43,16 +30,13 @@ const LibraryNavbar = () => {
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="me-auto">
-            <Nav.Link href="/open-library">{t('home')}</Nav.Link>
+            {/* <Nav.Link href="/open-library">{t('home')}</Nav.Link> */}
             <Nav.Link href="/open-library/books">{t('catalog')}</Nav.Link>
-            <Nav.Link href="/open-library/about">{t('about')}</Nav.Link>
-            <Nav.Link href="/open-library/donate">{t('donate')}</Nav.Link>
             <Nav.Link href="/open-library/how-to-borrow">
               {t('how_to_borrow')}
             </Nav.Link>
-            <Nav.Link href="/open-library/review">{t('review')}</Nav.Link>
           </Nav>
-          {/* 添加语言切换菜单 */}
+
           <LanguageMenu />
         </Navbar.Collapse>
       </div>
diff --git a/pages/api/core.ts b/pages/api/core.ts
index 222dfb0..39db567 100644
--- a/pages/api/core.ts
+++ b/pages/api/core.ts
@@ -9,7 +9,7 @@ if (HTTP_PROXY) setGlobalDispatcher(new ProxyAgent(HTTP_PROXY));
 export type NextAPI = (
   req: NextApiRequest,
   res: NextApiResponse,
-) => Promise<any>;
+) => Promise<void>;
 
 export function safeAPI(handler: NextAPI): NextAPI {
   return async (req, res) => {
diff --git a/pages/open-library/about.tsx b/pages/open-library/about.tsx
deleted file mode 100644
index c8a8bf1..0000000
--- a/pages/open-library/about.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React from 'react';
-import { Card, Col, Container, Image, Row } from 'react-bootstrap';
-
-import { ContentContainer, Layout } from '../../components/open-library/Layout';
-
-export default function AboutPage() {
-  return (
-    <Layout title="About - Open Library">
-      <ContentContainer>
-        <div className="mb-5">
-          <h1 className="display-4 mb-4">关于社区图书馆</h1>
-
-          <Card className="border-0 shadow-sm mb-5">
-            <Card.Body className="p-4">
-              <h2 className="mb-4">我们的使命</h2>
-              <p className="lead">
-                freeCodeCamp 成都社区「Open
-                Library」是一个开放、共享的社区图书馆，旨在促进知识交流，推动社区成员之间的学习和成长，增强社区成员之间的互动与信任。
-              </p>
-              <p>
-                我们深知知识的流动能够点燃创新的火花，因此，我们采用了一种独特的"无储存"借阅模式，让书籍在会员之间自由流转，而非集中存放。这种模式不仅节省了物理空间，更重要的是促进了社区成员之间的直接交流和互动。
-              </p>
-            </Card.Body>
-          </Card>
-
-          <Row className="mb-5">
-            <Col md={6} className="mb-4 mb-md-0">
-              <Card className="h-100 border-0 shadow-sm">
-                <Card.Body className="p-4">
-                  <h3 className="mb-3">我们的价值观</h3>
-                  <ul className="list-unstyled">
-                    <li className="mb-3">
-                      <div className="d-flex">
-                        <div className="me-3">
-                          <span className="text-primary fw-bold fs-4">✦</span>
-                        </div>
-                        <div>
-                          <h5>开放共享</h5>
-                          <p>
-                            我们相信知识应该是开放和共享的，每个人都有权利获取和贡献知识。
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="mb-3">
-                      <div className="d-flex">
-                        <div className="me-3">
-                          <span className="text-primary fw-bold fs-4">✦</span>
-                        </div>
-                        <div>
-                          <h5>社区驱动</h5>
-                          <p>
-                            我们的图书馆完全由社区成员驱动，每个人都可以贡献和受益。
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="mb-3">
-                      <div className="d-flex">
-                        <div className="me-3">
-                          <span className="text-primary fw-bold fs-4">✦</span>
-                        </div>
-                        <div>
-                          <h5>信任与责任</h5>
-                          <p>
-                            我们基于互相信任建立借阅系统，同时鼓励每个人对所借书籍负责。
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-                </Card.Body>
-              </Card>
-            </Col>
-            <Col md={6}>
-              <Card className="h-100 border-0 shadow-sm">
-                <Card.Body className="p-4">
-                  <h3 className="mb-3">我们的特色</h3>
-                  <ul className="list-unstyled">
-                    <li className="mb-3">
-                      <div className="d-flex">
-                        <div className="me-3">
-                          <span className="text-success fw-bold fs-4">✓</span>
-                        </div>
-                        <div>
-                          <h5>"无储存"借阅模式</h5>
-                          <p>
-                            书籍在会员之间直接流转，无需集中存放，促进社区成员之间的直接交流。
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="mb-3">
-                      <div className="d-flex">
-                        <div className="me-3">
-                          <span className="text-success fw-bold fs-4">✓</span>
-                        </div>
-                        <div>
-                          <h5>社区捐赠</h5>
-                          <p>
-                            所有书籍均来自社区成员的捐赠，体现了共享和互助的精神。
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="mb-3">
-                      <div className="d-flex">
-                        <div className="me-3">
-                          <span className="text-success fw-bold fs-4">✓</span>
-                        </div>
-                        <div>
-                          <h5>线上管理</h5>
-                          <p>
-                            通过飞书多维表格进行书籍管理和借阅记录，方便透明。
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-                </Card.Body>
-              </Card>
-            </Col>
-          </Row>
-
-          <Card className="border-0 shadow-sm mb-5">
-            <Card.Body className="p-4">
-              <h2 className="mb-4">我们的团队</h2>
-              <p>
-                Open Library 由 freeCodeCamp
-                成都社区的志愿者团队运营。我们的团队成员来自各行各业，但都有一个共同的目标：促进知识共享和社区建设。
-              </p>
-
-              <Row className="mt-4">
-                <Col md={4} className="mb-4 text-center">
-                  <Image
-                    src="/images/placeholder-profile.svg"
-                    roundedCircle
-                    width={120}
-                    height={120}
-                    className="mb-3"
-                  />
-                  <h5>张伟</h5>
-                  <p className="text-muted">图书馆创始人</p>
-                </Col>
-                <Col md={4} className="mb-4 text-center">
-                  <Image
-                    src="/images/placeholder-profile.svg"
-                    roundedCircle
-                    width={120}
-                    height={120}
-                    className="mb-3"
-                  />
-                  <h5>李梅</h5>
-                  <p className="text-muted">社区协调员</p>
-                </Col>
-                <Col md={4} className="mb-4 text-center">
-                  <Image
-                    src="/images/placeholder-profile.svg"
-                    roundedCircle
-                    width={120}
-                    height={120}
-                    className="mb-3"
-                  />
-                  <h5>王晨</h5>
-                  <p className="text-muted">技术支持</p>
-                </Col>
-              </Row>
-            </Card.Body>
-          </Card>
-
-          <Card className="border-0 shadow-sm">
-            <Card.Body className="p-4">
-              <h2 className="mb-4">加入我们</h2>
-              <p>
-                如果你热爱阅读，愿意分享知识，欢迎加入 freeCodeCamp
-                成都社区「Open Library」，成为知识流动的一部分！
-              </p>
-              <p>成为会员后，你可以：</p>
-              <ul>
-                <li>借阅其他会员捐赠的书籍</li>
-                <li>捐赠自己的书籍给社区</li>
-                <li>参与社区组织的读书会和讨论</li>
-                <li>结识志同道合的朋友</li>
-              </ul>
-              <div className="text-center mt-4">
-                <a
-                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="btn btn-primary btn-lg"
-                >
-                  申请成为会员
-                </a>
-              </div>
-            </Card.Body>
-          </Card>
-        </div>
-      </ContentContainer>
-    </Layout>
-  );
-}
diff --git a/pages/open-library/book/[id].tsx b/pages/open-library/book/[id].tsx
index bf330a8..2dd8c62 100644
--- a/pages/open-library/book/[id].tsx
+++ b/pages/open-library/book/[id].tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { Badge, Button, Card, Col, Row, Tab, Tabs } from 'react-bootstrap';
@@ -263,11 +264,13 @@ export default function BookDetail() {
             <Card.Body>
               <Row>
                 <Col md={3} className="text-center mb-4 mb-md-0">
-                  <img
+                  <Image
                     src={book.cover || '/images/placeholder-book.svg'}
                     alt={book.title}
                     className="img-fluid"
                     style={{ maxHeight: '300px' }}
+                    width={200}
+                    height={300}
                   />
                   <div className="mt-3">
                     <Badge
diff --git a/pages/open-library/books/index.tsx b/pages/open-library/books/index.tsx
index f46f708..1da08a8 100644
--- a/pages/open-library/books/index.tsx
+++ b/pages/open-library/books/index.tsx
@@ -1,13 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Card,
-  Col,
-  Form,
-  FormControl,
-  InputGroup,
-  Row,
-} from 'react-bootstrap';
+import React from 'react';
+import { Card, Col, Row } from 'react-bootstrap';
 
 import {
   ContentContainer,
@@ -29,7 +21,7 @@ type Book = {
 
 export default function BookCatalog() {
   // Sample books data - in a real app, this would come from an API
-  const [books, setBooks] = useState<Book[]>([
+  const books: Book[] = [
     {
       id: 1,
       title: 'Clean Code',
@@ -48,18 +40,18 @@ export default function BookCatalog() {
       category: 'Programming',
       language: 'English',
       status: 'borrowed',
-      currentHolder: 'Zhang Wei',
+      currentHolder: 'John Doe',
       description: 'A modern introduction to programming',
     },
     {
       id: 3,
-      title: 'Design Patterns',
-      author: 'Erich Gamma et al.',
+      title: 'The Pragmatic Programmer',
+      author: 'Andrew Hunt & David Thomas',
       cover: '/images/placeholder-book.svg',
       category: 'Programming',
       language: 'English',
       status: 'available',
-      description: 'Elements of Reusable Object-Oriented Software',
+      description: 'Your journey to mastery',
     },
     {
       id: 4,
@@ -68,13 +60,14 @@ export default function BookCatalog() {
       cover: '/images/placeholder-book.svg',
       category: 'Programming',
       language: 'English',
-      status: 'available',
+      status: 'borrowed',
+      currentHolder: 'Jane Smith',
       description: 'A book series on JavaScript',
     },
     {
       id: 5,
       title: '深入理解计算机系统',
-      author: 'Randal E. Bryant',
+      author: "Randal E. Bryant & David R. O'Hallaron",
       cover: '/images/placeholder-book.svg',
       category: 'Computer Science',
       language: 'Chinese',
@@ -115,203 +108,76 @@ export default function BookCatalog() {
       currentHolder: 'Wang Chen',
       description: 'CSS Secrets (Chinese Edition)',
     },
-  ]);
-
-  const [filteredBooks, setFilteredBooks] = useState<Book[]>(books);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [categoryFilter, setCategoryFilter] = useState('');
-  const [languageFilter, setLanguageFilter] = useState('');
-  const [statusFilter, setStatusFilter] = useState('');
-
-  // Extract unique categories and languages for filter dropdowns
-  const categories = Array.from(new Set(books.map(book => book.category)));
-  const languages = Array.from(new Set(books.map(book => book.language)));
-
-  // Apply filters when any filter changes
-  useEffect(() => {
-    let results = books;
-
-    // Apply search term filter
-    if (searchTerm) {
-      const term = searchTerm.toLowerCase();
-      results = results.filter(
-        book =>
-          book.title.toLowerCase().includes(term) ||
-          book.author.toLowerCase().includes(term) ||
-          (book.description && book.description.toLowerCase().includes(term)),
-      );
-    }
-
-    // Apply category filter
-    if (categoryFilter) {
-      results = results.filter(book => book.category === categoryFilter);
-    }
-
-    // Apply language filter
-    if (languageFilter) {
-      results = results.filter(book => book.language === languageFilter);
-    }
-
-    // Apply status filter
-    if (statusFilter) {
-      results = results.filter(book => book.status === statusFilter);
-    }
-
-    setFilteredBooks(results);
-  }, [searchTerm, categoryFilter, languageFilter, statusFilter, books]);
-
-  // Reset all filters
-  const resetFilters = () => {
-    setSearchTerm('');
-    setCategoryFilter('');
-    setLanguageFilter('');
-    setStatusFilter('');
-  };
+  ];
 
   return (
-    <Layout title="Book Catalog - Open Library">
+    <Layout>
       <ContentContainer>
-        <h1 className="mb-4">Book Catalog</h1>
-
-        {/* Search and Filters */}
-        <Card className="mb-4">
-          <Card.Body>
-            <Row>
-              <Col md={6} className="mb-3 mb-md-0">
-                <InputGroup>
-                  <FormControl
-                    placeholder="Search by title, author, or description..."
-                    value={searchTerm}
-                    onChange={e => setSearchTerm(e.target.value)}
-                  />
-                  <Button variant="outline-secondary">Search</Button>
-                </InputGroup>
-              </Col>
-              <Col md={6}>
-                <Row>
-                  <Col sm={4}>
-                    <Form.Select
-                      value={categoryFilter}
-                      className="mb-2 mb-sm-0"
-                      onChange={e => setCategoryFilter(e.target.value)}
-                    >
-                      <option value="">All Categories</option>
-                      {categories.map(category => (
-                        <option key={category} value={category}>
-                          {category}
-                        </option>
-                      ))}
-                    </Form.Select>
-                  </Col>
-                  <Col sm={4}>
-                    <Form.Select
-                      value={languageFilter}
-                      className="mb-2 mb-sm-0"
-                      onChange={e => setLanguageFilter(e.target.value)}
-                    >
-                      <option value="">All Languages</option>
-                      {languages.map(language => (
-                        <option key={language} value={language}>
-                          {language}
-                        </option>
-                      ))}
-                    </Form.Select>
-                  </Col>
-                  <Col sm={4}>
-                    <Form.Select
-                      value={statusFilter}
-                      onChange={e => setStatusFilter(e.target.value)}
-                    >
-                      <option value="">All Status</option>
-                      <option value="available">Available</option>
-                      <option value="borrowed">Borrowed</option>
-                    </Form.Select>
-                  </Col>
-                </Row>
-              </Col>
-            </Row>
-            <div className="d-flex justify-content-between align-items-center mt-3">
-              <div>
-                <small className="text-muted">
-                  Showing {filteredBooks.length} of {books.length} books
-                </small>
-              </div>
-              <Button
-                variant="outline-secondary"
-                size="sm"
-                onClick={resetFilters}
-              >
-                Reset Filters
-              </Button>
-            </div>
-          </Card.Body>
-        </Card>
+        <div className="py-5">
+          <div className="text-center mb-5">
+            <h1 className="display-4 fw-bold text-primary mb-3">图书目录</h1>
+            <p className="lead text-muted">
+              浏览我们的社区共享图书馆，发现有趣的书籍
+            </p>
+          </div>
 
-        {/* Book Grid */}
-        <Row xs={1} md={2} lg={3} xl={4} className="g-4">
-          {filteredBooks.map(book => (
-            <Col key={book.id}>
-              <Card className="h-100 shadow-sm">
-                <div className="text-center pt-3">
-                  <Card.Img
-                    variant="top"
-                    src={book.cover || '/images/placeholder-book.svg'}
-                    style={{ height: '180px', objectFit: 'contain' }}
-                  />
-                </div>
-                <Card.Body className="d-flex flex-column">
-                  <Card.Title>{book.title}</Card.Title>
-                  <Card.Subtitle className="mb-2 text-muted">
-                    {book.author}
-                  </Card.Subtitle>
-                  <Card.Text className="small text-truncate">
-                    {book.description}
-                  </Card.Text>
-                  <div className="mt-auto">
-                    <div className="d-flex justify-content-between align-items-center mb-2">
-                      <span className="badge bg-secondary">
-                        {book.category}
-                      </span>
-                      <span className="badge bg-info text-dark">
-                        {book.language}
-                      </span>
-                    </div>
-                    <div className="d-flex justify-content-between align-items-center">
+          <Row>
+            {books.map(book => (
+              <Col key={book.id} md={6} lg={4} className="mb-4">
+                <Card className="h-100 shadow-sm border-0">
+                  <div className="position-relative">
+                    <Card.Img
+                      variant="top"
+                      src={book.cover}
+                      alt={book.title}
+                      style={{ height: '200px', objectFit: 'cover' }}
+                    />
+                    <div className="position-absolute top-0 end-0 m-2">
                       <span
-                        className={`badge ${book.status === 'available' ? 'bg-success' : 'bg-warning text-dark'}`}
+                        className={`badge ${
+                          book.status === 'available'
+                            ? 'bg-success'
+                            : 'bg-warning text-dark'
+                        }`}
                       >
-                        {book.status === 'available' ? 'Available' : 'Borrowed'}
+                        {book.status === 'available' ? '可借阅' : '已借出'}
                       </span>
-                      <Button
-                        variant="primary"
-                        size="sm"
+                    </div>
+                  </div>
+                  <Card.Body className="d-flex flex-column">
+                    <Card.Title className="h5 text-primary">
+                      {book.title}
+                    </Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">
+                      {book.author}
+                    </Card.Subtitle>
+                    <Card.Text className="text-muted small mb-2">
+                      {book.category} • {book.language}
+                    </Card.Text>
+                    {book.description && (
+                      <Card.Text className="flex-grow-1">
+                        {book.description}
+                      </Card.Text>
+                    )}
+                    {book.status === 'borrowed' && book.currentHolder && (
+                      <Card.Text className="text-info small">
+                        当前持书人: {book.currentHolder}
+                      </Card.Text>
+                    )}
+                    <div className="mt-auto">
+                      <Card.Link
                         href={`/open-library/book/${book.id}`}
+                        className="btn btn-outline-primary btn-sm"
                       >
-                        View Details
-                      </Button>
+                        查看详情
+                      </Card.Link>
                     </div>
-                    {book.status === 'borrowed' && (
-                      <div className="mt-2 small text-muted">
-                        Currently with: {book.currentHolder}
-                      </div>
-                    )}
-                  </div>
-                </Card.Body>
-              </Card>
-            </Col>
-          ))}
-        </Row>
-
-        {/* No Results */}
-        {filteredBooks.length === 0 && (
-          <div className="text-center my-5 py-5">
-            <h3>No books found</h3>
-            <p className="text-muted">Try adjusting your search or filters</p>
-            <Button variant="primary" onClick={resetFilters}>
-              Reset All Filters
-            </Button>
-          </div>
-        )}
+                  </Card.Body>
+                </Card>
+              </Col>
+            ))}
+          </Row>
+        </div>
       </ContentContainer>
     </Layout>
   );
diff --git a/pages/open-library/donate.tsx b/pages/open-library/donate.tsx
deleted file mode 100644
index 7e54e0d..0000000
--- a/pages/open-library/donate.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import React from 'react';
-import { Button, Card, Col, Row } from 'react-bootstrap';
-
-import { ContentContainer, Layout } from '../../components/open-library/Layout';
-
-export default function DonatePage() {
-  return (
-    <Layout title="Donate Books - Open Library">
-      <ContentContainer>
-        <div className="mb-5">
-          <h1 className="display-4 mb-4">书籍募捐</h1>
-
-          <Card className="border-0 shadow-sm mb-5">
-            <Card.Body className="p-4">
-              <h2 className="mb-4">为什么捐赠书籍？</h2>
-              <p className="lead">
-                您的一本书，可能会改变他人的一生。通过捐赠书籍，您不仅能够让闲置的知识重新流动，还能够帮助更多的人获取学习资源。
-              </p>
-              <p>
-                在 Open
-                Library，我们相信知识应该是流动的。您捐赠的每一本书都将在社区成员之间传递，让更多人受益。当您捐赠一本书，您不仅是在分享一个物品，更是在分享知识、经验和思想。
-              </p>
-            </Card.Body>
-          </Card>
-
-          <Row className="mb-5">
-            <Col lg={6} className="mb-4">
-              <Card className="h-100 border-0 shadow-sm">
-                <Card.Body className="p-4">
-                  <h3 className="mb-3">捐赠流程</h3>
-                  <ol className="list-group list-group-numbered mb-4">
-                    <li className="list-group-item border-0 d-flex align-items-start">
-                      <div>
-                        <h5 className="mb-1">填写捐赠申请</h5>
-                        <p className="mb-0">
-                          填写我们的在线表单，提供您想要捐赠的书籍信息。
-                        </p>
-                      </div>
-                    </li>
-                    <li className="list-group-item border-0 d-flex align-items-start">
-                      <div>
-                        <h5 className="mb-1">书籍登记</h5>
-                        <p className="mb-0">
-                          如所捐赠书籍在「fCC
-                          成都社区图书馆」还未登记，请先填写书籍登记表，然后回到第
-                          1 步继续捐赠。建议在移动端设备上登记，方便扫描书籍
-                          ISBN 码。
-                        </p>
-                      </div>
-                    </li>
-                    <li className="list-group-item border-0 d-flex align-items-start">
-                      <div>
-                        <h5 className="mb-1">书籍进入图书馆</h5>
-                        <p className="mb-0">
-                          完成以上流程后，书籍正式进入 Open Library
-                          的传递流程，开始流转于社区成员之间。
-                        </p>
-                      </div>
-                    </li>
-                  </ol>
-                  <div className="text-center mt-4">
-                    <a
-                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcncbxU0MpcN7pzG3MLNX0GEd?prefill_%E6%93%8D%E4%BD%9C=%E6%8D%90%E8%B5%A0"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="btn btn-primary"
-                    >
-                      填写捐赠申请
-                    </a>
-                  </div>
-                </Card.Body>
-              </Card>
-            </Col>
-            <Col lg={6} className="mb-4">
-              <Card className="h-100 border-0 shadow-sm">
-                <Card.Body className="p-4">
-                  <h3 className="mb-3">书籍登记</h3>
-                  <p>
-                    如果您要捐赠的书籍在我们的图书馆中还未登记，请先完成书籍登记流程。这有助于我们维护一个完整的书籍数据库，方便其他会员查找和借阅。
-                  </p>
-                  <p>登记时，您需要提供以下信息：</p>
-                  <ul>
-                    <li>书籍标题</li>
-                    <li>作者</li>
-                    <li>ISBN（可通过扫描获取）</li>
-                    <li>出版社</li>
-                    <li>出版年份</li>
-                    <li>书籍类别</li>
-                    <li>书籍语言</li>
-                    <li>书籍简介</li>
-                    <li>书籍封面照片（可选）</li>
-                  </ul>
-                  <div className="text-center mt-4">
-                    <a
-                      href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="btn btn-outline-primary"
-                    >
-                      书籍登记表单
-                    </a>
-                  </div>
-                </Card.Body>
-              </Card>
-            </Col>
-          </Row>
-
-          <Card className="border-0 shadow-sm mb-5">
-            <Card.Body className="p-4">
-              <h3 className="mb-4">我们接受什么样的书籍？</h3>
-              <Row>
-                <Col md={6} className="mb-4">
-                  <h5 className="text-success">✓ 我们欢迎</h5>
-                  <ul>
-                    <li>技术类书籍（编程、设计、数据科学等）</li>
-                    <li>科学类书籍</li>
-                    <li>商业和管理类书籍</li>
-                    <li>自我提升类书籍</li>
-                    <li>文学和小说</li>
-                    <li>状态良好的二手书</li>
-                  </ul>
-                </Col>
-                <Col md={6}>
-                  <h5 className="text-danger">✗ 不适合捐赠</h5>
-                  <ul>
-                    <li>严重破损或缺页的书籍</li>
-                    <li>有大量笔记或标记的书籍</li>
-                    <li>过时的技术书籍（5年以上的技术书可能已过时）</li>
-                    <li>教科书和习题集</li>
-                    <li>杂志和期刊</li>
-                  </ul>
-                </Col>
-              </Row>
-            </Card.Body>
-          </Card>
-
-          <Card className="border-0 shadow-sm">
-            <Row className="g-0">
-              <Col md={5} className="d-none d-md-block">
-                <div
-                  className="h-100"
-                  style={{
-                    backgroundImage: 'url(/images/placeholder-library.jpg)',
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'center',
-                    minHeight: '300px',
-                  }}
-                ></div>
-              </Col>
-              <Col md={7}>
-                <Card.Body className="p-4">
-                  <h3 className="mb-3">常见问题</h3>
-                  <div className="accordion" id="donationFAQ">
-                    <div className="accordion-item border-0 mb-3">
-                      <h2 className="accordion-header">
-                        <button
-                          className="accordion-button collapsed"
-                          type="button"
-                          data-bs-toggle="collapse"
-                          data-bs-target="#faq1"
-                        >
-                          我捐赠的书籍会怎么处理？
-                        </button>
-                      </h2>
-                      <div id="faq1" className="accordion-collapse collapse">
-                        <div className="accordion-body">
-                          您捐赠的书籍将进入我们的借阅系统，供社区成员借阅。当有人申请借阅时，书籍将从当前持有者（可能是您）直接传递给下一位借阅者。
-                        </div>
-                      </div>
-                    </div>
-                    <div className="accordion-item border-0 mb-3">
-                      <h2 className="accordion-header">
-                        <button
-                          className="accordion-button collapsed"
-                          type="button"
-                          data-bs-toggle="collapse"
-                          data-bs-target="#faq2"
-                        >
-                          我可以随时取回我捐赠的书籍吗？
-                        </button>
-                      </h2>
-                      <div id="faq2" className="accordion-collapse collapse">
-                        <div className="accordion-body">
-                          一旦书籍捐赠给图书馆，我们视为您已将书籍所有权转让给社区。如果您希望再次阅读这本书，可以通过正常的借阅流程申请借阅。
-                        </div>
-                      </div>
-                    </div>
-                    <div className="accordion-item border-0 mb-3">
-                      <h2 className="accordion-header">
-                        <button
-                          className="accordion-button collapsed"
-                          type="button"
-                          data-bs-toggle="collapse"
-                          data-bs-target="#faq3"
-                        >
-                          如何知道我捐赠的书籍被谁借阅了？
-                        </button>
-                      </h2>
-                      <div id="faq3" className="accordion-collapse collapse">
-                        <div className="accordion-body">
-                          您可以在我们的飞书多维表格中查看每本书的借阅记录，包括当前持有者和历史借阅情况。
-                        </div>
-                      </div>
-                    </div>
-                    <div className="accordion-item border-0">
-                      <h2 className="accordion-header">
-                        <button
-                          className="accordion-button collapsed"
-                          type="button"
-                          data-bs-toggle="collapse"
-                          data-bs-target="#faq4"
-                        >
-                          我需要成为会员才能捐赠书籍吗？
-                        </button>
-                      </h2>
-                      <div id="faq4" className="accordion-collapse collapse">
-                        <div className="accordion-body">
-                          是的，我们要求捐赠者成为 Open Library
-                          的会员。这有助于我们建立一个基于信任的社区，并确保书籍的流转质量。
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </Card.Body>
-              </Col>
-            </Row>
-          </Card>
-
-          <div className="text-center mt-5">
-            <h3 className="mb-4">准备好捐赠书籍了吗？</h3>
-            <div className="d-flex justify-content-center gap-3 flex-wrap">
-              <a
-                href="https://open-source-bazaar.feishu.cn/share/base/form/shrcncbxU0MpcN7pzG3MLNX0GEd?prefill_%E6%93%8D%E4%BD%9C=%E6%8D%90%E8%B5%A0"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="btn btn-primary btn-lg"
-              >
-                填写捐赠申请
-              </a>
-              <a
-                href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="btn btn-outline-primary btn-lg"
-              >
-                申请成为会员
-              </a>
-            </div>
-          </div>
-        </div>
-      </ContentContainer>
-    </Layout>
-  );
-}
diff --git a/pages/open-library/how-to-borrow.tsx b/pages/open-library/how-to-borrow.tsx
index 3304bdd..1eb823a 100644
--- a/pages/open-library/how-to-borrow.tsx
+++ b/pages/open-library/how-to-borrow.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import React from 'react';
-import { Button, Card, Col, Row } from 'react-bootstrap';
+import { Card, Col, Row } from 'react-bootstrap';
 
 import { ContentContainer, Layout } from '../../components/open-library/Layout';
 
diff --git a/pages/open-library/index.tsx b/pages/open-library/index.tsx
index 5853be1..b25fd4a 100644
--- a/pages/open-library/index.tsx
+++ b/pages/open-library/index.tsx
@@ -1,321 +1,231 @@
+import Head from 'next/head';
 import Link from 'next/link';
 import React from 'react';
-import { Button, Card, Col, Form, Image, Row, Stack } from 'react-bootstrap';
+import { Card, Col, Row } from 'react-bootstrap';
 
-import { ContentContainer, Layout } from '../../components/open-library/Layout';
+import FeaturedBooks from '../../components/open-library/FeaturedBooks';
+import FooterComponent from '../../components/open-library/Footer';
+import HeroSection from '../../components/open-library/HeroSection';
+import HowItWorks from '../../components/open-library/HowItWorks';
+import { ContentContainer } from '../../components/open-library/Layout';
+import LibraryNavbar from '../../components/open-library/Navbar';
+import { useOpenLibraryLayout } from '../../components/open-library/useOpenLibraryLayout';
 import { t } from '../../models/Translation';
 
-// TODO: Define a type for Book and Testimonial
-type Book = {
-  id: number;
-  title: string;
-  author: string;
-  cover?: string; // Optional cover image URL
-};
+// Sample data - these could be moved to a separate data file in the future
+const featuredBooks = [
+  {
+    id: 1,
+    title: 'Clean Code',
+    author: 'Robert C. Martin',
+    cover: '/images/placeholder-book.svg',
+    description: '编写优雅代码的艺术',
+    status: 'available' as const,
+    rating: 4.8,
+    tags: ['编程', '软件工程'],
+  },
+  {
+    id: 2,
+    title: 'Eloquent JavaScript',
+    author: 'Marijn Haverbeke',
+    cover: '/images/placeholder-book.svg',
+    description: 'JavaScript 程序设计精粹',
+    status: 'borrowed' as const,
+    rating: 4.6,
+    tags: ['JavaScript', '前端'],
+  },
+  {
+    id: 3,
+    title: 'Design Patterns',
+    author: 'Erich Gamma et al.',
+    cover: '/images/placeholder-book.svg',
+    description: '可复用面向对象软件的基础',
+    status: 'available' as const,
+    rating: 4.7,
+    tags: ['设计模式', '软件架构'],
+  },
+  {
+    id: 4,
+    title: "You Don't Know JS",
+    author: 'Kyle Simpson',
+    cover: '/images/placeholder-book.svg',
+    description: 'JavaScript 深度解析系列',
+    status: 'available' as const,
+    rating: 4.5,
+    tags: ['JavaScript', '进阶'],
+  },
+];
 
-type Testimonial = {
-  id: number;
-  name: string;
-  quote: string;
-};
+const workflowSteps = [
+  {
+    id: 1,
+    icon: 'bi-search',
+    title: '浏览图书',
+    description: '在图书目录中寻找你感兴趣的书籍',
+    color: '#6f42c1',
+  },
+  {
+    id: 2,
+    icon: 'bi-file-earmark-text',
+    title: '申请借阅',
+    description: '填写借阅申请表单，说明你的借阅意向',
+    color: '#0d6efd',
+  },
+  {
+    id: 3,
+    icon: 'bi-people',
+    title: '联系持书人',
+    description: '我们会协助你联系当前的持书人安排交接',
+    color: '#fd7e14',
+  },
+  {
+    id: 4,
+    icon: 'bi-book-half',
+    title: '传递分享',
+    description: '阅读完成后，将书籍传递给下一位读者',
+    color: '#198754',
+  },
+];
 
 export default function OpenLibraryHomepage() {
-  // Sample featured books data
-  const featuredBooks: Book[] = [
-    {
-      id: 1,
-      title: 'Clean Code',
-      author: 'Robert C. Martin',
-      cover: '/images/placeholder-book.svg',
-    }, // TODO: Replace placeholder path
-    {
-      id: 2,
-      title: 'Eloquent JavaScript',
-      author: 'Marijn Haverbeke',
-      cover: '/images/placeholder-book.svg',
-    },
-    {
-      id: 3,
-      title: 'Design Patterns',
-      author: 'Erich Gamma et al.',
-      cover: '/images/placeholder-book.svg',
-    },
-    {
-      id: 4,
-      title: "You Don't Know JS",
-      author: 'Kyle Simpson',
-      cover: '/images/placeholder-book.svg',
-    },
-  ];
-
-  // Sample testimonials data
-  const testimonials: Testimonial[] = [
-    {
-      id: 1,
-      name: 'Zhang Wei',
-      quote:
-        "Open Library helped me discover amazing tech books I couldn't find elsewhere.",
-    },
-    {
-      id: 2,
-      name: 'Li Mei',
-      quote:
-        "The community is so supportive. I've both borrowed and donated books here.",
-    },
-    {
-      id: 3,
-      name: 'Wang Chen',
-      quote:
-        'As a student, this resource has been invaluable for my studies in computer science.',
-    },
-  ];
+  // Apply Open Library layout styles
+  useOpenLibraryLayout();
 
   return (
-    <Layout title={`${t('open_library')} - freeCodeCamp 成都社区`}>
-      <main>
-        {/* --- Hero Section --- */}
-        <section
-          className="py-5"
-          style={{
-            background:
-              'linear-gradient(to right, var(--bs-success-bg-subtle), var(--bs-teal-bg-subtle))',
-          }}
-        >
-          <ContentContainer>
-            <Row className="align-items-center">
-              <Col md={7}>
-                <h1 className="display-5 fw-bold mb-4">{t('hero_title')}</h1>
-                <p className="lead mb-4">{t('hero_subtitle')}</p>
-                {/* TODO: Link this button to the actual Feishu form or member sign-up page */}
-                <Button
-                  variant="success"
-                  size="lg"
-                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {t('become_member')}
-                </Button>
-              </Col>
-              <Col md={5} className="mt-4 mt-md-0 text-center">
-                {/* TODO: Replace placeholder */}
-                <Image
-                  src="/images/placeholder-hero.svg"
-                  alt="People sharing books"
-                  fluid
-                  rounded
-                  className="shadow-sm"
-                />
-              </Col>
-            </Row>
-          </ContentContainer>
-        </section>
+    <>
+      <Head>
+        <title>{`${t('open_library')} - freeCodeCamp 成都社区`}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
 
-        {/* --- Featured Books Section --- */}
-        <section className="py-5 bg-light">
-          <ContentContainer>
-            <h2 className="text-center fw-bold mb-2 h1">
-              {t('featured_books')}
-            </h2>
-            <p className="text-center text-muted mb-5">
-              {t('featured_books_subtitle')}
-            </p>
-            <Row xs={1} sm={2} md={4} className="g-4 justify-content-center">
-              {featuredBooks.map(book => (
-                // TODO: Potentially move Card rendering to components/open-library/BookCard.tsx
-                <Col key={book.id}>
-                  <Card className="h-100 shadow-sm border-0">
-                    <div className="text-center p-4">
-                      <Image
-                        src={book.cover || '/images/placeholder-book.svg'} // Default placeholder if cover is missing
-                        alt={`${book.title} cover`}
-                        style={{
-                          height: '200px',
-                          width: 'auto',
-                          objectFit: 'contain',
-                        }}
-                      />
-                    </div>
-                    <Card.Body className="text-center d-flex flex-column">
-                      <Card.Title className="fw-bold h5 mb-1">
-                        {book.title}
-                      </Card.Title>
-                      <Card.Text className="text-muted mb-3">
-                        {book.author}
-                      </Card.Text>
-                      <div className="mt-auto">
-                        <Link
-                          href={`/open-library/book/${book.id}`}
-                          passHref
-                          legacyBehavior
-                        >
-                          <Button variant="outline-success" as="a">
-                            {t('view_details')}
-                          </Button>
-                        </Link>
-                      </div>
-                    </Card.Body>
-                  </Card>
-                </Col>
-              ))}
-            </Row>
-            <div className="text-center mt-5">
-              <Link href="/open-library/books" passHref legacyBehavior>
-                <Button
-                  variant="link"
-                  className="text-success text-decoration-none"
-                >
-                  {t('view_all_books')} &rarr;
-                </Button>
-              </Link>
+      <LibraryNavbar />
+
+      <HeroSection
+        title={t('hero_title') || '开放知识，共享阅读'}
+        subtitle={
+          t('hero_subtitle') ||
+          '加入 freeCodeCamp 成都社区图书馆，与志同道合的朋友一起阅读和分享知识'
+        }
+        ctaText={t('become_member') || '申请加入'}
+        ctaLink="https://open-source-bazaar.feishu.cn/share/base/form/shrcngQgMrhjTh6ycO1zcaEWZld"
+        heroImage="/images/placeholder-hero.svg"
+        heroImageAlt="People sharing books"
+      />
+
+      <main>
+        {/* About Section */}
+        <ContentContainer>
+          <div className="py-5">
+            <div className="text-center mb-5">
+              <h2 className="display-5 fw-bold text-primary mb-3">
+                📚 关于我们
+              </h2>
+              <p className="lead text-muted">
+                freeCodeCamp 成都社区「Open Library」开放共享图书馆
+              </p>
             </div>
-          </ContentContainer>
-        </section>
 
-        {/* --- Donation Callout Section --- */}
-        <section className="py-5 bg-warning-subtle">
-          <ContentContainer>
-            <Row className="align-items-center">
-              <Col md={7}>
-                <h2 className="fw-bold mb-4 h1">{t('share_your_knowledge')}</h2>
-                <p className="lead mb-4">{t('donation_callout_subtitle')}</p>
-                <Link href="/open-library/donate" passHref legacyBehavior>
-                  <Button variant="warning">{t('donate_a_book')}</Button>
-                </Link>
+            <Row className="g-4 mb-5">
+              <Col md={6}>
+                <Card className="h-100 border-0 shadow-sm">
+                  <Card.Body className="p-4">
+                    <h4 className="text-primary mb-3">🌟 我们的使命</h4>
+                    <p>
+                      促进知识交流，推动社区成员之间的学习和成长，增强社区成员之间的互动与信任。
+                      我们采用独特的"无储存"借阅模式，让书籍在会员之间自由流转。
+                    </p>
+                  </Card.Body>
+                </Card>
               </Col>
-              <Col md={5} className="mt-4 mt-md-0 text-center">
-                {/* TODO: Replace placeholder */}
-                <Image
-                  src="/images/placeholder-donate.svg"
-                  alt="Book donation"
-                  fluid
-                  rounded
-                  className="shadow-sm"
-                />
+              <Col md={6}>
+                <Card className="h-100 border-0 shadow-sm">
+                  <Card.Body className="p-4">
+                    <h4 className="text-primary mb-3">💡 核心理念</h4>
+                    <ul className="list-unstyled">
+                      <li className="mb-2">
+                        ✦ <strong>知识流动</strong> - 书籍自由流转，促进知识传播
+                      </li>
+                      <li className="mb-2">
+                        ✦ <strong>社区驱动</strong> - 所有书籍来自成员捐赠
+                      </li>
+                      <li className="mb-2">
+                        ✦ <strong>开放共享</strong> - 促进交流和互动
+                      </li>
+                    </ul>
+                  </Card.Body>
+                </Card>
               </Col>
             </Row>
-          </ContentContainer>
-        </section>
+          </div>
+        </ContentContainer>
 
-        {/* --- How It Works Section --- */}
-        <section className="py-5">
+        {/* Featured Books Section */}
+        <div className="bg-light py-5">
           <ContentContainer>
-            <h2 className="text-center fw-bold mb-2 h1">{t('how_it_works')}</h2>
-            <p className="text-center text-muted mb-5">
-              {t('how_it_works_description')}
-            </p>
-            <Row className="text-center g-4">
-              <Col md={4}>
-                <div className="mb-3">
-                  <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
-                </div>
-                <h3 className="fw-bold h4 mb-2">{t('step_1_find_book')}</h3>
-                <p className="text-muted px-md-3">{t('step_1_description')}</p>
-              </Col>
-              <Col md={4}>
-                <div className="mb-3">
-                  <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
-                </div>
-                <h3 className="fw-bold h4 mb-2">{t('step_2_apply')}</h3>
-                <p className="text-muted px-md-3">{t('step_2_description')}</p>
-              </Col>
-              <Col md={4}>
-                <div className="mb-3">
-                  <span className="d-inline-block p-3 bg-success-subtle text-success rounded-circle"></span>
-                </div>
-                <h3 className="fw-bold h4 mb-2">{t('step_3_receive')}</h3>
-                <p className="text-muted px-md-3">{t('step_3_description')}</p>
-              </Col>
-            </Row>
-            <div className="text-center mt-5">
-              <Link href="/open-library/how-to-borrow" passHref legacyBehavior>
-                <Button
-                  variant="link"
-                  className="text-success text-decoration-none"
-                >
-                  {t('learn_more_about_borrowing')}
-                </Button>
-              </Link>
+            <div className="text-center mb-5">
+              <h2 className="display-5 fw-bold text-primary mb-3">
+                📖 精选图书
+              </h2>
+              <p className="lead text-muted">发现社区成员推荐的优质图书</p>
             </div>
+            <FeaturedBooks
+              title={t('featured_books') || '精选图书'}
+              subtitle={
+                t('featured_books_subtitle') || '社区成员推荐的优质书籍'
+              }
+              books={featuredBooks}
+              viewAllLink="/open-library/books"
+              viewAllText={t('view_all_books') || '查看全部图书'}
+            />
           </ContentContainer>
-        </section>
+        </div>
+
+        <ContentContainer>
+          <HowItWorks
+            title={t('how_it_works') || '如何使用 Open Library'}
+            subtitle={
+              t('how_it_works_description') ||
+              '简单四步，让知识在社区中自由流动'
+            }
+            steps={workflowSteps}
+            learnMoreLink="/open-library/how-to-borrow"
+          />
+        </ContentContainer>
 
-        {/* --- Testimonials Section --- */}
-        <section className="py-5 bg-light">
+        {/* Simple Donation Section */}
+        <div className="bg-primary bg-gradient text-white py-5">
           <ContentContainer>
-            <h2 className="text-center fw-bold mb-2 h1">
-              {t('community_voices')}
-            </h2>
-            <p className="text-center text-muted mb-5">
-              {t('community_voices_description')}
-            </p>
-            <Row xs={1} md={3} className="g-4">
-              {testimonials.map(testimonial => (
-                <Col key={testimonial.id}>
-                  <Card className="h-100 shadow-sm border-0">
-                    <Card.Body>
-                      <blockquote className="blockquote mb-0">
-                        <p className="fst-italic"> "{testimonial.quote}" </p>
-                        <footer className="blockquote-footer mt-2">
-                          {testimonial.name}
-                        </footer>
-                      </blockquote>
-                    </Card.Body>
-                  </Card>
-                </Col>
-              ))}
-            </Row>
-            <div className="text-center mt-5">
-              <Link href="/open-library/review" passHref legacyBehavior>
-                <Button
-                  variant="link"
-                  className="text-success text-decoration-none"
+            <div className="text-center">
+              <h2 className="display-6 fw-bold mb-3">💖 支持我们</h2>
+              <p className="lead mb-4">
+                Open Library
+                完全由社区成员的热情和贡献支撑。如果这个项目对你有帮助，
+                <br />
+                欢迎通过以下方式支持我们的发展。
+              </p>
+              <div className="d-flex flex-column flex-sm-row gap-3 justify-content-center">
+                <a
+                  href="https://github.com/sponsors/your-org"
+                  className="btn btn-light btn-lg rounded-pill px-4"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  {t('read_more_reviews')}
-                </Button>
-              </Link>
+                  <i className="bi bi-heart-fill me-2"></i>
+                  GitHub Sponsors
+                </a>
+                <Link href="/open-library/books">
+                  <span className="btn btn-outline-light btn-lg rounded-pill px-4">
+                    <i className="bi bi-book me-2"></i>
+                    分享你的图书
+                  </span>
+                </Link>
+              </div>
             </div>
           </ContentContainer>
-        </section>
-
-        {/* --- Newsletter Section --- */}
-        <section className="py-5">
-          <ContentContainer>
-            <Row className="justify-content-center">
-              <Col lg={6}>
-                <Card className="shadow-sm border-0">
-                  <Card.Body className="p-4 p-md-5 text-center">
-                    <h3 className="fw-bold mb-2 h2">{t('stay_updated')}</h3>
-                    <p className="text-muted mb-4">
-                      {t('newsletter_description')}
-                    </p>
-                    {/* TODO: Implement actual newsletter subscription logic */}
-                    <Form onSubmit={e => e.preventDefault()}>
-                      {' '}
-                      {/* Prevent default form submission */}
-                      <Stack
-                        direction="horizontal"
-                        gap={2}
-                        className="mx-auto"
-                        style={{ maxWidth: '400px' }}
-                      >
-                        <Form.Control
-                          type="email"
-                          placeholder={t('email_placeholder')}
-                          required
-                        />
-                        <Button variant="success" type="submit">
-                          {t('subscribe')}
-                        </Button>
-                      </Stack>
-                    </Form>
-                  </Card.Body>
-                </Card>
-              </Col>
-            </Row>
-          </ContentContainer>
-        </section>
+        </div>
       </main>
-    </Layout>
+
+      <FooterComponent />
+    </>
   );
 }
diff --git a/pages/open-library/review.tsx b/pages/open-library/review.tsx
deleted file mode 100644
index 28222cf..0000000
--- a/pages/open-library/review.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Card, Col, Form, Row, Tab, Tabs } from 'react-bootstrap';
-
-import { ContentContainer, Layout } from '../../components/open-library/Layout';
-
-// Review type definition
-type Review = {
-  id: number;
-  bookTitle: string;
-  bookAuthor: string;
-  bookCover?: string;
-  reviewer: string;
-  rating: number;
-  comment: string;
-  date: string;
-};
-
-export default function ReviewPage() {
-  // Sample reviews data - in a real app, this would come from an API
-  const [reviews, setReviews] = useState<Review[]>([
-    {
-      id: 1,
-      bookTitle: 'Clean Code',
-      bookAuthor: 'Robert C. Martin',
-      bookCover: '/images/placeholder-book.svg',
-      reviewer: 'Wang Chen',
-      rating: 5,
-      comment:
-        'This book completely changed how I approach writing code. Highly recommended for all developers!',
-      date: '2023-11-25',
-    },
-    {
-      id: 2,
-      bookTitle: 'Clean Code',
-      bookAuthor: 'Robert C. Martin',
-      bookCover: '/images/placeholder-book.svg',
-      reviewer: 'Li Mei',
-      rating: 4,
-      comment:
-        'Great principles that have stood the test of time. Some examples are a bit dated but the concepts are solid.',
-      date: '2023-09-10',
-    },
-    {
-      id: 3,
-      bookTitle: 'Eloquent JavaScript',
-      bookAuthor: 'Marijn Haverbeke',
-      bookCover: '/images/placeholder-book.svg',
-      reviewer: 'Liu Jie',
-      rating: 5,
-      comment:
-        'Perfect for beginners and intermediate JavaScript developers. The exercises are particularly helpful.',
-      date: '2023-12-05',
-    },
-    {
-      id: 4,
-      bookTitle: 'Design Patterns',
-      bookAuthor: 'Erich Gamma et al.',
-      bookCover: '/images/placeholder-book.svg',
-      reviewer: 'Chen Ming',
-      rating: 4,
-      comment:
-        'A classic that has stood the test of time. The examples are in C++ and Smalltalk, but the concepts apply to any OO language.',
-      date: '2023-07-25',
-    },
-    {
-      id: 5,
-      bookTitle: '深入理解计算机系统',
-      bookAuthor: 'Randal E. Bryant',
-      bookCover: '/images/placeholder-book.svg',
-      reviewer: 'Zhang Wei',
-      rating: 5,
-      comment:
-        '这是一本非常全面的计算机系统书籍，对理解计算机底层工作原理非常有帮助。',
-      date: '2023-10-15',
-    },
-  ]);
-
-  // Function to render star rating
-  const renderStars = (rating: number) => {
-    return (
-      <div className="text-warning">
-        {[...Array(5)].map((_, i) => (
-          <span key={i} style={{ fontSize: '1.2rem' }}>
-            {i < rating ? '\u2605' : '\u2606'}
-          </span>
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <Layout title="Book Reviews - Open Library">
-      <ContentContainer>
-        <div className="mb-5">
-          <h1 className="display-4 mb-4">书籍评价</h1>
-
-          <Card className="border-0 shadow-sm mb-5">
-            <Card.Body className="p-4">
-              <h2 className="mb-4">社区书评</h2>
-              <p className="lead">
-                阅读是一种体验，分享让这种体验更加丰富。浏览社区成员的书评，或者分享您自己的阅读感受。
-              </p>
-              <div className="d-flex justify-content-end">
-                <Button
-                  variant="primary"
-                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  写书评
-                </Button>
-              </div>
-            </Card.Body>
-          </Card>
-
-          <Tabs defaultActiveKey="all" className="mb-4">
-            <Tab eventKey="all" title="所有评价">
-              <div className="mt-3">
-                {reviews.map(review => (
-                  <Card key={review.id} className="mb-4 shadow-sm">
-                    <Card.Body>
-                      <Row>
-                        <Col md={3} className="mb-3 mb-md-0">
-                          <div className="d-flex flex-column align-items-center">
-                            <img
-                              src={
-                                review.bookCover ||
-                                '/images/placeholder-book.svg'
-                              }
-                              alt={review.bookTitle}
-                              className="img-fluid mb-2"
-                              style={{ maxHeight: '150px' }}
-                            />
-                            <h6 className="text-center">{review.bookTitle}</h6>
-                            <p className="text-muted small text-center">
-                              {review.bookAuthor}
-                            </p>
-                          </div>
-                        </Col>
-                        <Col md={9}>
-                          <div className="d-flex justify-content-between align-items-center mb-3">
-                            <h5>{review.reviewer}</h5>
-                            {renderStars(review.rating)}
-                          </div>
-                          <p className="mb-3">{review.comment}</p>
-                          <div className="d-flex justify-content-between align-items-center">
-                            <small className="text-muted">
-                              {new Date(review.date).toLocaleDateString(
-                                'en-US',
-                                {
-                                  year: 'numeric',
-                                  month: '2-digit',
-                                  day: '2-digit',
-                                },
-                              )}
-                            </small>
-                            <Button
-                              variant="outline-primary"
-                              size="sm"
-                              href={`/open-library/book/${review.id}`}
-                            >
-                              查看书籍详情
-                            </Button>
-                          </div>
-                        </Col>
-                      </Row>
-                    </Card.Body>
-                  </Card>
-                ))}
-              </div>
-            </Tab>
-            <Tab eventKey="recent" title="最新评价">
-              <div className="mt-3">
-                {reviews
-                  .sort(
-                    (a, b) =>
-                      new Date(b.date).getTime() - new Date(a.date).getTime(),
-                  )
-                  .slice(0, 3)
-                  .map(review => (
-                    <Card key={review.id} className="mb-4 shadow-sm">
-                      <Card.Body>
-                        <Row>
-                          <Col md={3} className="mb-3 mb-md-0">
-                            <div className="d-flex flex-column align-items-center">
-                              <img
-                                src={
-                                  review.bookCover ||
-                                  '/images/placeholder-book.svg'
-                                }
-                                alt={review.bookTitle}
-                                className="img-fluid mb-2"
-                                style={{ maxHeight: '150px' }}
-                              />
-                              <h6 className="text-center">
-                                {review.bookTitle}
-                              </h6>
-                              <p className="text-muted small text-center">
-                                {review.bookAuthor}
-                              </p>
-                            </div>
-                          </Col>
-                          <Col md={9}>
-                            <div className="d-flex justify-content-between align-items-center mb-3">
-                              <h5>{review.reviewer}</h5>
-                              {renderStars(review.rating)}
-                            </div>
-                            <p className="mb-3">{review.comment}</p>
-                            <div className="d-flex justify-content-between align-items-center">
-                              <small className="text-muted">
-                                {new Date(review.date).toLocaleDateString(
-                                  'en-US',
-                                  {
-                                    year: 'numeric',
-                                    month: '2-digit',
-                                    day: '2-digit',
-                                  },
-                                )}
-                              </small>
-                              <Button
-                                variant="outline-primary"
-                                size="sm"
-                                href={`/open-library/book/${review.id}`}
-                              >
-                                查看书籍详情
-                              </Button>
-                            </div>
-                          </Col>
-                        </Row>
-                      </Card.Body>
-                    </Card>
-                  ))}
-              </div>
-            </Tab>
-            <Tab eventKey="top" title="高分评价">
-              <div className="mt-3">
-                {reviews
-                  .filter(review => review.rating >= 5)
-                  .map(review => (
-                    <Card key={review.id} className="mb-4 shadow-sm">
-                      <Card.Body>
-                        <Row>
-                          <Col md={3} className="mb-3 mb-md-0">
-                            <div className="d-flex flex-column align-items-center">
-                              <img
-                                src={
-                                  review.bookCover ||
-                                  '/images/placeholder-book.svg'
-                                }
-                                alt={review.bookTitle}
-                                className="img-fluid mb-2"
-                                style={{ maxHeight: '150px' }}
-                              />
-                              <h6 className="text-center">
-                                {review.bookTitle}
-                              </h6>
-                              <p className="text-muted small text-center">
-                                {review.bookAuthor}
-                              </p>
-                            </div>
-                          </Col>
-                          <Col md={9}>
-                            <div className="d-flex justify-content-between align-items-center mb-3">
-                              <h5>{review.reviewer}</h5>
-                              {renderStars(review.rating)}
-                            </div>
-                            <p className="mb-3">{review.comment}</p>
-                            <div className="d-flex justify-content-between align-items-center">
-                              <small className="text-muted">
-                                {new Date(review.date).toLocaleDateString(
-                                  'en-US',
-                                  {
-                                    year: 'numeric',
-                                    month: '2-digit',
-                                    day: '2-digit',
-                                  },
-                                )}
-                              </small>
-                              <Button
-                                variant="outline-primary"
-                                size="sm"
-                                href={`/open-library/book/${review.id}`}
-                              >
-                                查看书籍详情
-                              </Button>
-                            </div>
-                          </Col>
-                        </Row>
-                      </Card.Body>
-                    </Card>
-                  ))}
-              </div>
-            </Tab>
-          </Tabs>
-
-          <Card className="border-0 shadow-sm mb-5">
-            <Card.Body className="p-4">
-              <h3 className="mb-4">写下您的书评</h3>
-              <p>
-                阅读完一本书后，请花几分钟时间分享您的阅读体验。您的评价将帮助其他社区成员找到适合他们的书籍。
-              </p>
-              <div className="text-center mt-4">
-                <Button
-                  variant="primary"
-                  size="lg"
-                  href="https://open-source-bazaar.feishu.cn/share/base/form/shrcnFAX8q7mnywCQOsVnIS5Dwb"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  写书评
-                </Button>
-              </div>
-            </Card.Body>
-          </Card>
-
-          <Card className="border-0 shadow-sm">
-            <Card.Body className="p-4">
-              <h3 className="mb-4">书评指南</h3>
-              <Row>
-                <Col md={6} className="mb-4 mb-md-0">
-                  <h5>如何写一篇有帮助的书评</h5>
-                  <ul>
-                    <li>简要概述书籍内容，但不要透露关键情节</li>
-                    <li>分享您从书中获得的主要收获</li>
-                    <li>提及书籍的优点和可能的缺点</li>
-                    <li>说明适合阅读这本书的人群</li>
-                    <li>分享书中让您印象深刻的观点或引用</li>
-                  </ul>
-                </Col>
-                <Col md={6}>
-                  <h5>评分参考</h5>
-                  <ul className="list-unstyled">
-                    <li className="mb-2">
-                      <div className="d-flex align-items-center">
-                        <div className="text-warning me-2">★★★★★</div>
-                        <div>杰出，强烈推荐，改变思维的书籍</div>
-                      </div>
-                    </li>
-                    <li className="mb-2">
-                      <div className="d-flex align-items-center">
-                        <div className="text-warning me-2">★★★★☆</div>
-                        <div>非常好，值得推荐，有一些小缺点</div>
-                      </div>
-                    </li>
-                    <li className="mb-2">
-                      <div className="d-flex align-items-center">
-                        <div className="text-warning me-2">★★★☆☆</div>
-                        <div>好，有价值，但不突出</div>
-                      </div>
-                    </li>
-                    <li className="mb-2">
-                      <div className="d-flex align-items-center">
-                        <div className="text-warning me-2">★★☆☆☆</div>
-                        <div>一般，有一些有用信息，但整体平淡</div>
-                      </div>
-                    </li>
-                    <li>
-                      <div className="d-flex align-items-center">
-                        <div className="text-warning me-2">★☆☆☆☆</div>
-                        <div>不推荐，内容质量较低或不准确</div>
-                      </div>
-                    </li>
-                  </ul>
-                </Col>
-              </Row>
-            </Card.Body>
-          </Card>
-        </div>
-      </ContentContainer>
-    </Layout>
-  );
-}