diff --git a/app/routes/sports.tsx b/app/routes/sports.tsx
new file mode 100644
index 0000000..4fdcea8
--- /dev/null
+++ b/app/routes/sports.tsx
@@ -0,0 +1,188 @@
+import { Link } from "react-router";
+import { ArrowRight, Trophy } from "lucide-react";
+
+import type { Route } from "./+types/sports";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { SportIcon } from "~/components/SportIcon";
+import {
+ findPublicSportsWithCurrentSeasons,
+ type PublicSportWithCurrentSeasons,
+} from "~/models/sport";
+
+export function meta(): Route.MetaDescriptors {
+ return [
+ { title: "Sports - Brackt" },
+ {
+ name: "description",
+ content: "Explore the sports currently supported on Brackt.",
+ },
+ ];
+}
+
+export async function loader() {
+ const sports = await findPublicSportsWithCurrentSeasons();
+ return { sports };
+}
+
+function pluralize(count: number, singular: string, plural = `${singular}s`) {
+ return `${count} ${count === 1 ? singular : plural}`;
+}
+
+type SportGroupKey = "playoffs" | "standings" | "majors";
+
+const SPORT_GROUPS: Array<{
+ key: SportGroupKey;
+ title: string;
+ description: string;
+}> = [
+ {
+ key: "playoffs",
+ title: "Playoffs",
+ description: "Bracket and postseason formats where advancement drives scoring.",
+ },
+ {
+ key: "standings",
+ title: "Season-Long Standings",
+ description: "Full-season tables, races, and standings-based competitions.",
+ },
+ {
+ key: "majors",
+ title: "Majors",
+ description: "Major tournaments and qualifying-points formats.",
+ },
+];
+
+function seasonGroupKey(
+ season: PublicSportWithCurrentSeasons["currentSeasons"][number]
+): SportGroupKey {
+ if (season.scoringPattern === "season_standings" || season.scoringType === "regular_season") {
+ return "standings";
+ }
+ if (season.scoringPattern === "qualifying_points" || season.scoringType === "majors") {
+ return "majors";
+ }
+ return "playoffs";
+}
+
+function sportGroupKey(sport: PublicSportWithCurrentSeasons): SportGroupKey {
+ const keys = sport.currentSeasons.map(seasonGroupKey);
+ return SPORT_GROUPS.find((group) => keys.includes(group.key))?.key ?? "playoffs";
+}
+
+function SportCard({ sport }: { sport: PublicSportWithCurrentSeasons }) {
+ const fallbackDescription = "Available for Brackt leagues.";
+
+ return (
+
+
+
+
+
+
+
+
{sport.name}
+
+ {sport.type} sport ยท {pluralize(sport.currentSeasons.length, "current season")}
+
+
+
+ {sport.description || fallbackDescription}
+
+
+
+ );
+}
+
+function SportSection({
+ title,
+ description,
+ sports,
+}: {
+ title: string;
+ description: string;
+ sports: PublicSportWithCurrentSeasons[];
+}) {
+ if (sports.length === 0) return null;
+
+ return (
+
+
+
{title}
+
+ {description} {pluralize(sports.length, "sport")} available.
+
+
+ {sports.map((sport) => (
+
+ ))}
+
+
+ );
+}
+
+export default function Sports({ loaderData }: Route.ComponentProps) {
+ const { sports } = loaderData;
+ const groupedSports = new Map
();
+ for (const group of SPORT_GROUPS) groupedSports.set(group.key, []);
+ for (const sport of sports) {
+ groupedSports.get(sportGroupKey(sport))?.push(sport);
+ }
+
+ return (
+
+
+
Sports
+
+ Brackt currently supports {pluralize(sports.length, "sport")} with active
+ or upcoming seasons, and we're adding more.
+
+
+
+ {sports.length === 0 ? (
+
+
+
No sports are listed yet
+
+ Active and upcoming sports will appear here once they are available.
+
+
+ ) : (
+
+ {SPORT_GROUPS.map((group) => (
+
+ ))}
+
+ )}
+
+
+
+
Want to see another sport on Brackt?
+
+ Tell us what should be next and we'll take a look.
+
+
+