Final changes

app/(default)/page.tsx

@@ -8,7 +8,7 @@ export const viewport = {
   initialScale: 1,
   width: 'device-width',
 };
-
+import { PinContainer } from "../(default)/Credits/creditcards/credits";
 import Hero from "@/components/hero";
 import WhatWeDo from "@/components/whatwedo";
 import Domains from "@/components/domains";
@@ -44,13 +44,100 @@ export default function Home() {
           </a>
         </div>
       </div>
+
       <div className="-mt-20"> {/* Adjusted margin for Activities section */}
         <Activities />
+
       </div>
       <Founder />
       <Achievements />
       <EventComponent />
+
       <Share />
+      <div className="text-center mb-12">
+        <h1 className="text-3xl sm:text-4xl font-extrabold text-gray-100 mt-2 p-2">
+          Website <span className="text-green-500">Contributors:</span>
+        </h1>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-[10px]">
+        {/* Pin item */}
+        <PinContainer title="Visit Linkedin" href="https://www.linkedin.com/in/skysingh04?">
+          <div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
+            {/* Image wrapper */}
+            <div className="relative h-full w-full">
+              <Image
+                src="/images/Akash.jpg" // Ensure the image is placed in `public/images`
+                alt="Description Image"
+                layout="fill"
+                objectFit="cover"
+                className="rounded-md"
+              />
+              {/* Overlay description */}
+              <div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
+                <h3 className="font-bold text-base text-slate-100">
+                  Akash Singh
+                </h3>
+                <p className="text-base text-slate-300 mt-2">
+                Supervision, Deployment
+                </p>
+              </div>
+            </div>
+          </div>
+        </PinContainer>
+
+        {/* Repeat for more pins */}
+        <PinContainer title="Visit Linkedin" href="https://www.linkedin.com/in/2004-agarwal-yash/">
+          <div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
+            <div className="relative h-full w-full">
+              <Image
+                src="/images/Yash.jpg"
+                alt="Description Image"
+                layout="fill"
+                objectFit="cover"
+                className="rounded-md"
+              />
+              <div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
+                <h3 className="font-bold text-base text-slate-100">
+                  Yash Agrawal
+                </h3>
+                <p className="text-base text-slate-300 mt-2">
+                  Made backend and frontend of leads page
+                </p>
+              </div>
+            </div>
+          </div>
+        </PinContainer>
+
+        <PinContainer title="Visit Linkedin" href="https://www.linkedin.com/in/alfiyafatima09/">
+          <div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
+            <div className="relative h-full w-full">
+              <Image
+                src="/images/Allfiya.jpg"
+                alt="Description Image"
+                layout="fill"
+                objectFit="cover"
+                className="rounded-md"
+              />
+              <div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
+                <h3 className="font-bold text-base text-slate-100">
+                  Alfiya Fatima
+                </h3>
+                <p className="text-base text-slate-300 mt-2">
+                Authentication, Pbctf registration form, Updates about latest event.
+                </p>
+              </div>
+            </div>
+          </div>
+        </PinContainer>
+        </div>
+
+      <div className="flex md:flex-row flex-col justify-center items-center py-10 px-5">
+          <a href="/Credits">
+            <button className="btn-sm px-5 py-3 text-xl font-bold text-white bg-green-600 mx-3 rounded-xl mt-10">
+              More Contributors:
+            </button>
+          </a>
+        </div>
     </>
   );
 }

components/button/button.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+// Define the Button component
+const Button = ({ onClick, children, className }) => {
+  return (
+    <button
+      onClick={onClick}  // this will be undefined if not provided
+      className={className}
+      style={{
+        padding: '10px 20px',
+        backgroundColor: '#4CAF50',
+        color: 'white',
+        border: 'none',
+        borderRadius: '5px',
+        cursor: 'pointer',
+        fontSize: '16px',
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;