Merge pull request #36 from binhtran432k/fix/not-found

fix(not-found): add layout with header and social
binhtran432k · Mar 29, 2024 · 7c953d0 · 7c953d0
2 parents 9f7877a + 71e5142
commit 7c953d0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/components/header/nav.tsx b/src/components/header/nav.tsx
@@ -7,7 +7,7 @@ export default component$(() => {
       <ul class="flex flex-wrap items-center gap-4 md:gap-8 md:px-2">
         {(
           [
-            ["#", "Home"],
+            ["/", "Home"],
             ["#", "Reviews"],
             ["#", "Projects"],
             ["#", "Insights"],

diff --git a/src/routes/404.tsx b/src/routes/404.tsx
@@ -1,12 +1,26 @@
 import { component$ } from "@builder.io/qwik";
 import { type DocumentHead } from "@builder.io/qwik-city";
+import bgImg from "~/assets/background.jpg";
+import Header from "~/components/header/header";
+import Social from "~/components/social/social";
 
 export default component$(() => {
   return (
-    <>
-      <h1>Page not found</h1>
-      <p>Sorry, that page doesn't seem to exist.</p>
-    </>
+    <div
+      class="relative flex min-h-[100vh] flex-col bg-cover bg-center [--bg-filter:theme(colors.background/50%)]"
+      style={{
+        backgroundImage: `linear-gradient(var(--bg-filter), var(--bg-filter)), url('${bgImg}')`,
+      }}
+    >
+      <Header />
+      <div class="flex grow flex-col flex-wrap justify-between px-4">
+        <div class="container m-auto text-center">
+          <h1 class="text-3xl font-bold">Page not found</h1>
+          <p class="mt-2 text-lg">Sorry, that page doesn't seem to exist.</p>
+        </div>
+        <Social />
+      </div>
+    </div>
   );
 });