6 tools now

Author: devinschumacher

app/page.tsx

@@ -18,7 +18,9 @@ import {
   Hash,
   Sparkles,
   ArrowRight,
-  Filter
+  Filter,
+  Image,
+  FileImage
 } from "lucide-react";
 import Link from "next/link";
 
@@ -67,6 +69,39 @@ const tools = [
     isNew: true,
     isPopular: true,
   },
+  {
+    id: "heic-to-jpg",
+    name: "HEIC to JPG",
+    description: "Convert HEIC photos to JPG privately, in your browser.",
+    category: "converter",
+    icon: Image,
+    href: "/tools/heic-to-jpg",
+    tags: ["heic", "jpg", "image", "convert"],
+    isNew: true,
+    isPopular: false,
+  },
+  {
+    id: "pdf-to-jpg",
+    name: "PDF to JPG",
+    description: "Convert each PDF page into a JPG in your browser.",
+    category: "converter",
+    icon: FileImage,
+    href: "/tools/pdf-to-jpg",
+    tags: ["pdf", "jpg", "image", "convert"],
+    isNew: true,
+    isPopular: false,
+  },
+  {
+    id: "webp-to-png",
+    name: "WebP to PNG",
+    description: "Convert WebP images to PNG in your browser.",
+    category: "converter",
+    icon: Image,
+    href: "/tools/webp-to-png",
+    tags: ["webp", "png", "image", "convert"],
+    isNew: true,
+    isPopular: false,
+  },
 ];
 
 // Update category counts

app/tools/heic-to-jpg/page.tsx

@@ -1,10 +1,15 @@
-import HeroConverter from "@/components/HeroConverter";
+"use client";
 
-export const metadata = {
-  title: "HEIC to JPG — SERP Tools",
-  description: "Convert HEIC photos to JPG privately, in your browser.",
-};
+import HeroConverter from "@/components/HeroConverter";
+import { Navbar } from "@/components/Navbar";
 
 export default function Page() {
-  return <HeroConverter title="HEIC to JPG" subtitle="No upload. Just convert and download." from="heic" to="jpg" />;
+  return (
+    <>
+      <Navbar />
+      <main className="min-h-screen bg-background">
+        <HeroConverter title="HEIC to JPG" subtitle="No upload. Just convert and download." from="heic" to="jpg" />
+      </main>
+    </>
+  );
 }

app/tools/pdf-to-jpg/page.tsx

@@ -1,19 +1,22 @@
-import HeroConverter from "@/components/HeroConverter";
+"use client";
 
-export const metadata = {
-  title: "PDF to JPG — SERP Tools",
-  description: "Convert each PDF page into a JPG in your browser.",
-};
+import HeroConverter from "@/components/HeroConverter";
+import { Navbar } from "@/components/Navbar";
 
 export default function Page() {
   // We currently render pages as PNG from pdf.js worker;
   // if you want real JPG output, change worker to encode JPG instead of PNG.
   return (
-    <HeroConverter
-      title="PDF to JPG"
-      subtitle="Convert each PDF page into a JPG. Runs 100% in your browser."
-      from="pdf"
-      to="png" // use "png" for now; switch to "jpg" after we add JPG encode in pdf.ts
-    />
+    <>
+      <Navbar />
+      <main className="min-h-screen bg-background">
+        <HeroConverter
+          title="PDF to JPG"
+          subtitle="Convert each PDF page into a JPG. Runs 100% in your browser."
+          from="pdf"
+          to="png" // use "png" for now; switch to "jpg" after we add JPG encode in pdf.ts
+        />
+      </main>
+    </>
   );
 }

app/tools/webp-to-png/page.tsx

@@ -1,10 +1,15 @@
-import HeroConverter from "@/components/HeroConverter";
+"use client";
 
-export const metadata = {
-  title: "WEBP to PNG — SERP Tools",
-  description: "Convert WEBP images to PNG in your browser.",
-};
+import HeroConverter from "@/components/HeroConverter";
+import { Navbar } from "@/components/Navbar";
 
 export default function Page() {
-  return <HeroConverter title="WEBP to PNG" from="webp" to="png" />;
+  return (
+    <>
+      <Navbar />
+      <main className="min-h-screen bg-background">
+        <HeroConverter title="WEBP to PNG" subtitle="Convert WEBP images to PNG in your browser." from="webp" to="png" />
+      </main>
+    </>
+  );
 }