Categorize homepage leaderboards into Active, Getting Started, and Closed sections

Split the flat leaderboard grid into three sections to help users find
relevant competitions. Beginner problems (pmpp) get a dedicated "Getting
Started" section, closed competitions move to the bottom with an "Ended"
chip on each tile.

Author: Mark Saroufim

frontend/src/pages/home/Home.tsx

@@ -47,6 +47,10 @@ interface LeaderboardSummaries {
   now: string;
 }
 
+function isBeginnerProblem(name: string): boolean {
+  return /pmpp/i.test(name);
+}
+
 export default function Home() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -73,6 +77,16 @@ export default function Home() {
     (lb) => !isExpired(lb.deadline)
   );
 
+  const activeCompetitions = leaderboards.filter(
+    (lb) => !isExpired(lb.deadline) && !isBeginnerProblem(lb.name)
+  );
+  const beginnerProblems = leaderboards.filter(
+    (lb) => !isExpired(lb.deadline) && isBeginnerProblem(lb.name)
+  );
+  const closedCompetitions = leaderboards.filter((lb) =>
+    isExpired(lb.deadline)
+  );
+
   const handleLeaderboardSelect = (id: number) => {
     setIsLeaderboardSelectOpen(false);
     navigate(`/leaderboard/${id}/editor`);
@@ -215,13 +229,58 @@ export default function Home() {
         ) : loading ? (
           <Loading />
         ) : leaderboards.length > 0 ? (
-          <Grid container spacing={3}>
-            {leaderboards.map((leaderboard) => (
-              <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4 }} key={leaderboard.id}>
-                <LeaderboardTile leaderboard={leaderboard} />
-              </Grid>
-            ))}
-          </Grid>
+          <Box>
+            {/* Active Competitions */}
+            {activeCompetitions.length > 0 && (
+              <Box sx={{ mb: 5 }}>
+                <Typography variant="h5" component="h2" sx={{ mb: 2 }}>
+                  Active Competitions
+                </Typography>
+                <Grid container spacing={3}>
+                  {activeCompetitions.map((leaderboard) => (
+                    <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4 }} key={leaderboard.id}>
+                      <LeaderboardTile leaderboard={leaderboard} />
+                    </Grid>
+                  ))}
+                </Grid>
+              </Box>
+            )}
+
+            {/* Getting Started */}
+            {beginnerProblems.length > 0 && (
+              <Box sx={{ mb: 5 }}>
+                <Typography variant="h5" component="h2" sx={{ mb: 0.5 }}>
+                  Getting Started
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                  New to GPU programming? Start here.
+                </Typography>
+                <Grid container spacing={3}>
+                  {beginnerProblems.map((leaderboard) => (
+                    <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4 }} key={leaderboard.id}>
+                      <LeaderboardTile leaderboard={leaderboard} />
+                    </Grid>
+                  ))}
+                </Grid>
+              </Box>
+            )}
+
+            {/* Closed Competitions */}
+            {closedCompetitions.length > 0 && (
+              <Box>
+                <Typography variant="h5" component="h2" sx={{ mb: 2, color: "text.secondary" }}>
+                  Closed Competitions
+                </Typography>
+                <Grid container spacing={3}>
+                  {closedCompetitions.map((leaderboard) => (
+                    <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4 }} key={leaderboard.id}>
+                      <LeaderboardTile leaderboard={leaderboard} expired />
+                    </Grid>
+                  ))}
+                </Grid>
+              </Box>
+            )}
+          </Box>
         ) : (
           <Typography variant="body1" color="text.secondary">
             No active leaderboards found.

frontend/src/pages/home/components/LeaderboardTile.tsx

@@ -63,9 +63,10 @@ interface LeaderboardData {
 
 interface LeaderboardTileProps {
   leaderboard: LeaderboardData;
+  expired?: boolean;
 }
 
-export default function LeaderboardTile({ leaderboard }: LeaderboardTileProps) {
+export default function LeaderboardTile({ leaderboard, expired }: LeaderboardTileProps) {
   const timeLeft = getTimeLeft(leaderboard.deadline);
 
   return (
@@ -78,7 +79,7 @@ export default function LeaderboardTile({ leaderboard }: LeaderboardTileProps) {
         sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }}
       >
         {/* Leaderboard Name */}
-        <Box sx={{ mb: 1 }}>
+        <Box sx={{ mb: 1, display: "flex", alignItems: "center", gap: 1 }}>
           <Typography
             variant="h6"
             component="h3"
@@ -87,12 +88,26 @@ export default function LeaderboardTile({ leaderboard }: LeaderboardTileProps) {
             <ColoredSquare name={leaderboard.name} />
             {leaderboard.name}
           </Typography>
+          {expired && (
+            <Chip
+              label="Ended"
+              size="small"
+              sx={{
+                fontSize: "0.7rem",
+                height: 22,
+                bgcolor: "action.disabledBackground",
+                color: "text.secondary",
+              }}
+            />
+          )}
         </Box>
 
         {/* Time Left */}
-        <Typography variant="body1" sx={{ color: "text.secondary" }}>
-          {timeLeft}
-        </Typography>
+        {!expired && (
+          <Typography variant="body1" sx={{ color: "text.secondary" }}>
+            {timeLeft}
+          </Typography>
+        )}
 
         {/* GPU Types */}
         <Typography