✨ style(_ui): new design & improvements

src/pages/Maintainers.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Github, Twitter, Globe, MapPin, Users } from 'lucide-react';
 import { getMaintainers, type Maintainer } from '../services/github';
 
@@ -26,7 +26,7 @@ export function Maintainers() {
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-4 border-green-500 border-t-transparent"></div>
+        <div className="animate-spin rounded-full h-16 w-16 border-4 border-indigo-500 border-t-transparent"></div>
       </div>
     );
   }
@@ -46,10 +46,9 @@ export function Maintainers() {
     <div className="py-12">
       <div className="container mx-auto px-4">
         <section className="text-center mb-16">
-          <h1 className="text-4xl font-bold mb-6">Meet Our Maintainers</h1>
+          <h1 className="text-4xl font-bold text-gray-800 mb-6">Meet Our Maintainers</h1>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
-            These dedicated individuals work tirelessly to make Linux Mint one of
+            These dedicated individuals work tirelessly to make Snigdha OS one of the best Linux distributions available.
-            the best Linux distributions available.
           </p>
         </section>
 
@@ -65,16 +64,16 @@ export function Maintainers() {
 
 function MaintainerCard({ maintainer }: { maintainer: Maintainer }) {
   return (
-    <div className="bg-white rounded-lg shadow-lg p-6">
+    <div className="bg-white rounded-xl shadow-lg p-6 transition-transform transform hover:scale-105 hover:shadow-xl ease-in-out duration-300">
       <div className="flex items-center space-x-4 mb-4">
         <img
           src={maintainer.avatarUrl}
           alt={maintainer.name || maintainer.login}
-          className="w-16 h-16 rounded-full"
+          className="w-24 h-24 rounded-full ring-2 ring-indigo-50"
         />
         <div>
-          <h2 className="text-xl font-bold">{maintainer.name || maintainer.login}</h2>
+          <h2 className="text-2xl font-semibold text-gray-800">{maintainer.name || maintainer.login}</h2>
-          <p className="text-gray-600">@{maintainer.login}</p>
+          <p className="text-sm text-gray-500">@{maintainer.login}</p>
         </div>
       </div>
 
@@ -85,33 +84,33 @@ function MaintainerCard({ maintainer }: { maintainer: Maintainer }) {
       <div className="space-y-2 mb-4">
         {maintainer.location && (
           <div className="flex items-center space-x-2 text-gray-600">
-            <MapPin className="h-4 w-4" />
+            <MapPin className="h-5 w-5 text-gray-600" />
             <span>{maintainer.location}</span>
           </div>
         )}
         <div className="flex items-center space-x-2 text-gray-600">
-          <Users className="h-4 w-4" />
+          <Users className="h-5 w-5 text-gray-600" />
-          <span>{maintainer.followers} followers · {maintainer.following} following</span>
+          <span>{maintainer.followers} followers | {maintainer.following} following</span>
         </div>
       </div>
 
-      <div className="flex space-x-3">
+      <div className="flex space-x-4 mt-4">
         <a
           href={`https://github.com/${maintainer.login}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-gray-600 hover:text-gray-900"
+          className="text-gray-600 hover:text-gray-900 transition-colors duration-200"
         >
-          <Github className="h-5 w-5" />
+          <Github className="h-6 w-6" />
         </a>
         {maintainer.twitterUsername && (
           <a
             href={`https://twitter.com/${maintainer.twitterUsername}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-gray-600 hover:text-blue-400"
+            className="text-blue-500 hover:text-blue-700 transition-colors duration-200"
           >
-            <Twitter className="h-5 w-5" />
+            <Twitter className="h-6 w-6" />
           </a>
         )}
         {maintainer.blog && (
@@ -119,12 +118,12 @@ function MaintainerCard({ maintainer }: { maintainer: Maintainer }) {
             href={maintainer.blog}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-gray-600 hover:text-green-600"
+            className="text-indigo-500 hover:text-indigo-700 transition-colors duration-200"
           >
-            <Globe className="h-5 w-5" />
+            <Globe className="h-6 w-6" />
           </a>
         )}
       </div>
     </div>
   );
-}
+}