feat: 404 page, minor changes

src/app/layout.tsx

@@ -3,6 +3,8 @@ import Header from '@/components/Header/HeaderWrapper';
 import Footer from '@/components/Footer/Footer';
 import Script from 'next/script';
 
+import type { Metadata } from 'next';
+
 import { Poppins } from 'next/font/google';
 const poppins = Poppins({
 	weight: ['400', '700'],
@@ -28,7 +30,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 	);
 }
 
-export const metadata = {
+export const metadata: Metadata = {
 	title: {
 		template: '%s | Pretendo Network',
 		default: 'Pretendo Network', // a default is required when creating a template

src/app/not-found.tsx

@@ -0,0 +1,24 @@
+import ShowcaseSection from '@/components/ShowcaseSection/ShowcaseSection';
+
+import bandwidthlost from '@/public/assets/images/bandwidthlost.png';
+
+import { getLocale } from '@/utils/locale';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+	title: '404',
+};
+
+export default function NotFound() {
+	const { locale } = getLocale('TODO'); /* TODO */
+
+	return (
+		<ShowcaseSection
+			title={'404.'}
+			caption={locale.notfound.description}
+			image={bandwidthlost}
+			bigText={true}
+		/>
+	);
+}

src/app/page.tsx

@@ -44,7 +44,7 @@ const metadata = {
 };
 
 export default function Home() {
-	const { locale } = getLocale('TODO');
+	const { locale } = getLocale('TODO'); /* TODO */
 
 	return (
 		<main>

src/components/Header/HeaderWrapper.tsx

@@ -3,7 +3,7 @@ import Header from './Header';
 import { getLocale, getLocaleList, localeSetter } from '@/utils/locale';
 
 export default function HeaderWrapper() {
-	const { locale } = getLocale('TODO');
+	const { locale } = getLocale('TODO'); /* TODO */
 
 	const localeList = getLocaleList();
 

src/components/ShowcaseSection/ShowcaseSection.module.css

@@ -28,6 +28,15 @@
 	grid-row: 1;
 }
 
+.bigText h2 {
+	font-size: 8rem;
+	margin-bottom: -2rem;
+}
+
+.bigText p {
+	font-size: 1.5rem;
+}
+
 @media screen and (max-width: 840px) {
 	.content {
 		grid-template-columns: 1fr;
@@ -52,4 +61,12 @@
 		grid-row: 2;
 	}
 
+	.bigText h2 {
+		font-size: 8rem;
+		margin-bottom: -2rem;
+	}
+
+	.bigText p {
+		font-size: 1.25rem;
+	}
 }

src/components/ShowcaseSection/ShowcaseSection.tsx

@@ -10,14 +10,15 @@ interface ShowcaseSectionProps {
 	title?: string;
 	caption?: string;
 	image?: StaticImageData;
-	isOdd?: boolean
+	isOdd?: boolean;
+	bigText?: boolean;
 }
 
 export default function ShowcaseSection(ctx: ShowcaseSectionProps) {
-	const { title, caption, image, isOdd } = ctx;
+	const { title, caption, image, isOdd, bigText } = ctx;
 	return (
 		<Section
-			className={classNames(styles.sectionWrapper, { [styles.odd]: isOdd })}
+			className={classNames(styles.sectionWrapper, { [styles.odd]: isOdd, [styles.bigText]: bigText })}
 			contentClassName={styles.content}
 		>
 			<div className={styles.text}>