Add WIP component for contact/projects pages

src/components/WorkInProgress.tsx

@@ -0,0 +1,17 @@
+import type {FunctionComponent} from "react";
+
+const WorkInProgress: FunctionComponent = () => {
+    return <div className="w-full my-10 flex justify-center">
+        <div
+            className="bg-zinc-850 border border-zinc-700 rounded-md max-w-screen-md w-full m-1 p-5 flex flex-col items-center justify-center">
+            <p className="font-semibold text-3xl sm:text-4xl pb-2">Work In Progress</p>
+            <p className="text-lg text-center">
+                This website is a work-in progress.
+                <br/>
+                Unfortunately, this page hasn&apos;t been finished yet. Check back later.
+        </p>
+        </div>
+    </div>
+}
+
+export default WorkInProgress;

src/pages/contact.tsx

@@ -1,8 +1,10 @@
-import {NextPage} from "next";
+import {type NextPage} from "next";
 import AppWrapper from "../components/AppWrapper";
+import WorkInProgress from "../components/WorkInProgress";
 
 const ContactPage: NextPage = () => {
     return <AppWrapper>
+        <WorkInProgress />
     </AppWrapper>
 }
 

src/pages/projects.tsx

@@ -1,8 +1,11 @@
-import {NextPage} from "next";
+import {type NextPage} from "next";
 import AppWrapper from "../components/AppWrapper";
+import WorkInProgress from "../components/WorkInProgress";
 
 const ProjectsPage: NextPage = () => {
-    return <AppWrapper />;
+    return <AppWrapper>
+        <WorkInProgress/>
+    </AppWrapper>;
 }
 
 export default ProjectsPage;