Add comprehensive SEO lander templates to all 17 tool pages

- Created modular ToolPageTemplate system with 6 sections: video, FAQ, about formats, changelog, blog, and tools link hub
- Added ToolCard component with random color border hover effects
- Centralized all tool content in config/tool-content.ts (2600+ lines of SEO content)
- Updated all tool pages to use new template system
- Reduced hero section spacing for better UX
- Added comprehensive content for: CSV Combiner, JSON to CSV, Character Counter, HEIC/PDF/WebP/JPEG/GIF/JPG/AVIF/JFIF converters

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: devinschumacher

.gitignore

@@ -39,3 +39,12 @@ next-env.d.ts
 .codersinflow
 .vscode
 .env
+
+# Coders in Flow
+.venv
+.codex
+out
+dist
+*.vsix
+.claude
+CLAUDE.md

app/page.tsx

@@ -3,9 +3,9 @@
 import { useState } from "react";
 import { Navbar } from "@/components/Navbar";
 import { Button } from "@/components/ui/button";
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
+import { ToolCard } from "@/components/ToolCard";
 import { 
   Search, 
   FileText, 
@@ -22,7 +22,6 @@ import {
   Image,
   FileImage
 } from "lucide-react";
-import Link from "next/link";
 
 // Define tool categories
 const categories = [
@@ -305,26 +304,9 @@ export default function HomePage() {
 
           {/* Tools Grid */}
           <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {filteredTools.map((tool) => {
-              const Icon = tool.icon;
-              return (
-                <Link key={tool.id} href={tool.href}>
-                  <Card className="group h-full transition-all hover:shadow-lg hover:-translate-y-1 cursor-pointer">
-                    <CardHeader>
-                      <div className="flex items-start gap-3 mb-2">
-                        <Icon className="h-6 w-6 text-primary mt-0.5" />
-                        <CardTitle className="text-lg group-hover:text-primary transition-colors">
-                          {tool.name}
-                        </CardTitle>
-                      </div>
-                      <CardDescription className="line-clamp-2">
-                        {tool.description}
-                      </CardDescription>
-                    </CardHeader>
-                  </Card>
-                </Link>
-              );
-            })}
+            {filteredTools.map((tool) => (
+              <ToolCard key={tool.id} tool={tool} />
+            ))}
           </div>
 
           {filteredTools.length === 0 && (

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

@@ -1,15 +1,24 @@
 "use client";
 
-import HeroConverter from "@/components/HeroConverter";
-import { Navbar } from "@/components/Navbar";
+import ToolPageTemplate from "@/components/ToolPageTemplate";
+import { toolContent } from "@/config/tool-content";
 
 export default function Page() {
+  const content = toolContent["avif-to-png"];
+  
+  if (!content) {
+    return <div>Tool not found</div>;
+  }
+  
   return (
-    <>
-      <Navbar />
-      <main className="min-h-screen bg-background">
-        <HeroConverter title="AVIF to PNG" subtitle="No upload. Just convert and download." from="avif" to="png" />
-      </main>
-    </>
+    <ToolPageTemplate
+      tool={content.tool}
+      videoSection={content.videoSection}
+      faqs={content.faqs}
+      aboutSection={content.aboutSection}
+      changelog={content.changelog}
+      relatedTools={content.relatedTools}
+      blogPosts={content.blogPosts}
+    />
   );
 }