Add new tool cards to index.html

Added new tool cards for Diff, Roadmap Planner, and Mock Generator with descriptions.

Author: rmkr-dev

index.html

@@ -115,6 +115,33 @@ <h3 class="font-bold text-lg">Payload Knife</h3>
             <p class="text-xs text-[--color-muted]">Transform JSON to CSV, CURL to Fetch, and Prettify logs.</p>
         </a>
 
+        <a href="/diff" class="tool-card">
+            <div class="flex justify-between items-start">
+                <i class="fa-solid fa-code-compare text-2xl text-[--color-accent]"></i>
+                <i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
+            </div>
+            <h3 class="font-bold text-lg">Payload Diff</h3>
+            <p class="text-xs text-[--color-muted]">Side-by-side JSON/Text comparison and delta highlighting.</p>
+        </a>
+
+        <a href="/roadmap" class="tool-card">
+            <div class="flex justify-between items-start">
+                <i class="fa-solid fa-timeline text-2xl text-[--color-accent]"></i>
+                <i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
+            </div>
+            <h3 class="font-bold text-lg">Roadmap Planner</h3>
+            <p class="text-xs text-[--color-muted]">High-level executive timeline visualizer for initiatives.</p>
+        </a>
+
+        <a href="/mock" class="tool-card">
+            <div class="flex justify-between items-start">
+                <i class="fa-solid fa-vial-circle-check text-2xl text-[--color-accent]"></i>
+                <i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
+            </div>
+            <h3 class="font-bold text-lg">Mock Generator</h3>
+            <p class="text-xs text-[--color-muted]">Generate randomized JSON datasets from schemas.</p>
+        </a>
+
         <div class="tool-card opacity-50 border-dashed border-2">
             <i class="fa-solid fa-plus text-2xl mb-2"></i>
             <h3 class="font-bold">Next Tool</h3>