Feat/layout

src/pages/404.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import Layout from './layout';
+const NotFound = () => {
+  return (
+    <Layout>
+      <main className="w-full h-[calc(100vh-160px)] flex flex-col justify-center items-center bg-slate-700 text-white">
+        <h1 className="text-7xl">404</h1>
+        <h3 className="text-3xl">page not found</h3>
+        <Link href="/">
+          <Button variant="secondary" className="mt-5">
+            Go Home
+          </Button>
+        </Link>
+      </main>
+    </Layout>
+  );
+};
+
+export default NotFound;

src/pages/index.tsx

@@ -1,3 +1,9 @@
+import Layout from './layout';
+
 export default function Home() {
-  return <></>;
+  return (
+    <>
+      <Layout></Layout>
+    </>
+  );
 }

src/pages/layout.tsx

@@ -0,0 +1,15 @@
+import Header from '@/components/Header/Header';
+import Footer from '@/components/Footer/Footer';
+import { ReactNode } from 'react';
+
+const Layout = ({ children }: { children?: ReactNode }) => {
+  return (
+    <>
+      <Header />
+      <div className="min-h-[calc(100vh-160px)]">{children}</div>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;

src/test/404.test.tsx

@@ -0,0 +1,14 @@
+import NotFound from '@/pages/404';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('404 page tests:', () => {
+  test('404 page renders correctly', () => {
+    render(<NotFound />);
+
+    const heading = screen.getByText('404');
+    const button = screen.getByText('Go Home');
+    expect(heading).toBeInTheDocument();
+    expect(button).toBeInTheDocument();
+  });
+});