improve layout of home page

client/index.html

@@ -68,27 +68,83 @@
         <p class="lead">
             Welcome to QB Reader<span id="welcome-username"></span>!
         </p>
-        <p>
-            You can start reading <a href="/singleplayer/tossups">tossups</a> and <a href="/singleplayer/bonuses">bonuses</a> to
-            yourself,
-            or check out <a href="/multiplayer">multiplayer</a> or the searchable <a href="/db">database</a>.
-            You can also check out the <a href="/frequency-list">frequency list</a> to see the most common answers in the database.
-        </p>
-        <p>
-            You can sign up for an account <a href="/user/signup">here</a>!
-            If you already have an account, <a href="/user/login">login here</a>.
-            To find out more about what an account can do, check out the <a href="/about">about page</a>.
-        </p>
-        <p>
-            Adjust <b>site-wide settings</b> <a href="/settings">here</a>.
-        </p>
-        <p>
-            Join the <b>official qbreader discord</b> here: <a href="https://discord.gg/5ue7MucTGQ">https://discord.gg/5ue7MucTGQ</a>.
-        </p>
-        <h3>Changelog:</h3>
-        <p>
-            <a href="https://github.com/qbreader/website/releases">View the changelog on Github</a>.
-        </p>
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-4 mb-3">
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5>Question Reader</h5>
+                        <p>QB Reader is a text-based quizbowl question reader. Play some questions on your own:</p>
+                        <p class="text-center">
+                            <a class="btn btn-primary" href="/singleplayer/tossups">Tossups</a>
+                            <a class="btn btn-primary" href="/singleplayer/bonuses">Bonuses</a>
+                        </p>
+                        <p>Or, join a multiplayer room to play against other people:</p>
+                        <p class="text-center">
+                            <a class="btn btn-success" href="/multiplayer">Multiplayer</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5>Question Database</h5>
+                        <p>
+                            QB Reader comes with a searchable database of questions which have been downloaded and parsed from <a
+                                href="https://quizbowlpackets.com/">https://quizbowlpackets.com/</a>.
+                        </p>
+                        <p class="text-center"><a class="btn btn-primary" href="/database">Database</a></p>
+                        <p>The answerlines from this database have been aggregated into a series of frequency lists by category.</p>
+                        <p class="text-center"><a class="btn btn-primary" href="/frequency-list">Frequency List</a></p>
+                        <p>
+                            The questions are parsed using the <a href="https://github.com/qbreader/packet-parser">QB Reader packet
+                                parser</a>.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5>Account</h5>
+                        <p>
+                            <a href="/user/signup">Sign up for an account</a> to track your stats, view per-question stats, and
+                            play <a href="/geoword">geoword</a>. If you already have an account, <a href="/user/login">login
+                                here</a>. To find out more about what an account can do, check out the <a href="/about">about
+                                page</a>.
+                        </p>
+                        <h5>Discord</h5>
+                        <p class="text-center">
+                            <a class="btn btn-primary" href="https://discord.gg/5ue7MucTGQ">Join the official Discord here.</a>
+                        </p>
+                        <h5>Settings</h5>
+                        <p class="text-center"><a class="btn btn-primary" href="/settings">Adjust site-wide settings here.</a></p>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5>API</h5>
+                        <p>
+                            Most features of QB Reader can be accessed <a href="/api-docs">through the API</a>. You can also use the <a
+                                href="https://github.com/qbreader/python-module">python wrapper</a> to interact with the API.
+                        </p>
+                        <p>
+                            You can also directly view the <a href="https://github.com/qbreader/website">Github source code</a> and the
+                            <a href="https://www.npmjs.com/package/qb-answer-checker">answer checking code</a> as an npm package.
+                        </p>
+                        <h5>Changelog</h5>
+                        <p><a href="https://github.com/qbreader/website/releases">View the changelog on Github</a>.</p>
+                        <h5>Legal</h5>
+                        <p class="d-flex justify-content-between">
+                            <a href="/about/privacy-policy">Privacy Policy</a>
+                            <a href="/about/terms-of-service">Terms of Service</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
         <h3>Feature of the Day:</h3>
         <blockquote class="blockquote">
             <!-- <p>