Fill out website static content

frontend/src/App.tsx

@@ -19,6 +19,7 @@ import Home from "@/pages/Home";
 import NotFound from "@/pages/NotFound";
 import Search from "@/pages/Search";
 import Stats from "@/pages/Stats";
+import Terms from "@/pages/Terms";
 import Testbed from "@/pages/Testbed";
 import { scrollTo } from "@/util/dom";
 import { redirectPath, redirectState } from "@/util/url";
@@ -98,6 +99,10 @@ const routes = [
         path: "testbed",
         element: <Testbed />,
       },
+      {
+        path: "terms",
+        element: <Terms />,
+      },
 
       {
         path: "*",

frontend/src/components/Button.tsx

@@ -32,7 +32,10 @@ export default function Button({
   /** combine styles */
   const _class = clsx(
     className,
-    `flex items-center justify-center gap-2 rounded-sm p-2 leading-none`,
+    `
+      flex items-center justify-center gap-2 rounded-sm p-2 leading-none
+      no-underline
+    `,
     color === "none" &&
       `
         bg-transparent text-theme

frontend/src/components/Footer.tsx

@@ -1,9 +1,18 @@
+import Link from "@/components/Link";
+
 const { VITE_LAB: lab } = import.meta.env;
 
 export default function Footer() {
   return (
-    <footer className="bg-theme-dark p-8 text-center text-white">
-      &copy; 2026 {lab}
+    <footer
+      className="
+        flex justify-start gap-8 bg-theme-dark p-8 text-center text-white
+      "
+    >
+      <div>&copy; 2026 {lab}</div>
+      <Link to="/terms" className="text-white">
+        Terms and Conditions
+      </Link>
     </footer>
   );
 }

frontend/src/components/Header.tsx

@@ -38,8 +38,8 @@ export default function Header() {
       ref={ref}
       className="
         sticky top-0 z-10 flex flex-row flex-wrap items-center justify-between
-        gap-4 bg-theme-dark p-4 text-white
-        [&_a,&_button]:text-white
+        gap-4 bg-theme-dark p-4
+        [&_a,&_button]:text-white! [&_a,&_button]:no-underline
         [&_a,&_button]:hover:bg-stone-800
       "
     >

frontend/src/components/Heading.tsx

@@ -8,7 +8,7 @@ type Props = {
   /** "indent" level */
   level: 1 | 2 | 3 | 4;
   /** manually set anchor link instead of automatically from children text */
-  anchor?: string;
+  id?: string;
   /** class on heading */
   className?: string;
   /** heading content */
@@ -19,14 +19,14 @@ type Props = {
  * demarcates a new section/level of content. only use one level 1 per page.
  * don't use levels below 4.
  */
-export default function Heading({ level, anchor, className, children }: Props) {
+function Heading({ level, id: explicitId, className, children }: Props) {
   const ref = useRef<HTMLHeadingElement>(null);
 
   /** heading tag */
   const Tag: keyof JSX.IntrinsicElements = `h${level}`;
 
   /** url-compatible, "slugified" id */
-  const id = anchor ?? slugify(renderText(children));
+  const id = explicitId ?? slugify(renderText(children));
 
   return (
     <Tag id={id} ref={ref} className={className}>
@@ -36,3 +36,19 @@ export default function Heading({ level, anchor, className, children }: Props) {
     </Tag>
   );
 }
+
+export function H1(props: Omit<Props, "level">) {
+  return <Heading level={1} {...props} />;
+}
+
+export function H2(props: Omit<Props, "level">) {
+  return <Heading level={2} {...props} />;
+}
+
+export function H3(props: Omit<Props, "level">) {
+  return <Heading level={3} {...props} />;
+}
+
+export function H4(props: Omit<Props, "level">) {
+  return <Heading level={4} {...props} />;
+}