From dfb0c4d31e26a9ee3271a59101e6ab4dcf3557aa Mon Sep 17 00:00:00 2001
From: Sara <sara@Saras-MBP.home>
Date: Mon, 14 Oct 2024 08:58:36 -0700
Subject: [PATCH] Update 404 page

[#57]
---
 .../core/components/ButtonLink/ButtonLink.tsx | 50 +++++++++++++++++++
 src/app/not-found.tsx                         | 23 +++++++--
 2 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 src/app/core/components/ButtonLink/ButtonLink.tsx

diff --git a/src/app/core/components/ButtonLink/ButtonLink.tsx b/src/app/core/components/ButtonLink/ButtonLink.tsx
new file mode 100644
index 0000000..abafed6
--- /dev/null
+++ b/src/app/core/components/ButtonLink/ButtonLink.tsx
@@ -0,0 +1,50 @@
+import { forwardRef, Ref, type ReactNode } from "react";
+import {
+  TButtonSize,
+  TButtonVariant,
+  ButtonVariants,
+  ButtonSizes,
+} from "@/app/core/components/Button/Button";
+import clsx from "clsx";
+
+interface IProps {
+  children: ReactNode;
+  size?: TButtonSize;
+  href: string;
+  additionalClasses: string;
+  variant?: TButtonVariant;
+  fullWidth?: boolean;
+}
+
+const ButtonLink = forwardRef(
+  (
+    {
+      children,
+      href = "/",
+      additionalClasses = "",
+      size = "regular",
+      variant = "primary",
+      fullWidth = false,
+    }: IProps,
+    ref: Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <a
+        href={href}
+        className={clsx(
+          "rounded-xl inline-block font-bold transition-all",
+          additionalClasses,
+          ButtonSizes[size],
+          ButtonVariants[variant],
+          fullWidth && "w-full"
+        )}
+      >
+        {children}
+      </a>
+    );
+  }
+);
+
+ButtonLink.displayName = "ButtonLink";
+
+export default ButtonLink;
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 23b0429..9c0a18a 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,11 +1,26 @@
-import Link from "next/link";
+import ButtonLink from "@/app/core/components/ButtonLink/ButtonLink";
 
 export default function NotFound() {
   return (
     <div>
-      <h2>Not Found</h2>
-      <p>Could not find requested resource</p>
-      <Link href="/">Return Home</Link>
+      <div className="flex flex-col items-center my-10">
+        <h1 className="text-[2.5rem] font-pressstart uppercase leading-tight">
+          <span>404</span>
+        </h1>
+        <h2 className="uppercase md:text-2xl font-normal">
+          <span>Page not found</span>
+        </h2>
+        <hr className="w-1/4 max-w-[160px] border-breadpink-shaded my-6" />
+        <div className="flex flex-col items-center max-w-[250px]">
+          <p className="leading-tight text-center">
+            Post-Capitalism can only be achieved through perserverance.
+          </p>
+          <p className="leading-tight text-center">Please try again later.</p>
+        </div>
+        <ButtonLink href="/" additionalClasses="my-6">
+          Return home
+        </ButtonLink>
+      </div>
     </div>
   );
 }