About页面

src/app/about/page.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AboutMain from './Main';
+
+export const metadata = {
+  title: 'About OpenBuild',
+  description: 'Bridge Web2 to Web3 - OpenBuild is the Biggest Web3 Open-Source Community in Asia.',
+};
+
+export default function AboutPage() {
+  return <AboutMain />;
+}

src/app/home/Contributor.js

@@ -159,20 +159,20 @@
   { name: 'WenChao', x: 'wenchao_zh', github: 'zhang-wenchao', title: 'BuilderHero', handle: null },
 ].map(item => ({
   ...item,
-  picture: getImage(item.handle, item.github, item.x)
+  picture: getImage(item.handle, item.github, item.x),
 }));
 
 export function Contributor() {
   return (
     <div className="pt-14 rounded-t-2xl bg-home-contributor-bg !px-0">
-      <div className="max-md:flex-col flex justify-between items-start mb-10 max-md:mb-6 px-24">
+      <div className="max-md:flex-col flex justify-between items-start mb-10 max-md:mb-6 px-6 md:px-24">
         <h1 className="max-md:text-center max-md:text-[28px] max-md:leading-9 text-[42px] leading-[52px] max-w-[508px]" data-aos="fade-right" data-aos-delay="500">Community Contributor</h1>
         <div className="max-md:text-center max-md:mt-4 text-xl leading-8 max-w-[537px] hyphens-auto text-right shrink ml-4" data-aos="fade-left" data-aos-delay="500">
           <div className="font-bold">Grateful for every builder contributing to OpenBuild.</div>
           <div>Your expertise, creativity, and code make the Web3 ecosystem more open, connected, and impactful.</div>
         </div>
       </div>
-      <div className="px-24 mb-[160px] max-md:mb-14" data-aos="zoom-in-up" data-aos-delay="800">
+      <div className="px-6 md:px-24 mb-[160px] max-md:mb-14" data-aos="zoom-in-up" data-aos-delay="800">
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
           {DATAS.map((contributor, index) => (
             <div
@@ -202,7 +202,7 @@
                   <img
                     src={contributor.picture.src || contributor.picture}
                     alt={contributor.name}
                     className="w-full h-full object-cover"
                   />
                 </div>
 

src/app/home/Trusted.js

@@ -67,16 +67,29 @@ function readyPartnersData() {
     />});
   }
 }
-readyPartnersData()
+readyPartnersData();
 
 export function Trusted() {
   const [activeTab, setActiveTab] = useState('Company');
+  const [showAll, setShowAll] = useState(false);
   const tabRefs = useRef({});
   const indicatorRef = useRef(null);
   const containerRef = useRef(null);
   const scrollContainerRef = useRef(null);
 
   const currentPartners = partnersData[activeTab] || [];
+
+  // 移动端最多显示20个（10行 x 2列）
+  const MOBILE_MAX_DISPLAY = 20;
+  const shouldShowMore = currentPartners.length > MOBILE_MAX_DISPLAY;
+  const displayedPartners = shouldShowMore && !showAll 
+    ? currentPartners.slice(0, MOBILE_MAX_DISPLAY)
+    : currentPartners;
+
+  // 切换 tab 时重置显示状态
+  useLayoutEffect(() => {
+    setShowAll(false);
+  }, [activeTab]);
 
   useLayoutEffect(() => {
     const updateIndicator = () => {
@@ -107,12 +120,12 @@ export function Trusted() {
           if (buttonLeft < 0) {
             scrollContainer.scrollTo({
               left: scrollLeft + buttonLeft - 16,
-              behavior: 'smooth'
+              behavior: 'smooth',
             });
           } else if (buttonRight > scrollWidth) {
             scrollContainer.scrollTo({
               left: scrollLeft + buttonRight - scrollWidth + 16,
-              behavior: 'smooth'
+              behavior: 'smooth',
             });
           }
         }
@@ -169,18 +182,31 @@ export function Trusted() {
 
       {/* Partners Grid */}
       {currentPartners.length > 0 ? (
-        <div className="flex flex-wrap justify-center gap-3 mb-6">
-          {currentPartners.map((partner, index) => (
-            <div
-              key={`partner-${activeTab}-${index}`}
-              className="trusted-box group border border-[rgba(26,26,26,0.1)] rounded-[1000px] px-4 py-7 flex justify-center items-center bg-white transition-colors max-md:px-3 max-md:py-6 h-24 max-md:h-20 w-full sm:w-[calc((100%-0.75rem)/2)] md:w-[calc((100%-1.5rem)/3)] lg:w-[calc((100%-2.25rem)/4)] xl:w-[calc((100%-3rem)/5)] 2xl:w-[calc((100%-3.75rem)/6)] flex-shrink-0"
-            >
-              <div className="flex justify-center items-center w-full h-full [&>svg]:max-w-full [&>svg]:h-8 [&>svg]:w-auto">
-                {partner.ele}
+        <>
+          <div className="flex flex-wrap justify-center gap-3 mb-6">
+            {displayedPartners.map((partner, index) => (
+              <div
+                key={`partner-${activeTab}-${index}`}
+                className="trusted-box group border border-[rgba(26,26,26,0.1)] rounded-[1000px] px-4 py-7 flex justify-center items-center bg-white transition-colors max-md:px-3 max-md:py-6 h-24 max-md:h-20 w-full w-[calc((100%-0.75rem)/2)] md:w-[calc((100%-1.5rem)/3)] lg:w-[calc((100%-2.25rem)/4)] xl:w-[calc((100%-3rem)/5)] 2xl:w-[calc((100%-3.75rem)/6)] flex-shrink-0"
+              >
+                <div className="flex justify-center items-center w-full h-full [&>svg]:max-w-full [&>svg]:h-8 [&>svg]:w-auto">
+                  {partner.ele}
+                </div>
               </div>
+            ))}
+          </div>
+          {/* 显示更多按钮 - 仅在移动端且超过20个时显示 */}
+          {shouldShowMore && (
+            <div className="flex justify-center mb-6 md:hidden">
+              <button
+                onClick={() => setShowAll(!showAll)}
+                className="px-6 py-3 text-base leading-[18px] font-medium text-black border border-[rgba(26,26,26,0.1)] rounded-[40px] bg-white hover:bg-[rgba(26,26,26,0.02)] transition-colors"
+              >
+                {showAll ? 'Show Less' : 'Show More'}
+              </button>
             </div>
-          ))}
-        </div>
+          )}
+        </>
       ) : (
         <div className="py-12">
           <p className="text-base leading-8 text-[rgba(26,26,26,0.6)]">No partners available in this category.</p>

src/entry/layouts/default/Footer.js

@@ -120,6 +120,10 @@ const menus = [
         name: 'Press Kit',
         link: 'https://logo.openbuild.xyz',
       },
+      {
+        name: 'About',
+        link: '/about',
+      },
     ],
   },
 ];