refactor: centralize route configuration

frontend/src/components/Logo.tsx

@@ -4,6 +4,8 @@ import "@fontsource/knewave/400.css";
 export default function Logo() {
   return (
     <span
+      role="img"
+      aria-label="Pi Ku"
       className="inline-flex items-baseline justify-center leading-none select-none"
       style={{ fontFamily: "'Knewave', serif" }}
     >

frontend/src/components/ui/DateDisplay.tsx

@@ -0,0 +1,28 @@
+interface DateDisplayProps {
+  date?: Date;
+  className?: string;
+}
+
+export default function DateDisplay({
+  date = new Date(),
+  className = "",
+}: DateDisplayProps) {
+  const formattedDate = date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  return (
+    <div
+      className={`text-right flex flex-col gap-2 min-w-[140px] ${className}`}
+    >
+      <span className="text-[10px] uppercase tracking-[0.4em] text-accent font-bold">
+        Date
+      </span>
+      <span className="text-sm font-serif text-secondary-content italic whitespace-nowrap">
+        {formattedDate}
+      </span>
+    </div>
+  );
+}

frontend/src/components/ui/FormField.tsx

@@ -19,19 +19,20 @@ export default function FormField({
     <div className="form-control">
       <label
         htmlFor={registration.name}
-        className="field-label font-display text-primary-content"
+        className="field-label font-display text-base-content/90 font-medium"
       >
         {label}
       </label>
       <input
         {...registration}
+        id={registration.name}
         type={type}
         placeholder={placeholder}
         className={`input input-bordered focus:input-primary ${
           error ? "input-error" : ""
         }`}
       />
-      {error && <p className="text-error-content">{error}</p>}
+      {error && <p className="text-error">{error}</p>}
     </div>
   );
 }