Created untested GameInfoCard.

With required data structures and functions.

client/src/components/GameInfoCard.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, Card } from "react-bootstrap";
+import propTypes from "prop-types";
+import { grammaticalListString } from "../utils/strings";
+export default class GameInfoCard extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    getParticipants() {
+        let participants = [];
+        this.props.match.registeredUsers.array.forEach(user => {
+            participants.push(user.firstName);
+        });
+        return participants;
+    }
+
+    render() {
+        return (
+            <Card style={{ width: "20rem" }}>
+                <Card.Body>
+                    <Card.Title>{this.props.match.sport}</Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
+                    <Card.Text>
+                        Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
+                    </Card.Text>
+                    <Button variant="primary">Join!</Button>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+GameInfoCard.propTypes = {
+    match: propTypes.object,
+};

client/src/models/Match.js

@@ -0,0 +1,10 @@
+export default class Match {
+    minUsers;
+    MaxUsers;
+    registeredUsers;
+    dateTime;
+    duration;
+    sport;
+    difficulty;
+    title;
+}

client/src/models/User.js

@@ -0,0 +1,8 @@
+export default class User {
+    firstName;
+    lastName;
+    email;
+    age;
+    biography;
+    id;
+}

client/src/pages/Welcome.js

@@ -8,10 +8,19 @@ export default class Welcome extends React.Component {
     render() {
         return (
             <div className="page-root">
-                <div id="welcome-jumbotron" className="jumbotron" >
+                <div className="jumbotron" >
                     <h1>Sports Matcher</h1>
                     <p>The best place to find a local match for a good game of your favourite sport!</p>
                 </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>
+                    {/* TODO: All this text should be expanded on. */}
+                </div>
+                <hr />
+                <div className="p-4">
+                    <h2>Available Matches</h2>
+                </div>
             </div>
         );
     }

client/src/styles/extra.css

@@ -2,8 +2,8 @@
   width: 100%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
-  padding-top: 10rem;
+  padding-top: 12rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 1rem;
   text-align: center;
   background-size: cover;
   background-color: black;

client/src/utils/strings.js

@@ -0,0 +1,22 @@
+export function grammaticalListString(items, max) {
+    if (!items) return null;
+    if (max < 1) return "";
+    let built = "";
+
+    let index = 0;
+    items.forEach(item => {
+        if (index > max) {
+            built += "and " + items.length + " more ";
+            return;
+        }
+        built += item;
+        built += ", ";
+        if (index == max - 1) {
+            built += "and ";
+        }
+
+        index += 1;
+    });
+
+    return built;
+}