From 63481b4a4c770cfd4a514c52d82fd7192619ba4b Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Mon, 23 Mar 2026 11:58:58 -0600
Subject: [PATCH] feat: add Not Found component

---
 src/components/NotFound.tsx | 35 +++++++++++++++++++++++++++++++++++
 src/routes/__root.tsx       |  4 +++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NotFound.tsx

diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..04f4c61
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,35 @@
+import { css } from '@styled-system/css'
+import type { FC } from 'react'
+import FullWidth from '@/components/layout/FullWidth'
+
+const NotFoundStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+})
+
+const NotFound: FC = () => {
+  return (
+    <FullWidth className={NotFoundStyle}>
+      <span
+        className={css({
+          fontSize: '100px',
+          fontFamily: 'orbitron',
+          fontWeight: '900',
+          lineHeight: 'none',
+          color: 'primary.9'
+        })}
+      >
+        404
+      </span>
+      <h1 className={css({ fontSize: '45px' })}>Pagina no encontrada.</h1>
+      <p>
+        La pagina que estas buscando no existe o ha sido movida. Puedes volver a
+        la <a href="/">pagina principal</a>, o intentar de nuevo mas tarde.
+      </p>
+    </FullWidth>
+  )
+}
+
+export default NotFound
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index fb03804..f492002 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -13,6 +13,7 @@ import {
 import type { ReactNode } from 'react'
 import Footer from '@/components/layout/fragments/Footer'
 import Header from '@/components/layout/fragments/Header'
+import NotFound from '@/components/NotFound'
 import GLOBAL_CSS from '@/styles/global.css?url'
 
 config.autoAddCss = false
@@ -81,7 +82,8 @@ export const Route = createRootRoute({
       }
     ]
   }),
-  component: RootComponent
+  component: RootComponent,
+  notFoundComponent: NotFound
 })
 
 function RootComponent() {