+
@@ -24,10 +24,11 @@ export enum LogoSize {
/**
* Reusable logo component
*/
-export const Logo: React.FC<{ size?: LogoSize, className?: string }> = ({ size = LogoSize.sm, className }) => {
+export const Logo: React.FC<{ size?: LogoSize, className?: string, withText?: boolean }> = ({ size = LogoSize.sm, className, withText = false }) => {
return (
-
+
+ {withText && OpenBeta}
)
}
diff --git a/src/app/global.css b/src/app/global.css
index f85899803..c4d94ccd7 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -134,6 +134,14 @@ A slightly deemphasized dotted underline for a tag in order to not competing wit
.minimal-scrollbar::-webkit-scrollbar-thumb {
@apply bg-neutral-300 rounded-full;
}
+
+ .default-page-margins {
+ @apply px-4 mx-auto max-w-5xl xl:max-w-7xl;
+ }
+
+ .narrow-page-margins {
+ @apply px-4 mx-auto max-w-5xl;
+ }
}
/**
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 000000000..e1cb31ee6
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import '@/public/fonts/fonts.css'
+import './global.css'
+
+/**
+ * Root layout for the not-found page
+ */
+export default function RootLayout ({
+ children
+}: {
+ children: React.ReactNode
+}): any {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 000000000..73dfa5904
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,53 @@
+import Link from 'next/link'
+import { Metadata } from 'next'
+
+import { Chat, House, GithubLogo } from '@phosphor-icons/react/dist/ssr'
+import { Logo } from './(default)/header'
+import { XSearchMinimal } from '@/components/search/XSearch'
+import Alien from '@/assets/illustrations/alien-2-89'
+
+export const metadata: Metadata = {
+ title: '404 Page not found - OpenBeta'
+}
+
+/**
+ * Global 404 page
+ */
+export default function NotFound (): any {
+ return (
+
+
+
+
+
+
+
Oops!
+
We can't seem to find the page you're looking for.
+
Error code: 404
+
+
+
Some helpful links:
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/assets/illustrations/alien-2-89.tsx b/src/assets/illustrations/alien-2-89.tsx
new file mode 100644
index 000000000..ca6fcf464
--- /dev/null
+++ b/src/assets/illustrations/alien-2-89.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react'
+interface Props {
+ className?: string
+}
+
+const SvgComponent: React.FC
= (props) => (
+
+)
+export default SvgComponent
diff --git a/src/components/search/XSearch.tsx b/src/components/search/XSearch.tsx
index ea11bf93f..3576999db 100644
--- a/src/components/search/XSearch.tsx
+++ b/src/components/search/XSearch.tsx
@@ -37,7 +37,7 @@ export function XSearchMinimal ({ placeholder = 'Try "Cat In the Hat" or "Las Ve
placeholder={placeholder}
open={false}
label={
-