adding title & sub-title

ArslanYM · Jul 7, 2023 · 2089691 · 2089691
1 parent 39e46e9
commit 2089691
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/app/contributors/page.tsx b/src/app/contributors/page.tsx
@@ -26,15 +26,19 @@ export default async function ContributorsPage() {
 
   return (
     <>
-      <section className="container mt-10 flex flex-wrap justify-center gap-8 p-8">
+      <section className="container grid place-items-center p-8">
+        <div className="max-w-2xl text-center">
+          <h1 className="text-3xl font-bold mb-4">Contributors</h1>
+          <p>
+            Join the WebX DAO community and shape the decentralized web alongside like-minded
+            contributors passionate about innovation.
+          </p>
+        </div>
+        <div className="container mt-10 flex flex-wrap justify-center gap-8">
         {contributorList.map((data: Card) => {
-          return (
-            <ContributorCard
-              key={data.id}
-              data={data}
-            />
-          );
+          return <ContributorCard key={data.id} data={data} />;
         })}
+        </div>
       </section>
     </>
   );

diff --git a/src/components/ContributorCard.tsx b/src/components/ContributorCard.tsx
@@ -28,7 +28,7 @@ export default function ContributorCard({data}: {data: Card}) {
     <div className="flex h-80 w-72 flex-col items-center justify-between rounded-lg border border-black p-4 dark:border-white">
       <div
         className={cn(
-          "container flex w-fit items-center space-x-4 whitespace-nowrap rounded-xl border border-black p-2 align-middle text-lg font-semibold leading-[31px] transition-all hover:shadow-lg active:shadow-sm active:ring-2 active:ring-[#411AFF] dark:border-[#3d60ba] dark:font-medium dark:shadow-[#1f2840]",
+          "active:ring-[#411AFF]dark:border-[#3d60ba] container flex w-fit items-center space-x-4 whitespace-nowrap rounded-xl border border-black p-2 align-middle text-lg font-semibold leading-[31px] active:shadow-sm active:ring-2 dark:border-white dark:font-medium",
           fontGilroy.className
         )}
       >
@@ -43,7 +43,7 @@ export default function ContributorCard({data}: {data: Card}) {
         height={120}
         className="rounded-full border"
       />
-      <div className="text-2xl">
+      <div className="mb-2 text-2xl">
         <Link href={data.html_url} target="_blank" className="duration-150 hover:text-[#411AFF]">
           <FaGithub />
         </Link>