chore(devs): introduce developers

src/pages/Developers.tsx

@@ -1,7 +1,40 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Code, GitBranch, Users, MessageSquare } from 'lucide-react';
 
+// Define the type for a developer's GitHub data
+type Developer = {
+  id: number;
+  login: string;
+  name: string | null;
+  avatar_url: string;
+  html_url: string;
+};
+
 export default function Developers() {
+  const [developers, setDevelopers] = useState<Developer[]>([]);
+
+  useEffect(() => {
+    const fetchDevelopers = async () => {
+      const githubUsernames = ["eshanized", "alokified", "utkarshift"]; // Replace with actual GitHub usernames
+      try {
+        const developerData = await Promise.all(
+          githubUsernames.map(async (username) => {
+            const response = await fetch(`https://api.github.com/users/${username}`);
+            if (!response.ok) {
+              throw new Error(`Failed to fetch data for ${username}`);
+            }
+            return response.json();
+          })
+        );
+        setDevelopers(developerData);
+      } catch (error) {
+        console.error("Error fetching developer data:", error);
+      }
+    };
+
+    fetchDevelopers();
+  }, []);
+
   return (
     <div className="py-16">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -13,8 +46,39 @@ export default function Developers() {
           </p>
         </div>
 
-        {/* Get Involved Section */}
+        {/* Meet the Developers Section */}
+        <div className="bg-white rounded-lg shadow-lg p-8 mb-16">
+          <h2 className="text-2xl font-bold mb-6">Meet the Developers</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {developers.length > 0 ? (
+              developers.map((developer) => (
+                <div key={developer.id} className="p-4 border border-gray-200 rounded-lg text-center">
+                  <img
+                    src={developer.avatar_url}
+                    alt={developer.login}
+                    className="w-20 h-20 rounded-full mx-auto mb-4"
+                  />
+                  <h3 className="text-lg font-semibold">{developer.name || developer.login}</h3>
+                  <p className="text-gray-600">@{developer.login}</p>
+                  <a
+                    href={developer.html_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[#754ffe] font-medium mt-2 inline-block"
+                  >
+                    View Profile
+                  </a>
+                </div>
+              ))
+            ) : (
+              <p className="text-gray-600">Loading developer information...</p>
+            )}
+          </div>
+        </div>
+
+        {/* Get Involved and Development Resources Section */}
 <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+  {/* Get Involved Section */}
   <div className="bg-white p-8 rounded-lg shadow-lg">
     <Code className="h-12 w-12 text-[#754ffe] mb-4" />
     <h2 className="text-2xl font-bold mb-4">Get Involved</h2>
@@ -37,6 +101,7 @@ export default function Developers() {
     </ul>
   </div>
 
+  {/* Development Resources Section */}
   <div className="bg-white p-8 rounded-lg shadow-lg">
     <h2 className="text-2xl font-bold mb-4">Development Resources</h2>
     <div className="space-y-4">
@@ -56,6 +121,7 @@ export default function Developers() {
   </div>
 </div>
 
+
         {/* Current Projects */}
         <div className="bg-white rounded-lg shadow-lg p-8 mb-16">
           <h2 className="text-2xl font-bold mb-6">Current Projects</h2>