add: root page sevices landing page

src/components/Nav/index.jsx

@@ -12,7 +12,7 @@ import ScrollDirection from "../../helpers/ScrollDirection";
 function Nav() {
   const scrollDirection = ScrollDirection();
   const links = [
-    { link: "/", label: "About" },
+    { link: "/me", label: "About" },
     { link: "/skills", label: "Skill" },
     { link: "/projects", label: "Projects" },
     { link: "/certification", label: "Certification" },

src/pages/Service/index.jsx

@@ -0,0 +1,18 @@
+const Service = () => {
+  return (
+    <div className="flex flex-row items-center h-screen">
+      <div className="flex flex-col w-full items-center mx-auto">
+        <h4 className="text-xl font-bold text-gray-700">
+          Page Under Construction ..
+        </h4>
+        <img
+          className="w-96"
+          src="https://img.freepik.com/free-vector/construction-set-icons_24877-60028.jpg?t=st=1710576561~exp=1710580161~hmac=fe8dd5e519d3f2f467e42ead268c179f109cec8b81a6c9aeed06412d79363fd9&w=740"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Service;

src/routes/index.jsx

@@ -7,13 +7,15 @@ import Contact from "../pages/Contact";
 import NotFound from "../pages/NotFound";
 import Certification from "../pages/Certification";
 import ScrollToTop from "../helpers/ScrollToTop";
+import Service from "../pages/Service";
 
 const Router = () => {
   return (
     <BrowserRouter>
       <ScrollToTop>
         <Routes>
-          <Route path="/" element={<About />} />
+          <Route path="/" element={<Service />} />
+          <Route path="/me" element={<About />} />
           <Route path="/skills" element={<Skills />} />
           <Route path="/projects" element={<Projects />} />
           <Route path="/certification" element={<Certification />} />