diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index a606d777..9833a509 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,125 +1,164 @@ import { Search, GitBranch, GitCommit, GitPullRequest, Layout } from 'lucide-react'; import { Link } from 'react-router-dom'; -// Fixed array declaration for data structure rendering stability const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i); const Hero = () => { return ( -
- - {/* 1. Cyber Grid Overlay */} -
- - {/* Ambient Radial Glow Elements */} -
-
- -
-
- - {/* LEFT COLUMN: Typography & CTA */} -
-

- Track GitHub Activity - - Like Never Before - -

- -

- Monitor and analyze GitHub user activity with powerful insights. Perfect for developers, - project managers, and teams who want to understand contribution patterns and repository engagement. +

+
+
+
+
+ +
+
+
+
+ + GitHub activity, refined +
+ +
+

+ Track GitHub Activity + + In Real Time + +

+
+ +

+ Track, compare, and review GitHub activity at a glance.

-
- {/* Interactive Primary Link Button */} - - - - Start Tracking +
+ + + + Start Tracking + + + Explore Features + +
+ +
+
+
Public API
+
Fast setup
+
+
+
Multi-user
+
Compare activity
+
+
+
Live insights
+
Track trends
+
- {/* RIGHT COLUMN: Dashboard & Floating Git Elements */} -
- - {/* The Main Dashboard Mockup Card */} -
-
+
+
+
- + Dashboard Insights
- - - + + +
- {/* Mockup Data widgets */} -
-
-
Weekly Commits
-
176 +12%
-
-
+
+
+
+
Weekly Commits
+
+ 176 +12% +
+
+
+
+
+ +
+
+
Active Repos
+
24
+
+
+ + Updating now +
- {/* Simulated GitHub Contribution Grid */} -
-
Contribution Matrix
-
+
+
Contribution Matrix
+
{MATRIX_CELLS.map((cellIndex) => { - // Fully qualified class names to ensure they aren't removed by Tailwind's compilation process const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600']; const intensitiesDark = ['dark:bg-slate-800', 'dark:bg-emerald-900/60', 'dark:bg-emerald-700', 'dark:bg-emerald-500', 'dark:bg-emerald-400']; - + const lightClass = intensitiesLight[cellIndex % intensitiesLight.length]; const darkClass = intensitiesDark[cellIndex % intensitiesDark.length]; - + return ( -
); })}
+ +
+
+
8.4k
+
Views
+
+
+
92%
+
Trend
+
+
+
38
+
PRs
+
+
- {/* Floating Git Icon Nodes using native inline styles for correct staggered delays */} -
- +
-
- +
-
- +
- {/* Subtle Neon Center Glow */} -
+
-
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx index d4fee52c..e5261596 100644 --- a/src/pages/Contributors/Contributors.tsx +++ b/src/pages/Contributors/Contributors.tsx @@ -3,15 +3,17 @@ import { Container, Grid, Card, - CardContent, Avatar, Typography, Button, Box, CircularProgress, Alert, + Chip, + Stack, } from "@mui/material"; import { FaGithub } from "react-icons/fa"; +import { Users, Star, Trophy } from "lucide-react"; import { Link } from "react-router-dom"; import axios from "axios"; import { GITHUB_REPO_CONTRIBUTORS_URL } from "../../utils/constants"; @@ -29,6 +31,20 @@ const ContributorsPage = () => { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const rankedContributors = [...contributors].sort( + (a, b) => b.contributions - a.contributions + ); + const podiumContributors = rankedContributors.slice(0, 3); + const remainingContributors = rankedContributors.slice(3); + const totalContributions = contributors.reduce( + (sum, contributor) => sum + contributor.contributions, + 0 + ); + const averageContributions = + contributors.length > 0 + ? Math.round(totalContributions / contributors.length) + : 0; + // Fetch contributors from GitHub API useEffect(() => { const fetchContributors = async () => { @@ -49,96 +65,470 @@ const ContributorsPage = () => { if (loading) { return ( - - - +
+
+ + + + + + Loading contributors + + + Pulling the latest GitHub activity and arranging the spotlight. + + + + +
); } if (error) { return ( - - {error} - +
+ + + {error} + + +
); } return ( -
- - - 🤝 Contributors - - - - {contributors.map((contributor) => ( - +
+
+
+
+ + +
+
+ +
+
+ + +
+ + Meet the people + + powering the project + + + + + A more expressive view of the contributors behind this repo, with a spotlight on top activity, + better hierarchy, and cleaner cards that feel deliberate on every screen size. + +
+
+ + + + + + {contributors.length} + Contributors + + + + + + {totalContributions} + Total contributions + + + + + + {averageContributions} + Average per person + + + +
+
+ + {podiumContributors.length > 0 ? ( +
+ +
+ + + + + Podium leaders + + + The top three contributors get a dedicated stage, while everyone else continues in the regular grid below. + + + + {[ + { contributor: podiumContributors[1], rank: 2, height: 196, accent: "#64748b", label: "Second place" }, + { contributor: podiumContributors[0], rank: 1, height: 248, accent: "#f59e0b", label: "Champion" }, + { contributor: podiumContributors[2], rank: 3, height: 172, accent: "#0ea5e9", label: "Third place" }, + ].map(({ contributor, rank, height, accent, label }) => + contributor ? ( + + + + + + + + {rank} + + + + + {contributor.login} + + + {contributor.contributions} contributions + + + + + + ) : ( + + ) + )} + + + +
+ ) : null} + +
+
+
+ + Contributors + + + Ranked by contribution activity. + +
+ +
+ + + {remainingContributors.map((contributor, index) => ( + + + + + + {contributor.contributions} contributions + + + - - - - {contributor.login} - - - - {contributor.contributions} Contributions - - {/* - - Thank you for your valuable contributions to our - community! - */} - + + + + + {contributor.login} + + + GitHub profile ready to explore + + + - - - + + - - ))} - + + ))} + +
); }; +const summaryPillStyles = { + display: "flex", + alignItems: "center", + gap: 1.25, + minWidth: 180, + borderRadius: 999, + border: "1px solid", + borderColor: "divider", + backgroundColor: "rgba(255,255,255,0.7)", + px: 2, + py: 1.25, + boxShadow: "0 12px 28px rgba(15, 23, 42, 0.08)", +} as const; + +const summaryValueStyles = { + fontSize: "1.1rem", + fontWeight: 900, + lineHeight: 1.1, +} as const; + +const summaryLabelStyles = { + fontSize: "0.75rem", + textTransform: "uppercase", + letterSpacing: 0.9, + color: "text.secondary", + fontWeight: 700, +} as const; + export default ContributorsPage;