From 530e87a6b25ffeab2b84b2840e3de8ea2cebd76c Mon Sep 17 00:00:00 2001
From: Cameron Blackwood <38852603+Reikon95@users.noreply.github.com>
Date: Mon, 14 Oct 2024 09:34:00 +0100
Subject: [PATCH] Add a 404 page to the standard open saas template (#281)

* Add a 404 page to the standard open saas template

* Revert "Add a 404 page to the standard open saas template"

This reverts commit c9e407323286aa6c0b2ba618abc4c9f63bdb3dcd.

* reinstate 404 page after mistake with patch script
---
 template/app/main.wasp                        |  5 +++++
 .../src/client/components/NotFoundPage.tsx    | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 template/app/src/client/components/NotFoundPage.tsx

diff --git a/template/app/main.wasp b/template/app/main.wasp
index bdf58f7..d7669b6 100644
--- a/template/app/main.wasp
+++ b/template/app/main.wasp
@@ -309,6 +309,11 @@ page AdminUIButtonsPage {
   authRequired: true,
   component: import AdminUI from "@src/admin/elements/ui-elements/ButtonsPage"
 }
+
+route NotFoundRoute { path: "*", to: NotFoundPage }
+page NotFoundPage {
+  component: import { NotFoundPage } from "@src/client/components/NotFoundPage"
+}
 //#endregion
 
 //#region Contact Form Messages
diff --git a/template/app/src/client/components/NotFoundPage.tsx b/template/app/src/client/components/NotFoundPage.tsx
new file mode 100644
index 0000000..43aa559
--- /dev/null
+++ b/template/app/src/client/components/NotFoundPage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export function NotFoundPage() {
+  return (
+    <div className='flex items-center justify-center min-h-screen'>
+      <div className='text-center'>
+        <h1 className='text-6xl font-bold  mb-4'>404</h1>
+        <p className='text-lg text-bodydark mb-8'>Oops! The page you're looking for doesn't exist.</p>
+        <Link
+          to='/'
+          className='inline-block px-8 py-3 text-white bg-primary rounded-lg hover:bg-secondary transition duration-300'
+        >
+          Go Back Home
+        </Link>
+      </div>
+    </div>
+  );
+}