From f7b0538ac7a0ee9d0cbd18a23cce04a6beb82acf Mon Sep 17 00:00:00 2001
From: theoleuthardt <theoleuthardt12@gmail.com>
Date: Sat, 8 Feb 2025 13:35:33 +0100
Subject: [PATCH] feat: start page tool overview with dynamic rendering

---
 src/app/page.tsx          | 15 ++++++++++++++-
 src/components/Navbar.tsx |  3 ++-
 src/constants/index.ts    | 30 ++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/constants/index.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1a07204..c7488eb 100644
--- a/src/app/page.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2104d86..f357f4d 100644
--- a/src/components/Navbar.tsx
+++ b/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
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000..086e6af
--- /dev/null
+++ b/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",
+  },
+];