feat: add new component(contributor-card)

src/app/about/components/contributor-card.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+import { ContributorCardType } from '../page';
+
+export default function ContributorCard({ nickname, avatarUrl, occupation }: ContributorCardType) {
+  return (
+    <div className="col-span-1 w-[178px] h-[260px] mt-[26px] pt-[36px] pb-[44px] rounded-[6px] flex flex-col bg-[#fff]">
+      <div className="w-[92px] h-[92px] mx-auto rounded-[50%] bg-[#fff] overflow-hidden">
+        {/* <Image width={92} height={92} src={avatarUrl} alt={`${nickname}-avatar`} /> */}
+        <Image width={130} height={130} unoptimized src={avatarUrl} alt="wechat qrCode"></Image>
+      </div>
+      <p className="mt-[31px] mb-[13px] text-[18px] leading-[25px] text-[rgba(0,0,0,0.95)] text-center">{nickname}</p>
+      <p className="text-[15px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">{occupation}</p>
+    </div>
+  );
+}

src/app/about/page.tsx

@@ -1,6 +1,96 @@
 import Image from 'next/image';
 
 import styles from './about.module.css';
+import ContributorCard from './components/contributor-card';
+
+export interface ContributorCardType {
+  nickname: string;
+  avatarUrl: string;
+  occupation: string;
+}
+
+const contributorList: ContributorCardType[] = [
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+];
 
 export default function Download() {
   return (
@@ -60,6 +150,12 @@ export default function Download() {
             <p className="text-right">- 雀乐团队</p>
           </div>
 
+          <div className="grid grid-cols-6 gap-6 mt-[26px]">
+            {contributorList.map((card) => (
+              <ContributorCard key={card.nickname} {...card} />
+            ))}
+          </div>
+
           {/* contributor wall */}
         </div>