Snigdha-OS/snigdhaos-web-dev
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/snigdhaos-web-dev.git synced 2025-09-07 13:25:12 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(_ui): new design & improvements

Browse Source
This commit is contained in:
Eshan Roy
2024-12-08 01:25:10 +05:30
parent b340e00451
commit 29d34fda18
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/Maintainers.tsx
View File

@@ -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>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
These dedicated individuals work tirelessly to make Linux Mint one of
the best Linux distributions available.
<h1 className="text-4xl font-bold text-gray-800 mb-6">Meet Our Maintainers</h1>
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
These dedicated individuals work tirelessly to make Snigdha OS one of 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>
<p className="text-gray-600">@{maintainer.login}</p>
<h2 className="text-2xl font-semibold text-gray-800">{maintainer.name || maintainer.login}</h2>
<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" />
<span>{maintainer.followers} followers · {maintainer.following} following</span>
<Users className="h-5 w-5 text-gray-600" />
<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>
);
}
}