Refactor contact and what pages to include a WorkInProgress component

app/contact/page.tsx

@@ -1,3 +1,11 @@
+import { TypographyH2 } from "@/components/typography";
+import { WorkInProgress } from "@/components/work-in-progress";
+
 export default function What() {
-  return <div className="">contact page</div>;
+  return (
+    <div className="">
+      <TypographyH2 border={false}>Contact me</TypographyH2>
+      <WorkInProgress />
+    </div>
+  );
 }

app/what/page.tsx

@@ -1,9 +1,11 @@
 import { TypographyH2 } from "@/components/typography";
+import { WorkInProgress } from "@/components/work-in-progress";
 
 export default function What() {
   return (
     <div className="">
       <TypographyH2 border={false}>What i&apos;ve done ?</TypographyH2>
+      <WorkInProgress />
     </div>
   );
 }

components/work-in-progress.tsx

@@ -0,0 +1,15 @@
+import { Hammer } from "lucide-react";
+
+export const WorkInProgress = () => {
+  return (
+    <div className="md:w-2/3 w-full">
+      <div className="flex items-center  my-8 space-x-2">
+        <h2 className="text-3xl font-bold text-center">Work in Progress</h2>
+        <Hammer className="h-6 w-6 text-primary" />
+      </div>
+      <p className=" text-muted-foreground mb-8">
+        This page is under construction. Please check back later.
+      </p>
+    </div>
+  );
+};