🐛 fix(_team): members card has been fixed

src/pages/About.tsx

@@ -18,14 +18,25 @@ export function About() {
   useEffect(() => {
     const fetchTeamMembers = async () => {
       try {
-        const response = await fetch(
+        // List of GitHub usernames of the team members
-          "https://api.github.com/orgs/Snigdha-OS/members"
+        const teamUsernames = [
-        );
+          "eshanized",
+          "iconized",
+          "alokified",
+          "utkrshift", // Replace with actual GitHub usernames
+        ];
+
+        // Fetch profile data for each member
+        const fetchProfiles = teamUsernames.map(async (username) => {
+          const response = await fetch(`https://api.github.com/users/${username}`);
           if (!response.ok) {
-          throw new Error("Failed to fetch team members");
+            throw new Error(`Failed to fetch data for ${username}`);
           }
-        const data = await response.json();
+          return await response.json();
-        setTeamMembers(data);
+        });
+
+        const teamData = await Promise.all(fetchProfiles);
+        setTeamMembers(teamData);
       } catch (error) {
         console.error("Error fetching team members:", error);
       } finally {
@@ -37,121 +48,156 @@ export function About() {
   }, []);
 
   return (
-    <div className="py-12">
+    <div className="py-16 bg-gradient-to-b from-[#F7F9FC] to-[#E6EBF1]">
       <div className="container mx-auto px-4">
+
         {/* Mission Section */}
         <section className="mb-16 text-center">
-          <h1 className="text-4xl font-bold mb-6">About Snigdha OS</h1>
+          <h1 className="text-4xl font-extrabold mb-6 text-[#6495ed]">About Snigdha OS</h1>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Snigdha OS is one of the most upcoming desktop Linux distributions and
+            Snigdha OS is a modern, elegant, and efficient Linux distribution designed to be lightweight and developer-friendly. Built on Arch Linux with the Zen kernel, it offers a powerful and secure platform for both personal use and penetration testing.
-            used by millions of people. It is elegant, easy to use, comfortable,
-            and powerful.
           </p>
         </section>
 
         {/* Features Section */}
         <section className="mb-16">
-          <h2 className="text-3xl font-bold mb-8 text-center">Features</h2>
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Key Features</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
             <FeatureCard
-              icon={<Package className="h-12 w-12 text-teal-500" />}
+              icon={<Package className="h-12 w-12 text-teal-500 transition-transform transform hover:scale-110" />}
               title="Fast & Lightweight"
-              description="Snigdha OS is optimized for performance, ensuring fast boot times and smooth user experiences."
+              description="Snigdha OS is designed to run efficiently on both older hardware and modern systems, ensuring excellent performance with minimal resource usage."
             />
             <FeatureCard
-              icon={<Shield className="h-12 w-12 text-green-500" />}
+              icon={<Shield className="h-12 w-12 text-green-500 transition-transform transform hover:scale-110" />}
               title="Security First"
-              description="We prioritize your privacy and security, offering regular security updates and patches."
+              description="Snigdha OS focuses on providing robust security with regular updates, patches, and user privacy as top priorities."
             />
             <FeatureCard
-              icon={<Coffee className="h-12 w-12 text-yellow-500" />}
+              icon={<Coffee className="h-12 w-12 text-yellow-500 transition-transform transform hover:scale-110" />}
               title="Developer Friendly"
-              description="Snigdha OS comes with a wide range of tools and a solid environment for developers."
+              description="Packed with a rich set of tools for developers, Snigdha OS ensures smooth development and testing, especially in security-related tasks."
             />
           </div>
         </section>
 
         {/* Values Section */}
         <section className="mb-16">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Our Core Values</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
             <ValueCard
-              icon={<Heart className="h-12 w-12 text-red-500" />}
+              icon={<Heart className="h-12 w-12 text-red-500 transition-transform transform hover:scale-110" />}
-              title="Our Mission"
+              title="Passion for Open Source"
-              description="To produce a modern, elegant and comfortable operating system which is both powerful and easy to use."
+              description="Our community-driven approach means that Snigdha OS is constantly evolving, with contributions from developers and users worldwide."
             />
             <ValueCard
-              icon={<Users className="h-12 w-12 text-blue-500" />}
+              icon={<Users className="h-12 w-12 text-blue-500 transition-transform transform hover:scale-110" />}
-              title="Community"
+              title="Community Empowerment"
-              description="We believe in the power of open source and community collaboration to create amazing software."
+              description="We believe in empowering the community by encouraging collaboration, innovation, and open dialogue around the development of Snigdha OS."
             />
             <ValueCard
-              icon={<Shield className="h-12 w-12 text-green-500" />}
+              icon={<Shield className="h-12 w-12 text-green-500 transition-transform transform hover:scale-110" />}
-              title="Security"
+              title="Security & Privacy"
-              description="We prioritize user privacy and system security through regular updates and careful system design."
+              description="Snigdha OS is built with the philosophy of safeguarding user data and ensuring that privacy remains a top priority."
             />
           </div>
         </section>
 
-        {/* Testimonials Section */}
+        {/* Roadmap Section */}
-        <section className="mb-16 text-center bg-white py-12">
-          <h2 className="text-4xl font-extrabold text-indigo mb-8">What Our Users Say</h2>
-          <div className="flex flex-col md:flex-row gap-12 justify-center">
-            <Testimonial
-              name="John Doe"
-              role="Software Engineer"
-              quote="Snigdha OS is the perfect balance between simplicity and power. I use it daily for my work."
-              avatarUrl="https://avatars.githubusercontent.com/u/1?v=4"
-              profileUrl="https://github.com/eshanized"
-            />
-            <Testimonial
-              name="Jane Smith"
-              role="Designer"
-              quote="I love the clean and beautiful interface. It makes my work much more enjoyable."
-              avatarUrl="https://avatars.githubusercontent.com/u/2?v=4"
-              profileUrl="https://github.com/janesmith"
-            />
-            <Testimonial
-              name="Alice Johnson"
-              role="Student"
-              quote="I switched to Snigdha OS for its stability and performance. It’s been a great experience so far."
-              avatarUrl="https://avatars.githubusercontent.com/u/3?v=4"
-              profileUrl="https://github.com/alicejohnson"
-            />
-          </div>
-        </section>
-
-        {/* History Section */}
         <section className="mb-16">
-          <h2 className="text-3xl font-bold mb-8 text-center">Our History</h2>
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Roadmap</h2>
-          <div className="bg-white rounded-lg shadow-lg p-8">
           <div className="space-y-6">
             <TimelineItem
-                year="2023"
+              year="Q1 2025"
-                title="The Beginning"
+              title="User Interface Overhaul"
-                description="Snigdha OS was founded by Eshan Roy (aka eshanized) and launched its first release, Arctic."
+              description="Introducing a more intuitive and modern user interface with customizable features."
             />
             <TimelineItem
-                year="2024"
+              year="Q2 2025"
-                title="Growing Popular"
+              title="Security Enhancements"
-                description="Snigdha OS gained significant popularity and became one of the most widely used Linux distributions."
+              description="Improving system-level security, including advanced encryption support and better intrusion detection mechanisms."
             />
             <TimelineItem
-                year="2024"
+              year="Q3 2025"
-                title="Penetration Tools"
+              title="Developer Tools Expansion"
-                description="Development of penetration-specific tools began, making system management easier for users."
+              description="Snigdha OS will include more developer tools, including cloud-based IDEs and enhanced testing environments for penetration testers."
             />
             <TimelineItem
-                year="Present"
+              year="Q4 2025"
-                title="Continuing Innovation"
+              title="More Community Contributions"
-                description="Snigdha OS continues to innovate while maintaining its commitment to stability and user-friendliness."
+              description="Increasing community-driven contributions with better documentation and support for new architectures."
             />
           </div>
+        </section>
+
+        {/* Contribution Guidelines Section */}
+        <section className="mb-16">
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">How You Can Contribute</h2>
+          <div className="text-center max-w-3xl mx-auto text-lg text-gray-600 mb-8">
+            <p>
+              Whether you are a developer, designer, or simply passionate about Snigdha OS, there are many ways you can help the project grow. Contribute code, submit bug reports, or help improve the documentation.
+            </p>
+            <a
+              href="https://github.com/Snigdha-OS/Snigdha-OS"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-4 inline-block px-6 py-3 bg-[#6495ed] text-white text-lg font-semibold rounded-lg hover:bg-[#5a82cc]"
+            >
+              View Contribution Guidelines
+            </a>
+          </div>
+        </section>
+
+        {/* Success Stories Section */}
+        <section className="mb-16">
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Success Stories</h2>
+          <div className="space-y-8">
+            <SuccessStory
+              title="A Developer's Dream"
+              description="Alex, a full-stack developer, shares how Snigdha OS transformed their workflow, offering a fast and secure environment to write code and run tests."
+              link="https://github.com/alexdev"
+            />
+            <SuccessStory
+              title="In the Classroom"
+              description="Local schools have adopted Snigdha OS to give students an affordable, powerful, and secure OS for their coding and programming classes."
+              link="https://github.com/education-department"
+            />
+          </div>
+        </section>
+
+        {/* Community & Resources Section */}
+        <section className="mb-16">
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Community & Resources</h2>
+          <div className="text-center max-w-2xl mx-auto text-lg text-gray-600 mb-8">
+            <p>
+              Join the Snigdha OS community to stay updated, contribute, and collaborate on new features. You can connect with us through our forums and GitHub.
+            </p>
+            <div className="flex justify-center gap-8 mt-6">
+              <a
+                href="https://github.com/Snigdha-OS"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#6495ed] hover:text-[#5a82cc]"
+              >
+                GitHub Repository
+              </a>
+              <a
+                href="https://www.snigdhaos.com/community"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#6495ed] hover:text-[#5a82cc]"
+              >
+                Community Forum
+              </a>
+            </div>
           </div>
         </section>
 
         {/* Leadership Team Section */}
         <section>
-          <h2 className="text-3xl font-bold mb-8 text-center">Leadership Team</h2>
+          <h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">
+            Meet the Leadership Team
+          </h2>
           {loading ? (
             <p className="text-center text-gray-600">Loading team members...</p>
           ) : (
@@ -162,8 +208,8 @@ export function About() {
                   name={member.name || member.login}
                   image={member.avatar_url}
                   profileUrl={member.html_url}
-                  bio={member.bio || "Go go, said the bird. Humankind cannot tolerate too much reality!"}
+                  bio={member.bio || "Passionate about Linux and open-source software."}
-                  location={member.location || "INDIA"}
+                  location={member.location || "India"}
                   company={member.company || "TONMOY INFRASTRUCTURE"}
                 />
               ))}
@@ -185,10 +231,10 @@ function FeatureCard({
   description: string;
 }) {
   return (
-    <div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+    <div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow transform hover:scale-105 hover:bg-gray-50">
       <div className="flex justify-center mb-4">{icon}</div>
-      <h3 className="text-xl font-bold mb-2">{title}</h3>
+      <h3 className="text-xl font-semibold text-[#6495ed] mb-2">{title}</h3>
-      <p className="text-gray-600">{description}</p>
+      <p className="text-gray-700">{description}</p>
     </div>
   );
 }
@@ -203,50 +249,36 @@ function ValueCard({
   description: string;
 }) {
   return (
-    <div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+    <div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow transform hover:scale-105 hover:bg-gray-50">
       <div className="flex justify-center mb-4">{icon}</div>
-      <h3 className="text-xl font-bold mb-2">{title}</h3>
+      <h3 className="text-xl font-semibold text-[#6495ed] mb-2">{title}</h3>
-      <p className="text-gray-600">{description}</p>
+      <p className="text-gray-700">{description}</p>
     </div>
   );
 }
 
-function Testimonial({
+function SuccessStory({
-  name,
+  title,
-  role,
+  description,
-  quote,
+  link,
-  avatarUrl,
-  profileUrl,
 }: {
-  name: string;
+  title: string;
-  role: string;
+  description: string;
-  quote: string;
+  link: string;
-  avatarUrl: string;
-  profileUrl: string;
 }) {
   return (
-    <div className="flex-1 bg-white p-8 rounded-xl shadow-xl hover:shadow-2xl transition-shadow transform hover:scale-105">
+    <div className="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
-      <p className="text-lg italic text-gray-700 mb-4">"{quote}"</p>
+      <h3 className="text-2xl font-semibold text-[#6495ed]">{title}</h3>
-      <div className="flex items-center justify-center mt-4">
+      <p className="text-gray-700 my-4">{description}</p>
-        <img
-          src={avatarUrl}
-          alt={name}
-          className="w-20 h-20 rounded-full object-cover border-4 border-indigo-500 shadow-md transform hover:scale-110 transition-transform"
-        />
-        <div className="ml-4">
-          <h3 className="font-bold text-xl text-gray-800">{name}</h3>
-          <p className="text-gray-500 text-sm">{role}</p>
       <a
-            href={profileUrl}
+        href={link}
         target="_blank"
         rel="noopener noreferrer"
-            className="text-indigo-600 hover:text-indigo-800 text-sm mt-2 inline-block"
+        className="text-[#6495ed] hover:text-[#5a82cc]"
       >
-            View Profile
+        Read More
       </a>
     </div>
-      </div>
-    </div>
   );
 }
 
@@ -261,10 +293,10 @@ function TimelineItem({
 }) {
   return (
     <div className="flex">
-      <div className="w-24 font-bold text-green-600">{year}</div>
+      <div className="w-24 font-semibold text-green-600">{year}</div>
       <div>
-        <h3 className="font-bold mb-1">{title}</h3>
+        <h3 className="font-semibold mb-1 text-[#6495ed]">{title}</h3>
-        <p className="text-gray-600">{description}</p>
+        <p className="text-gray-700">{description}</p>
       </div>
     </div>
   );
@@ -286,21 +318,21 @@ function TeamMemberCard({
   company: string;
 }) {
   return (
-    <div className="text-center bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition-shadow">
+    <div className="text-center bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition-shadow transform hover:scale-105">
       <img
         src={image}
         alt={name}
-        className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
+        className="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-[#6495ed]"
       />
-      <h3 className="font-bold text-lg text-gray-800">{name}</h3>
+      <h3 className="font-semibold text-lg text-gray-800 mb-2">{name}</h3>
-      <p className="text-gray-500 text-sm">{bio}</p>
+      <p className="text-gray-600 text-sm">{bio}</p>
-      <p className="text-gray-600 text-sm mt-2">{location}</p>
+      <p className="text-gray-500 text-sm mt-2">{location}</p>
-      <p className="text-gray-600 text-sm mt-1">{company}</p>
+      <p className="text-gray-500 text-sm mt-1">{company}</p>
       <a
         href={profileUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-indigo-500 hover:text-indigo-700 mt-2 inline-block"
+        className="text-[#6495ed] hover:text-[#5a82cc] mt-2 inline-block"
       >
         View Profile
       </a>