Minor progress on client side redesign.

client/src/components/GameInfoCardDisplay.js

@@ -0,0 +1,21 @@
+import React from "react";
+import propTypes from "prop-types";
+import GameInfoCard from "./GameInfoCard";
+
+export default class GameInfoCardDisplay extends React.Component {
+    constructor(props) {
+        super(props);
+
+    }
+    render() {
+        return (
+            <div className="horizontal-scroller">
+                {this.props.recommendedMatches.map((match) => <GameInfoCard key={match.id} match={match}></GameInfoCard>)}
+            </div>
+        );
+    }
+}
+
+GameInfoCardDisplay.propTypes = {
+    recommendedMatches: propTypes.array,
+};

client/src/models/Match.js

@@ -1,4 +1,5 @@
 export default class Match {
+    id;
     minUsers;
     MaxUsers;
     registeredUsers;

client/src/pages/Welcome.js

@@ -14,7 +14,7 @@ export default class Welcome extends React.Component {
                 </div>
                 <div className="text-center p-3 mt-2">
                     <h2>Why?</h2>
-                    <p>Because you want to play the sports you love while meeting new friends and foes!</p>
+                    <p>Because you want to play the sports you love while meeting new friends!</p>
                     {/* TODO: All this text should be expanded on. */}
                 </div>
                 <hr />

client/src/styles/extra.css

@@ -13,3 +13,7 @@
 .jumbotron h1 {
   font-size: 1.5rem;
 }
+
+.horizontal-scroller {
+  overflow-x: scroll;
+}