feat: start page tool overview with dynamic rendering

src/app/page.tsx

@@ -1,9 +1,22 @@
 import Navbar from "../components/Navbar";
+import { toolLinks } from "@/constants";
 
 export default function Home() {
   return (
-    <div className="bg-black text-white font-noto">
+    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
       <Navbar renderHomeLink={false} />
+      <div className="w-screen h-screen flex flex-col items-center justify-center">
+        <div className="grid grid-cols-3 gap-4">
+          {toolLinks.map((tool) => (
+            <div
+              key={tool.title}
+              className="border-2 border-white p-3 flex justify-center rounded-2xl"
+            >
+              <a href={tool.link}>{tool.title}</a>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

src/components/Navbar.tsx

@@ -3,12 +3,13 @@ import Image from "next/image";
 import LOGO from "../assets/logo/icons8-toolbox-64.svg";
 
 interface NavProps {
+  className?: string;
   renderHomeLink: boolean;
 }
 
 const navbar = (props: NavProps) => {
   return (
-    <div className="h-18 w-full p-3">
+    <div className={`h-18 w-full p-3` + props.className}>
       <nav className="bg-black text-white font-bold flex flex-row items-center justify-between">
         <div className="justify-items-start flex flex-1 flex-row items-center">
           <Image

src/constants/index.ts

@@ -0,0 +1,30 @@
+export const toolLinks = [
+  {
+    title: "color-converter",
+    link: "/color-converter",
+  },
+  {
+    title: "bg-remover",
+    link: "/bg-remover",
+  },
+  {
+    title: "image-converter",
+    link: "/image-converter",
+  },
+  {
+    title: "file converter",
+    link: "/file-converter",
+  },
+  {
+    title: "password-generator",
+    link: "/password-generator",
+  },
+  {
+    title: "pomodoro-timer",
+    link: "/pomodoro-timer",
+  },
+  {
+    title: "qr-code-generator",
+    link: "/qr-code-generator",
+  },
+];