feat: add new pages

src/components/Navbar/Navbar.module.scss

@@ -0,0 +1,15 @@
+header.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  > ul.menu {
+    padding-top: 10px;
+    .imageContainer {
+      margin-right: auto;
+      padding-bottom: 10px;
+      .image {
+        width: 40px;
+      }
+    }
+  }
+}

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,42 @@
+import { Image, Menu } from 'antd';
+import styles from './Navbar.module.scss';
+import { BarChartOutlined, DatabaseOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
+import logo from '../../assets/ctm_logo.png';
+import { Link } from 'react-router-dom';
+import { ROUTES } from '../../constants/routes';
+
+const Navbar = () => {
+  return (
+    <header className={styles.navbar}>
+      <Menu mode="horizontal" className={styles.menu}>
+        <Menu.Item key="logo" className={styles.imageContainer}>
+          <Link to={ROUTES.HOME}>
+            <Image preview={false} src={logo} className={styles.image} />
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="1" icon={<BarChartOutlined />}>
+          <Link to={ROUTES.LATEST_LEADERBOARDS}>
+            2023 Leaderboards
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="2" icon={<DatabaseOutlined />}>
+          <Link to={ROUTES.LATEST_LEADERBOARDS}>
+            Custom Leaderboards
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="3" icon={<UserOutlined />}>
+          <Link to={ROUTES.LATEST_LEADERBOARDS}>
+            Player profiles
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="4" icon={<TeamOutlined />}>
+          <Link to={ROUTES.LATEST_LEADERBOARDS}>
+            Player vs Player
+          </Link>
+        </Menu.Item>
+      </Menu>
+    </header>
+  );
+};
+
+export default Navbar;

src/components/ScoreTable/ScoreTable.tsx

@@ -65,7 +65,7 @@ const ScoreTable = ({ getStatsMethod, title }: Props) => {
   }, [getStatsMethod]);
   return (
     <div>
-      <Typography.Title level={4}>{title}</Typography.Title>
+      <Typography.Title style={{ minHeight: 68 }} level={4}>{title}</Typography.Title>
       <Table
         showHeader={false}
         pagination={false}

src/constants/routes.ts

@@ -0,0 +1,7 @@
+export const ROUTES = {
+  HOME: '/',
+  LATEST_LEADERBOARDS: '/latest-leaderboards',
+  CUSTOM_LEADERBOARDS: '/custom-leaderboards',
+  PLAYER_PROFILE: '/player',
+  PLAYER_VS_PLAYER: '/player-vs-player',
+};

src/pages/CustomLeaderboards/CustomLeaderboards.tsx

@@ -0,0 +1,3 @@
+const CustomLeaderboards = () => <p>Building...</p>;
+
+export default CustomLeaderboards;

src/pages/Home/Home.module.scss

@@ -1,4 +1,16 @@
+@use '../../styles/responsive' as r;
+
 .container {
-  max-width: 620px;
-  margin: 80px auto 0 auto;
+  max-width: 1400px;
+  margin: 40px auto 0 auto;
+  .statsContainer {
+    max-width: 620px;
+    margin: 0 auto;
+    @include r.desktop {
+      max-width: none;
+      display: grid;
+      gap: 40px;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
 }

src/pages/Home/Home.tsx

@@ -1,42 +1,42 @@
-import { Image, Typography } from 'antd';
+import { Typography } from 'antd';
 import { getScores, EScores, LifeTimeStatistic, lifetimeStats } from '../../api';
-import logo from '../../assets/ctm_logo.png';
 import styles from './Home.module.scss';
 import LifetimeStats from '../../components/LifetimeStatsTable/LifetimeStatsTable';
 import ScoreTable from '../../components/ScoreTable/ScoreTable';
+import ResponsiveMenu from '../../components/Navbar/Navbar';
 
 const Homepage = () => {
   return (
     <div>
-      <Image preview={false} src={logo} />
-      <Typography.Paragraph>Explore the different sheet pages for 2023 Leaderboards, Player Profiles, Player vs Player Comparisons, Month Stats, & Marframs in-depth Player Stats!</Typography.Paragraph>
-      <Typography.Paragraph>Main Contributors: aGameScout, Marfram, HydrantDude | Special Thanks: Pumpyheart, Fractal161, DanQZ, vandweller, Lok & everyone whos helped improve the sheet</Typography.Paragraph>
-      <Typography.Paragraph>Discuss this sheet, post your statistical findings or give feedback in the https://ctm.gg/discord CTM discord server under the #Match-Statistics channel</Typography.Paragraph>
+      <ResponsiveMenu />
       <div className={styles.container}>
-        <ScoreTable
-          title="All Time High Score, Faster Masters"
-          getStatsMethod={() => getScores(EScores.FINAL_SCORE)}
-        />
-        <ScoreTable
-          title="All Time Highest Level 19 Transition Score"
-          getStatsMethod={() => getScores(EScores.TRANSITION_19_SCORE)}
-        />
-        <ScoreTable
-          title="All Time Highest Level 29 Transition Score"
-          getStatsMethod={() => getScores(EScores.TRANSITION_29_SCORE)}
-        />
-        <LifetimeStats
-          title="Lifetime Winning Percentage"
-          getStatsMethod={() => lifetimeStats(LifeTimeStatistic.WINNING_PERCENTAGE, '%')}
-        />
-        <LifetimeStats
-          title="Lifetime Total Games"
-          getStatsMethod={() => lifetimeStats(LifeTimeStatistic.TOTAL_GAMES)}
-        />
-        <LifetimeStats
-          title="Lifetime Total Maxouts"
-          getStatsMethod={() => lifetimeStats(LifeTimeStatistic.MAXOUT_GAMES)}
-        />
+        <Typography.Title level={1}>All Time CTM Masters Event Leaderboards</Typography.Title>
+        <div className={styles.statsContainer}>
+          <ScoreTable
+            title="All Time High Score, Faster Masters"
+            getStatsMethod={() => getScores(EScores.FINAL_SCORE)}
+          />
+          <ScoreTable
+            title="All Time Highest Level 19 Transition Score"
+            getStatsMethod={() => getScores(EScores.TRANSITION_19_SCORE)}
+          />
+          <ScoreTable
+            title="All Time Highest Level 29 Transition Score"
+            getStatsMethod={() => getScores(EScores.TRANSITION_29_SCORE)}
+          />
+          <LifetimeStats
+            title="Lifetime Winning Percentage"
+            getStatsMethod={() => lifetimeStats(LifeTimeStatistic.WINNING_PERCENTAGE, '%')}
+          />
+          <LifetimeStats
+            title="Lifetime Total Games"
+            getStatsMethod={() => lifetimeStats(LifeTimeStatistic.TOTAL_GAMES)}
+          />
+          <LifetimeStats
+            title="Lifetime Total Maxouts"
+            getStatsMethod={() => lifetimeStats(LifeTimeStatistic.MAXOUT_GAMES)}
+          />
+        </div>
       </div>
     </div>
   );

src/pages/LatestLeaderboards/LatestLeaderboards.tsx

@@ -0,0 +1,3 @@
+const LatestLeaderboards = () => <p>Building...</p>;
+
+export default LatestLeaderboards;

src/pages/PlayerProfile/PlayerProfile.tsx

@@ -0,0 +1,3 @@
+const PlayerProfile = () => <p>Building...</p>;
+
+export default PlayerProfile;

src/pages/PlayerVsPlayer/PlayerVsPlayer.tsx

@@ -0,0 +1,3 @@
+const PlayerVsPlayer = () => <p>Building...</p>;
+
+export default PlayerVsPlayer;

src/routes.tsx

@@ -1,13 +1,42 @@
 import { createBrowserRouter } from 'react-router-dom';
 import Homepage from './pages/Home/Home';
+import { ROUTES } from './constants/routes';
+import LatestLeaderboards from './pages/LatestLeaderboards/LatestLeaderboards';
+import CustomLeaderboards from './pages/CustomLeaderboards/CustomLeaderboards';
+import PlayerVsPlayer from './pages/PlayerVsPlayer/PlayerVsPlayer';
+import PlayerProfile from './pages/PlayerProfile/PlayerProfile';
 
 const router = createBrowserRouter([
   {
-    path: '/',
+    path: ROUTES.HOME,
     element: (
       <Homepage />
     ),
   },
+  {
+    path: ROUTES.LATEST_LEADERBOARDS,
+    element: (
+      <LatestLeaderboards />
+    ),
+  },
+  {
+    path: ROUTES.CUSTOM_LEADERBOARDS,
+    element: (
+      <CustomLeaderboards />
+    ),
+  },
+  {
+    path: ROUTES.PLAYER_PROFILE,
+    element: (
+      <PlayerProfile />
+    ),
+  },
+  {
+    path: ROUTES.PLAYER_VS_PLAYER,
+    element: (
+      <PlayerVsPlayer />
+    ),
+  },
 ]);
 
 export default router;

src/styles/_colors.scss

@@ -13,3 +13,4 @@ $e-global-typography-text-line-height: 25.2px;
 $e-global-typography-accent-font-family: "Roboto";
 $e-global-typography-accent-font-weight: 500;
 $background: #19131f;
+$menu-background: #141414;

src/styles/_responsive.scss

@@ -1,7 +1,7 @@
 
 $tablet-width-portrait: 600px;
 $tablet-width: 769px;
-$desktop-width: 920px;
+$desktop-width: 1100px;
 $large-desktop-width: 1441px;
 
 $mobile-max-width: 920px;

src/styles/index.scss

@@ -1,5 +1,9 @@
 @use './colors.scss' as c;
 
 body {
+  margin: 0;
+  padding: 0;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
   background-color: c.$background;
 }