feat: custom 404 page

ujjawalsh99 · Jun 27, 2023 · 0e02e61 · 0e02e61
1 parent 68c86f6
commit 0e02e61
Show file tree

Hide file tree

Showing 8 changed files with 615 additions and 15 deletions.
diff --git a/app/(batches)/layout.tsx b/app/(batches)/layout.tsx
@@ -1,3 +1,4 @@
+import { CommandMenu } from "@/components/command-menu";
 import { Icons } from "@/components/icons";
 import MainNav from "@/components/layout/main-nav";
 import { DocsSidebarNav } from "@/components/layout/sidebar-nav";
@@ -19,7 +20,10 @@ const CourseRootLayout = ({ children }: BatchRootLayoutProps) => {
           </MainNav>
 
           <div className="flex flex-1 items-center space-x-4 sm:justify-end">
-            <nav className="flex space-x-4">
+            <nav className="flex space-x-4 items-center">
+              <div className=" px-3 hidden md:flex">
+                <CommandMenu />
+              </div>
               <Link href="/" target="_blank" rel="noreferrer">
                 <Icons.gitHub className="h-7 w-7" />
                 <span className="sr-only">GitHub</span>

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
@@ -1,8 +1,10 @@
 import { Faq } from "@/components/faq";
 import Tracks from "@/components/tracks";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -32,8 +34,15 @@ export default function Home() {
             the...
           </p>
           <div className="flex gap-4">
-            <Button variant="secondary">Join Community</Button>
-            <Button>Join Mentorship</Button>
+            <Link
+              href="/"
+              className={cn(buttonVariants({ variant: "outline" }))}
+            >
+              Join Community
+            </Link>
+            <Link href="/batch" className={cn(buttonVariants())}>
+              Join Mentorship
+            </Link>
           </div>
         </div>
       </section>

diff --git a/app/[...not-Found]/page.tsx b/app/[...not-Found]/page.tsx
@@ -0,0 +1,8 @@
+import { notFound } from "next/navigation";
+import { FC } from "react";
+
+const page: FC = () => {
+  notFound();
+};
+
+export default page;
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,41 @@
+import { Icons } from "@/components/icons";
+import { buttonVariants } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const PageNotFound = () => {
+  return (
+    <div className="min-h-screen flex-col flex">
+      <main className="flex-1 flex justify-center items-center">
+        <section className="container gap-4 flex flex-col items-center text-center">
+          <Image
+            src="/error.svg"
+            width={250}
+            height={250}
+            alt="Rocket Crashed"
+            priority
+          />
+          <h1 className="text-2xl font-bold leading-[1.1] tracking-tighter text-foreground sm:text-3xl md:text-5xl">
+            Page not found...
+          </h1>
+          <p className="max-w-[42rem] leading-normal text-slate-700 sm:text-lg sm:leading-8 md:text-lg">
+            The Page you&apos;re searching for does not exist.
+          </p>
+          <Link
+            className={buttonVariants({
+              variant: "ghost",
+              className: "w-fit mt-1 md:mt-2",
+            })}
+            href="/"
+          >
+            <Icons.chevronLeft className="mr-2 h-4 w-4" />
+            Back to home
+          </Link>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default PageNotFound;
diff --git a/components/layout/main-nav.tsx b/components/layout/main-nav.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import Link from "next/link";
-import React from "react";
 import { Icons } from "../icons";
 import { useSelectedLayoutSegment } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { MobileNav } from "./mobile-nav";
-import { CommandMenu } from "../command-menu";
 import { NavItem } from "@/types";
+import { useState } from "react";
 
 interface MainNavProps {
   items?: NavItem[];
@@ -16,7 +15,7 @@ interface MainNavProps {
 
 export default function MainNav({ items, children }: MainNavProps) {
   const segment = useSelectedLayoutSegment();
-  const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false);
+  const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
 
   return (
     <div className="flex gap-6 md:gap-10 justify-between w-full">
@@ -29,9 +28,6 @@ export default function MainNav({ items, children }: MainNavProps) {
 
       {items?.length ? (
         <div className="flex gap-6">
-          <div className="w-full md:flex hidden flex-1 md:w-auto md:flex-none">
-            <CommandMenu />
-          </div>
           <nav className="hidden md:flex gap-6">
             {items?.map((item, index) => {
               return (

diff --git a/components/tracks.tsx b/components/tracks.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
-import React from "react";
-import { Button } from "./ui/button";
+import { buttonVariants } from "./ui/button";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
 
 type Props = {};
 
@@ -23,7 +24,12 @@ export default function Tracks({}: Props) {
               in a BC, making it over 2000 years old.
             </p>
           </div>
-          <Button className="rounded-full px-8 py-2 mt-4">Join</Button>
+          <Link
+            href="/batch/learn"
+            className={cn(buttonVariants(), "rounded-full px-8 py-2 mt-4")}
+          >
+            Join
+          </Link>
         </div>
         <div className="flex flex-col gap-3 items-center border p-4 rounded-lg">
           <Image src="/build_img.svg" alt="learn" width={250} height={250} />
@@ -35,7 +41,12 @@ export default function Tracks({}: Props) {
               in a BC, making it over 2000 years old.
             </p>
           </div>
-          <Button className="rounded-full px-8 py-2 mt-4">Join</Button>
+          <Link
+            href="/batch/build"
+            className={cn(buttonVariants(), "rounded-full px-8 py-2 mt-4")}
+          >
+            Join
+          </Link>
         </div>
         <div className="flex flex-col gap-3 items-center border p-4 rounded-lg">
           <Image src="/hire_img.svg" alt="learn" width={250} height={250} />
@@ -47,7 +58,12 @@ export default function Tracks({}: Props) {
               in a BC, making it over 2000 years old.
             </p>
           </div>
-          <Button className="rounded-full px-8 py-2 mt-4">Join</Button>
+          <Link
+            href="/batch/hire"
+            className={cn(buttonVariants(), "rounded-full px-8 py-2 mt-4")}
+          >
+            Join
+          </Link>
         </div>
       </div>
     </section>