2 files changed, 94 insertions, 0 deletions
diff --git a/FrontEnd/src/pages/about/index.css b/FrontEnd/src/pages/about/index.css
new file mode 100644
index 00000000..487f4a0a
--- /dev/null
+++ b/FrontEnd/src/pages/about/index.css
@@ -0,0 +1,8 @@
+.about-page {
+  padding: 1em 2em;
+  line-height: 1.5;
+}
+
+.about-page a {
+  color: var(--cru-surface-on-color);
+}
diff --git a/FrontEnd/src/pages/about/index.tsx b/FrontEnd/src/pages/about/index.tsx
new file mode 100644
index 00000000..afd4de34
--- /dev/null
+++ b/FrontEnd/src/pages/about/index.tsx
@@ -0,0 +1,86 @@
+import "./index.css";
+
+import { useC } from "@/common";
+
+interface Credit {
+  name: string;
+  url: string;
+}
+
+type Credits = Credit[];
+
+const frontendCredits: Credits = [
+  {
+    name: "react.js",
+    url: "https://reactjs.org",
+  },
+  {
+    name: "typescript",
+    url: "https://www.typescriptlang.org",
+  },
+  {
+    name: "bootstrap",
+    url: "https://getbootstrap.com",
+  },
+  {
+    name: "parcel.js",
+    url: "https://parceljs.org",
+  },
+  {
+    name: "eslint",
+    url: "https://eslint.org",
+  },
+  {
+    name: "prettier",
+    url: "https://prettier.io",
+  },
+];
+
+const backendCredits: Credits = [
+  {
+    name: "ASP.NET Core",
+    url: "https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core",
+  },
+  { name: "sqlite", url: "https://sqlite.org" },
+  {
+    name: "ImageSharp",
+    url: "https://github.com/SixLabors/ImageSharp",
+  },
+];
+
+export default function AboutPage() {
+  const c = useC();
+
+  return (
+    <div className="about-page">
+      <h2>{c("about.credits.title")}</h2>
+      <p>{c("about.credits.content")}</p>
+      <h3>{c("about.credits.frontend")}</h3>
+      <ul>
+        {frontendCredits.map((item, index) => {
+          return (
+            <li key={index}>
+              <a href={item.url} target="_blank" rel="noopener noreferrer">
+                {item.name}
+              </a>
+            </li>
+          );
+        })}
+        <li>...</li>
+      </ul>
+      <h3>{c("about.credits.backend")}</h3>
+      <ul>
+        {backendCredits.map((item, index) => {
+          return (
+            <li key={index}>
+              <a href={item.url} target="_blank" rel="noopener noreferrer">
+                {item.name}
+              </a>
+            </li>
+          );
+        })}
+        <li>...</li>
+      </ul>
+    </div>
+  );
+}