feat: add Not Found component

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

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() {