From fdb31c79edf6c0768a79567c4ee2042d6677bde6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 26 Nov 2025 19:46:05 +0000
Subject: [PATCH 1/8] Initial plan


From 595e501ac49826d38a7ca3dcec8bb15891d1926e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 26 Nov 2025 19:55:48 +0000
Subject: [PATCH 2/8] Add custom 404 and error pages with consistent layout

Co-authored-by: lfarci <31938998+lfarci@users.noreply.github.com>
---
 src/src/app/error.tsx     | 43 +++++++++++++++++++++++++++++++++++++++
 src/src/app/not-found.tsx | 23 +++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/src/app/error.tsx
 create mode 100644 src/src/app/not-found.tsx

diff --git a/src/src/app/error.tsx b/src/src/app/error.tsx
new file mode 100644
index 0000000..e69a5da
--- /dev/null
+++ b/src/src/app/error.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    useEffect(() => {
+        console.error(error);
+    }, [error]);
+
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <h1 className="text-6xl md:text-8xl font-bold heading-font text-text-primary mb-4">
+                Oops!
+            </h1>
+            <h2 className="text-2xl md:text-3xl font-semibold heading-font text-text-secondary mb-6">
+                Something went wrong
+            </h2>
+            <p className="text-base md:text-lg text-text-tertiary mb-8 max-w-md text-font">
+                An unexpected error has occurred. Please try again or return to the home page.
+            </p>
+            <div className="flex gap-4">
+                <button
+                    onClick={() => reset()}
+                    className="px-6 py-3 bg-primary text-text-inverse font-medium rounded-lg hover:bg-primary-hover transition-colors duration-200"
+                >
+                    Try Again
+                </button>
+                <button
+                    onClick={() => (window.location.href = "/")}
+                    className="px-6 py-3 bg-surface-hover text-text-primary font-medium rounded-lg border border-border hover:bg-surface-elevated transition-colors duration-200"
+                >
+                    Back to Home
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/src/app/not-found.tsx b/src/src/app/not-found.tsx
new file mode 100644
index 0000000..0d9f661
--- /dev/null
+++ b/src/src/app/not-found.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+export default function NotFound() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <h1 className="text-6xl md:text-8xl font-bold heading-font text-text-primary mb-4">
+                404
+            </h1>
+            <h2 className="text-2xl md:text-3xl font-semibold heading-font text-text-secondary mb-6">
+                Page Not Found
+            </h2>
+            <p className="text-base md:text-lg text-text-tertiary mb-8 max-w-md text-font">
+                Sorry, the page you are looking for does not exist or has been moved.
+            </p>
+            <Link 
+                href="/"
+                className="px-6 py-3 bg-primary text-text-inverse font-medium rounded-lg hover:bg-primary-hover transition-colors duration-200"
+            >
+                Back to Home
+            </Link>
+        </div>
+    );
+}

From ced59dca895ff61ffa70fa80bad37078e343abaa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 26 Nov 2025 19:58:09 +0000
Subject: [PATCH 3/8] Improve error page: use Next.js router and conditional
 logging

Co-authored-by: lfarci <31938998+lfarci@users.noreply.github.com>
---
 src/src/app/error.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/src/app/error.tsx b/src/src/app/error.tsx
index e69a5da..3999d1d 100644
--- a/src/src/app/error.tsx
+++ b/src/src/app/error.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 export default function Error({
     error,
@@ -9,8 +10,13 @@ export default function Error({
     error: Error & { digest?: string };
     reset: () => void;
 }) {
+    const router = useRouter();
+
     useEffect(() => {
-        console.error(error);
+        // Log errors in development for debugging
+        if (process.env.NODE_ENV === "development") {
+            console.error(error);
+        }
     }, [error]);
 
     return (
@@ -32,7 +38,7 @@ export default function Error({
                     Try Again
                 </button>
                 <button
-                    onClick={() => (window.location.href = "/")}
+                    onClick={() => router.push("/")}
                     className="px-6 py-3 bg-surface-hover text-text-primary font-medium rounded-lg border border-border hover:bg-surface-elevated transition-colors duration-200"
                 >
                     Back to Home

From c9561f6b6d6d3c19f7030e6ad9612857d00a3ad2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 26 Nov 2025 20:44:56 +0000
Subject: [PATCH 4/8] Rename Error function to GlobalError for clarity

Co-authored-by: lfarci <31938998+lfarci@users.noreply.github.com>
---
 src/src/app/error.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/src/app/error.tsx b/src/src/app/error.tsx
index 3999d1d..387a328 100644
--- a/src/src/app/error.tsx
+++ b/src/src/app/error.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 
-export default function Error({
+export default function GlobalError({
     error,
     reset,
 }: {

From 460f3499291a97ff6284ff6b5c8f22690112bf5f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 26 Nov 2025 20:55:19 +0000
Subject: [PATCH 5/8] Add Azure Static Web Apps config for custom 404 page

Co-authored-by: lfarci <31938998+lfarci@users.noreply.github.com>
---
 src/public/staticwebapp.config.json | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/public/staticwebapp.config.json

diff --git a/src/public/staticwebapp.config.json b/src/public/staticwebapp.config.json
new file mode 100644
index 0000000..c4e8259
--- /dev/null
+++ b/src/public/staticwebapp.config.json
@@ -0,0 +1,16 @@
+{
+  "navigationFallback": {
+    "rewrite": "/404.html",
+    "exclude": [
+      "/images/*.{png,jpg,gif,svg,ico,webp}",
+      "/_next/*",
+      "/favicon.ico"
+    ]
+  },
+  "responseOverrides": {
+    "404": {
+      "rewrite": "/404.html",
+      "statusCode": 404
+    }
+  }
+}

From d7c84d83e48fda7c7c55075a20a5212f251b3bf5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 27 Nov 2025 19:53:54 +0000
Subject: [PATCH 6/8] Use typography components for consistent fonts in error
 pages

Co-authored-by: lfarci <31938998+lfarci@users.noreply.github.com>
---
 src/src/app/error.tsx     | 13 +++++++------
 src/src/app/not-found.tsx | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/src/app/error.tsx b/src/src/app/error.tsx
index 387a328..2db4db2 100644
--- a/src/src/app/error.tsx
+++ b/src/src/app/error.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { Heading1, Heading2, Text } from "@/components/shared/typography";
 
 export default function GlobalError({
     error,
@@ -21,15 +22,15 @@ export default function GlobalError({
 
     return (
         <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
-            <h1 className="text-6xl md:text-8xl font-bold heading-font text-text-primary mb-4">
+            <Heading1 className="text-6xl md:text-8xl mb-4">
                 Oops!
-            </h1>
-            <h2 className="text-2xl md:text-3xl font-semibold heading-font text-text-secondary mb-6">
+            </Heading1>
+            <Heading2 className="mb-6">
                 Something went wrong
-            </h2>
-            <p className="text-base md:text-lg text-text-tertiary mb-8 max-w-md text-font">
+            </Heading2>
+            <Text className="mb-8 max-w-md">
                 An unexpected error has occurred. Please try again or return to the home page.
-            </p>
+            </Text>
             <div className="flex gap-4">
                 <button
                     onClick={() => reset()}
diff --git a/src/src/app/not-found.tsx b/src/src/app/not-found.tsx
index 0d9f661..4c9183d 100644
--- a/src/src/app/not-found.tsx
+++ b/src/src/app/not-found.tsx
@@ -1,17 +1,18 @@
 import Link from "next/link";
+import { Heading1, Heading2, Text } from "@/components/shared/typography";
 
 export default function NotFound() {
     return (
         <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
-            <h1 className="text-6xl md:text-8xl font-bold heading-font text-text-primary mb-4">
+            <Heading1 className="text-6xl md:text-8xl mb-4">
                 404
-            </h1>
-            <h2 className="text-2xl md:text-3xl font-semibold heading-font text-text-secondary mb-6">
+            </Heading1>
+            <Heading2 className="mb-6">
                 Page Not Found
-            </h2>
-            <p className="text-base md:text-lg text-text-tertiary mb-8 max-w-md text-font">
+            </Heading2>
+            <Text className="mb-8 max-w-md">
                 Sorry, the page you are looking for does not exist or has been moved.
-            </p>
+            </Text>
             <Link 
                 href="/"
                 className="px-6 py-3 bg-primary text-text-inverse font-medium rounded-lg hover:bg-primary-hover transition-colors duration-200"

From 6fb49e7606f8bcce20aef1f74122e4dcb58abae0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Nov 2025 10:43:02 +0000
Subject: [PATCH 7/8] Refactor error pages to use shared ErrorMessage component

Co-authored-by: lfarci <31938998+lfarci@users.noreply.github.com>
---
 src/src/app/error.tsx                      | 19 ++++++----------
 src/src/app/not-found.tsx                  | 19 ++++++----------
 src/src/components/shared/ErrorMessage.tsx | 26 ++++++++++++++++++++++
 3 files changed, 40 insertions(+), 24 deletions(-)
 create mode 100644 src/src/components/shared/ErrorMessage.tsx

diff --git a/src/src/app/error.tsx b/src/src/app/error.tsx
index 2db4db2..33d9667 100644
--- a/src/src/app/error.tsx
+++ b/src/src/app/error.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { Heading1, Heading2, Text } from "@/components/shared/typography";
+import ErrorMessage from "@/components/shared/ErrorMessage";
 
 export default function GlobalError({
     error,
@@ -21,16 +21,11 @@ export default function GlobalError({
     }, [error]);
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
-            <Heading1 className="text-6xl md:text-8xl mb-4">
-                Oops!
-            </Heading1>
-            <Heading2 className="mb-6">
-                Something went wrong
-            </Heading2>
-            <Text className="mb-8 max-w-md">
-                An unexpected error has occurred. Please try again or return to the home page.
-            </Text>
+        <ErrorMessage
+            title="Oops!"
+            heading="Something went wrong"
+            message="An unexpected error has occurred. Please try again or return to the home page."
+        >
             <div className="flex gap-4">
                 <button
                     onClick={() => reset()}
@@ -45,6 +40,6 @@ export default function GlobalError({
                     Back to Home
                 </button>
             </div>
-        </div>
+        </ErrorMessage>
     );
 }
diff --git a/src/src/app/not-found.tsx b/src/src/app/not-found.tsx
index 4c9183d..e8302c4 100644
--- a/src/src/app/not-found.tsx
+++ b/src/src/app/not-found.tsx
@@ -1,24 +1,19 @@
 import Link from "next/link";
-import { Heading1, Heading2, Text } from "@/components/shared/typography";
+import ErrorMessage from "@/components/shared/ErrorMessage";
 
 export default function NotFound() {
     return (
-        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
-            <Heading1 className="text-6xl md:text-8xl mb-4">
-                404
-            </Heading1>
-            <Heading2 className="mb-6">
-                Page Not Found
-            </Heading2>
-            <Text className="mb-8 max-w-md">
-                Sorry, the page you are looking for does not exist or has been moved.
-            </Text>
+        <ErrorMessage
+            title="404"
+            heading="Page Not Found"
+            message="Sorry, the page you are looking for does not exist or has been moved."
+        >
             <Link 
                 href="/"
                 className="px-6 py-3 bg-primary text-text-inverse font-medium rounded-lg hover:bg-primary-hover transition-colors duration-200"
             >
                 Back to Home
             </Link>
-        </div>
+        </ErrorMessage>
     );
 }
diff --git a/src/src/components/shared/ErrorMessage.tsx b/src/src/components/shared/ErrorMessage.tsx
new file mode 100644
index 0000000..b7cfffd
--- /dev/null
+++ b/src/src/components/shared/ErrorMessage.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { Heading1, Heading2, Text } from "@/components/shared/typography";
+
+interface ErrorMessageProps {
+    title: string;
+    heading: string;
+    message: string;
+    children?: ReactNode;
+}
+
+export default function ErrorMessage({ title, heading, message, children }: ErrorMessageProps) {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <Heading1 className="text-6xl md:text-8xl mb-4">
+                {title}
+            </Heading1>
+            <Heading2 className="mb-6">
+                {heading}
+            </Heading2>
+            <Text className="mb-8 max-w-md">
+                {message}
+            </Text>
+            {children}
+        </div>
+    );
+}

From 077ad3e32f7810facfe3b2de5fe1450a07593cc9 Mon Sep 17 00:00:00 2001
From: Logan Farci <farci.logan@gmail.com>
Date: Sun, 30 Nov 2025 12:45:04 +0100
Subject: [PATCH 8/8] Refactor ErrorMessage component to use semantic HTML and
 typography styles

---
 src/src/components/shared/ErrorMessage.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/src/components/shared/ErrorMessage.tsx b/src/src/components/shared/ErrorMessage.tsx
index b7cfffd..7685fa4 100644
--- a/src/src/components/shared/ErrorMessage.tsx
+++ b/src/src/components/shared/ErrorMessage.tsx
@@ -1,5 +1,7 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Heading1, Heading2, Text } from "@/components/shared/typography";
+import { typographyStyles } from "@/components/shared/typography/core/styles";
 
 interface ErrorMessageProps {
     title: string;
@@ -10,17 +12,17 @@ interface ErrorMessageProps {
 
 export default function ErrorMessage({ title, heading, message, children }: ErrorMessageProps) {
     return (
-        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
-            <Heading1 className="text-6xl md:text-8xl mb-4">
+        <section className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <h1 className={`${typographyStyles.heading1} text-6xl md:text-8xl mb-4`}>
                 {title}
-            </Heading1>
-            <Heading2 className="mb-6">
+            </h1>
+            <h2 className={`${typographyStyles.heading2} mb-6`}>
                 {heading}
-            </Heading2>
-            <Text className="mb-8 max-w-md">
+            </h2>
+            <p className={`${typographyStyles.text} mb-8 max-w-md`}>
                 {message}
-            </Text>
+            </p>
             {children}
-        </div>
+        </section>
     );
 }