add privacy and credits

src/app/credits/page.tsx

@@ -0,0 +1,51 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacy",
+};
+
+const credits = [
+  {
+    name: "Scoresaber API",
+    url: "https://new.scoresaber.com/api/",
+  },
+  {
+    name: "The old Scoresaber Reloaded project",
+    url: "https://github.com/motzel/scoresaber-reloaded",
+  },
+];
+
+export default async function Analytics() {
+  return (
+    <main>
+      <Container>
+        <Card
+          className="mt-2 w-full rounded-md bg-gray-800"
+          innerClassName="flex flex-col items-center justify-center text-center"
+        >
+          <h1 className="mb-1 text-3xl font-bold">Credits</h1>
+          <p className="mb-8 text-gray-300">
+            This website is made possible because of the following:
+          </p>
+
+          {credits.map((credit, index) => {
+            return (
+              <div className="text-gray-300" key={index}>
+                <p>
+                  <a
+                    className="transform-gpu text-pp-blue transition-all hover:opacity-75"
+                    href={credit.url}
+                  >
+                    {credit.name}
+                  </a>
+                </p>
+              </div>
+            );
+          })}
+        </Card>
+      </Container>
+    </main>
+  );
+}

src/app/privacy/page.tsx

@@ -0,0 +1,55 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacy",
+};
+
+const links = [
+  {
+    name: "Sentry",
+    url: "https://sentry.fascinated.cc",
+    description:
+      "The site uses Sentry to track errors. This is to help me fix bugs and issues with the site.",
+  },
+  {
+    name: "Plausible",
+    url: "https://analytics.fascinated.cc",
+    description:
+      "The site uses Plausible to track page views. This is to help me see which pages are popular.",
+  },
+];
+
+export default async function Analytics() {
+  return (
+    <main>
+      <Container>
+        <Card
+          className="mt-2 w-full rounded-md bg-gray-800"
+          innerClassName="flex flex-col items-center justify-center text-center"
+        >
+          <h1 className="mb-1 text-3xl font-bold">Privacy</h1>
+          <p className="mb-8 text-gray-300">
+            This site does not collect personal data. All of the data stored is
+            in your browser&apos;s local storage.
+          </p>
+
+          <p>All of the services below are hosted by me.</p>
+          <div className="text-gray-300">
+            {links.map((link, index) => {
+              return (
+                <p key={index}>
+                  <a className="text-pp-blue" href={link.url}>
+                    {link.name}
+                  </a>{" "}
+                  - {link.description}
+                </p>
+              );
+            })}
+          </div>
+        </Card>
+      </Container>
+    </main>
+  );
+}

src/app/ranking/country/[country]/[page]/page.tsx

@@ -1,4 +1,9 @@
 import GlobalRanking from "@/components/player/GlobalRanking";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Country Ranking",
+};
 
 type Props = {
   params: { page: string; country: string };

src/app/ranking/global/[page]/page.tsx

@@ -1,4 +1,9 @@
 import GlobalRanking from "@/components/player/GlobalRanking";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Global Ranking",
+};
 
 type Props = {
   params: { page: string };

src/components/Footer.tsx

@@ -6,6 +6,10 @@ const buttons = [
     name: "Privacy",
     url: "/privacy",
   },
+  {
+    name: "Credits",
+    url: "/credits",
+  },
 ];
 
 const buildId = process.env.NEXT_PUBLIC_BUILD_ID