Open-Source-Bazaar · dethan3 · Aug 27, 2026 · Aug 27, 2026 · Aug 27, 2026 · Aug 27, 2026
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,69 +1,120 @@
 import { observer } from 'mobx-react';
-import { useContext } from 'react';
+import Link from 'next/link';
+import { FC, useContext } from 'react';
 import { Col, Container, Nav, Row } from 'react-bootstrap';
 
 import { ContactEmail, GitHubURL, WeChatURL } from '../models/configuration';
 import { I18nContext } from '../models/Translation';
 
-export const Footer = observer(() => {
+export type FooterLink = Record<'href' | 'icon' | 'label', string>;
+
+export interface FooterProps {
+  description: string;
+  quickLinks: FooterLink[];
+}
+
+const CopyrightStartYear = 2021;
+
+export const Footer: FC<FooterProps> = observer(({ description, quickLinks }) => {
   const { t } = useContext(I18nContext);
+  const currentYear = new Date().getFullYear();
+  const copyrightYear =
+    CopyrightStartYear === currentYear ? currentYear : `${CopyrightStartYear}-${currentYear}`;
 
   return (
-    <footer className="bg-dark text-light py-4">
-      <Container fluid="xl" className="px-3">
+    <footer className="bg-dark text-light">
+      <Container fluid="xl" className="px-4 px-md-3 py-lg-4">
         <Row>
-          <Col md={4} className="mb-3 mb-md-0">
+          <Col as="section" xs={12} lg={4} className="py-4 py-lg-0">
             <h5 className="fw-bold mb-3">{t('open_source_bazaar')}</h5>
-            <p className="text-light opacity-75 lh-base">{t('footer_description')}</p>
-            <div className="mt-3">
+            <p className="text-light opacity-75 lh-base mb-0">{description}</p>
+            <div className="d-flex flex-wrap gap-2 column-gap-3 mt-3">
               <a
                 href={GitHubURL}
-                className="text-light text-decoration-none me-3 hover-opacity"
+                className="d-inline-flex align-items-center py-2 py-lg-0 text-light text-decoration-none hover-opacity"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 🐱 GitHub
               </a>
               <a
                 href={WeChatURL}
-                className="text-light text-decoration-none me-3 hover-opacity"
+                className="d-inline-flex align-items-center py-2 py-lg-0 text-light text-decoration-none hover-opacity"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 💬 WeChat
               </a>
             </div>
           </Col>
-          <Col md={3} className="mb-3 mb-md-0">
+
+          <Col xs={12} className="d-lg-none">
+            <hr className="m-0 border-secondary opacity-25" />
+          </Col>
+
+          <Col
+            as="section"
+            xs={12}
+            md
+            lg={4}
+            className="d-md-grid align-content-md-start justify-content-md-center py-4 py-lg-0"
+          >
             <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 py-1 text-decoration-none"
-              >
-                📖 {t('catalog_footer')}
-              </Nav.Link>
-              <Nav.Link
-                href="/open-library/how-to-borrow"
-                className="text-light px-0 py-1 text-decoration-none"
-              >
-                ℹ️ {t('how_to_borrow')}
-              </Nav.Link>
+            <Nav className="flex-column gap-1 gap-lg-0">
+              {quickLinks.map(({ href, icon, label }) => (
+                <Link
+                  key={href}
+                  href={href}
+                  className="nav-link d-flex align-items-center gap-2 px-0 py-2 py-lg-1 text-light text-decoration-none"
+                >
+                  <span className="d-inline-block flex-shrink-0 text-center" aria-hidden="true">
+                    {icon}
+                  </span>
+                  <span>{label}</span>
+                </Link>
+              ))}
             </Nav>
           </Col>
-          <Col md={5}>
+
+          <Col xs={12} className="d-md-none">
+            <hr className="m-0 border-secondary opacity-25" />
+          </Col>
+
+          <div className="vr d-none d-md-block d-lg-none px-0 opacity-25" />
+
+          <Col
+            as="section"
+            xs={12}
+            md
+            lg={4}
+            className="d-md-grid align-content-md-start justify-content-md-center justify-content-lg-end py-4 py-lg-0"
+          >
             <h5 className="fw-bold mb-3">{t('contact')}</h5>
-            <ul className="list-unstyled d-flex flex-column gap-2 text-light opacity-75 mb-0">
-              <li>📍 {t('community_name')}</li>
-              <li>📌 {t('community_location')}</li>
-              <li>
-                ✉️{' '}
+            <ul className="list-unstyled d-flex flex-column gap-1 text-light opacity-75 mb-0">
+              <li className="d-flex align-items-center gap-2 py-1">
+                <span className="d-inline-block flex-shrink-0 text-center" aria-hidden="true">
+                  📍
+                </span>
+                <span>{t('community_name')}</span>
+              </li>
+              <li className="d-flex align-items-center gap-2 py-1">
+                <span className="d-inline-block flex-shrink-0 text-center" aria-hidden="true">
+                  📌
+                </span>
+                <address>{t('community_location')}</address>
+              </li>
+              <li className="d-flex align-items-center gap-2 py-1">
+                <span className="d-inline-block flex-shrink-0 text-center" aria-hidden="true">
+                  ✉️
+                </span>
                 <a className="text-light" href={`mailto:${ContactEmail}`}>
                   {ContactEmail}
                 </a>
               </li>
-              <li>
-                💬{' '}
+              <li className="d-flex align-items-center gap-2 py-1">
+                <span className="d-inline-block flex-shrink-0 text-center" aria-hidden="true">
+                  💬
+                </span>
                 <a
                   className="text-light"
                   href={WeChatURL}
@@ -77,10 +128,10 @@ export const Footer = observer(() => {
           </Col>
         </Row>
 
-        <hr className="mt-4 mb-3 border-secondary opacity-25" />
+        <hr className="my-0 mt-md-4 mb-md-3 border-secondary opacity-25" />
 
-        <div className="text-center text-light opacity-75 py-2">
-          &copy; {new Date().getFullYear()} {t('open_source_bazaar')}. {t('all_rights_reserved')}
+        <div className="py-4 py-lg-2 text-center text-light opacity-75">
+          &copy; {copyrightYear} {t('open_source_bazaar')}. {t('all_rights_reserved')}
         </div>
       </Container>
     </footer>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -74,6 +74,22 @@ export default class CustomApp extends App<I18nProps> {
     const isArticlePage = asPath.startsWith('/article/') || asPath.startsWith('/policy/'),
       isActivityPage = asPath.startsWith('/hackathon'),
       isOpenLibraryPath = asPath.startsWith('/open-library');
+    const footerProps = isOpenLibraryPath
+      ? {
+          description: t('footer_description'),
+          quickLinks: [
+            { href: '/open-library/books', icon: '📖', label: t('catalog_footer') },
+            { href: '/open-library/how-to-borrow', icon: 'ℹ️', label: t('how_to_borrow') },
+          ],
+        }
+      : {
+          description: t('site_footer_description'),
+          quickLinks: [
+            { href: '/', icon: '🏠', label: t('home_footer') },
+            { href: '/article/about', icon: 'ℹ️', label: t('about_us_footer') },
+            { href: '/article/join-us', icon: '🤝', label: t('join_us') },
+          ],
+        };
 
     return (
       <I18nContext.Provider value={this.i18nStore}>
@@ -90,7 +106,7 @@ export default class CustomApp extends App<I18nProps> {
         ) : (
           this.renderSiteFrame(isArticlePage)
         )}
-        <Footer />
+        <Footer {...footerProps} />
       </I18nContext.Provider>
     );
   }

diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/translation/en-US.ts b/translation/en-US.ts
@@ -565,6 +565,8 @@ export default {
     'Have books collecting dust on your shelf? Donate them to our community and help others learn and grow. Your contribution makes a difference!',
 
   // Footer
+  site_footer_description:
+    'A nonprofit event brand focused on open-source software, hardware, and public-interest projects, and a community built around open collaboration.',
   footer_description:
     'A community-driven library for sharing knowledge and stories. Built with open source. Powered by generosity.',
   quick_links_footer: 'Quick Links',

diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
@@ -535,7 +535,9 @@ export default {
     '您的书架上有积灰的书吗？将它们捐赠给我们的社区，帮助他人学习和成长。您的贡献会产生影响！',
 
   // Footer
-  footer_description: '一个由社区驱动的图书馆，用于分享知识和故事。开源构建。由慷慨驱动。',
+  site_footer_description:
+    '一个以开源软硬件、公益项目为主题的公益活动品牌，也是一个以「开放式协作」为核心理念的开源社群。',
+  library_footer_description: '一个由社区驱动的图书馆，用于分享知识和故事。开源构建。由慷慨驱动。',
   quick_links_footer: '快速链接',
   home_footer: '首页',
   catalog_footer: '目录',

diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
@@ -535,6 +535,8 @@ export default {
     '您的捐贈將有助於我們的社群圖書館的發展。您的支持將有助於我們提供更多免費的書籍和資源給社群成員。',
 
   // Footer
+  site_footer_description:
+    '一個以開源軟硬體、公益項目為主題的公益活動品牌，也是一個以「開放式協作」為核心理念的開源社群。',
   footer_description:
     '一個開源的社群圖書館，提供免費的書籍和資源給社群成員。開源。免費。無限可能。',
   quick_links_footer: '快速連結',